Monorepo for Aesthetic.Computer
aesthetic.computer
tree: boot-anim rainbows + are-na vol.8 vibes draft
Two uncommitted items sitting in the working tree:
- system/netlify/functions/index.mjs: boot-animation "spring" mode
swapped from procedural turtle-graphics birds to a seven-band
ROYGBIV rainbow set. Sibling rename (SPRING_BIRDS → SPRING_RAINBOWS)
+ new hue palette + redraw helper.
- gigs/are-na-annual-vol-8/vibes.html: static HTML draft for the
Are.na Annual Vol. 8 pitch ("The Score That Teaches Itself").
Committing as-is so git status is clean going into the next round.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+710
-43
+654
gigs/are-na-annual-vol-8/vibes.html
+654
gigs/are-na-annual-vol-8/vibes.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="viewport" content="width=device-width,initial-scale=1">
6
+
<title>The Score That Teaches Itself — Are.na Annual Vol. 8 pitch</title>
7
+
<style>
8
+
:root {
9
+
--ink: #111;
10
+
--paper: #f4f1ea;
11
+
--rule: #1117;
12
+
--accent: #b33a3a;
13
+
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
14
+
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
15
+
}
16
+
* { box-sizing: border-box; }
17
+
html, body { margin: 0; background: var(--paper); color: var(--ink); }
18
+
body {
19
+
font-family: var(--serif);
20
+
font-size: 17px;
21
+
line-height: 1.55;
22
+
padding: 48px 24px 120px;
23
+
}
24
+
.wrap { max-width: 760px; margin: 0 auto; }
25
+
.eyebrow {
26
+
font-family: var(--mono);
27
+
font-size: 11px;
28
+
letter-spacing: 0.18em;
29
+
text-transform: uppercase;
30
+
color: var(--ink);
31
+
opacity: 0.65;
32
+
margin-bottom: 20px;
33
+
}
34
+
h1 {
35
+
font-family: var(--serif);
36
+
font-weight: 500;
37
+
font-style: italic;
38
+
font-size: 44px;
39
+
line-height: 1.1;
40
+
letter-spacing: -0.01em;
41
+
margin: 0 0 8px;
42
+
}
43
+
h1 small {
44
+
display: block;
45
+
font-family: var(--mono);
46
+
font-style: normal;
47
+
font-size: 12px;
48
+
letter-spacing: 0.14em;
49
+
text-transform: uppercase;
50
+
color: var(--accent);
51
+
margin-top: 18px;
52
+
}
53
+
.meta {
54
+
font-family: var(--mono);
55
+
font-size: 12px;
56
+
line-height: 1.8;
57
+
margin: 24px 0 48px;
58
+
padding: 14px 16px;
59
+
border-top: 1px solid var(--ink);
60
+
border-bottom: 1px solid var(--ink);
61
+
}
62
+
.meta dt { float: left; width: 110px; opacity: 0.6; }
63
+
.meta dd { margin: 0 0 4px 110px; }
64
+
.meta a { color: var(--ink); }
65
+
.pitch {
66
+
font-size: 19px;
67
+
line-height: 1.55;
68
+
margin: 40px 0;
69
+
border-left: 2px solid var(--ink);
70
+
padding: 4px 0 4px 20px;
71
+
}
72
+
.pitch p { margin: 0 0 14px; }
73
+
.pitch strong { font-weight: 600; }
74
+
h2 {
75
+
font-family: var(--mono);
76
+
font-size: 12px;
77
+
letter-spacing: 0.18em;
78
+
text-transform: uppercase;
79
+
margin: 56px 0 18px;
80
+
padding-bottom: 8px;
81
+
border-bottom: 1px solid var(--rule);
82
+
}
83
+
h2 .count {
84
+
float: right;
85
+
opacity: 0.55;
86
+
font-weight: normal;
87
+
}
88
+
.thesis {
89
+
font-style: italic;
90
+
font-size: 26px;
91
+
line-height: 1.25;
92
+
text-align: center;
93
+
margin: 56px 24px;
94
+
color: var(--accent);
95
+
}
96
+
.triad {
97
+
display: grid;
98
+
grid-template-columns: repeat(3, 1fr);
99
+
gap: 10px;
100
+
margin: 24px 0;
101
+
}
102
+
.triad div {
103
+
padding: 18px 16px;
104
+
border: 1px solid var(--ink);
105
+
background: #fff;
106
+
}
107
+
.triad h3 {
108
+
font-family: var(--mono);
109
+
font-size: 11px;
110
+
letter-spacing: 0.16em;
111
+
text-transform: uppercase;
112
+
margin: 0 0 8px;
113
+
color: var(--accent);
114
+
}
115
+
.triad p { margin: 0; font-size: 14px; line-height: 1.45; }
116
+
117
+
.section {
118
+
margin: 44px 0;
119
+
padding: 22px 24px;
120
+
background: #fff;
121
+
border: 1px solid var(--ink);
122
+
}
123
+
.section header {
124
+
display: flex;
125
+
align-items: baseline;
126
+
gap: 14px;
127
+
margin-bottom: 6px;
128
+
}
129
+
.section .num {
130
+
font-family: var(--mono);
131
+
font-size: 13px;
132
+
color: var(--accent);
133
+
letter-spacing: 0.1em;
134
+
}
135
+
.section .name {
136
+
font-family: var(--serif);
137
+
font-style: italic;
138
+
font-size: 22px;
139
+
}
140
+
.section .whyline {
141
+
font-size: 14px;
142
+
opacity: 0.75;
143
+
margin: 0 0 18px;
144
+
padding-bottom: 14px;
145
+
border-bottom: 1px dotted var(--rule);
146
+
}
147
+
.blocks { list-style: none; padding: 0; margin: 0; }
148
+
.blocks li {
149
+
padding: 10px 0;
150
+
border-bottom: 1px dotted var(--rule);
151
+
}
152
+
.blocks li:last-child { border-bottom: none; }
153
+
.blocks .title {
154
+
font-weight: 600;
155
+
font-size: 15px;
156
+
}
157
+
.blocks .title a { color: var(--ink); text-decoration: underline; text-decoration-color: #1113; text-underline-offset: 2px; }
158
+
.blocks .title a:hover { text-decoration-color: var(--accent); }
159
+
.blocks .why {
160
+
display: block;
161
+
font-size: 14px;
162
+
opacity: 0.78;
163
+
margin-top: 3px;
164
+
font-family: var(--serif);
165
+
font-style: italic;
166
+
}
167
+
.blocks li.text {
168
+
background: #f8f4e7;
169
+
padding: 10px 14px;
170
+
border: 1px solid #d9d3c2;
171
+
border-bottom: 1px solid #d9d3c2;
172
+
margin: 8px 0;
173
+
font-style: italic;
174
+
font-size: 15px;
175
+
}
176
+
177
+
.checklist { list-style: none; padding: 0; font-family: var(--mono); font-size: 13px; }
178
+
.checklist li { padding: 6px 0; }
179
+
.checklist li::before { margin-right: 10px; }
180
+
.checklist .done::before { content: "✓"; color: #2b7a2b; }
181
+
.checklist .todo::before { content: "☐"; color: var(--accent); }
182
+
183
+
.toc {
184
+
font-family: var(--mono);
185
+
font-size: 12px;
186
+
line-height: 1.9;
187
+
padding: 16px 18px;
188
+
background: #fff;
189
+
border: 1px dashed var(--ink);
190
+
margin: 24px 0 40px;
191
+
}
192
+
.toc a { color: var(--ink); display: block; }
193
+
.toc a:hover { color: var(--accent); }
194
+
.toc .n { display: inline-block; width: 36px; color: var(--accent); }
195
+
.toc .c { float: right; opacity: 0.55; }
196
+
197
+
footer {
198
+
margin-top: 80px;
199
+
padding-top: 20px;
200
+
border-top: 1px solid var(--ink);
201
+
font-family: var(--mono);
202
+
font-size: 11px;
203
+
letter-spacing: 0.08em;
204
+
opacity: 0.7;
205
+
}
206
+
a { color: var(--ink); }
207
+
@media (max-width: 540px) {
208
+
body { padding: 24px 16px 80px; font-size: 16px; }
209
+
h1 { font-size: 34px; }
210
+
.triad { grid-template-columns: 1fr; }
211
+
.meta dt { float: none; width: auto; opacity: 0.6; }
212
+
.meta dd { margin: 0 0 10px; }
213
+
.section { padding: 18px; }
214
+
}
215
+
</style>
216
+
</head>
217
+
<body>
218
+
<main class="wrap">
219
+
220
+
<div class="eyebrow">Are.na Annual Vol. 8 — theme: Score</div>
221
+
<h1>The Score<br>That Teaches Itself
222
+
<small>Pitch · Jeffrey Alan Scudder · aesthetic.computer</small>
223
+
</h1>
224
+
225
+
<dl class="meta">
226
+
<dt>Channel</dt><dd><a href="https://www.are.na/aesthetic-computer/the-score-that-teaches-itself">are.na/aesthetic-computer/the-score-that-teaches-itself</a> — 68 blocks</dd>
227
+
<dt>Call</dt><dd><a href="https://www.are.na/editorial/open-call-for-pitches-for-the-are-na-annual-vol-8">Open Call — Annual Vol. 8</a></dd>
228
+
<dt>Deadline</dt><dd>Mon · April 20, 2026 · 11:59pm EST</dd>
229
+
<dt>Honorarium</dt><dd>$200 (book releases December 2026)</dd>
230
+
</dl>
231
+
232
+
<h2>Pitch (≈170 words)</h2>
233
+
<div class="pitch">
234
+
<p><strong>Channel:</strong> <em>The Score That Teaches Itself</em> — whistlegraphs alongside Cardew's <em>Treatise</em>, Cage's <em>Fontana Mix</em>, shape-note hymnals, Fluxus event scores, skateboard lines.</p>
235
+
<p>I want to write about whistlegraph, a drawing form I invented in 2019 where every mark is a sung syllable. Between 2019 and 2023 it reached 2.6 million TikTok followers with no paid promotion and no trend-jacking. The distribution model was the form itself: a score legible enough that watching, learning, and performing collapse into a single gesture.</p>
236
+
<p>The essay moves through three registers. As <strong>art</strong>, whistlegraph sits downstream of Cardew and Cage but refuses interpretation in favor of one-to-one legibility. As <strong>content</strong>, it proves a drawing can carry the viral mechanics of a dance challenge. As <strong>interface design</strong>, it became the founding principle of aesthetic.computer — every piece a self-documenting score, every URL a memorizable performance.</p>
237
+
<p>What I want to work out: why <em>reproducibility</em>, not novelty, is the real score of a form — and what it would mean to design more things this way, objects whose instructions and performance are the same object.</p>
238
+
</div>
239
+
240
+
<div class="thesis">The score teaches you how to play it.</div>
241
+
242
+
<h2>Three registers</h2>
243
+
<div class="triad">
244
+
<div>
245
+
<h3>Art</h3>
246
+
<p>Downstream of Cardew and Cage, but refuses interpretation in favor of one-to-one legibility.</p>
247
+
</div>
248
+
<div>
249
+
<h3>Content</h3>
250
+
<p>A drawing can carry the viral mechanics of a dance challenge — 2.6M followers, no paid push.</p>
251
+
</div>
252
+
<div>
253
+
<h3>Interface</h3>
254
+
<p>Every aesthetic.computer piece is a self-documenting score; every URL a memorizable performance.</p>
255
+
</div>
256
+
</div>
257
+
258
+
<h2>Channel map <span class="count">68 blocks · bottom → top</span></h2>
259
+
<nav class="toc">
260
+
<a href="#s10"><span class="n">§10</span> Whistlegraph <em>(top)</em> <span class="c">5</span></a>
261
+
<a href="#s9"><span class="n">§9</span> Framing text <span class="c">3</span></a>
262
+
<a href="#s8"><span class="n">§8</span> Computational / card-sized kin <span class="c">7</span></a>
263
+
<a href="#s7"><span class="n">§7</span> 20th-century graphic scores (canon) <span class="c">15</span></a>
264
+
<a href="#s6"><span class="n">§6</span> Fluxus & event scores <span class="c">6</span></a>
265
+
<a href="#s5"><span class="n">§5</span> Vernacular / folk notation <span class="c">8</span></a>
266
+
<a href="#s4"><span class="n">§4</span> Sport as score / line <span class="c">5</span></a>
267
+
<a href="#s3"><span class="n">§3</span> Body / movement notation <span class="c">5</span></a>
268
+
<a href="#s2"><span class="n">§2</span> Instructional / craft <span class="c">8</span></a>
269
+
<a href="#s1"><span class="n">§1</span> Viral / social kin <em>(bottom)</em> <span class="c">5</span></a>
270
+
</nav>
271
+
272
+
<!-- §10 -->
273
+
<section class="section" id="s10">
274
+
<header>
275
+
<div class="num">§10 · top of channel</div>
276
+
<div class="name">Whistlegraph</div>
277
+
</header>
278
+
<p class="whyline">The subject. The whole channel lands here: a drawing form where every mark is a sung syllable — and the evidence that it reached scale.</p>
279
+
<ol class="blocks">
280
+
<li>
281
+
<div class="title"><a href="https://www.tiktok.com/@whistlegraph">aesthetic.computer (@whistlegraph) on TikTok</a></div>
282
+
<span class="why">2.6 million followers. The distribution channel of a form that teaches itself.</span>
283
+
</li>
284
+
<li>
285
+
<div class="title"><a href="https://aesthetic.computer/whistlegraph">Whistlegraph · Aesthetic Computer</a></div>
286
+
<span class="why">The practice site: draw while singing, the result IS the score. Record, learn, perform.</span>
287
+
</li>
288
+
<li>
289
+
<div class="title"><a href="https://feralfile.com/artists/whistlegraph">Explore Whistlegraph's art and journey on Feral File</a></div>
290
+
<span class="why">Forty-five whistlegraph editions on Feral File, 2023.</span>
291
+
</li>
292
+
<li>
293
+
<div class="title"><a href="https://rhizome.org/">Rhizome</a></div>
294
+
<span class="why">Rhizome / New Museum 2022 commission: a 22-minute chalk performance in a public gallery.</span>
295
+
</li>
296
+
<li class="text">“Every mark is a sung syllable. Watching, learning, and performing collapse into a single gesture.”</li>
297
+
</ol>
298
+
</section>
299
+
300
+
<!-- §9 -->
301
+
<section class="section" id="s9">
302
+
<header>
303
+
<div class="num">§9</div>
304
+
<div class="name">Framing text</div>
305
+
</header>
306
+
<p class="whyline">Three one-line text blocks that restate the thesis plainly for anyone who arrives cold.</p>
307
+
<ol class="blocks">
308
+
<li class="text">“A drawing that constructs the performance it depicts.”</li>
309
+
<li class="text">“The score teaches you how to play it.”</li>
310
+
<li class="text">“Reproducibility, not algorithmic promotion, explains its viral spread.”</li>
311
+
</ol>
312
+
</section>
313
+
314
+
<!-- §8 -->
315
+
<section class="section" id="s8">
316
+
<header>
317
+
<div class="num">§8</div>
318
+
<div class="name">Computational / card-sized kin</div>
319
+
</header>
320
+
<p class="whyline">Software environments where the program is small enough to double as its own score — aesthetic.computer's peers.</p>
321
+
<ol class="blocks">
322
+
<li>
323
+
<div class="title"><a href="https://aesthetic.computer/prompt">Prompt · Aesthetic Computer</a></div>
324
+
<span class="why">The prompt is the instrument. Type a piece name, play it. A one-line score for the entire AC system.</span>
325
+
</li>
326
+
<li>
327
+
<div class="title"><a href="https://aesthetic.computer/notepat">Notepat · Aesthetic Computer</a></div>
328
+
<span class="why">Keyboard as chromatic instrument. Pressure-sensitive keys as notational markup on QWERTY.</span>
329
+
</li>
330
+
<li>
331
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Bitsy">Bitsy</a></div>
332
+
<span class="why">Adam Le Doux's tile-based game tool — the syntax itself is the score.</span>
333
+
</li>
334
+
<li>
335
+
<div class="title"><a href="https://www.lexaloffle.com/pico-8.php">PICO-8 Fantasy Console</a></div>
336
+
<span class="why">A fantasy console where the 32K / 128×128 constraint produces the form.</span>
337
+
</li>
338
+
<li>
339
+
<div class="title"><a href="https://www.dwitter.net/">Dwitter</a></div>
340
+
<span class="why">140 characters of JavaScript → an animation. Source code that fits on a card.</span>
341
+
</li>
342
+
<li>
343
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Demoscene">Demoscene</a></div>
344
+
<span class="why">Intros in kilobytes — source code as a compressed performance.</span>
345
+
</li>
346
+
<li>
347
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Inform_7">Inform 7</a></div>
348
+
<span class="why">Interactive fiction that reads like plain English. The source IS the play.</span>
349
+
</li>
350
+
</ol>
351
+
</section>
352
+
353
+
<!-- §7 -->
354
+
<section class="section" id="s7">
355
+
<header>
356
+
<div class="num">§7</div>
357
+
<div class="name">20th-century graphic scores (the canon)</div>
358
+
</header>
359
+
<p class="whyline">The graphic-score lineage — the art-historical home whistlegraph sits downstream of, but diverges from by refusing interpretation.</p>
360
+
<ol class="blocks">
361
+
<li>
362
+
<div class="title"><a href="https://www.moma.org/s/ge/curated_ge/styles/list_ge/artists/1191/">Notations (Cage, 1969)</a></div>
363
+
<span class="why">John Cage's 1969 anthology — the graphic-score genre's first self-portrait.</span>
364
+
</li>
365
+
<li>
366
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Notations_21">Notations 21</a></div>
367
+
<span class="why">Theresa Sauer's 2009 follow-up — the tradition's next generation.</span>
368
+
</li>
369
+
<li>
370
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Treatise_(Cardew)">Treatise (Cardew)</a></div>
371
+
<span class="why">Cardew's 193-page graphic score — no instructions, no interpretation guide. The reader is the score.</span>
372
+
</li>
373
+
<li>
374
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Fontana_Mix">Fontana Mix</a></div>
375
+
<span class="why">Cage's transparent overlay system — the first reconfigurable score.</span>
376
+
</li>
377
+
<li>
378
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Aria_(Cage)">Aria (Cage)</a></div>
379
+
<span class="why">Colored curves for vocal register, shapes for technique. A score you read like a weather map.</span>
380
+
</li>
381
+
<li>
382
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Concert_for_Piano_and_Orchestra_(Cage)">Concert for Piano and Orchestra (Cage)</a></div>
383
+
<span class="why">Eighty-four score 'solos' to be played in any order, for any duration, in any combination.</span>
384
+
</li>
385
+
<li>
386
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Variations_I">Variations I (Cage)</a></div>
387
+
<span class="why">Transparent sheets, dots and lines — the score is a configuration, not a sequence.</span>
388
+
</li>
389
+
<li>
390
+
<div class="title"><a href="https://en.wikipedia.org/wiki/December_1952">December 1952 (Earle Brown)</a></div>
391
+
<span class="why">Earle Brown's single page — rectangles in two dimensions, read in any direction.</span>
392
+
</li>
393
+
<li>
394
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Morton_Feldman">Morton Feldman</a></div>
395
+
<span class="why">Feldman's graph pieces — intensity and register on a grid. Pitch becomes a choice, not an instruction.</span>
396
+
</li>
397
+
<li>
398
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Christian_Wolff_(composer)">Christian Wolff</a></div>
399
+
<span class="why">Prose instructions as scores — Burdocks, For One, Two or Three People. Text as instrument.</span>
400
+
</li>
401
+
<li>
402
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Artikulation_(Ligeti)">Artikulation (Ligeti)</a></div>
403
+
<span class="why">Wehinger's listening score — drawn AFTER Ligeti's electronic piece, to teach you how to hear it.</span>
404
+
</li>
405
+
<li>
406
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Metastaseis">Metastaseis (Xenakis)</a></div>
407
+
<span class="why">Xenakis drafted string glissandi like architectural sections. The score is geometry.</span>
408
+
</li>
409
+
<li>
410
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Sonic_Meditations">Sonic Meditations (Oliveros)</a></div>
411
+
<span class="why">Pauline Oliveros's text scores for group listening — attention itself as the performance.</span>
412
+
</li>
413
+
<li>
414
+
<div class="title"><a href="https://en.wikipedia.org/wiki/I_Am_Sitting_in_a_Room">I Am Sitting in a Room (Lucier)</a></div>
415
+
<span class="why">Lucier's one paragraph of text — an entire composition.</span>
416
+
</li>
417
+
<li>
418
+
<div class="title"><a href="https://en.wikipedia.org/wiki/In_C">In C (Terry Riley)</a></div>
419
+
<span class="why">Terry Riley: 53 phrases on one page, any ensemble, 45–90 minutes. A score infinitely rehearsable.</span>
420
+
</li>
421
+
<li>
422
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Composition_1960">Composition 1960 (La Monte Young)</a></div>
423
+
<span class="why">La Monte Young's text scores, including 'Draw a straight line and follow it.'</span>
424
+
</li>
425
+
</ol>
426
+
</section>
427
+
428
+
<!-- §6 -->
429
+
<section class="section" id="s6">
430
+
<header>
431
+
<div class="num">§6</div>
432
+
<div class="name">Fluxus & event scores</div>
433
+
</header>
434
+
<p class="whyline">Single-instruction, card-sized scores. Closest kin to aesthetic.computer's one-line prompts.</p>
435
+
<ol class="blocks">
436
+
<li>
437
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Grapefruit_(book)">Grapefruit (Yoko Ono)</a></div>
438
+
<span class="why">Yoko Ono's book of instructions — scores so small they fit on a card.</span>
439
+
</li>
440
+
<li>
441
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Water_Yam">Water Yam (Brecht)</a></div>
442
+
<span class="why">George Brecht's event cards — single-instruction scores the size of a business card.</span>
443
+
</li>
444
+
<li>
445
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Dick_Higgins">Dick Higgins</a></div>
446
+
<span class="why">Danger Music and the idea of scores that can't be performed safely.</span>
447
+
</li>
448
+
<li>
449
+
<div class="title"><a href="https://en.wikipedia.org/wiki/An_Anthology_of_Chance_Operations">An Anthology of Chance Operations</a></div>
450
+
<span class="why">La Monte Young's 1963 anthology — the origin point of Fluxus event scores.</span>
451
+
</li>
452
+
<li>
453
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Alison_Knowles">Alison Knowles</a></div>
454
+
<span class="why">Make A Salad (1962): the salad is the score. The performance is eating.</span>
455
+
</li>
456
+
<li class="text">“Draw a line. Follow it.” — Yoko Ono, <em>Line Piece</em> (1964).</li>
457
+
</ol>
458
+
</section>
459
+
460
+
<!-- §5 -->
461
+
<section class="section" id="s5">
462
+
<header>
463
+
<div class="num">§5</div>
464
+
<div class="name">Vernacular / folk notation</div>
465
+
</header>
466
+
<p class="whyline">Notations built to be taught by use, not institution — where legibility is inseparable from learning.</p>
467
+
<ol class="blocks">
468
+
<li>
469
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Shape_note">Shape note</a></div>
470
+
<span class="why">Four shapes, one staff — a self-teaching notation for congregational singing. The score teaches you how to read it.</span>
471
+
</li>
472
+
<li>
473
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Sacred_Harp">Sacred Harp</a></div>
474
+
<span class="why">The shape-note repertoire in practice: the tune is sung in solfège before the words — reading IS learning.</span>
475
+
</li>
476
+
<li>
477
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Tablature">Tablature</a></div>
478
+
<span class="why">Finger position, not pitch. The diagram of where the hand goes; the sound is the consequence.</span>
479
+
</li>
480
+
<li>
481
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Neume">Neume</a></div>
482
+
<span class="why">The earliest Western notation — gestural marks for pitch shape, before pitch was quantized.</span>
483
+
</li>
484
+
<li>
485
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Jianpu">Jianpu</a></div>
486
+
<span class="why">Chinese numbered notation — reads like a score, works like a score, isn't staff notation.</span>
487
+
</li>
488
+
<li>
489
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Gongche_notation">Gongche notation</a></div>
490
+
<span class="why">Traditional Chinese scales encoded in characters — an alphabet of pitch.</span>
491
+
</li>
492
+
<li>
493
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Sargam">Sargam</a></div>
494
+
<span class="why">Seven syllables: Sa Re Ga Ma Pa Dha Ni. A score you sing as you read it.</span>
495
+
</li>
496
+
<li>
497
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Gahu">Gahu</a></div>
498
+
<span class="why">West African drum notation and the oral-diagrammatic pedagogy behind it.</span>
499
+
</li>
500
+
</ol>
501
+
</section>
502
+
503
+
<!-- §4 -->
504
+
<section class="section" id="s4">
505
+
<header>
506
+
<div class="num">§4</div>
507
+
<div class="name">Sport as score / line</div>
508
+
</header>
509
+
<p class="whyline">Spatial and bodily scores that live on real terrain — the argument generalized beyond music.</p>
510
+
<ol class="blocks">
511
+
<li>
512
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Skateboarding">Skateboarding</a></div>
513
+
<span class="why">A 'line' is a spatial score — stringing tricks across architecture in a single read.</span>
514
+
</li>
515
+
<li>
516
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Dogtown_and_Z-Boys">Dogtown and Z-Boys</a></div>
517
+
<span class="why">Empty pools as performance scores — swimming-pool topography repurposed as notation.</span>
518
+
</li>
519
+
<li>
520
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Surf_break">Surf break</a></div>
521
+
<span class="why">Break diagrams: where to paddle, where to cut, where it closes out. A weather-dependent score.</span>
522
+
</li>
523
+
<li>
524
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Yardage_book">Yardage book</a></div>
525
+
<span class="why">A golfer's private notation — terrain, slope, club, intent. Personal score as tool.</span>
526
+
</li>
527
+
<li>
528
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Parkour">Parkour</a></div>
529
+
<span class="why">A traceur's line is a reading of urban architecture through the body.</span>
530
+
</li>
531
+
</ol>
532
+
</section>
533
+
534
+
<!-- §3 -->
535
+
<section class="section" id="s3">
536
+
<header>
537
+
<div class="num">§3</div>
538
+
<div class="name">Body / movement notation</div>
539
+
</header>
540
+
<p class="whyline">Attempts to notate the body — the most rigorous precedents for a score where drawing and performing are the same gesture.</p>
541
+
<ol class="blocks">
542
+
<li>
543
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Labanotation">Labanotation</a></div>
544
+
<span class="why">Rudolf Laban's 1928 system — the West's most serious attempt at a staff-notation for the body.</span>
545
+
</li>
546
+
<li>
547
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Eshkol%E2%80%93Wachman_Movement_Notation">Eshkol–Wachman Movement Notation</a></div>
548
+
<span class="why">Noa Eshkol's system: the body as angles and arcs, notated on a grid.</span>
549
+
</li>
550
+
<li>
551
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Benesh_Movement_Notation">Benesh Movement Notation</a></div>
552
+
<span class="why">The Royal Ballet's notation — entire company choreography on paper.</span>
553
+
</li>
554
+
<li>
555
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Kata">Kata</a></div>
556
+
<span class="why">Forms passed down by doing. No diagram, but the form itself is the score, memorized in bodies.</span>
557
+
</li>
558
+
<li>
559
+
<div class="title"><a href="https://en.wikipedia.org/wiki/American_football_plays">American football plays</a></div>
560
+
<span class="why">X's and O's that collapse into eleven bodies moving in time.</span>
561
+
</li>
562
+
</ol>
563
+
</section>
564
+
565
+
<!-- §2 -->
566
+
<section class="section" id="s2">
567
+
<header>
568
+
<div class="num">§2</div>
569
+
<div class="name">Instructional / craft</div>
570
+
</header>
571
+
<p class="whyline">Everyday reproducible scores — knitting, origami, sewing, IKEA, Lego, recipes, tea. The "score teaches itself" claim made mundane.</p>
572
+
<ol class="blocks">
573
+
<li>
574
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Knitting_abbreviations">Knitting abbreviations</a></div>
575
+
<span class="why">A closed symbol set encoding a three-dimensional wearable performance.</span>
576
+
</li>
577
+
<li>
578
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Crease_pattern">Crease pattern</a></div>
579
+
<span class="why">Origami before folding — the score for a three-dimensional performance on flat paper.</span>
580
+
</li>
581
+
<li>
582
+
<div class="title"><a href="https://langorigami.com/">Robert J. Lang Origami</a></div>
583
+
<span class="why">Robert Lang's crease-pattern work — paper-folding as programming.</span>
584
+
</li>
585
+
<li>
586
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Sewing_pattern">Sewing pattern</a></div>
587
+
<span class="why">Flat cut-outs that, executed correctly, produce a body. A garment is an assembled score.</span>
588
+
</li>
589
+
<li>
590
+
<div class="title"><a href="https://en.wikipedia.org/wiki/IKEA">IKEA</a></div>
591
+
<span class="why">Image-only assembly instructions that crossed language barriers by refusing language.</span>
592
+
</li>
593
+
<li>
594
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Lego">Lego</a></div>
595
+
<span class="why">Instruction booklets where each page is a diff from the previous state — score as rewrite.</span>
596
+
</li>
597
+
<li>
598
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Julia_Child">Julia Child</a></div>
599
+
<span class="why">Recipes as performance scores: measurement, sequence, expected outcome, tasting as feedback.</span>
600
+
</li>
601
+
<li>
602
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Japanese_tea_ceremony">Japanese tea ceremony</a></div>
603
+
<span class="why">Temae — every gesture choreographed and transmitted by watching, not by diagram.</span>
604
+
</li>
605
+
</ol>
606
+
</section>
607
+
608
+
<!-- §1 -->
609
+
<section class="section" id="s1">
610
+
<header>
611
+
<div class="num">§1 · bottom of channel</div>
612
+
<div class="name">Viral / social kin</div>
613
+
</header>
614
+
<p class="whyline">The contemporary viral record — dances and formats that spread by being reproducible. The pop-cultural ground whistlegraph shares with Renegade and the Harlem Shake.</p>
615
+
<ol class="blocks">
616
+
<li>
617
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Renegade_(dance)">Renegade (dance)</a></div>
618
+
<span class="why">Jalaiah Harmon's 14-year-old choreography diffused through TikTok without algorithmic push — learners watched it, learned it, performed it, posted it. The dance is the score.</span>
619
+
</li>
620
+
<li>
621
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Harlem_Shake_(meme)">Harlem Shake (meme)</a></div>
622
+
<span class="why">A 30-second video format so reproducible it became its own genre. The format itself is the score; the content is just the performance.</span>
623
+
</li>
624
+
<li>
625
+
<div class="title"><a href="https://knowyourmeme.com/memes/how-to-draw-squidward">How to draw Squidward</a></div>
626
+
<span class="why">Stepwise drawing memes — the tutorial is the artwork. Score as self-teaching comedy.</span>
627
+
</li>
628
+
<li>
629
+
<div class="title"><a href="https://en.wikipedia.org/wiki/Pictogram">Pictogram</a></div>
630
+
<span class="why">Otl Aicher's Munich '72 pictograms — bodily instructions compressed to a single icon.</span>
631
+
</li>
632
+
<li>
633
+
<div class="title"><a href="https://en.wikipedia.org/wiki/ISOTYPE_(picture_language)">ISOTYPE (picture language)</a></div>
634
+
<span class="why">Otto Neurath's picture language for statistics — a proposal for a universal graphic score.</span>
635
+
</li>
636
+
</ol>
637
+
</section>
638
+
639
+
<h2>Submission checklist</h2>
640
+
<ul class="checklist">
641
+
<li class="done">Channel live and public — 68 blocks, all annotated</li>
642
+
<li class="done">Channel description set (via web UI — API doesn't persist it)</li>
643
+
<li class="done">Other personal channels set to private — submission reads as a focused profile</li>
644
+
<li class="done">Credentials stashed in <code>aesthetic-computer-vault/.env</code></li>
645
+
<li class="todo">Notion submission form — pitch + channel URL <em>(due tonight, 11:59pm EST)</em></li>
646
+
</ul>
647
+
648
+
<footer>
649
+
gigs/are-na-annual-vol-8 · aesthetic.computer · 2026-04-20
650
+
</footer>
651
+
652
+
</main>
653
+
</body>
654
+
</html>
+56
-43
system/netlify/functions/index.mjs
+56
-43
system/netlify/functions/index.mjs
···
1302
1302
var isNotepat=location.hostname==='notepat.com'||location.hostname==='www.notepat.com'||location.pathname==='/notepat'||location.pathname.startsWith('/notepat?')||location.pathname.startsWith('/notepat/');
1303
1303
// Notebook: Python/Jupyter notebook with scientific aesthetic
1304
1304
var isNotebook=qs.indexOf('notebook=true')>=0;
1305
-
// Boot animation mode: 'spring' (turtle-graphics birds, default), 'serious' (clean/refined), or 'aesthetic' (VHS/glitch)
1305
+
// Boot animation mode: 'spring' (turtle-graphics rainbows, default), 'serious' (clean/refined), or 'aesthetic' (VHS/glitch)
1306
1306
var bootTheme=params.get('boot')||'spring';var isSerious=bootTheme==='serious';var isSpring=bootTheme==='spring';
1307
1307
// Density param for scaling (default 1, FF1 uses 8 for 4K)
1308
1308
var densityMatch=qs.match(/density=(\d+)/);var densityParam=densityMatch?parseInt(densityMatch[1]):1;
···
1371
1371
var NP_KEYS=[];var NP_PARTICLES=[];var NP_LAST_KEY=0;var NP_KEY_INTERVAL=120;
1372
1372
var NP_NOTE_NAMES=['C','D','E','F','G','A','B'];
1373
1373
var NP_KEY_COLS=[[255,107,157],[78,205,196],[255,217,61],[149,225,211],[255,154,162],[170,150,218],[112,214,255],[255,183,77]];
1374
-
// 🐦 Spring boot animation state — procedural turtle-graphics birds
1375
-
var SPRING_BIRDS=[],SPRING_INIT=false;
1374
+
// 🌈 Spring boot animation state — procedural turtle-graphics rainbows
1375
+
var SPRING_RAINBOWS=[],SPRING_INIT=false;
1376
1376
var SPRING_FONTS_LIGHT=['serif','monospace','YWFTProcessing-Bold, monospace','cursive','Georgia, serif','Courier New, monospace'];
1377
-
var SPRING_BIRD_HUES=[205,185,50,30,340,280,160,15,100]; // sky/teal/canary/robin/rose/violet/mint/coral/moss
1378
-
function springInit(S){SPRING_BIRDS=[];var n=14;for(var i=0;i<n;i++){SPRING_BIRDS.push({px:Math.random(),py:0.2+Math.random()*0.7,r:(4.5+Math.random()*6)*S,hue:SPRING_BIRD_HUES[i%SPRING_BIRD_HUES.length],phase:Math.random()*Math.PI*2,bob:0.5+Math.random()*1.2,flapSpeed:5+Math.random()*5,vx:(0.0014+Math.random()*0.0022)*(Math.random()>0.5?1:-1),bellyHue:40+Math.random()*30,beakHue:Math.random()>0.5?32:48});}SPRING_INIT=true;}
1379
-
function drawTurtleBird(ctx,W,H,b,t,S,isLightMode){
1377
+
// ROYGBIV hues (red, orange, yellow, green, blue, indigo, violet)
1378
+
var SPRING_RAINBOW_HUES=[0,28,54,120,210,255,290];
1379
+
function springInit(S){SPRING_RAINBOWS=[];var n=7;for(var i=0;i<n;i++){SPRING_RAINBOWS.push({px:Math.random(),py:0.28+Math.random()*0.55,r:(22+Math.random()*34)*S,phase:Math.random()*Math.PI*2,bob:0.6+Math.random()*1.3,tilt:(Math.random()-0.5)*0.28,vx:(0.0009+Math.random()*0.0019)*(Math.random()>0.5?1:-1),twinkle:Math.random()*Math.PI*2,puffHue:40+Math.random()*30});}SPRING_INIT=true;}
1380
+
function drawRainbow(ctx,W,H,b,t,S,isLightMode){
1380
1381
// Drift horizontally, wrap around edges
1381
-
b.px+=b.vx;if(b.px>1.15)b.px=-0.15;if(b.px<-0.15)b.px=1.15;
1382
-
var cx=b.px*W,cy=b.py*H+Math.sin(t*1.2+b.phase)*b.bob*3*S,r=b.r;
1383
-
var dir=b.vx>=0?1:-1,flap=Math.sin(t*b.flapSpeed+b.phase);
1384
-
ctx.save();ctx.translate(cx,cy);ctx.scale(dir,1);
1385
-
var outline=isLightMode?'hsla('+b.hue+',70%,20%,0.7)':'hsla('+b.hue+',60%,15%,0.7)';
1386
-
ctx.strokeStyle=outline;ctx.lineWidth=Math.max(0.5,0.7*S);
1387
-
// Tail — forked (turtle-style polyline)
1388
-
ctx.beginPath();ctx.moveTo(-r*0.85,0);ctx.lineTo(-r*1.8,-r*0.35);ctx.lineTo(-r*1.5,0);ctx.lineTo(-r*1.8,r*0.35);ctx.closePath();
1389
-
ctx.fillStyle='hsl('+b.hue+',70%,'+(isLightMode?40:52)+'%)';ctx.fill();ctx.stroke();
1390
-
// Body (egg-shape)
1391
-
ctx.beginPath();ctx.ellipse(0,0,r,r*0.65,0,0,Math.PI*2);
1392
-
ctx.fillStyle='hsl('+b.hue+',65%,'+(isLightMode?55:60)+'%)';ctx.fill();ctx.stroke();
1393
-
// Belly patch
1394
-
ctx.beginPath();ctx.ellipse(0,r*0.15,r*0.7,r*0.4,0,0,Math.PI*2);
1395
-
ctx.fillStyle='hsl('+b.bellyHue+',85%,'+(isLightMode?78:80)+'%)';ctx.globalAlpha=0.75;ctx.fill();ctx.globalAlpha=1;
1396
-
// Wing — flaps; turtle-style sin(theta) petal shape
1397
-
ctx.save();ctx.translate(-r*0.1,-r*0.15);ctx.rotate(flap*0.55);ctx.beginPath();
1398
-
var wL=r*1.2,wsteps=14;for(var wi=0;wi<=wsteps;wi++){var wth=wi/wsteps*Math.PI;var wrr=Math.sin(wth)*wL;ctx.lineTo(wrr*Math.cos(wth)-r*0.3,wrr*Math.sin(wth)*0.55-r*0.2);}
1399
-
ctx.closePath();ctx.fillStyle='hsl('+b.hue+',60%,'+(isLightMode?42:48)+'%)';ctx.fill();ctx.stroke();ctx.restore();
1400
-
// Head
1401
-
ctx.beginPath();ctx.arc(r*0.85,-r*0.35,r*0.5,0,Math.PI*2);
1402
-
ctx.fillStyle='hsl('+b.hue+',68%,'+(isLightMode?58:64)+'%)';ctx.fill();ctx.stroke();
1403
-
// Beak
1404
-
ctx.beginPath();ctx.moveTo(r*1.25,-r*0.35);ctx.lineTo(r*1.75,-r*0.22);ctx.lineTo(r*1.25,-r*0.12);ctx.closePath();
1405
-
ctx.fillStyle='hsl('+b.beakHue+',95%,'+(isLightMode?48:55)+'%)';ctx.fill();
1406
-
ctx.strokeStyle='hsla('+b.beakHue+',90%,25%,0.8)';ctx.stroke();
1407
-
// Eye + sparkle
1408
-
ctx.beginPath();ctx.arc(r*0.95,-r*0.5,Math.max(0.8,1.0*S),0,Math.PI*2);ctx.fillStyle='#111';ctx.fill();
1409
-
ctx.beginPath();ctx.arc(r*1.02,-r*0.56,Math.max(0.3,0.35*S),0,Math.PI*2);ctx.fillStyle='#fff';ctx.fill();
1410
-
// Tiny feet tucked under body
1411
-
ctx.strokeStyle=outline;ctx.lineWidth=Math.max(0.5,0.6*S);
1412
-
ctx.beginPath();ctx.moveTo(-r*0.15,r*0.6);ctx.lineTo(-r*0.1,r*0.85);ctx.moveTo(r*0.15,r*0.6);ctx.lineTo(r*0.2,r*0.85);ctx.stroke();
1382
+
b.px+=b.vx;if(b.px>1.2)b.px=-0.2;if(b.px<-0.2)b.px=1.2;
1383
+
var cx=b.px*W,cy=b.py*H+Math.sin(t*0.9+b.phase)*b.bob*2.5*S,r=b.r;
1384
+
var tilt=b.tilt+Math.sin(t*0.45+b.phase)*0.07;
1385
+
ctx.save();ctx.translate(cx,cy);ctx.rotate(tilt);
1386
+
var bandW=Math.max(1.4,r*0.095);
1387
+
ctx.lineCap='round';
1388
+
// Soft halo behind the bow
1389
+
ctx.beginPath();ctx.arc(0,0,r+bandW*0.3,Math.PI,Math.PI*2);
1390
+
ctx.lineWidth=bandW*1.6;
1391
+
ctx.strokeStyle=isLightMode?'rgba(255,250,210,0.55)':'rgba(255,240,180,0.22)';
1392
+
ctx.stroke();
1393
+
// ROYGBIV arcs from outermost to innermost (turtle-style concentric strokes)
1394
+
for(var bi=0;bi<SPRING_RAINBOW_HUES.length;bi++){
1395
+
var hue=SPRING_RAINBOW_HUES[bi];var bandR=r-bi*bandW;if(bandR<bandW)break;
1396
+
ctx.beginPath();ctx.arc(0,0,bandR,Math.PI,Math.PI*2);
1397
+
ctx.lineWidth=bandW*0.92;
1398
+
ctx.strokeStyle='hsla('+hue+',88%,'+(isLightMode?52:62)+'%,0.85)';
1399
+
ctx.stroke();
1400
+
}
1401
+
// Little cloud puffs at each foot
1402
+
var puffY=bandW*0.2,puffR=bandW*1.9;
1403
+
for(var side=-1;side<=1;side+=2){
1404
+
var fx=side*(r-bandW*3.5);
1405
+
ctx.beginPath();ctx.arc(fx,puffY,puffR,0,Math.PI*2);
1406
+
ctx.fillStyle=isLightMode?'hsla('+b.puffHue+',60%,92%,0.9)':'hsla('+b.puffHue+',40%,82%,0.55)';
1407
+
ctx.fill();
1408
+
ctx.beginPath();ctx.arc(fx+side*puffR*0.7,puffY-puffR*0.45,puffR*0.75,0,Math.PI*2);
1409
+
ctx.fillStyle=isLightMode?'hsla('+b.puffHue+',55%,95%,0.85)':'hsla('+b.puffHue+',35%,78%,0.45)';
1410
+
ctx.fill();
1411
+
ctx.beginPath();ctx.arc(fx-side*puffR*0.55,puffY-puffR*0.25,puffR*0.6,0,Math.PI*2);
1412
+
ctx.fillStyle=isLightMode?'hsla('+b.puffHue+',55%,94%,0.75)':'hsla('+b.puffHue+',35%,75%,0.4)';
1413
+
ctx.fill();
1414
+
}
1415
+
// Twinkle sparkle at the crown
1416
+
var twA=0.45+Math.sin(t*3+b.twinkle)*0.45;
1417
+
ctx.globalAlpha=Math.max(0,twA);
1418
+
ctx.fillStyle=isLightMode?'#fff4b0':'#fffce0';
1419
+
ctx.beginPath();ctx.arc(0,-r+bandW*0.5,Math.max(1,1.5*S),0,Math.PI*2);ctx.fill();
1420
+
// Tiny cross-sparkle rays
1421
+
ctx.strokeStyle=ctx.fillStyle;ctx.lineWidth=Math.max(0.5,0.6*S);
1422
+
var rays=Math.max(2.5,2.2*S);
1423
+
ctx.beginPath();ctx.moveTo(-rays,-r+bandW*0.5);ctx.lineTo(rays,-r+bandW*0.5);
1424
+
ctx.moveTo(0,-r+bandW*0.5-rays);ctx.lineTo(0,-r+bandW*0.5+rays);ctx.stroke();
1425
+
ctx.globalAlpha=1;
1413
1426
ctx.restore();}
1414
1427
// 📊 Notebook scientific aesthetic boot animation state
1415
1428
var NB_DATA_POINTS=[];var NB_GRID_LINES=[];var NB_WAVEFORMS=[];var NB_LAST_SPAWN=0;
···
1562
1575
var logFS=densityParam===1&&isDeviceMode?Math.max(14,Math.floor(H/60)):4*S*dS;
1563
1576
x.font=logFS+'px monospace';var logY=(densityParam===1&&isDeviceMode?Math.floor(H/20):16*S*dS)+embedPad;var logSpacing=densityParam===1&&isDeviceMode?Math.floor(logFS*1.5):7*S*dS;for(var li=0;li<lines.length&&li<10;li++){var ln=lines[li],ly=logY+li*logSpacing,la=Math.max(0.3,1-li*0.08),lc=klCols[li%klCols.length];var tw=x.measureText(ln.text).width;var logX=densityParam===1&&isDeviceMode?20:10*S*dS;var textX=densityParam===1&&isDeviceMode?30:(logX+3*S*dS);var pillH=densityParam===1&&isDeviceMode?Math.floor(logFS*1.2):6*S*dS;var pillR=densityParam===1&&isDeviceMode?6:3*S*dS;var pillW=tw+(textX-logX)*2;x.globalAlpha=la*0.15;x.fillStyle='rgb('+lc[0]+','+lc[1]+','+lc[2]+')';x.beginPath();x.roundRect(logX,ly-pillH*0.65,pillW,pillH,pillR);x.fill();x.globalAlpha=la;x.fillStyle='rgb('+lc[0]+','+lc[1]+','+lc[2]+')';x.fillText(ln.text,textX,ly);}
1564
1577
x.globalAlpha=1;requestAnimationFrame(anim);return;}
1565
-
// 🐦 Spring mode — yellowish, light, with procedural turtle-graphics birds (default)
1578
+
// 🌈 Spring mode — yellowish, light, with procedural turtle-graphics rainbows (default)
1566
1579
if(isSpring){
1567
1580
if(!SPRING_INIT)springInit(S);
1568
1581
// Soft sunny gradient bg (cream/butter for light, deep amber for dark)
···
1575
1588
x.globalAlpha=1;
1576
1589
// Sunbeam streaks from top-right
1577
1590
for(var br=0;br<5;br++){x.save();x.globalAlpha=0.06+Math.sin(t*0.5+br)*0.03;x.fillStyle=isLightMode?'#fff7c0':'#ffeeaa';x.translate(W*0.85,0);x.rotate(0.6+br*0.08);x.fillRect(-2*S,0,4*S,H*1.4);x.restore();}
1578
-
// Draw all birds (sorted by y for fake depth)
1579
-
var sortedBd=SPRING_BIRDS.slice().sort(function(a,b){return a.py-b.py;});
1580
-
for(var fi=0;fi<sortedBd.length;fi++){drawTurtleBird(x,W,H,sortedBd[fi],t,S,isLightMode);}
1591
+
// Draw all rainbows (sorted by y for fake depth — farther ones higher up)
1592
+
var sortedBd=SPRING_RAINBOWS.slice().sort(function(a,b){return a.py-b.py;});
1593
+
for(var fi=0;fi<sortedBd.length;fi++){drawRainbow(x,W,H,sortedBd[fi],t,S,isLightMode);}
1581
1594
// Logo top-left (small, soft)
1582
1595
var lS=21*S,lX=5*S,lY=5*S;var logoImg=imgFullLoaded?imgFull:img;
1583
1596
x.imageSmoothingEnabled=imgFullLoaded;x.globalAlpha=0.92;x.drawImage(logoImg,lX,lY,lS,lS);x.globalAlpha=1;
···
1595
1608
var sec=(performance.now()-bootStart)/1000;var secT=sec.toFixed(2)+'s';x.font='bold '+(4*S)+'px monospace';x.globalAlpha=0.55;x.fillStyle=isLightMode?'#7a5a20':'#ffd870';x.fillText(secT,W-x.measureText(secT).width-5*S,lY+5*S);x.globalAlpha=1;
1596
1609
// Handle (if present)
1597
1610
if(uH){var hAge=(performance.now()-hST)/1000,hFade=Math.min(1,hAge*2);x.font='bold '+(5*S)+'px '+SPRING_FONTS_LIGHT[1];x.globalAlpha=hFade*0.85;x.fillStyle=isLightMode?'#5a3a10':'#ffe6a8';x.fillText(uH,5*S,tBaseY+tFS+6*S);x.globalAlpha=1;}
1598
-
// 🐦 MOTD — chars float chaotically among the birds, each with own font/phase
1611
+
// 🌈 MOTD — chars float chaotically among the rainbows, each with own font/phase
1599
1612
if(motd){var mAge=(performance.now()-motdStart)/1000;var mFade=Math.min(1,mAge*0.5);var maxW=W*0.85;var motdFS=Math.min(18*S,Math.max(8*S,maxW/Math.max(8,motd.length*0.6)));x.font='bold '+motdFS+'px monospace';
1600
1613
// Wrap motd into lines using rough char width
1601
1614
var roughChars=Math.max(8,Math.floor(maxW/(motdFS*0.6)));var mLines=wrapMotdText(motd,roughChars);var lineH=motdFS*1.4;var startY=H/2-(mLines.length*lineH)/2;