Monorepo for Aesthetic.Computer
aesthetic.computer
are.na-annual: proper punctuation and title case
Editorial submission, not a card — swap the lowercase default for
standard English capitalization throughout. Keep the voice (first
person, em dashes, short sentences) but run the headings, proper
nouns, and sentence starts through Title / Sentence case.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+62
-62
+62
-62
system/public/are.na-annual/index.html
+62
-62
system/public/are.na-annual/index.html
···
281
281
<main class="wrap">
282
282
283
283
<header class="mast">
284
-
<div class="eyebrow"><span class="tag">are<span class="dot" style="color:var(--pink)">.</span>na annual vol. 8</span> · theme: score · open call</div>
285
-
<h1>the score that<br>teaches <em>itself</em><span class="dot">.</span></h1>
286
-
<p class="sub">pitch by <strong>@jeffrey</strong> (jeffrey alan scudder) · <a href="https://aesthetic.computer">aesthetic.computer</a></p>
284
+
<div class="eyebrow"><span class="tag">Are<span class="dot" style="color:var(--pink)">.</span>na Annual Vol. 8</span> · Theme: Score · Open Call</div>
285
+
<h1>The Score That<br>Teaches <em>Itself</em><span class="dot">.</span></h1>
286
+
<p class="sub">Pitch by <strong>@jeffrey</strong> (Jeffrey Alan Scudder) · <a href="https://aesthetic.computer">aesthetic.computer</a></p>
287
287
<dl class="meta">
288
-
<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></dd>
289
-
<dt>form</dt><dd><a href="https://aredotna.notion.site/3178a0f816d9815abdf3cb1624bb9e88">aredotna.notion.site — vol. 8 submission</a></dd>
290
-
<dt>due</dt><dd class="due">mon 20 apr 2026 · 11:59pm est</dd>
291
-
<dt>honorarium</dt><dd>$200 · book released dec 2026</dd>
288
+
<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></dd>
289
+
<dt>Form</dt><dd><a href="https://aredotna.notion.site/3178a0f816d9815abdf3cb1624bb9e88">aredotna.notion.site — Vol. 8 submission</a></dd>
290
+
<dt>Due</dt><dd class="due">Mon, 20 Apr 2026 · 11:59 PM EST</dd>
291
+
<dt>Honorarium</dt><dd>$200 · book released Dec 2026</dd>
292
292
</dl>
293
293
</header>
294
294
295
295
<!-- ── PITCH ───────────────────────────────── -->
296
296
<section class="pitch">
297
-
<h2><span class="ord">§</span>pitch</h2>
297
+
<h2><span class="ord">§</span>Pitch</h2>
298
298
299
-
<p>i want to write about <em>whistlegraph</em> — a drawing form i invented in 2019 where every line is a sung syllable of a poem. you draw it while you sing it. the finished drawing is a score. the score teaches you how to play it.</p>
299
+
<p>I want to write about <em>whistlegraph</em> — a drawing form I invented in 2019, where every line is a sung syllable of a poem. You draw it while you sing it. The finished drawing is a score. The score teaches you how to play it.</p>
300
300
301
-
<p>between 2019 and 2023, a trio (me, <span class="name">alex freundlich</span>, <span class="name">camille klein</span>) scaled the form from a cabin in <span class="name">ashland, oregon</span> to <em>2.6 million</em> followers on tiktok — no paid promotion, no trend-jacking, no dance. the first viral hit was <q>i'm a butterfly. flapping for you guys. it's just a costume. i put on in my room.</q> — four strokes, four sung lines, a collaboration with the musician <span class="name">bo en</span>. kids on tiktok learned it faster than most kids learn <em>twinkle twinkle</em>.</p>
301
+
<p>Between 2019 and 2023, a trio — me, <span class="name">Alex Freundlich</span>, and <span class="name">Camille Klein</span> — scaled the form from a cabin in <span class="name">Ashland, Oregon</span> to <em>2.6 million</em> followers on TikTok. No paid promotion. No trend-jacking. No dance. The first viral hit was a collaboration with the musician <span class="name">Bo En</span>: <q>I'm a butterfly. Flapping for you guys. It's just a costume. I put on in my room.</q> Four strokes, four sung lines. Kids on TikTok learned it faster than most kids learn <em>Twinkle, Twinkle</em>.</p>
302
302
303
-
<p>i want to write about <em>why</em> it worked there.</p>
303
+
<p>I want to write about <em>why</em> it worked there.</p>
304
304
305
-
<span class="drop">the graphic-score tradition failed at one thing.</span>
305
+
<span class="drop">The graphic-score tradition failed at one thing.</span>
306
306
307
-
<p>cardew's <em>treatise</em> is 193 pages of beautiful, unreadable geometry. cage's <em>fontana mix</em> needs a transparent overlay. riley's <em>in c</em> wants 53 phrases and an ensemble. the 20th-century graphic score succeeded as art — notations, moma, 1969 — and failed as communication. the premise was that notation could be anything. the consequence was that performance required a trained interpreter.</p>
307
+
<p>Cardew's <em>Treatise</em> is 193 pages of beautiful, unreadable geometry. Cage's <em>Fontana Mix</em> needs a transparent overlay. Riley's <em>In C</em> wants 53 phrases and an ensemble. The 20th-century graphic score succeeded as art — <em>Notations</em>, MoMA, 1969 — and failed as communication. The premise was that notation could be anything. The consequence was that performance required a trained interpreter.</p>
308
308
309
-
<p>whistlegraph takes the same ingredients and swaps one assumption. the relationship between mark and sound is <em>one-to-one</em>, fixed during the first performance and preserved in the recording. no interpretation. no ambiguity. a child who can hold a pen can perform one after watching it once.</p>
309
+
<p>Whistlegraph takes the same ingredients and swaps one assumption: the relationship between mark and sound is <em>one-to-one</em>, fixed during the first performance and preserved in the recording. No interpretation. No ambiguity. A child who can hold a pen can perform one after watching it once.</p>
310
310
311
-
<p>that's the actual innovation, and it's the reason a drawing went viral on a platform designed for lip-sync. a dance challenge works because the choreography is the score; a whistlegraph works for the same reason, but the score is also original, also the artwork, also the instruction manual. papert would have called it a <em>microworld</em>. eshun's <em>sonic fiction</em> has a visual analogue: a drawing that constructs the performance it depicts.</p>
311
+
<p>That is the actual innovation, and it is the reason a drawing went viral on a platform designed for lip-sync. A dance challenge works because the choreography is the score; a whistlegraph works for the same reason, except the score is also original composition, also the artwork, also the instruction manual. Papert would have called it a <em>microworld</em>. Eshun's <em>sonic fiction</em> has a visual analogue here: a drawing that constructs the performance it depicts.</p>
312
312
313
-
<span class="drop">three registers, one object.</span>
313
+
<span class="drop">Three registers, one object.</span>
314
314
315
-
<p><strong>as art</strong>, whistlegraph lives downstream of <span class="name">cardew</span>, <span class="name">cage</span>, and the fluxus event score — rhizome / new museum commissioned a 22-minute chalk whistlegraph in 2022; feral file sold 45 editions the same year; smk, kadist, schneider hold work in collection. <strong>as content</strong>, it broke the viral-mechanics assumption that tiktok only rewards bodies and pop audio. <strong>as interface design</strong>, it is the founding principle of <a href="https://aesthetic.computer">aesthetic.computer</a> — every piece a self-documenting score, every url a memorizable performance.</p>
315
+
<p><strong>As art</strong>, whistlegraph lives downstream of Cardew, Cage, and the Fluxus event score. Rhizome / New Museum commissioned a 22-minute chalk whistlegraph in 2022; Feral File sold 45 editions the same year; SMK, KADIST, and the Schneider Museum hold work in collection. <strong>As content</strong>, it broke the viral-mechanics assumption that TikTok only rewards bodies and pop audio. <strong>As interface design</strong>, it is the founding principle of <a href="https://aesthetic.computer">aesthetic.computer</a> — every piece a self-documenting score, every URL a memorizable performance.</p>
316
316
317
-
<p>the trio separated in november 2023. the form didn't. what's left is the claim: <em>reproducibility, not novelty, is the real score of a form.</em> the essay is about what it would mean to design more things this way — objects whose instructions and performance are the same object.</p>
317
+
<p>The trio separated in November 2023. The form did not. What is left is the claim: <em>reproducibility, not novelty, is the real score of a form.</em> The essay is about what it would mean to design more things this way — objects whose instructions and performance are the same object.</p>
318
318
319
-
<p style="color:var(--dim);font-size:0.88em;margin-top:1.4em">~570 words of actual pitch, too long for the form (~170–250). the condensed version lives at the bottom of this page and in the channel description.</p>
319
+
<p style="color:var(--dim);font-size:0.88em;margin-top:1.4em">~570 words of actual pitch, too long for the form (~170–250). The condensed version lives at the bottom of this page and in the channel description.</p>
320
320
</section>
321
321
322
322
<!-- ── ANCHORS ─────────────────────────────── -->
323
323
<section>
324
-
<h2><span class="ord">§</span>three registers</h2>
324
+
<h2><span class="ord">§</span>Three Registers</h2>
325
325
<div class="anchors">
326
326
<div class="anchor">
327
-
<b>art</b>
328
-
<p>downstream of cardew's <em>scratch orchestra</em> and cage's <em>notations</em>, but refuses interpretation for one-to-one legibility. the first graphic score a child can play.</p>
327
+
<b>Art</b>
328
+
<p>Downstream of Cardew's <em>Scratch Orchestra</em> and Cage's <em>Notations</em>, but refuses interpretation in favor of one-to-one legibility. The first graphic score a child can play.</p>
329
329
</div>
330
330
<div class="anchor">
331
-
<b>content</b>
332
-
<p>2.6m on tiktok, no dance. the viral mechanism is the form itself — not the algorithm, not the trend. reproducibility as distribution.</p>
331
+
<b>Content</b>
332
+
<p>2.6 million on TikTok, no dance. The viral mechanism is the form itself — not the algorithm, not the trend. Reproducibility as distribution.</p>
333
333
</div>
334
334
<div class="anchor">
335
-
<b>interface</b>
336
-
<p>the founding principle of aesthetic.computer: every piece a self-documenting score, every url a memorizable performance.</p>
335
+
<b>Interface</b>
336
+
<p>The founding principle of aesthetic.computer: every piece a self-documenting score, every URL a memorizable performance.</p>
337
337
</div>
338
338
</div>
339
339
</section>
340
340
341
341
<!-- ── LINEAGE ─────────────────────────────── -->
342
342
<section>
343
-
<h2><span class="ord">§</span>the lineage the essay actually argues<span class="count">specific, not canonical</span></h2>
343
+
<h2><span class="ord">§</span>The Lineage The Essay Argues<span class="count">specific, not canonical</span></h2>
344
344
<div class="lineage">
345
-
<div class="row"><div class="who">goodiepal</div><div class="claim"><em>el camino del hardcore</em> (2012, alku 83) — a 191-page score printed in comic sans and courier on grey cardboard. radical computer music for alternative intelligences. the most honest predecessor.</div></div>
346
-
<div class="row"><div class="who">jacob ciocci</div><div class="claim">paper rad co-founder. wrote <em>the butterfly effect / rules set you free</em> for the 2023 whistlegraph zine (ed. asher penn, <em>sex magazine</em>, 750 copies) — the essay that placed the form in the rule-based community-art lineage.</div></div>
347
-
<div class="row"><div class="who">bo en</div><div class="claim">the musical collaborator on <em>i'm a butterfly</em>. pop melody as score, not pop audio as backing track.</div></div>
348
-
<div class="row"><div class="who">cornelius cardew</div><div class="claim"><em>scratch orchestra</em> and <em>nature study notes</em> — not just <em>treatise</em>. the group was the attempt to solve the interpretation problem. whistlegraph attacks the same problem from the other side: remove interpretation from the score.</div></div>
349
-
<div class="row"><div class="who">pauline oliveros</div><div class="claim"><em>sonic meditations</em>. attention as performance. whistlegraph asks the same of the viewer: watch, learn, reproduce.</div></div>
350
-
<div class="row"><div class="who">seymour papert</div><div class="claim"><em>mindstorms</em> (1980) — microworlds. a whistlegraph is a microworld: constrained, memorizable, constructible by the viewer.</div></div>
351
-
<div class="row"><div class="who">kodwo eshun</div><div class="claim"><em>more brilliant than the sun</em> (1998) — sonic fiction. whistlegraph is its visual analogue: a drawing that constructs the performance it depicts.</div></div>
352
-
<div class="row"><div class="who">paul klee</div><div class="claim"><em>pedagogical sketchbook</em> (1925) — the line that goes for a walk. whistlegraph's lines take walks while singing.</div></div>
353
-
<div class="row"><div class="who">olia lialina / jodi</div><div class="claim">rhizome artbase neighbours. whistlegraph sits in the same collection as early net art — the precedent for tiktok-native work entering an institutional archive.</div></div>
354
-
<div class="row"><div class="who">jalaiah harmon</div><div class="claim"><em>renegade</em> (2019). proof that a reproducible body-score can spread through diffusion, not recommendation. whistlegraph is the drawing equivalent.</div></div>
345
+
<div class="row"><div class="who">Goodiepal</div><div class="claim"><em>El Camino del Hardcore</em> (2012, ALKU 83) — a 191-page score printed in Comic Sans and Courier on grey cardboard. Radical Computer Music for alternative intelligences. The most honest predecessor.</div></div>
346
+
<div class="row"><div class="who">Jacob Ciocci</div><div class="claim">Paper Rad co-founder. Wrote <em>The Butterfly Effect / Rules Set You Free</em> for the 2023 Whistlegraph Zine (ed. Asher Penn, <em>Sex Magazine</em>, 750 copies) — the essay that placed the form in the rule-based community-art lineage.</div></div>
347
+
<div class="row"><div class="who">Bo En</div><div class="claim">The musical collaborator on <em>I'm a Butterfly</em>. Pop melody as score, not pop audio as backing track.</div></div>
348
+
<div class="row"><div class="who">Cornelius Cardew</div><div class="claim"><em>Scratch Orchestra</em> and <em>Nature Study Notes</em> — not just <em>Treatise</em>. The group was the attempt to solve the interpretation problem. Whistlegraph attacks the same problem from the other side: remove interpretation from the score.</div></div>
349
+
<div class="row"><div class="who">Pauline Oliveros</div><div class="claim"><em>Sonic Meditations</em>. Attention as performance. Whistlegraph asks the same of the viewer: watch, learn, reproduce.</div></div>
350
+
<div class="row"><div class="who">Seymour Papert</div><div class="claim"><em>Mindstorms</em> (1980) — microworlds. A whistlegraph is a microworld: constrained, memorizable, constructible by the viewer.</div></div>
351
+
<div class="row"><div class="who">Kodwo Eshun</div><div class="claim"><em>More Brilliant Than the Sun</em> (1998) — sonic fiction. Whistlegraph is its visual analogue: a drawing that constructs the performance it depicts.</div></div>
352
+
<div class="row"><div class="who">Paul Klee</div><div class="claim"><em>Pedagogical Sketchbook</em> (1925) — "the line that goes for a walk." Whistlegraph's lines take walks while singing.</div></div>
353
+
<div class="row"><div class="who">Olia Lialina / JODI</div><div class="claim">Rhizome ArtBase neighbours. Whistlegraph sits in the same collection as early net art — the precedent for TikTok-native work entering an institutional archive.</div></div>
354
+
<div class="row"><div class="who">Jalaiah Harmon</div><div class="claim"><em>Renegade</em> (2019). Proof that a reproducible body-score can spread through diffusion, not recommendation. Whistlegraph is the drawing equivalent.</div></div>
355
355
</div>
356
356
</section>
357
357
358
358
<!-- ── CHANNEL (live) ──────────────────────── -->
359
359
<section>
360
-
<h2><span class="ord">§</span>the channel<span class="count">live from are.na · 68 blocks</span></h2>
360
+
<h2><span class="ord">§</span>The Channel<span class="count">live from are.na · 68 blocks</span></h2>
361
361
<div id="channel-status" class="channel-status">
362
-
fetching <span class="ok">api.are.na</span> …
362
+
Fetching <span class="ok">api.are.na</span> …
363
363
</div>
364
364
<div id="channel" class="channel"></div>
365
365
</section>
366
366
367
367
<!-- ── CONDENSED ──────────────────────────── -->
368
368
<section>
369
-
<h2><span class="ord">§</span>submission-form version<span class="count">~200 words</span></h2>
369
+
<h2><span class="ord">§</span>Submission-Form Version<span class="count">~200 words</span></h2>
370
370
<div class="pitch" style="border-left: 2px solid var(--pink); padding-left: 1em">
371
-
<p><em>the score that teaches itself.</em> i want to write about <em>whistlegraph</em> — a drawing form i invented in 2019 where every line is a sung syllable. between 2020 and 2023, a trio i was in scaled it to 2.6 million tiktok followers from a cabin in ashland, oregon. no paid promotion. the distribution model was the form itself.</p>
372
-
<p>the 20th-century graphic-score tradition (cardew, cage, brown, feldman) is an art-historical success and a communication failure — the notation could be anything, so performance required a trained interpreter. whistlegraph keeps the graphic score and removes the interpretation: mark-to-sound is one-to-one, fixed at performance time. a child who can hold a pen can reproduce it.</p>
373
-
<p>the essay moves through three registers. <strong>as art</strong> — downstream of cardew, ciocci, goodiepal — but for anyone. <strong>as content</strong> — the first viral graphic score. <strong>as interface design</strong> — the founding principle of aesthetic.computer.</p>
374
-
<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 objects this way — instructions and performance as the same object.</p>
371
+
<p><em>The Score That Teaches Itself.</em> I want to write about <em>whistlegraph</em> — a drawing form I invented in 2019, where every line is a sung syllable. Between 2020 and 2023, a trio I was in scaled it to 2.6 million TikTok followers from a cabin in Ashland, Oregon. No paid promotion. The distribution model was the form itself.</p>
372
+
<p>The 20th-century graphic-score tradition — Cardew, Cage, Brown, Feldman — is an art-historical success and a communication failure. Notation could be anything, so performance required a trained interpreter. Whistlegraph keeps the graphic score and removes the interpretation: mark-to-sound is one-to-one, fixed at performance time. A child who can hold a pen can reproduce it.</p>
373
+
<p>The essay moves through three registers. <strong>As art</strong> — downstream of Cardew, Ciocci, and Goodiepal, but for anyone. <strong>As content</strong> — the first viral graphic score. <strong>As interface design</strong> — the founding principle of aesthetic.computer.</p>
374
+
<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 objects this way — instructions and performance as the same object.</p>
375
375
</div>
376
376
</section>
377
377
378
378
<!-- ── CHECKLIST ──────────────────────────── -->
379
379
<section>
380
-
<h2><span class="ord">§</span>status</h2>
380
+
<h2><span class="ord">§</span>Status</h2>
381
381
<ul class="check">
382
-
<li class="done">channel live, public, 68 blocks, all annotated</li>
383
-
<li class="done">channel description set (web ui — the v2 put doesn't persist it)</li>
384
-
<li class="done">other personal channels set private — profile reads as focused</li>
385
-
<li class="done"><code>ARENA_TOKEN</code> stashed in <code>aesthetic-computer-vault/.env</code></li>
386
-
<li class="todo">fill the notion form — paste the 200-word version + channel url <em>(due tonight, 11:59 est)</em></li>
382
+
<li class="done">Channel live and public, 68 blocks, all annotated.</li>
383
+
<li class="done">Channel description set (via web UI — the v2 PUT does not persist it).</li>
384
+
<li class="done">Other personal channels set to private; profile reads as focused.</li>
385
+
<li class="done"><code>ARENA_TOKEN</code> stashed in <code>aesthetic-computer-vault/.env</code>.</li>
386
+
<li class="todo">Fill the Notion form — paste the 200-word version and channel URL. <em>Due tonight, 11:59 PM EST.</em></li>
387
387
</ul>
388
388
</section>
389
389
···
403
403
// Reading-order sections (top → bottom of channel page)
404
404
// positions are 1..68 in the channel, 68 = top
405
405
const SECTIONS = [
406
-
{ name: "§10 — whistlegraph", note: "the subject. everything lands here.", min: 64 },
407
-
{ name: "§9 — framing text", note: "the thesis spoken plainly.", min: 61 },
408
-
{ name: "§8 — computational / card-sized kin", note: "environments where the program is its own score.", min: 54 },
409
-
{ name: "§7 — 20th-c. graphic scores", note: "the canon we diverge from.", min: 39 },
410
-
{ name: "§6 — fluxus & event scores", note: "single-instruction card-sized scores — closest kin.", min: 33 },
411
-
{ name: "§5 — vernacular / folk notation", note: "notations that teach by use.", min: 25 },
412
-
{ name: "§4 — sport as line", note: "spatial scores on real terrain.", min: 20 },
413
-
{ name: "§3 — body / movement notation", note: "the west's attempts to notate bodies.", min: 15 },
414
-
{ name: "§2 — instructional / craft", note: "the 'score teaches itself' claim made mundane.", min: 7 },
415
-
{ name: "§1 — viral / social kin", note: "the contemporary record: formats that spread by being reproducible.", min: 1 },
406
+
{ name: "§10 — Whistlegraph", note: "The subject. Everything lands here.", min: 64 },
407
+
{ name: "§9 — Framing Text", note: "The thesis spoken plainly.", min: 61 },
408
+
{ name: "§8 — Computational / Card-Sized Kin", note: "Environments where the program is its own score.", min: 54 },
409
+
{ name: "§7 — 20th-Century Graphic Scores", note: "The canon we diverge from.", min: 39 },
410
+
{ name: "§6 — Fluxus & Event Scores", note: "Single-instruction, card-sized scores — closest kin.", min: 33 },
411
+
{ name: "§5 — Vernacular / Folk Notation", note: "Notations that teach by use.", min: 25 },
412
+
{ name: "§4 — Sport as Line", note: "Spatial scores on real terrain.", min: 20 },
413
+
{ name: "§3 — Body / Movement Notation", note: "The West's attempts to notate bodies.", min: 15 },
414
+
{ name: "§2 — Instructional / Craft", note: "The \"score teaches itself\" claim made mundane.", min: 7 },
415
+
{ name: "§1 — Viral / Social Kin", note: "The contemporary record: formats that spread by being reproducible.", min: 1 },
416
416
];
417
417
418
418
function hostname(u) {
···
471
471
if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
472
472
const data = await r.json();
473
473
const blocks = data.contents || [];
474
-
statusEl.innerHTML = `<span class="ok">● live</span> · ${blocks.length} blocks fetched from <a href="https://www.are.na/aesthetic-computer/${SLUG}">are.na/aesthetic-computer/${SLUG}</a>`;
474
+
statusEl.innerHTML = `<span class="ok">● Live</span> · ${blocks.length} blocks fetched from <a href="https://www.are.na/aesthetic-computer/${SLUG}">are.na/aesthetic-computer/${SLUG}</a>`;
475
475
renderBlocks(blocks);
476
476
} catch (err) {
477
-
statusEl.innerHTML = `<span class="err">● api error</span> · ${err.message} · <a href="https://www.are.na/aesthetic-computer/${SLUG}">view channel on are.na</a>`;
477
+
statusEl.innerHTML = `<span class="err">● API error</span> · ${err.message} · <a href="https://www.are.na/aesthetic-computer/${SLUG}">View channel on are.na</a>`;
478
478
}
479
479
})();
480
480
</script>