Monorepo for Aesthetic.Computer
aesthetic.computer
are.na-annual: rewrite in AC voice + live channel fetch
Ditch the generic editorial look for AC's dark platter palette
(Berkeley Mono + YWFT Processing, pink/cyan/purple/gold). Prose
follows papers/VOICE.md — lowercase, first person, em dashes, no
hedging. Sharpened framing: the 20th-c. graphic score succeeded
as art and failed as communication; whistlegraph removes the
interpretation bug; TikTok was the proof.
Pulled specific references from papers/arxiv-whistlegraph and
papers/arxiv-goodiepal instead of the cliché canon list: bo en,
Alex Freundlich, Camille Klein, Ashland cabin, I'm a Butterfly
lyric, 22-min chalk performance, Jacob Ciocci / Paper Rad zine
(Asher Penn, Sex Magazine), Goodiepal El Camino del Hardcore,
Papert's microworlds, Eshun's sonic fiction, Klee, Lialina/JODI,
Jalaiah Harmon's Renegade.
Channel blocks now render live from the are.na v2 API — real
thumbnails and descriptions for all 68 blocks, grouped by section.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+402
-574
+402
-574
system/public/are.na-annual/index.html
+402
-574
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>the score that teaches itself · are.na annual vol. 8 pitch</title>
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
+
<link rel="icon" href="https://aesthetic.computer/icon/128x128/prompt.png" type="image/png">
9
+
<link rel="stylesheet" href="https://aesthetic.computer/type/webfonts/berkeley-mono-variable.css">
7
10
<style>
11
+
@font-face {
12
+
font-family: 'YWFT Processing';
13
+
src: url('https://aesthetic.computer/type/webfonts/ywft-processing-regular.woff2') format('woff2');
14
+
font-weight: normal;
15
+
font-display: swap;
16
+
}
17
+
@font-face {
18
+
font-family: 'YWFT Processing';
19
+
src: url('https://aesthetic.computer/type/webfonts/ywft-processing-bold.woff2') format('woff2');
20
+
font-weight: bold;
21
+
font-display: swap;
22
+
}
23
+
8
24
: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;
25
+
--bg: #1a1a2e;
26
+
--text: #e8e8e8;
27
+
--dim: #888;
28
+
--pink: #cd5c9b;
29
+
--cyan: #4ecdc4;
30
+
--purple: #7850b4;
31
+
--gold: #d4a017;
32
+
--green: #4ecb71;
33
+
--red: #e06666;
34
+
--box-bg: rgba(255,255,255,0.03);
35
+
--box-border: rgba(255,255,255,0.10);
36
+
}
37
+
@media (prefers-color-scheme: light) {
38
+
:root:not(.dark-mode) {
39
+
--bg: #f5f5f5;
40
+
--text: #1a1a2e;
41
+
--dim: #666;
42
+
--pink: #b4489a;
43
+
--cyan: #0891b2;
44
+
--purple: #7850b4;
45
+
--gold: #a07800;
46
+
--green: #0a8a3e;
47
+
--red: #b33a3a;
48
+
--box-bg: rgba(0,0,0,0.03);
49
+
--box-border: rgba(0,0,0,0.12);
50
+
}
15
51
}
16
-
* { box-sizing: border-box; }
17
-
html, body { margin: 0; background: var(--paper); color: var(--ink); }
52
+
53
+
* { margin: 0; padding: 0; box-sizing: border-box; }
54
+
::-webkit-scrollbar { display: none; }
55
+
56
+
html, body { background: var(--bg); color: var(--text); }
18
57
body {
19
-
font-family: var(--serif);
20
-
font-size: 17px;
58
+
font-family: 'Berkeley Mono Variable', 'Menlo', monospace;
59
+
font-size: 13px;
21
60
line-height: 1.55;
22
-
padding: 48px 24px 120px;
61
+
-webkit-text-size-adjust: none;
62
+
padding: 1.4em 1.6em 4em;
63
+
min-height: 100vh;
23
64
}
24
-
.wrap { max-width: 760px; margin: 0 auto; }
65
+
@media (min-width: 900px) { body { padding: 1.8em 2.2em 5em; } }
66
+
67
+
a { color: var(--cyan); text-decoration: none; }
68
+
a:hover { color: var(--pink); }
69
+
70
+
.wrap { max-width: 900px; margin: 0 auto; }
71
+
72
+
/* ── MASTHEAD ─────────────────────────────── */
73
+
.mast { margin-bottom: 2em; }
25
74
.eyebrow {
26
-
font-family: var(--mono);
27
-
font-size: 11px;
75
+
color: var(--dim);
76
+
font-size: 0.75em;
28
77
letter-spacing: 0.18em;
29
78
text-transform: uppercase;
30
-
color: var(--ink);
31
-
opacity: 0.65;
32
-
margin-bottom: 20px;
33
79
}
80
+
.eyebrow .tag { color: var(--pink); }
81
+
34
82
h1 {
35
-
font-family: var(--serif);
36
-
font-weight: 500;
37
-
font-style: italic;
38
-
font-size: 44px;
39
-
line-height: 1.1;
83
+
font-family: 'YWFT Processing', 'Berkeley Mono Variable', monospace;
84
+
font-size: clamp(32px, 5.6vw, 56px);
85
+
font-weight: normal;
40
86
letter-spacing: -0.01em;
41
-
margin: 0 0 8px;
87
+
line-height: 1.02;
88
+
margin: 0.2em 0 0.2em;
42
89
}
43
-
h1 small {
44
-
display: block;
45
-
font-family: var(--mono);
90
+
h1 .dot { color: var(--pink); }
91
+
h1 em {
46
92
font-style: normal;
47
-
font-size: 12px;
48
-
letter-spacing: 0.14em;
49
-
text-transform: uppercase;
50
-
color: var(--accent);
51
-
margin-top: 18px;
93
+
color: var(--cyan);
52
94
}
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);
95
+
96
+
.sub {
97
+
color: var(--dim);
98
+
font-size: 0.95em;
99
+
margin-bottom: 1.1em;
61
100
}
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;
101
+
.sub strong { color: var(--text); font-weight: normal; }
102
+
103
+
.meta {
104
+
display: grid;
105
+
grid-template-columns: max-content 1fr;
106
+
gap: 0.15em 1.2em;
107
+
padding: 0.8em 1em;
108
+
background: var(--box-bg);
109
+
border: 1px solid var(--box-border);
110
+
border-radius: 4px;
111
+
font-size: 0.88em;
71
112
}
72
-
.pitch p { margin: 0 0 14px; }
73
-
.pitch strong { font-weight: 600; }
113
+
.meta dt { color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85em; padding-top: 0.18em; }
114
+
.meta dd { margin: 0; }
115
+
.meta .due { color: var(--gold); }
116
+
117
+
/* ── SECTIONS ─────────────────────────────── */
118
+
section { margin: 2.4em 0; }
74
119
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);
120
+
font-family: 'YWFT Processing', 'Berkeley Mono Variable', monospace;
121
+
font-size: 1.4em;
122
+
font-weight: normal;
123
+
color: var(--text);
124
+
letter-spacing: 0;
125
+
padding-bottom: 0.3em;
126
+
border-bottom: 1px solid var(--box-border);
127
+
margin-bottom: 1em;
82
128
}
83
-
h2 .count {
84
-
float: right;
85
-
opacity: 0.55;
86
-
font-weight: normal;
129
+
h2 .ord { color: var(--pink); margin-right: 0.4em; }
130
+
h2 .count { float: right; color: var(--dim); font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.6em; font-family: 'Berkeley Mono Variable', monospace; }
131
+
132
+
/* ── PITCH PROSE ─────────────────────────── */
133
+
.pitch p { margin: 0 0 0.9em; font-size: 0.98em; }
134
+
.pitch p:last-child { margin-bottom: 0; }
135
+
.pitch .drop {
136
+
font-family: 'YWFT Processing', monospace;
137
+
font-size: 1.25em;
138
+
color: var(--cyan);
139
+
display: block;
140
+
margin: 1.4em 0 0.6em;
87
141
}
88
-
.thesis {
142
+
.pitch q {
143
+
quotes: "“" "”";
144
+
color: var(--gold);
89
145
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
146
}
96
-
.triad {
147
+
.pitch em { color: var(--pink); font-style: normal; }
148
+
.pitch .name { color: var(--cyan); }
149
+
150
+
/* ── ANCHORS ──────────────────────────────── */
151
+
.anchors {
97
152
display: grid;
98
-
grid-template-columns: repeat(3, 1fr);
99
-
gap: 10px;
100
-
margin: 24px 0;
153
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
154
+
gap: 0.6em;
155
+
margin: 1em 0;
101
156
}
102
-
.triad div {
103
-
padding: 18px 16px;
104
-
border: 1px solid var(--ink);
105
-
background: #fff;
157
+
.anchor {
158
+
padding: 0.8em 1em;
159
+
background: var(--box-bg);
160
+
border: 1px solid var(--box-border);
161
+
border-left: 2px solid var(--pink);
162
+
border-radius: 3px;
106
163
}
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);
164
+
.anchor b {
165
+
display: block;
166
+
color: var(--pink);
167
+
font-family: 'YWFT Processing', monospace;
168
+
font-size: 1.05em;
169
+
font-weight: normal;
170
+
margin-bottom: 0.2em;
114
171
}
115
-
.triad p { margin: 0; font-size: 14px; line-height: 1.45; }
172
+
.anchor p { margin: 0; color: var(--text); font-size: 0.88em; line-height: 1.5; }
116
173
117
-
.section {
118
-
margin: 44px 0;
119
-
padding: 22px 24px;
120
-
background: #fff;
121
-
border: 1px solid var(--ink);
174
+
/* ── LINEAGE LIST ─────────────────────────── */
175
+
.lineage { display: grid; gap: 0.5em; }
176
+
.lineage .row {
177
+
display: grid;
178
+
grid-template-columns: 120px 1fr;
179
+
gap: 1em;
180
+
padding: 0.5em 0;
181
+
border-bottom: 1px dotted var(--box-border);
182
+
font-size: 0.92em;
122
183
}
123
-
.section header {
124
-
display: flex;
125
-
align-items: baseline;
126
-
gap: 14px;
127
-
margin-bottom: 6px;
184
+
.lineage .row:last-child { border-bottom: none; }
185
+
.lineage .who { color: var(--cyan); }
186
+
.lineage .claim { color: var(--text); }
187
+
.lineage .claim em { color: var(--pink); font-style: normal; }
188
+
189
+
/* ── CHANNEL (live) ───────────────────────── */
190
+
.channel {
191
+
margin-top: 1.2em;
128
192
}
129
-
.section .num {
130
-
font-family: var(--mono);
131
-
font-size: 13px;
132
-
color: var(--accent);
133
-
letter-spacing: 0.1em;
193
+
.channel-status {
194
+
font-size: 0.8em;
195
+
color: var(--dim);
196
+
margin-bottom: 1em;
197
+
padding: 0.4em 0.6em;
198
+
border-left: 2px solid var(--gold);
199
+
background: var(--box-bg);
134
200
}
135
-
.section .name {
136
-
font-family: var(--serif);
137
-
font-style: italic;
138
-
font-size: 22px;
201
+
.channel-status .ok { color: var(--green); }
202
+
.channel-status .err { color: var(--red); }
203
+
204
+
.section-break {
205
+
margin: 1.6em 0 0.6em;
206
+
padding: 0.4em 0;
207
+
border-top: 1px solid var(--box-border);
208
+
font-family: 'Berkeley Mono Variable', monospace;
209
+
text-transform: uppercase;
210
+
letter-spacing: 0.14em;
211
+
font-size: 0.75em;
212
+
color: var(--dim);
139
213
}
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);
214
+
.section-break b { color: var(--pink); font-weight: normal; margin-right: 0.5em; }
215
+
.section-break .note { color: var(--dim); text-transform: none; letter-spacing: 0; margin-left: 0.8em; font-style: italic; }
216
+
217
+
.blocks-grid {
218
+
display: grid;
219
+
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
220
+
gap: 0.8em;
146
221
}
147
-
.blocks { list-style: none; padding: 0; margin: 0; }
148
-
.blocks li {
149
-
padding: 10px 0;
150
-
border-bottom: 1px dotted var(--rule);
222
+
.block {
223
+
display: flex;
224
+
flex-direction: column;
225
+
background: var(--box-bg);
226
+
border: 1px solid var(--box-border);
227
+
border-radius: 3px;
228
+
overflow: hidden;
229
+
transition: border-color 0.1s;
151
230
}
152
-
.blocks li:last-child { border-bottom: none; }
153
-
.blocks .title {
154
-
font-weight: 600;
155
-
font-size: 15px;
231
+
.block:hover { border-color: var(--cyan); }
232
+
.block.text { grid-column: 1 / -1; padding: 0.9em 1.1em; background: transparent; border: none; border-left: 2px solid var(--gold); border-radius: 0; }
233
+
.block.text .txt {
234
+
color: var(--gold);
235
+
font-size: 1.05em;
236
+
line-height: 1.4;
237
+
font-family: 'YWFT Processing', monospace;
156
238
}
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 {
239
+
.block .thumb {
240
+
aspect-ratio: 1 / 1;
241
+
background: #0a0a18 center/cover no-repeat;
160
242
display: block;
161
-
font-size: 14px;
162
-
opacity: 0.78;
163
-
margin-top: 3px;
164
-
font-family: var(--serif);
165
-
font-style: italic;
243
+
border-bottom: 1px solid var(--box-border);
166
244
}
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
-
}
245
+
.block .body { padding: 0.6em 0.8em; display: flex; flex-direction: column; gap: 0.25em; flex: 1; }
246
+
.block .title { color: var(--cyan); font-size: 0.92em; line-height: 1.3; word-break: break-word; }
247
+
.block .title:hover { color: var(--pink); }
248
+
.block .why { color: var(--dim); font-size: 0.82em; line-height: 1.4; margin-top: 0.2em; }
249
+
.block .host { color: var(--purple); font-size: 0.72em; letter-spacing: 0.05em; margin-top: auto; padding-top: 0.4em; }
176
250
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; }
251
+
/* ── CHECKLIST ────────────────────────────── */
252
+
.check { list-style: none; padding: 0; font-size: 0.9em; }
253
+
.check li { padding: 0.35em 0; display: flex; gap: 0.6em; }
254
+
.check li::before { font-family: 'Berkeley Mono Variable', monospace; width: 1em; text-align: center; }
255
+
.check .done { color: var(--dim); }
256
+
.check .done::before { content: "✓"; color: var(--green); }
257
+
.check .todo::before { content: "▸"; color: var(--gold); }
258
+
.check .todo { color: var(--text); }
259
+
.check .todo em { color: var(--gold); font-style: normal; }
196
260
197
261
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;
262
+
margin-top: 4em;
263
+
padding-top: 1em;
264
+
border-top: 1px solid var(--box-border);
265
+
color: var(--dim);
266
+
font-size: 0.75em;
203
267
letter-spacing: 0.08em;
204
-
opacity: 0.7;
205
268
}
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; }
269
+
footer a { color: var(--dim); }
270
+
footer a:hover { color: var(--cyan); }
271
+
272
+
@media (max-width: 560px) {
273
+
body { padding: 1.2em 1em 3em; font-size: 13px; }
274
+
.lineage .row { grid-template-columns: 1fr; gap: 0.1em; }
275
+
.meta { grid-template-columns: 1fr; gap: 0.05em; }
276
+
.meta dt { padding-top: 0.6em; }
214
277
}
215
278
</style>
216
279
</head>
217
280
<body>
218
281
<main class="wrap">
219
282
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>
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>
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>
292
+
</dl>
293
+
</header>
224
294
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>
295
+
<!-- ── PITCH ───────────────────────────────── -->
296
+
<section class="pitch">
297
+
<h2><span class="ord">§</span>pitch</h2>
231
298
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>
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>
239
300
240
-
<div class="thesis">The score teaches you how to play it.</div>
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>
241
302
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>
303
+
<p>i want to write about <em>why</em> it worked there.</p>
257
304
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>
305
+
<span class="drop">the graphic-score tradition failed at one thing.</span>
271
306
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>
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>
299
308
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>
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>
313
310
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>
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>
352
312
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>
313
+
<span class="drop">three registers, one object.</span>
427
314
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>
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>
459
316
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>
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>
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>
501
320
</section>
502
321
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>
322
+
<!-- ── ANCHORS ─────────────────────────────── -->
323
+
<section>
324
+
<h2><span class="ord">§</span>three registers</h2>
325
+
<div class="anchors">
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>
329
+
</div>
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>
333
+
</div>
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>
337
+
</div>
338
+
</div>
532
339
</section>
533
340
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>
341
+
<!-- ── LINEAGE ─────────────────────────────── -->
342
+
<section>
343
+
<h2><span class="ord">§</span>the lineage the essay actually argues<span class="count">specific, not canonical</span></h2>
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>
355
+
</div>
563
356
</section>
564
357
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>
358
+
<!-- ── CHANNEL (live) ──────────────────────── -->
359
+
<section>
360
+
<h2><span class="ord">§</span>the channel<span class="count">live from are.na · 68 blocks</span></h2>
361
+
<div id="channel-status" class="channel-status">
362
+
fetching <span class="ok">api.are.na</span> …
363
+
</div>
364
+
<div id="channel" class="channel"></div>
606
365
</section>
607
366
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>
367
+
<!-- ── CONDENSED ──────────────────────────── -->
368
+
<section>
369
+
<h2><span class="ord">§</span>submission-form version<span class="count">~200 words</span></h2>
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>
375
+
</div>
637
376
</section>
638
377
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>
378
+
<!-- ── CHECKLIST ──────────────────────────── -->
379
+
<section>
380
+
<h2><span class="ord">§</span>status</h2>
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>
387
+
</ul>
388
+
</section>
647
389
648
390
<footer>
649
-
aesthetic.computer/are.na-annual · 2026-04-20
391
+
<a href="https://aesthetic.computer/are.na-annual">aesthetic.computer/are.na-annual</a> · 2026-04-20 · live channel fetch from api.are.na
650
392
</footer>
651
393
652
394
</main>
395
+
396
+
<script>
397
+
(async () => {
398
+
const SLUG = "the-score-that-teaches-itself";
399
+
const API = `https://api.are.na/v2/channels/${SLUG}/contents?per=100&direction=desc`;
400
+
const statusEl = document.getElementById("channel-status");
401
+
const root = document.getElementById("channel");
402
+
403
+
// Reading-order sections (top → bottom of channel page)
404
+
// positions are 1..68 in the channel, 68 = top
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 },
416
+
];
417
+
418
+
function hostname(u) {
419
+
try { return new URL(u).hostname.replace(/^www\./, ""); } catch { return ""; }
420
+
}
421
+
422
+
function sectionFor(pos) {
423
+
for (const s of SECTIONS) if (pos >= s.min) return s;
424
+
return SECTIONS[SECTIONS.length - 1];
425
+
}
426
+
427
+
function renderBlocks(blocks) {
428
+
// Sort top-of-channel first
429
+
const sorted = [...blocks].sort((a, b) => b.position - a.position);
430
+
// Group by section
431
+
const groups = new Map();
432
+
for (const b of sorted) {
433
+
const s = sectionFor(b.position);
434
+
if (!groups.has(s.name)) groups.set(s.name, { s, blocks: [] });
435
+
groups.get(s.name).blocks.push(b);
436
+
}
437
+
438
+
const out = [];
439
+
for (const [name, { s, blocks: bs }] of groups) {
440
+
out.push(`<div class="section-break"><b>${s.name}</b><span class="note">${s.note}</span></div>`);
441
+
out.push(`<div class="blocks-grid">`);
442
+
for (const b of bs) {
443
+
if (b.class === "Text") {
444
+
const txt = (b.content || "").replace(/\*([^*]+)\*/g, "<em>$1</em>");
445
+
out.push(`<div class="block text"><div class="txt">${txt}</div></div>`);
446
+
continue;
447
+
}
448
+
const url = b.source?.url || "#";
449
+
const title = b.title || b.generated_title || url;
450
+
const img = b.image?.display?.url || b.image?.thumb?.url || "";
451
+
const desc = b.description || "";
452
+
const host = hostname(url);
453
+
out.push(
454
+
`<a class="block" href="${url}" target="_blank" rel="noreferrer">` +
455
+
(img ? `<span class="thumb" style="background-image:url('${img}')"></span>` : "") +
456
+
`<div class="body">` +
457
+
`<div class="title">${title}</div>` +
458
+
(desc ? `<div class="why">${desc}</div>` : "") +
459
+
(host ? `<div class="host">${host}</div>` : "") +
460
+
`</div>` +
461
+
`</a>`
462
+
);
463
+
}
464
+
out.push(`</div>`);
465
+
}
466
+
root.innerHTML = out.join("");
467
+
}
468
+
469
+
try {
470
+
const r = await fetch(API);
471
+
if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
472
+
const data = await r.json();
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>`;
475
+
renderBlocks(blocks);
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>`;
478
+
}
479
+
})();
480
+
</script>
653
481
</body>
654
482
</html>