https://atelier-perisset.ch/turing-effect/panel.js

1'use strict';
2
3(function () {
4  const canvasParent = document.getElementById('glCanvas')?.parentElement;
5  if (canvasParent && getComputedStyle(canvasParent).position === 'static') {
6    canvasParent.style.position = 'relative';
7  }
8  document.body.insertAdjacentHTML('beforeend', `
9    <div id="panel">
10
11      <div class="ctrl-colors">
12        <span class="ctrl-label">Vordergrund</span>
13        <input type="color" class="ctrl-color-pick" id="fgColorValue" value="#4705e1">
14        <span class="ctrl-label">Hintergrund</span>
15        <input type="color" class="ctrl-color-pick" id="bgColorValue" value="#022663">
16      </div>
17
18      <div class="sep"></div>
19
20      <div class="ctrl">
21        <div class="ctrl-head">
22          <span class="ctrl-label">Killrate</span>
23          <span class="ctrl-val" id="value1">0.087</span>
24        </div>
25        <input type="range" min="0" max="100" value="87" step="1" class="ctrl-slider" id="killValue">
26      </div>
27
28      <div class="ctrl">
29        <div class="ctrl-head">
30          <span class="ctrl-label">Feed</span>
31          <span class="ctrl-val" id="value2">0.0056</span>
32        </div>
33        <input type="range" min="0" max="100" value="56" step="1" class="ctrl-slider" id="feedValue">
34      </div>
35
36      <div class="ctrl">
37        <div class="ctrl-head">
38          <span class="ctrl-label">Zone</span>
39          <span class="ctrl-val" id="value3">72</span>
40        </div>
41        <input type="range" min="0" max="100" value="72" step="1" class="ctrl-slider" id="diameterValue">
42      </div>
43
44      <div class="ctrl">
45        <div class="ctrl-head">
46          <span class="ctrl-label">Diffusion A</span>
47          <span class="ctrl-val" id="value8">1.2290</span>
48        </div>
49        <input type="range" min="1.22" max="1.24" step="0.001" value="1.229" class="ctrl-slider" id="diffAValue">
50      </div>
51
52      <div class="ctrl">
53        <div class="ctrl-head">
54          <span class="ctrl-label">Diffusion B</span>
55          <span class="ctrl-val" id="value9">0.4400</span>
56        </div>
57        <input type="range" min="0.3" max="0.6" step="0.001" value="0.440" class="ctrl-slider" id="diffBValue">
58      </div>
59
60      <div class="sep"></div>
61
62      <div class="ctrl">
63        <div class="ctrl-head">
64          <span class="ctrl-label">Mouse Radius</span>
65          <span class="ctrl-val" id="valueBrush">35</span>
66        </div>
67        <input type="range" min="1" max="200" value="35" step="1" class="ctrl-slider" id="brushValue">
68      </div>
69
70      <div class="ctrl">
71        <div class="ctrl-head">
72          <span class="ctrl-label">Steps / Frame</span>
73          <span class="ctrl-val" id="valueSteps">10</span>
74        </div>
75        <input type="range" min="1" max="20" value="10" step="1" class="ctrl-slider" id="stepsValue">
76      </div>
77
78      <div class="sep"></div>
79
80      <button class="ctrl-btn" id="saveBtn">Save PNG</button>
81
82    </div>
83
84    <div id="controls-bar">
85      <button id="panel-toggle" aria-label="Settings">+</button>
86
87      <div id="preset-wrap">
88        <select id="presetSelect">
89          <option value="stripes">Stripes</option>
90          <option value="coral">Coral</option>
91          <option value="labyrinth">Labyrinth</option>
92          <option value="mitose">Mitose</option>
93          <option value="default">Default</option>
94        </select>
95      </div>
96
97      <button id="gyro-btn">Start to Play</button>
98    </div>
99
100    <div id="gyro-cursor"></div>
101  `);
102})();