Skip to content

Commit 4925a0e

Browse files
xcontcomxcontcom
authored
Add initial HTML structure for 1D Kernel app
1 parent e52120a commit 4925a0e

File tree

1 file changed

+97
-0
lines changed

1 file changed

+97
-0
lines changed

‎1d-with-sound/index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>1D Kernel → Notes</title>
6+
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
12+
<div class="panel panel-cyan">
13+
<div class="panel-title">Global</div>
14+
15+
<label>Iterations (visual + notes)
16+
<input type="number" id="iterations" value="10" min="1" max="12" />
17+
</label>
18+
19+
<label>Pixel size
20+
<input type="number" id="pixelSize" value="1" min="1" max="8" />
21+
</label>
22+
23+
<div class="pad-switch">
24+
<label><input type="radio" name="padmode" value="1" checked> pad = 1</label>
25+
<label><input type="radio" name="padmode" value="0"> pad = 0</label>
26+
</div>
27+
28+
<label>Squeeze mod (0 = none)
29+
<input type="range" id="squeezeMod" min="0" max="32" step="1" value="0" />
30+
<span id="squeezeLabel">0</span>
31+
</label>
32+
</div>
33+
34+
<div class="panel panel-magenta">
35+
<div class="panel-title">Integer kernel [a, b, c]</div>
36+
37+
<label>Core range
38+
<input type="number" id="coreRange" value="4" min="1" max="32" />
39+
</label>
40+
41+
<label>a
42+
<input type="range" id="ka"/>
43+
<span id="kaLabel"></span>
44+
</label>
45+
46+
<label>b
47+
<input type="range" id="kb" />
48+
<span id="kbLabel"></span>
49+
</label>
50+
51+
<label>c
52+
<input type="range" id="kc" />
53+
<span id="kcLabel"></span>
54+
</label>
55+
56+
<div class="row">
57+
<button id="randomBtn">Random kernel</button>
58+
</div>
59+
</div>
60+
61+
<div class="panel panel-cyan">
62+
<div class="panel-title">Sound</div>
63+
64+
<label>Note alphabet (mod)
65+
<select id="noteMod">
66+
<option value="7">mod 7 (1 octave)</option>
67+
<option value="14" selected>mod 14 (2 octaves)</option>
68+
<option value="21">mod 21 (3 octaves)</option>
69+
<option value="28">mod 28 (4 octaves)</option>
70+
</select>
71+
</label>
72+
73+
<label>Step (skip samples)
74+
<input type="number" id="noteStep" value="1" min="1" max="128" />
75+
</label>
76+
77+
<label>Note duration (ms)
78+
<input type="number" id="noteMs" value="35" min="5" max="200" />
79+
</label>
80+
81+
<label>Volume
82+
<input type="number" id="volume" value="0.5" min="0.01" max="3" step="0.01" />
83+
</label>
84+
85+
<div class="row">
86+
<button id="playBtn">Play</button>
87+
<button id="stopBtn">Stop</button>
88+
</div>
89+
</div>
90+
91+
<canvas id="canvas"></canvas>
92+
93+
<div id="kernelDump"></div>
94+
95+
<script src="app.js"></script>
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)