Skip to content

Commit ec0e764

Browse files
xcontcomxcontcom
authored
Add initial HTML structure for 3D torus viewer
1 parent 100ac21 commit ec0e764

File tree

1 file changed

+171
-0
lines changed

1 file changed

+171
-0
lines changed

‎3d/torus-iso/index.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Fractogenesis — 3D Kernel Space Dynamics (3-face viewer) (torus, isometric)</title>
6+
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="cnn3d.js"></script>
9+
</head>
10+
11+
<body>
12+
13+
14+
<div class="top-layout">
15+
16+
<div class="left-controls">
17+
<div class="panel panel-cyan">
18+
<div class="panel-title">Global parameters</div>
19+
20+
<label>Iterations (3D)
21+
<input type="number" id="iterations" value="6" min="1" max="9" />
22+
</label>
23+
24+
<label>Pixel size
25+
<input type="number" id="pixelSize" value="3" min="1" max="8" />
26+
</label>
27+
28+
<label>Color mode
29+
<select id="colorMode">
30+
<option value="grayscale">Grayscale</option>
31+
<option value="mod4" selected="selected">Black/White (mod 4)</option>
32+
<option value="alleycat">Alley Cat</option>
33+
</select>
34+
</label>
35+
</div>
36+
37+
<div class="panel panel-magenta">
38+
<div class="panel-title">Kernel mode</div>
39+
<div class="pad-switch">
40+
<label>
41+
<input type="radio" name="padmode" value="1" checked="checked" />
42+
pad = 1
43+
</label>
44+
<label>
45+
<input type="radio" name="padmode" value="0" />
46+
pad = 0
47+
</label>
48+
</div>
49+
50+
<button id="refreshBtn">Refresh seed</button>
51+
</div>
52+
</div>
53+
54+
<div class="right-controls">
55+
<div class="panel panel-cyan kernel-panel">
56+
<div class="panel-title">Symmetric 3×3×3 kernel (4 sliders)</div>
57+
58+
<div class="kslider">
59+
<div class="kslider-title">Corners (8)</div>
60+
<input type="range" id="kCorners" />
61+
</div>
62+
63+
<div class="kslider">
64+
<div class="kslider-title">Edges (12)</div>
65+
<input type="range" id="kEdges" />
66+
</div>
67+
68+
<div class="kslider">
69+
<div class="kslider-title">Faces (6)</div>
70+
<input type="range" id="kFaces" />
71+
</div>
72+
73+
<div class="kslider">
74+
<div class="kslider-title">Center (1)</div>
75+
<input type="range" id="kCenter" />
76+
</div>
77+
78+
<div class="hint">
79+
Kernel groups: corners=8, edges=12, faces=6, center=1 → total 27 weights.
80+
</div>
81+
</div>
82+
</div>
83+
84+
</div>
85+
86+
<div class="panel panel-cyan kernel-panel">
87+
<div class="panel-title">Isometric cube preview</div>
88+
<canvas id="isoCanvas" width="480" height="480"></canvas>
89+
</div>
90+
91+
<div class="panel panel-cyan kernel-panel torus-panel">
92+
<div class="panel-title">Toroidal translation (move the observation cube)</div>
93+
94+
<label class="sync-toggle">
95+
<input type="checkbox" id="syncXYZ" />
96+
sync XYZ
97+
</label>
98+
99+
<div class="kslider">
100+
<div class="kslider-header">
101+
<div class="kslider-title">Shift X</div>
102+
<div class="kslider-hint">
103+
X = <span id="xLabel">0</span> / <span id="xMaxLabel">0</span>
104+
</div>
105+
</div>
106+
107+
<input type="range" id="shiftX" min="0" max="0" step="1" value="0" />
108+
</div>
109+
<div class="kslider">
110+
<div class="kslider-header">
111+
<div class="kslider-title">Shift Y</div>
112+
<div class="kslider-hint">
113+
Y = <span id="yLabel">0</span> / <span id="yMaxLabel">0</span>
114+
</div>
115+
</div>
116+
117+
<input type="range" id="shiftY" min="0" max="0" step="1" value="0" />
118+
</div>
119+
120+
<div class="kslider zslice">
121+
<div class="kslider-header">
122+
<div class="kslider-title">Shift Z</div>
123+
<div class="kslider-hint">
124+
Z = <span id="zLabel">0</span> / <span id="zMaxLabel">0</span>
125+
</div>
126+
</div>
127+
128+
<input type="range" id="shiftZ" min="0" max="0" step="1" value="0" />
129+
</div>
130+
131+
<div class="hint">
132+
These three sliders translate the “cube” inside the 3D torus. The views below show 3 faces of the same translated cube.
133+
</div>
134+
</div>
135+
136+
<div class="panel panel-cyan kernel-panel">
137+
<div class="panel-title">3 faces of the translated cube</div>
138+
139+
<div class="faces">
140+
141+
<div>
142+
<div class="face-title">Top (XY @ Z)</div>
143+
<canvas id="canvasTop"></canvas>
144+
</div>
145+
146+
<div>
147+
<div class="face-title">Front (XZ @ Y)</div>
148+
<canvas id="canvasFront"></canvas>
149+
</div>
150+
151+
<div>
152+
<div class="face-title">Right (YZ @ X)</div>
153+
<canvas id="canvasRight"></canvas>
154+
</div>
155+
156+
</div>
157+
</div>
158+
159+
<div id="kernelDump"></div>
160+
161+
<script>
162+
initUI();
163+
refreshSeed();
164+
</script>
165+
166+
<div>
167+
<a href="https://github.com/AlgorithmicDynamics/kernel-interference-explorer">https://github.com/AlgorithmicDynamics/kernel-interference-explorer</a>
168+
</div>
169+
170+
</body>
171+
</html>

0 commit comments

Comments
 (0)