Monorepo for Aesthetic.Computer
aesthetic.computer
are.na-annual: final polish — rename title + channel, drop Bo En
- Essay title on the page: "The Score That Teaches Itself" →
"Whistlegraph and the Self-Teaching Score" (subject first, category
second — classic case-through-concept construction).
- Channel on are.na renamed to "Self-Teaching Scores" (slug:
the-score-that-teaches-itself → self-teaching-scores). Channel is
the bibliography; essay is the book. They don't need to match.
- Drop Bo En references from pitch prose and lineage table.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+16
-17
+3
-3
gigs/are-na-annual-vol-8/README.md
+3
-3
gigs/are-na-annual-vol-8/README.md
···
6
6
- **Submission form:** https://aredotna.notion.site/3178a0f816d9815abdf3cb1624bb9e88
7
7
- **Deadline:** Monday, April 20, 2026 — 11:59pm EST
8
8
- **Honorarium:** $200 (published pieces, book releases December 2026)
9
-
- **Submitted channel:** [the score that teaches itself](https://www.are.na/aesthetic-computer/the-score-that-teaches-itself) — 68 blocks
9
+
- **Submitted channel:** [Self-Teaching Scores](https://www.are.na/aesthetic-computer/self-teaching-scores) — 68 blocks
10
10
11
11
## Pitch (tightened, ~170 words)
12
12
13
-
> **Channel:** *The Score That Teaches Itself* — whistlegraphs alongside Cardew's *Treatise*, Cage's *Fontana Mix*, shape-note hymnals, Fluxus event scores, skateboard lines.
13
+
> **Channel:** *Self-Teaching Scores* — whistlegraphs alongside Cardew's *Treatise*, Cage's *Fontana Mix*, shape-note hymnals, Fluxus event scores, skateboard lines.
14
14
>
15
15
> 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.
16
16
>
···
51
51
52
52
Two scripts, both auth via `ARENA_TOKEN` env var. A personal access token is created at https://dev.are.na/oauth/applications → any app → "Access Token." The OAuth code-exchange path used to originally mint this token is described in [reference_arena.md](../../../../../../.claude/projects/-Users-jas-aesthetic-computer/memory/reference_arena.md) (local auto-memory, not in the repo).
53
53
54
-
- [seed-channel.mjs](seed-channel.mjs) — posts 68 blocks to `the-score-that-teaches-itself` in reverse reading order (so whistlegraph lands on top).
54
+
- [seed-channel.mjs](seed-channel.mjs) — posts 68 blocks to `self-teaching-scores` in reverse reading order (so whistlegraph lands on top).
55
55
- [set-descriptions.mjs](set-descriptions.mjs) — walks the channel and PUTs a per-block description from the lookup map.
56
56
57
57
```sh
+2
-2
gigs/are-na-annual-vol-8/channel-blocks.md
+2
-2
gigs/are-na-annual-vol-8/channel-blocks.md
···
1
-
# Channel — the score that teaches itself
1
+
# Channel — Self-Teaching Scores
2
2
3
-
68 blocks on https://www.are.na/aesthetic-computer/the-score-that-teaches-itself, organized bottom-up (reading order on the channel page is top-down, so this list reads in the order the reader encounters the channel from top).
3
+
68 blocks on https://www.are.na/aesthetic-computer/self-teaching-scores, organized bottom-up (reading order on the channel page is top-down, so this list reads in the order the reader encounters the channel from top).
4
4
5
5
## §10 — Whistlegraph (top of channel)
6
6
+2
-2
gigs/are-na-annual-vol-8/seed-channel.mjs
+2
-2
gigs/are-na-annual-vol-8/seed-channel.mjs
···
1
1
#!/usr/bin/env node
2
-
// Seed blocks into the Are.na channel "the-score-that-teaches-itself".
2
+
// Seed blocks into the Are.na channel "self-teaching-scores".
3
3
// Blocks are added in reading-bottom → reading-top order so whistlegraph lands
4
4
// first on the channel page.
5
5
//
6
6
// Usage: ARENA_TOKEN=... node seed-channel.mjs
7
7
8
8
const TOKEN = process.env.ARENA_TOKEN;
9
-
const SLUG = "the-score-that-teaches-itself";
9
+
const SLUG = "self-teaching-scores";
10
10
if (!TOKEN) { console.error("ARENA_TOKEN missing"); process.exit(1); }
11
11
12
12
const blocks = [
+1
-1
gigs/are-na-annual-vol-8/set-descriptions.mjs
+1
-1
gigs/are-na-annual-vol-8/set-descriptions.mjs
···
5
5
// Usage: ARENA_TOKEN=... node set-descriptions.mjs
6
6
7
7
const TOKEN = process.env.ARENA_TOKEN;
8
-
const SLUG = "the-score-that-teaches-itself";
8
+
const SLUG = "self-teaching-scores";
9
9
if (!TOKEN) { console.error("ARENA_TOKEN missing"); process.exit(1); }
10
10
11
11
const bySource = {
+2
-2
gigs/are-na-annual-vol-8/validate-sources.mjs
+2
-2
gigs/are-na-annual-vol-8/validate-sources.mjs
···
1
1
#!/usr/bin/env node
2
-
// Validate the blocks in "the-score-that-teaches-itself":
2
+
// Validate the blocks in "self-teaching-scores":
3
3
// - flag every Wikipedia link (we want primary sources)
4
4
// - for each block, search are.na for existing uses of the same URL
5
5
// and of the topic name — so we can see what other people
···
12
12
//
13
13
// ARENA_TOKEN is optional but greatly raises rate limits.
14
14
15
-
const SLUG = "the-score-that-teaches-itself";
15
+
const SLUG = "self-teaching-scores";
16
16
const TOKEN = process.env.ARENA_TOKEN;
17
17
const API = "https://api.are.na/v2";
18
18
+6
-7
system/public/are.na-annual/index.html
+6
-7
system/public/are.na-annual/index.html
···
3
3
<head>
4
4
<meta charset="utf-8">
5
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>
6
+
<title>whistlegraph and the self-teaching score · are.na annual vol. 8 pitch</title>
7
7
<meta name="description" content="Jeffrey Alan Scudder's pitch for Are.na Annual Vol. 8 (theme: Score) — whistlegraph as the first viral graphic score.">
8
8
<link rel="icon" href="https://aesthetic.computer/icon/128x128/prompt.png" type="image/png">
9
9
<link rel="stylesheet" href="https://aesthetic.computer/type/webfonts/berkeley-mono-variable.css">
···
282
282
283
283
<header class="mast">
284
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>
285
+
<h1>Whistlegraph<br>and the <em>Self-Teaching<br>Score</em><span class="dot">.</span></h1>
286
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>
288
+
<dt>Channel</dt><dd><a href="https://www.are.na/aesthetic-computer/self-teaching-scores">are.na/aesthetic-computer/self-teaching-scores</a></dd>
289
289
<dt>Form</dt><dd><a href="https://aredotna.notion.site/3178a0f816d9815abdf3cb1624bb9e88">aredotna.notion.site — Vol. 8 submission</a></dd>
290
290
<dt>Due</dt><dd class="due">Mon, 20 Apr 2026 · 11:59 PM EST</dd>
291
291
<dt>Honorarium</dt><dd>$200 · book released Dec 2026</dd>
···
298
298
299
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>, 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>
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 early viral pieces were four strokes, four sung lines — kids learned them faster than most kids learn <em>Twinkle, Twinkle</em>.</p>
302
302
303
303
<p>I want to write about <em>why</em> it worked there.</p>
304
304
···
344
344
<div class="lineage">
345
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
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
347
<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
348
<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
349
<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>
···
368
367
<section>
369
368
<h2><span class="ord">§</span>Submission-Form Version<span class="count">~200 words</span></h2>
370
369
<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>
370
+
<p><em>Whistlegraph and the Self-Teaching Score.</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
371
<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
372
<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
373
<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>
···
395
394
396
395
<script>
397
396
(async () => {
398
-
const SLUG = "the-score-that-teaches-itself";
397
+
const SLUG = "self-teaching-scores";
399
398
const API = `https://api.are.na/v2/channels/${SLUG}/contents?per=100&direction=desc`;
400
399
const statusEl = document.getElementById("channel-status");
401
400
const root = document.getElementById("channel");