Skip to content

Commit 68d7d87

Browse files
xcontcomxcontcom
authored
Add initial HTML structure for Kernel Space Dynamics
1 parent 3b1176b commit 68d7d87

1 file changed

Lines changed: 118 additions & 0 deletions

File tree

‎cnn/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Kernel Space Dynamics</title>
6+
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="cnn2.js"></script>
9+
</head>
10+
11+
<body>
12+
13+
<div class="panel panel-cyan">
14+
<div class="panel-title">Global parameters</div>
15+
16+
<label>Iterations
17+
<input type="number" id="iterations" value="8" min="6" max="10" />
18+
</label>
19+
20+
<label>Pixel size
21+
<input type="number" id="pixelSize" value="2" min="1" max="6" />
22+
</label>
23+
24+
<label>Color mode
25+
<select id="colorMode">
26+
<option value="grayscale">Grayscale</option>
27+
<option value="hsl">HSL</option>
28+
<option value="binary">Black/White (mod 2)</option>
29+
<option value="mod4" selected>Black/White (mod 4: 01 / 23)</option>
30+
<option value="rgb">RGB</option>
31+
<option value="livingstone">Livingstone</option>
32+
<option value="alleycat">Alley Cat</option>
33+
</select>
34+
</label>
35+
36+
<label>Squeeze (each iteration)
37+
<select id="squeezeMode">
38+
<option value="none">none</option>
39+
<option value="mod2">mod 2</option>
40+
<option value="mod4">mod 4</option>
41+
<option value="mod8">mod 8</option>
42+
<option value="mod16">mod 16</option>
43+
</select>
44+
</label>
45+
</div>
46+
47+
<div class="panel panel-magenta">
48+
<div class="panel-title">Kernel mode</div>
49+
50+
<label>
51+
<input type="checkbox" id="integerCore" />
52+
Integer core
53+
</label>
54+
55+
<label>
56+
Core range
57+
<input type="number" id="coreRange" value="2" min="1" max="9" />
58+
</label>
59+
60+
<div class="pad-switch">
61+
<label>
62+
<input type="radio" name="padmode" value="1" checked>
63+
pad = 1
64+
</label>
65+
<label>
66+
<input type="radio" name="padmode" value="0">
67+
pad = 0
68+
</label>
69+
</div>
70+
71+
<button id="refreshBtn">Refresh seed</button>
72+
</div>
73+
74+
<canvas id="myCanvas"></canvas>
75+
76+
<div class="panel panel-cyan kernel-panel">
77+
<div class="panel-title">Symmetric 3×3 kernel</div>
78+
79+
<div class="kernel-grid">
80+
<div class="kcell">
81+
<input type="range" id="k0" />
82+
</div>
83+
<div class="kcell">
84+
<input type="range" id="k1" />
85+
</div>
86+
<div class="kcell">
87+
<input type="range" id="k2" />
88+
</div>
89+
<div class="kcell">
90+
<input type="range" id="k3" />
91+
</div>
92+
<div class="kcell center">
93+
<input type="range" id="k4" />
94+
</div>
95+
<div class="kcell">
96+
<input type="range" id="k5" />
97+
</div>
98+
<div class="kcell">
99+
<input type="range" id="k6" />
100+
</div>
101+
<div class="kcell">
102+
<input type="range" id="k7" />
103+
</div>
104+
<div class="kcell">
105+
<input type="range" id="k8" />
106+
</div>
107+
</div>
108+
</div>
109+
110+
<div id="kernelDump"></div>
111+
112+
<script>
113+
initUI();
114+
refreshSeed();
115+
</script>
116+
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)