-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
116 lines (106 loc) · 5.92 KB
/
Copy pathindex.html
File metadata and controls
116 lines (106 loc) · 5.92 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#05060b">
<meta name="description" content="aether — a generative curl-noise flow field you shape, perform, and share in real time.">
<title>aether · vector field instrument</title>
<link rel="canonical" href="https://aether-field.pages.dev/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aether-field.pages.dev/">
<meta property="og:title" content="aether — a generative vector field instrument">
<meta property="og:description" content="Shape a curl-noise flow field with your cursor, mirror it into a kaleidoscope, tune it live, then copy a link that reproduces the exact field.">
<meta property="og:image" content="https://aether-field.pages.dev/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Luminous curl-noise flow field: thousands of glowing particle trails on black.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="aether — a generative vector field instrument">
<meta name="twitter:description" content="Shape a curl-noise flow field, mirror it into a kaleidoscope, and share the exact field with a link.">
<meta name="twitter:image" content="https://aether-field.pages.dev/og.png">
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="assets/apple-touch-icon.png">
<link rel="preload" href="fonts/instrumentserif-italic-1.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="fonts/fonts.css">
<link rel="stylesheet" href="css/aether.css">
</head>
<body>
<canvas id="field"></canvas>
<div class="vignette"></div>
<div class="grain"></div>
<span class="corner corner--tl"></span>
<span class="corner corner--tr"></span>
<span class="corner corner--bl"></span>
<span class="corner corner--br"></span>
<header class="mark ui">
<div class="mark__no">N°01 / vector field instrument</div>
<h1 class="mark__title">aether</h1>
<div class="mark__sub">a generative flow field you shape, perform, and share in real time</div>
</header>
<div class="telemetry ui">
<div class="tel__line"><span>particles</span><b id="t-count">1100</b></div>
<div class="tel__line"><span>frame rate</span><b id="t-fps">60</b></div>
<div class="tel__line"><span>field mode</span><b id="t-mode">attract</b></div>
<div class="tel__line"><span>symmetry</span><b id="t-sym">off</b></div>
<div class="tel__pulse"><i></i>live</div>
</div>
<button id="console-toggle" class="console-toggle ui" aria-expanded="true" aria-controls="console">controls</button>
<section id="console" class="console ui">
<div class="console__row console__row--top">
<div class="grp grp--palettes">
<span class="lbl">palette</span>
<div id="swatches" class="swatches"></div>
</div>
<div class="grp grp--sym">
<span class="lbl">symmetry</span>
<div id="symmetry" class="seg" role="group" aria-label="symmetry"></div>
</div>
</div>
<div class="console__row console__row--presets">
<span class="lbl">presets</span>
<div id="presets" class="presets"></div>
</div>
<div class="console__grid">
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">particles</span><span class="val" id="v-count">1100</span></div>
<input id="s-count" type="range" min="150" max="2400" step="10" value="1100" aria-label="particles">
</div>
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">flow scale</span><span class="val" id="v-flow">12</span></div>
<input id="s-flow" type="range" min="6" max="40" step="1" value="12" aria-label="flow scale">
</div>
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">velocity</span><span class="val" id="v-vel">1.0</span></div>
<input id="s-vel" type="range" min="2" max="30" step="1" value="10" aria-label="velocity">
</div>
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">persistence</span><span class="val" id="v-per">22</span></div>
<input id="s-per" type="range" min="1" max="30" step="1" value="22" aria-label="persistence">
</div>
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">cursor force</span><span class="val" id="v-force">7</span></div>
<input id="s-force" type="range" min="0" max="16" step="1" value="7" aria-label="cursor force">
</div>
<div class="ctrl">
<div class="ctrl__top"><span class="lbl">turbulence</span><span class="val" id="v-turb">35</span></div>
<input id="s-turb" type="range" min="0" max="100" step="1" value="35" aria-label="turbulence">
</div>
</div>
<div class="console__row console__row--actions">
<button id="b-mode" class="btn btn--mode">attract</button>
<button id="b-pause" class="btn" aria-pressed="false">pause</button>
<button id="b-clear" class="btn">clear</button>
<button id="b-random" class="btn">randomize</button>
<button id="b-share" class="btn">share</button>
<button id="b-fs" class="btn">fullscreen</button>
<button id="b-audio" class="btn btn--toggle" data-on="0" aria-pressed="false">audio</button>
<button id="b-tilt" class="btn btn--toggle" data-on="0" aria-pressed="false">tilt</button>
<button id="b-export" class="btn btn--accent">export png</button>
</div>
</section>
<div class="hint ui">drag to disturb <span class="hint__sep">·</span> tap to cycle attract / repel / vortex <span class="hint__sep">·</span> keys [space] pause [r] randomize [s] share [e] export [f] fullscreen [h] hide ui</div>
<div id="toast" class="toast" role="status" aria-live="polite">image saved</div>
<script type="module" src="js/main.js"></script>
</body>
</html>