morphogen/index.html at main · fushanbobfan/morphogen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Morphogen</title>
  <meta name="description" content="An interactive reaction-diffusion pattern lab: paint seeds, tune feed and kill rates, and watch spots, stripes, corals and worms grow." />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Morphogen</h1>
    <p class="subtitle">A reaction-diffusion pattern lab. Paint a few seeds, pick a regime, and watch chemistry draw.</p>
  </header>

  <main>
    <section class="stage" aria-label="Pattern canvas">
      <canvas id="dish" width="320" height="240" aria-label="Reaction-diffusion field">
        Your browser does not support the canvas element.
      </canvas>
      <div class="stage-bar">
        <div class="tool-group" role="radiogroup" aria-label="Pointer tool">
          <label><input type="radio" name="tool" value="seed" checked /> Paint B</label>
          <label><input type="radio" name="tool" value="erase" /> Erase</label>
        </div>
        <p id="status" class="status" aria-live="polite"></p>
      </div>
    </section>

    <section class="controls" aria-label="Simulation controls">
      <div class="control-row">
        <label for="preset">Regime</label>
        <select id="preset"></select>
        <p id="preset-description" class="hint"></p>
      </div>

      <div class="control-row">
        <label for="feed">Feed rate <em>f</em> <output id="feed-value" for="feed">0.0370</output></label>
        <input id="feed" type="range" min="0.005" max="0.11" step="0.0005" value="0.037" />
      </div>

      <div class="control-row">
        <label for="kill">Kill rate <em>k</em> <output id="kill-value" for="kill">0.0600</output></label>
        <input id="kill" type="range" min="0.04" max="0.075" step="0.0005" value="0.06" />
      </div>

      <div class="control-row">
        <span class="map-label">Feed/kill map</span>
        <canvas id="map" class="map" width="248" height="186" tabindex="0" role="img"
          aria-label="Map of the feed and kill rate plane. Click or use the arrow keys to move the marker; dots mark the named regimes."></canvas>
        <p id="map-hint" class="hint">Click anywhere to try that pair of rates. Dots are the named regimes.</p>
      </div>

      <div class="control-row">
        <label for="steps">Speed <output id="steps-value" for="steps">8</output></label>
        <input id="steps" type="range" min="1" max="30" step="1" value="8" />
      </div>

      <div class="control-row">
        <label for="brush">Brush size <output id="brush-value" for="brush">6</output></label>
        <input id="brush" type="range" min="1" max="24" step="1" value="6" />
      </div>

      <div class="control-row">
        <label for="palette">Palette</label>
        <select id="palette"></select>
      </div>

      <div class="control-row">
        <label for="channel">Show</label>
        <select id="channel"></select>
      </div>

      <div class="control-row checkbox-row">
        <input id="relief" type="checkbox" />
        <label for="relief">Relief shading</label>
      </div>

      <div class="control-row">
        <label for="light">Light direction <output id="light-value" for="light">315°</output></label>
        <input id="light" type="range" min="0" max="360" step="5" value="315" />
      </div>

      <div class="control-row">
        <label for="relief-height">Relief height <output id="relief-height-value" for="relief-height">12</output></label>
        <input id="relief-height" type="range" min="2" max="40" step="1" value="12" />
      </div>

      <div class="control-row button-row">
        <button id="pause" type="button" aria-pressed="false">Pause</button>
        <button id="step" type="button">Step</button>
      </div>
      <div class="control-row button-row">
        <button id="reseed" type="button">Reseed</button>
        <button id="clear" type="button">Clear</button>
      </div>
      <div class="control-row button-row">
        <button id="save" type="button">Save image</button>
      </div>

      <p class="hint">
        Shortcuts: <kbd>Space</kbd> pause, <kbd>.</kbd> step, <kbd>R</kbd> reseed, <kbd>C</kbd> clear,
        <kbd>P</kbd> next palette, <kbd>H</kbd> relief shading, <kbd>S</kbd> save image, <kbd>1</kbd>/<kbd>2</kbd> pick a tool, arrow keys on the map nudge the rates.
      </p>
    </section>
  </main>

  <footer>
    <p>
      Two chemicals share every cell: A is fed in everywhere, B converts A into more of itself and is slowly
      removed. Because A spreads faster than B, small blobs of B grow at their edges and starve in the middle,
      and the feed and kill rates decide whether that makes spots, stripes, mazes or cells that divide.
    </p>
  </footer>

  <script type="module" src="src/main.js"></script>
</body>
</html>