Blids/index.html at main · Benjaminsen/Blids · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Blids — millions of boids in the browser. A WebGPU flocking simulation, made with AI.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='80' font-size='80'>🐦</text></svg>">
<title>Blids — WebGPU Boids</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0e17; }
  canvas { display: block; width: 100vw; height: 100vh; }
  #hud {
    position: fixed; top: 12px; left: 12px;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #c8d2e8; background: rgba(10, 14, 23, 0.72);
    border: 1px solid rgba(120, 140, 190, 0.25); border-radius: 8px;
    padding: 10px 14px; user-select: none; backdrop-filter: blur(6px);
    min-width: 220px;
  }
  #hud .stat { font-size: 15px; font-weight: 600; color: #fff; }
  #hud .stat span { color: #7fd4a8; }
  #hud label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
  #hud label em { font-style: normal; color: #8a97b5; }
  #hud input[type=range] { width: 110px; accent-color: #5b8def; }
  #hud select {
    background: #131a2a; color: #dfe6f5; border: 1px solid rgba(120,140,190,.35);
    border-radius: 4px; font: inherit; padding: 2px 4px;
  }
  #hud .hint { margin-top: 8px; color: #5d688a; font-size: 11px; }
  #hud button {
    margin-top: 8px; width: 100%; padding: 4px 0; cursor: pointer;
    background: #1a2338; color: #dfe6f5; font: inherit;
    border: 1px solid rgba(120,140,190,.35); border-radius: 4px;
  }
  #hud button:hover { background: #243052; }
  #fatal {
    position: fixed; inset: 0; display: none; place-items: center;
    color: #ffb4b4; font: 16px ui-monospace, monospace; text-align: center; padding: 40px;
  }
  #credits {
    position: fixed; right: 12px; bottom: 10px;
    font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #5d688a; user-select: none;
  }
  #credits a { color: #8a97b5; text-decoration: none; }
  #credits a:hover { color: #dfe6f5; text-decoration: underline; }
</style>
</head>
<body>
<canvas id="gpu"></canvas>
<div id="hud">
  <div class="stat"><span id="fps">–</span> fps · <span id="gputime">–</span> sim</div>
  <div id="build" style="color:#5d688a;font-size:11px">build: –</div>
  <label><em>boids</em>
    <select id="count">
      <option value="65536">65 k</option>
      <option value="250000" selected>250 k</option>
      <option value="1000000">1 M</option>
      <option value="2000000">2 M</option>
      <option value="4000000">4 M</option>
    </select>
  </label>
  <label><em>radius</em><input id="radius" type="range" min="10" max="150" step="1" value="20"></label>
  <label><em>separation</em><input id="wSep" type="range" min="0" max="120" step="1" value="45"></label>
  <label><em>alignment</em><input id="wAlign" type="range" min="0" max="8" step="0.1" value="3"></label>
  <label><em>cohesion</em><input id="wCoh" type="range" min="0" max="8" step="0.1" value="3"></label>
  <label><em>speed</em><input id="speed" type="range" min="30" max="300" step="5" value="130"></label>
  <label><em>size</em><input id="size" type="range" min="0.25" max="6" step="0.05" value="1.25"></label>
  <label><em>noise</em><input id="noise" type="range" min="0" max="80" step="1" value="8"></label>
  <label><em>constrain to circle</em><input id="circle" type="checkbox"></label>
  <label><em>2x (half-rate sim)</em><input id="smooth" type="checkbox" checked></label>
  <button id="restart">restart</button>
  <div class="hint">hold pointer to scatter</div>
</div>
<div id="fatal"></div>
<div id="credits">
  <a href="https://github.com/Benjaminsen/Blids" target="_blank" rel="noopener">GitHub</a> ·
  <a href="https://chrisbenjaminsen.com" target="_blank" rel="noopener">chrisbenjaminsen.com</a> ·
  <span title="Written 100% by AI (Claude, Anthropic), guided by Chris Benjaminsen.">Made with AI</span>
</div>
<script type="module" src="main.js?v=27"></script>
</body>
</html>