aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<style>
6 /* === AC FONTS === */
7 @font-face {
8 font-family: 'YWFTProcessing-Regular';
9 src: url('../system/public/type/webfonts/ywft-processing-regular.woff2') format('woff2'),
10 url('../system/public/type/webfonts/ywft-processing-regular.woff') format('woff');
11 font-weight: normal; font-style: normal; font-display: swap;
12 }
13 @font-face {
14 font-family: 'YWFTProcessing-Bold';
15 src: url('../system/public/type/webfonts/ywft-processing-bold.woff2') format('woff2'),
16 url('../system/public/type/webfonts/ywft-processing-bold.woff') format('woff');
17 font-weight: normal; font-style: normal; font-display: swap;
18 }
19 @font-face {
20 font-family: 'YWFTProcessing-Light';
21 src: url('../system/public/type/webfonts/ywft-processing-light.woff2') format('woff2'),
22 url('../system/public/type/webfonts/ywft-processing-light.woff') format('woff');
23 font-weight: normal; font-style: normal; font-display: swap;
24 }
25 @font-face {
26 font-family: 'Berkeley Mono Variable';
27 src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff2') format('woff2'),
28 url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff') format('woff');
29 font-weight: normal; font-style: normal;
30 }
31 @font-face {
32 font-family: 'Berkeley Mono Variable';
33 src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Italic.woff2') format('woff2'),
34 url('../system/public/type/webfonts/BerkeleyMonoVariable-Italic.woff') format('woff');
35 font-weight: normal; font-style: italic;
36 }
37
38 * { margin: 0; padding: 0; box-sizing: border-box; }
39
40 @page { size: letter; margin: 0.65in 0.75in; }
41
42 /* === BASE: clean whitepaper prose === */
43 body {
44 font-family: Georgia, 'Times New Roman', serif;
45 font-size: 10pt;
46 line-height: 1.65;
47 color: #1a1a1a;
48 }
49
50 /* === AC-BRANDED ELEMENTS === */
51
52 .title-block {
53 text-align: center;
54 margin-bottom: 1.6em;
55 padding-bottom: 1em;
56 border-bottom: 2.5px solid rgb(64, 56, 74);
57 }
58
59 .title-block h1 {
60 font-family: 'YWFTProcessing-Bold', monospace;
61 font-size: 26pt;
62 letter-spacing: -0.02em;
63 line-height: 1.1;
64 margin-bottom: 0.15em;
65 color: rgb(64, 56, 74);
66 }
67
68 .title-block .subtitle {
69 font-family: 'YWFTProcessing-Light', monospace;
70 font-size: 12pt;
71 color: rgb(180, 72, 135);
72 margin-bottom: 0.5em;
73 }
74
75 .title-block .meta {
76 font-size: 9pt;
77 color: #777;
78 line-height: 1.8;
79 }
80
81 .title-block .meta a {
82 font-family: 'Berkeley Mono Variable', monospace;
83 font-size: 8pt;
84 color: rgb(120, 80, 180);
85 text-decoration: none;
86 }
87
88 /* @handle coloring — pink and purple */
89 .handle { font-family: 'Berkeley Mono Variable', monospace; font-weight: bold; white-space: nowrap; }
90 .handle .at { color: rgb(120, 80, 180); }
91 .handle .name { color: rgb(180, 72, 135); }
92
93 /* === TWO-COLUMN LAYOUT === */
94
95 .columns {
96 column-count: 2;
97 column-gap: 1.8em;
98 column-rule: 1px solid #e0e0e0;
99 }
100
101 h2 {
102 font-family: 'YWFTProcessing-Bold', monospace;
103 font-size: 12pt;
104 margin-top: 1.3em;
105 margin-bottom: 0.35em;
106 text-transform: uppercase;
107 letter-spacing: 0.04em;
108 color: rgb(180, 72, 135);
109 break-after: avoid;
110 }
111
112 h2:first-child { margin-top: 0; }
113
114 p {
115 margin-bottom: 0.6em;
116 text-align: justify;
117 hyphens: auto;
118 }
119
120 ul { margin: 0.3em 0 0.65em 1.1em; }
121 li { margin-bottom: 0.15em; }
122 li strong { color: rgb(64, 56, 74); }
123
124 code {
125 font-family: 'Berkeley Mono Variable', monospace;
126 font-size: 8.5pt;
127 background: rgba(120, 80, 180, 0.07);
128 padding: 0.08em 0.25em;
129 border-radius: 2px;
130 color: rgb(100, 60, 160);
131 }
132
133 em { font-style: italic; }
134
135 /* === SECTION DIVIDERS === */
136 .section-divider {
137 border: none;
138 border-top: 2px solid rgb(64, 56, 74);
139 margin: 1.2em 0 0.8em;
140 }
141
142 /* === APPENDIX SHARED === */
143
144 .appendix-title {
145 font-family: 'YWFTProcessing-Bold', monospace;
146 font-size: 14pt;
147 text-align: center;
148 margin-bottom: 0.15em;
149 text-transform: uppercase;
150 letter-spacing: 0.04em;
151 color: rgb(64, 56, 74);
152 break-after: avoid;
153 }
154
155 .appendix-subtitle {
156 font-family: 'YWFTProcessing-Light', monospace;
157 font-size: 9pt;
158 text-align: center;
159 color: #999;
160 margin-bottom: 1em;
161 break-after: avoid;
162 }
163
164 .appendix-header {
165 break-after: avoid;
166 break-inside: avoid;
167 }
168
169 /* === STAT GRID === */
170
171 .stat-grid {
172 display: grid;
173 grid-template-columns: 1fr 1fr 1fr;
174 gap: 0.45em;
175 margin: 0.6em 0;
176 break-inside: avoid;
177 }
178
179 .stat-box {
180 background: linear-gradient(135deg, rgba(180, 72, 135, 0.05) 0%, rgba(120, 80, 180, 0.05) 100%);
181 border: 1.5px solid rgba(180, 72, 135, 0.18);
182 border-radius: 4px;
183 padding: 0.35em 0.4em;
184 text-align: center;
185 }
186
187 .stat-box .num {
188 font-family: 'YWFTProcessing-Bold', monospace;
189 font-size: 15pt;
190 color: rgb(180, 72, 135);
191 line-height: 1.2;
192 }
193
194 .stat-box .label {
195 font-family: 'Berkeley Mono Variable', monospace;
196 font-size: 7pt;
197 text-transform: uppercase;
198 letter-spacing: 0.08em;
199 color: rgb(120, 80, 180);
200 margin-top: 0.1em;
201 }
202
203 .makers {
204 font-size: 8pt;
205 color: #666;
206 margin: 0.5em 0;
207 text-align: center;
208 }
209 .makers strong { color: rgb(180, 72, 135); font-family: 'Berkeley Mono Variable', monospace; font-size: 8pt; }
210
211 /* === DIAGRAMS === */
212
213 .diagram-box {
214 background: rgba(244, 235, 250, 0.5);
215 border: 1.5px solid rgba(120, 80, 180, 0.18);
216 border-radius: 5px;
217 padding: 0.6em 0.8em;
218 margin: 0.6em 0;
219 break-inside: avoid;
220 }
221
222 .diagram-label {
223 font-family: 'YWFTProcessing-Bold', monospace;
224 font-size: 8pt;
225 color: rgb(120, 80, 180);
226 text-transform: uppercase;
227 letter-spacing: 0.08em;
228 margin-bottom: 0.25em;
229 break-after: avoid;
230 }
231
232 .flow {
233 font-family: 'Berkeley Mono Variable', monospace;
234 font-size: 7pt;
235 line-height: 1.7;
236 text-align: center;
237 color: #333;
238 }
239
240 .flow .arrow { color: rgba(180, 72, 135, 0.5); }
241 .flow .node {
242 font-family: 'YWFTProcessing-Bold', monospace;
243 color: rgb(180, 72, 135);
244 background: rgba(180, 72, 135, 0.1);
245 padding: 0.15em 0.4em;
246 border-radius: 3px;
247 }
248 .flow .note {
249 font-family: 'Berkeley Mono Variable', monospace;
250 color: rgb(120, 80, 180); font-size: 7pt;
251 }
252
253 /* === DOC SAMPLES === */
254
255 .doc-sample {
256 background: #fff;
257 border-left: 3px solid rgb(180, 72, 135);
258 padding: 0.3em 0.5em;
259 margin: 0.35em 0;
260 font-family: 'Berkeley Mono Variable', monospace;
261 font-size: 7pt;
262 line-height: 1.45;
263 color: #444;
264 white-space: pre-wrap;
265 }
266 .doc-sample strong { color: rgb(120, 80, 180); }
267
268 .appendix-cols {
269 column-count: 2;
270 column-gap: 1.6em;
271 margin-top: 0.4em;
272 }
273 .doc-samples { break-inside: avoid; }
274
275 /* === TECH STACK === */
276
277 .stack-grid {
278 display: grid;
279 grid-template-columns: 1fr 1fr;
280 gap: 0.5em;
281 margin: 0.5em 0;
282 }
283
284 .stack-card {
285 background: rgba(244, 235, 250, 0.4);
286 border: 1.5px solid rgba(120, 80, 180, 0.13);
287 border-radius: 4px;
288 padding: 0.4em 0.55em;
289 break-inside: avoid;
290 overflow: hidden;
291 }
292
293 .stack-card-title {
294 font-family: 'YWFTProcessing-Bold', monospace;
295 font-size: 8pt;
296 color: rgb(180, 72, 135);
297 text-transform: uppercase;
298 letter-spacing: 0.06em;
299 margin-bottom: 0.2em;
300 }
301
302 .stack-card ul {
303 font-family: 'Berkeley Mono Variable', monospace;
304 font-size: 7pt;
305 margin: 0.1em 0 0 0.8em;
306 color: #444;
307 line-height: 1.6;
308 }
309 .stack-card li { margin-bottom: 0.12em; }
310
311 .tool-row {
312 display: flex;
313 gap: 0.4em;
314 flex-wrap: wrap;
315 margin: 0.4em 0;
316 }
317
318 .tool-chip {
319 font-family: 'Berkeley Mono Variable', monospace;
320 font-size: 7pt;
321 background: rgba(180, 72, 135, 0.08);
322 color: rgb(140, 50, 110);
323 padding: 0.2em 0.5em;
324 border-radius: 3px;
325 border: 1px solid rgba(180, 72, 135, 0.13);
326 }
327 .tool-chip.green {
328 background: rgba(92, 205, 155, 0.1);
329 color: rgb(30, 120, 80);
330 border-color: rgba(92, 205, 155, 0.2);
331 }
332 .tool-chip.purple {
333 background: rgba(120, 80, 180, 0.08);
334 color: rgb(90, 50, 150);
335 border-color: rgba(120, 80, 180, 0.15);
336 }
337 .tool-chip.blue {
338 background: rgba(60, 120, 200, 0.08);
339 color: rgb(40, 90, 170);
340 border-color: rgba(60, 120, 200, 0.15);
341 }
342
343 .source-box {
344 background: #faf8fc;
345 border: 1.5px solid rgba(120, 80, 180, 0.13);
346 border-radius: 5px;
347 padding: 0.5em 0.7em;
348 margin: 0.5em 0;
349 font-family: 'Berkeley Mono Variable', monospace;
350 font-size: 7pt;
351 line-height: 1.5;
352 color: #555;
353 break-inside: avoid;
354 }
355 .source-box strong {
356 color: rgb(120, 80, 180);
357 font-family: 'YWFTProcessing-Bold', monospace;
358 font-size: 8pt;
359 }
360
361 /* === SITEMAP === */
362
363 .sitemap-section {
364 break-inside: avoid;
365 margin-bottom: 0.5em;
366 }
367
368 .sitemap-header {
369 font-family: 'YWFTProcessing-Bold', monospace;
370 font-size: 8pt;
371 color: rgb(180, 72, 135);
372 text-transform: uppercase;
373 letter-spacing: 0.06em;
374 margin-bottom: 0.15em;
375 padding-bottom: 0.1em;
376 border-bottom: 1px solid rgba(180, 72, 135, 0.18);
377 break-after: avoid;
378 }
379
380 .sitemap-routes {
381 font-family: 'Berkeley Mono Variable', monospace;
382 font-size: 6.5pt;
383 color: #555;
384 line-height: 1.4;
385 display: flex;
386 flex-wrap: wrap;
387 gap: 0.15em 0.6em;
388 }
389
390 .sitemap-route::before { content: "/"; color: rgba(120, 80, 180, 0.35); }
391
392 .sitemap-cols { column-count: 3; column-gap: 1.2em; }
393
394 .domain-grid {
395 display: grid;
396 grid-template-columns: 1fr 1fr 1fr;
397 gap: 0.35em;
398 margin: 0.4em 0;
399 }
400
401 .domain-card {
402 background: rgba(244, 235, 250, 0.4);
403 border: 1.5px solid rgba(120, 80, 180, 0.13);
404 border-radius: 4px;
405 padding: 0.3em 0.4em;
406 text-align: center;
407 overflow: hidden;
408 }
409
410 .domain-name {
411 font-family: 'YWFTProcessing-Bold', monospace;
412 font-size: 8pt;
413 color: rgb(120, 80, 180);
414 overflow: hidden;
415 text-overflow: ellipsis;
416 white-space: nowrap;
417 }
418 .domain-grid-sm .domain-name { font-size: 7pt; }
419
420 .domain-desc {
421 font-family: 'Berkeley Mono Variable', monospace;
422 font-size: 7pt;
423 color: #999;
424 margin-top: 0.1em;
425 }
426
427 /* === PIECE CATALOG === */
428 .piece-catalog {
429 column-count: 3;
430 column-gap: 1em;
431 font-size: 6.5pt;
432 line-height: 1.35;
433 }
434 .piece-cat {
435 break-inside: avoid;
436 margin-bottom: 0.4em;
437 }
438 .piece-cat-header {
439 font-family: 'YWFTProcessing-Bold', monospace;
440 font-size: 8pt;
441 color: rgb(180, 72, 135);
442 text-transform: uppercase;
443 letter-spacing: 0.06em;
444 margin-bottom: 0.1em;
445 padding-bottom: 0.05em;
446 border-bottom: 1px solid rgba(180, 72, 135, 0.18);
447 break-after: avoid;
448 }
449 .pe {
450 margin-bottom: 0.06em;
451 color: #444;
452 }
453 .pe b {
454 font-family: 'Berkeley Mono Variable', monospace;
455 font-weight: normal;
456 color: rgb(120, 80, 180);
457 }
458
459 /* === FOOTER === */
460 .page-footer {
461 font-family: 'Berkeley Mono Variable', monospace;
462 font-size: 7pt;
463 color: #bbb;
464 text-align: center;
465 margin-top: 1.5em;
466 padding-top: 0.5em;
467 border-top: 1px solid #eee;
468 }
469</style>
470</head>
471<body>
472
473<!-- ============ PAGE 1: PROPOSAL ============ -->
474
475<div class="title-block">
476 <h1>Aesthetic<span style="color: rgb(180, 72, 135);">.</span>Computer</h1>
477 <div class="subtitle">Proposal for Social Software Cycle 2</div>
478 <div class="meta">
479 Jeffrey Scudder  / 
480 <span class="handle"><span class="at">@</span><span class="name">jeffrey</span></span><br>
481 Score for Social Software — Cycle 2  ·  DESMA 596/199  ·  March 2026<br>
482 https://aesthetic.computer  · 
483 https://github.com/whistlegraph/aesthetic-computer  · 
484 https://nopaint.art
485 </div>
486</div>
487
488<div class="columns">
489
490<h2>What AC Is</h2>
491
492<p>
493Aesthetic Computer is an open-source, mobile-first runtime and social network for creative computing. Users write, publish, and share small interactive programs called <em>pieces</em> at URLs like <code>aesthetic.computer/paint</code> or <code>@handle/piece-name</code>. The platform has @handles, real-time chat, pixel painting, ephemeral status updates (moods), ATProto integration (identity and Bluesky bridging), a built-in Lisp dialect (KidLisp), multiplayer WebSocket sessions, and user profiles. It has been in continuous open-source development since 2021.
494</p>
495
496<h2>What I Need</h2>
497
498<p>
499I need outside perspective on AC's social design. I've built the technical infrastructure but I can't evaluate the social dynamics from inside the project. Specifically:
500</p>
501
502<ul>
503 <li>What feels opaque when you first encounter the platform?</li>
504 <li>Which social features sustain participation vs. which are socially inert?</li>
505 <li>How does the "instrument" metaphor read to someone encountering it fresh?</li>
506 <li>What would you want to do on AC that you currently can't?</li>
507 <li>Where does the design exclude people it should welcome?</li>
508</ul>
509
510<p>
511These questions need sustained dialogue, not a usability test. I want to develop AC in the open over 10 weeks — sharing what I'm working on, what decisions I'm facing, what the community is doing — and get feedback from the cohort as users and critics.
512</p>
513
514<h2>What AC Has</h2>
515
516<ul>
517 <li><strong>2,798 @handles</strong> — per-character color customization, profile scorecards</li>
518 <li><strong>18,016 chat messages</strong> — real-time group messaging with hearts and custom fonts</li>
519 <li><strong>4,392 paintings</strong> — pixel art published via built-in drawing tools</li>
520 <li><strong>16,174 KidLisp programs</strong> — a 118-function Lisp dialect for generative art</li>
521 <li><strong>265 published pieces</strong> — user-written interactive programs at public URLs</li>
522 <li><strong>351 built-in pieces</strong> — drawing, music, games, programming, social tools</li>
523 <li><strong>22 domains</strong> — aesthetic.computer, kidlisp.com, notepat.com, and more</li>
524</ul>
525
526<p>
527Everyone in the cohort gets an @handle and full access to the platform, the codebase, and the development process.
528</p>
529
530<h2>Why This Cycle</h2>
531
532<p>
533AC's <code>SCORE.md</code> already uses a musical score metaphor to organize the project. The interface works like an instrument — users discover memorizable paths and build literacy through play. The technical infrastructure is mature. The open question is social design: how do these features shape the way people relate to each other? That needs dialogue with people thinking critically about social software.
534</p>
535
536<h2>Practice</h2>
537
538<p>
539I'm Jeffrey Scudder, an artist, educator, and software developer. Before AC I made No Paint (2020), a pixel art tool where non-technical users learned computing through social participation. AC extends that into a full platform. I teach creative computing and have used AC in courses and workshops. I develop across multiple machines (Windows, macOS, Fedora Linux) using a shared Docker devcontainer with Emacs, VS Code, Claude Code, and Fish shell.
540</p>
541
542</div>
543
544<!-- ============ APPENDIX A: NETWORK DATA ============ -->
545
546<hr class="section-divider">
547
548<div class="appendix-header">
549<div class="appendix-title">The Network</div>
550<div class="appendix-subtitle">Live data from AC's MongoDB cluster — March 2, 2026</div>
551</div>
552
553<div class="stat-grid">
554 <div class="stat-box"><div class="num">2,798</div><div class="label">@handles</div></div>
555 <div class="stat-box"><div class="num">18,016</div><div class="label">chat messages</div></div>
556 <div class="stat-box"><div class="num">4,392</div><div class="label">paintings</div></div>
557 <div class="stat-box"><div class="num">2,900</div><div class="label">moods</div></div>
558 <div class="stat-box"><div class="num">16,174</div><div class="label">kidlisp programs</div></div>
559 <div class="stat-box"><div class="num">265</div><div class="label">published pieces</div></div>
560 <div class="stat-box"><div class="num">333</div><div class="label">clocks</div></div>
561 <div class="stat-box"><div class="num">102</div><div class="label">tapes</div></div>
562 <div class="stat-box"><div class="num">93,122</div><div class="label">boot events</div></div>
563</div>
564
565<p class="makers">
566 <strong>Who makes things:</strong>
567 1,067 have painted  · 
568 997 have posted moods  · 
569 59 have written KidLisp  · 
570 19 have published pieces
571</p>
572
573<div class="appendix-cols">
574
575<div class="diagram-box">
576 <div class="diagram-label">The Instrument Loop</div>
577 <div class="flow">
578 <span class="node">prompt</span>
579 <span class="arrow"> → </span>
580 type a piece name
581 <span class="arrow"> → </span>
582 <span class="node">enter</span>
583 <span class="arrow"> → </span>
584 play the piece
585 <span class="arrow"> → </span>
586 <span class="node">esc</span>
587 <span class="arrow"> → </span>
588 back to prompt
589 </div>
590</div>
591
592<div class="diagram-box">
593 <div class="diagram-label">User Data Flow</div>
594 <div class="flow">
595 <span class="node">@handle</span>
596 <span class="arrow"> → </span>
597 paint / chat / mood / kid / publish
598 <span class="arrow"> → </span>
599 <span class="node">MongoDB</span>
600 <span class="arrow"> → </span>
601 profile
602 <span class="arrow"> → </span>
603 <span class="node">public URL</span>
604 <br>
605 <span class="note">ATProto PDS → Bluesky (identity + moods)  ·  paintings → DO Spaces CDN</span>
606 </div>
607</div>
608
609<div class="doc-samples">
610 <div class="diagram-label">Sample Documents (live)</div>
611 <div class="doc-sample"><strong>mood</strong> { mood: "studying astronomy", when: "2026-03-02T12:32:49Z", atproto: { rkey: "3mg3b6jcj4k2x" } }</div>
612 <div class="doc-sample"><strong>painting</strong> { code: "gfl", slug: "2026.03.02.14.14.39", when: "2026-03-02T13:14:48Z" }</div>
613 <div class="doc-sample"><strong>kidlisp</strong> { code: "27z", source: "fade:red-blue-black-blue-red\nscroll (* 100 amp)", hits: 1 }</div>
614 <div class="doc-sample"><strong>chat</strong> { text: "y'all gonna piss me off", when: "2026-03-02T05:26:25Z", font: "font_1" }</div>
615 <div class="doc-sample"><strong>piece</strong> { code: "zod", slug: "zod", name: "3d-cube", extension: ".mjs", hits: 1 }</div>
616</div>
617
618</div>
619
620<!-- ============ APPENDIX B: ARCHITECTURE & SITEMAP ============ -->
621
622<div class="appendix-header" style="margin-top: 1.2em;">
623<div class="appendix-title">Architecture & Sitemap</div>
624<div class="appendix-subtitle">22 domains  ·  ~355 disk routes  ·  ~85 API endpoints  ·  open source since 2021</div>
625</div>
626
627<!-- SERVICES: each domain mapped to its tech -->
628<div class="stack-grid" style="grid-template-columns: 1fr 1fr 1fr; gap: 0.4em; margin-bottom: 0.6em;">
629
630 <div class="stack-card">
631 <div class="stack-card-title">aesthetic.computer</div>
632 <ul>
633 <li>Netlify — ~85 API endpoints, edge functions</li>
634 <li>Canvas 2D + WebGL2 frontend</li>
635 <li>ES Modules, WebSocket hot-reload</li>
636 <li>Auth0, Firebase, Stripe</li>
637 <li>351 built-in pieces</li>
638 </ul>
639 </div>
640
641 <div class="stack-card">
642 <div class="stack-card-title">session server</div>
643 <ul>
644 <li>Fastify + Geckos.io (WebSocket)</li>
645 <li>Jamsocket ephemeral containers</li>
646 <li>Redis state sync</li>
647 <li>Chat, multiplayer, rooms</li>
648 <li>DigitalOcean + pm2</li>
649 </ul>
650 </div>
651
652 <div class="stack-card">
653 <div class="stack-card-title">oven.aesthetic.computer</div>
654 <ul>
655 <li>Express.js + FFmpeg</li>
656 <li>Tape → MP4, screenshots</li>
657 <li>OG image generation</li>
658 <li>Caddy (auto HTTPS)</li>
659 <li>DigitalOcean droplet</li>
660 </ul>
661 </div>
662
663 <div class="stack-card">
664 <div class="stack-card-title">feed.* / grab.*</div>
665 <ul>
666 <li>Cloudflare Workers</li>
667 <li>Hono + TypeScript (feed)</li>
668 <li>Browser Rendering API (grab)</li>
669 <li>KV, Durable Objects</li>
670 </ul>
671 </div>
672
673 <div class="stack-card">
674 <div class="stack-card-title">data layer</div>
675 <ul>
676 <li>MongoDB Atlas — user content</li>
677 <li>Redis — session cache</li>
678 <li>DO Spaces (S3 CDN) — media</li>
679 <li>ATProto PDS — identity + Bluesky</li>
680 </ul>
681 </div>
682
683 <div class="stack-card">
684 <div class="stack-card-title">kidlisp.com</div>
685 <ul>
686 <li>118 built-in functions, 12 categories</li>
687 <li>Evaluator: lib/kidlisp.mjs</li>
688 <li>Programs stored in MongoDB</li>
689 <li>Shareable by 3-char code</li>
690 </ul>
691 </div>
692
693</div>
694
695<!-- Source + tools + domains compact -->
696<div class="source-box" style="margin-bottom: 0.5em;">
697 <strong>Source:</strong> github.com/whistlegraph/aesthetic-computer  · 
698 boot.mjs → bios.mjs → disk.mjs (~572KB API) → disks/*.mjs<br>
699 <strong>Languages:</strong> JavaScript (ES Modules), TypeScript (workers), KidLisp, HTML/CSS<br>
700 <strong>Dev:</strong> Docker devcontainer across Windows / macOS / Fedora  ·  Emacs (Evil mode) + VS Code + Claude Code  ·  Fish shell  ·  esbuild, Jasmine, Vitest, Wrangler, pm2<br>
701 <strong>22 domains:</strong> notepat.com, kidlisp.com, sotce.net, botce.ac, wipppps.world + subdomains (feed, grab, help, oven, etc.)
702</div>
703
704<!-- PIECE CATALOG with descriptions -->
705<div class="diagram-label" style="margin-top: 0.3em; margin-bottom: 0.3em; font-size: 8pt;">362 Pieces — type a name at the prompt to play</div>
706<div class="piece-catalog">
707
708<div class="piece-cat">
709<div class="piece-cat-header">Drawing & Painting</div>
710<div class="pe"><b>paint</b> AI-powered auto-painting from text</div>
711<div class="pe"><b>nopaint</b> paint or reject, then publish</div>
712<div class="pe"><b>line</b> simple line brush</div>
713<div class="pe"><b>pline</b> perfect 1px line algorithm</div>
714<div class="pe"><b>shape</b> filled freehand shapes</div>
715<div class="pe"><b>oval</b> draw ovals and circles</div>
716<div class="pe"><b>box</b> rectangles with modes + thickness</div>
717<div class="pe"><b>fill</b> flood fill with a color</div>
718<div class="pe"><b>spray</b> stylus-based spray painting</div>
719<div class="pe"><b>smear</b> smear brush (co-designed by Rapter)</div>
720<div class="pe"><b>marker</b> brush interpolation tool</div>
721<div class="pe"><b>crayon</b> draw with a crayon</div>
722<div class="pe"><b>sparkle-brush</b> sparkle emitter</div>
723<div class="pe"><b>bits</b> confetti/speckle brush</div>
724<div class="pe"><b>multipen</b> multi-touch tracked cursors</div>
725<div class="pe"><b>doodle</b> build up and replay points</div>
726<div class="pe"><b>wand</b> generative art viewer</div>
727<div class="pe"><b>blur</b> blur pixels with a radius</div>
728<div class="pe"><b>crop</b> crop or extend painting</div>
729<div class="pe"><b>stamp</b> import painting as stamp</div>
730<div class="pe"><b>pull</b> copy + move pixels</div>
731<div class="pe"><b>snap</b> camera still to painting</div>
732<div class="pe"><b>camera</b> paste stills to painting</div>
733<div class="pe"><b>paste</b> load external image</div>
734<div class="pe"><b>handprint</b> stamp your hand</div>
735<div class="pe"><b>selfie</b> decorated photo (w/ Molly Soda)</div>
736<div class="pe"><b>painting</b> view any painting by number</div>
737<div class="pe"><b>paintings</b> user portfolio page</div>
738<div class="pe"><b>colors</b> scrollable CSS color list</div>
739<div class="pe"><b>nail</b> multiplayer thumbnailing</div>
740<div class="pe"><b>wipe</b> clear painting with a color</div>
741<div class="pe"><b>icon</b> add vector glyphs (Molly Soda)</div>
742<div class="pe"><b>colplay</b> painting as tonal keyboard</div>
743<div class="pe"><b>make</b> KidLisp from text prompts</div>
744<div class="pe"><b>vary</b> AI-vary an existing image</div>
745</div>
746
747<div class="piece-cat">
748<div class="piece-cat-header">Music & Audio</div>
749<div class="pe"><b>notepat</b> tap pads to play notes</div>
750<div class="pe"><b>beat</b> rhythmic percussion</div>
751<div class="pe"><b>tone</b> single frequency + wave type</div>
752<div class="pe"><b>chord</b> play a musical chord</div>
753<div class="pe"><b>melody</b> plays back a tracker score</div>
754<div class="pe"><b>song</b> melody + lyrics sing-along</div>
755<div class="pe"><b>sing</b> character responds with notes</div>
756<div class="pe"><b>bleep</b> colored box tone maker</div>
757<div class="pe"><b>say</b> text-to-speech</div>
758<div class="pe"><b>whistle</b> mic input → sine wave melody</div>
759<div class="pe"><b>metronome</b> visual metronome</div>
760<div class="pe"><b>microphone</b> audio + video monitor</div>
761<div class="pe"><b>uke</b> live ukulele pitch detector</div>
762<div class="pe"><b>pedal</b> audio effect pedal for Ableton</div>
763<div class="pe"><b>amp</b> microphone amplifier</div>
764<div class="pe"><b>tracker</b> 12-tone composer</div>
765<div class="pe"><b>3x3</b> ortholinear pad instrument</div>
766<div class="pe"><b>rattle</b> accelerometer shaker</div>
767<div class="pe"><b>squaresong</b> a song as a program</div>
768<div class="pe"><b>dync</b> percussive pad instrument</div>
769<div class="pe"><b>slip</b> single voice instrument</div>
770<div class="pe"><b>clock</b> clock with melody + live keyboard</div>
771<div class="pe"><b>clocks</b> browse saved clock melodies</div>
772<div class="pe"><b>stick</b> render clock melody to WAV</div>
773<div class="pe"><b>amby</b> tonal radial music generator</div>
774<div class="pe"><b>autopat</b> notepat autoplay jukebox</div>
775<div class="pe"><b>stample</b> spread a sample across pats</div>
776<div class="pe"><b>sfx</b> sound effects player</div>
777<div class="pe"><b>bgm</b> background music + visualizer</div>
778<div class="pe"><b>r8dio</b> Danish talk radio stream</div>
779<div class="pe"><b>kpbj</b> KPBJ.FM community radio</div>
780<div class="pe"><b>audio</b> longform player + subtitles</div>
781<div class="pe"><b>butterflies</b> multi-touch bitmap instrument</div>
782<div class="pe"><b>seashells</b> bytebeat algorithmic synthesis</div>
783<div class="pe"><b>shh</b> noise drones</div>
784<div class="pe"><b>notepat-tv</b> remote notepat pictures</div>
785</div>
786
787<div class="piece-cat">
788<div class="piece-cat-header">Games & Interactive</div>
789<div class="pe"><b>1v1</b> multiplayer Quake-like 3D shooter</div>
790<div class="pe"><b>brick-breaker</b> brick breakout game</div>
791<div class="pe"><b>scawy-snake</b> snake game with color growth</div>
792<div class="pe"><b>run&gun</b> 2D side-scrolling shooter</div>
793<div class="pe"><b>hop</b> first-person shooter</div>
794<div class="pe"><b>sno</b> snowball game (ida, mxsage, jeffrey)</div>
795<div class="pe"><b>words</b> Word Munchers-style game</div>
796<div class="pe"><b>gostop</b> body movement regulation game</div>
797<div class="pe"><b>staka</b> stack colors with your hand</div>
798<div class="pe"><b>flap</b> animated flapping sequence</div>
799<div class="pe"><b>fly</b> bounce around in 3D</div>
800<div class="pe"><b>field</b> open 3D walking space</div>
801<div class="pe"><b>pond</b> chat in ripples</div>
802<div class="pe"><b>bubble</b> floating bubbles (mxsage + jeffrey)</div>
803<div class="pe"><b>balls</b> balls bouncing on lines</div>
804<div class="pe"><b>rain</b> rain falling (drawn by Aspen)</div>
805<div class="pe"><b>toss</b> two oscillators at once</div>
806<div class="pe"><b>starfield</b> classic starfield effect</div>
807<div class="pe"><b>metaballs</b> blob rendering</div>
808<div class="pe"><b>ant</b> colony simulation + pheromones</div>
809<div class="pe"><b>fps</b> basic first-person environment</div>
810<div class="pe"><b>game</b> basic game template</div>
811<div class="pe"><b>horizon</b> side-scrolling world</div>
812<div class="pe"><b>i</b> walk as the letter "i"</div>
813<div class="pe"><b>paintball</b> paint on a 3D ball</div>
814<div class="pe"><b>cards</b> playing card (tap to flip)</div>
815<div class="pe"><b>tremory</b> temporal memory trainer</div>
816</div>
817
818<div class="piece-cat">
819<div class="piece-cat-header">Social & Community</div>
820<div class="pe"><b>mood</b> choose a mood + build image</div>
821<div class="pe"><b>moods</b> live feed of all moods</div>
822<div class="pe"><b>chat</b> multiplayer messaging</div>
823<div class="pe"><b>share</b> QR code link sharing</div>
824<div class="pe"><b>sign</b> IRL message, upside down</div>
825<div class="pe"><b>signature</b> timestamped painting stamp</div>
826<div class="pe"><b>mail</b> email preferences + blast history</div>
827<div class="pe"><b>list</b> comprehensive piece directory</div>
828<div class="pe"><b>handle</b> customize @handle colors</div>
829<div class="pe"><b>handles</b> directory of all handles</div>
830<div class="pe"><b>get-handle</b> claim your @handle</div>
831<div class="pe"><b>profile</b> public user scorecard</div>
832<div class="pe"><b>ptt</b> push-to-talk voice chat</div>
833<div class="pe"><b>handtime</b> hand-based messaging</div>
834<div class="pe"><b>insta</b> browse Instagram profiles</div>
835<div class="pe"><b>play</b> dramaturgical messaging game</div>
836</div>
837
838<div class="piece-cat">
839<div class="piece-cat-header">Characters</div>
840<div class="pe"><b>mom</b> doting mother</div>
841<div class="pe"><b>dad</b> handyman disguised as father</div>
842<div class="pe"><b>brother</b> younger brother</div>
843<div class="pe"><b>sister</b> know-it-all sister</div>
844<div class="pe"><b>husband</b> forgetful husband</div>
845<div class="pe"><b>wife</b> nagging wife</div>
846<div class="pe"><b>boyfriend</b> avoidant boyfriend</div>
847<div class="pe"><b>girlfriend</b> GF with savior complex</div>
848<div class="pe"><b>kid</b> software kid</div>
849<div class="pe"><b>angel</b> guardian angel (Judeo-Christian)</div>
850<div class="pe"><b>liar</b> compulsive liar</div>
851<div class="pe"><b>sage</b> walker demo (mxsage + jeffrey)</div>
852<div class="pe"><b>tobby</b> type characters in time</div>
853<div class="pe"><b>valbear</b> valentine bear card maker</div>
854<div class="pe"><b>gargoyle</b> character (@georgica)</div>
855<div class="pe"><b>dolls</b> 2D cartoon videos with mic</div>
856<div class="pe"><b>robo</b> robot drawing automation</div>
857<div class="pe"><b>botce</b> paywalled AI chatbot</div>
858</div>
859
860<div class="piece-cat">
861<div class="piece-cat-header">KidLisp & Programming</div>
862<div class="pe"><b>kidlisp</b> default KidLisp piece</div>
863<div class="pe"><b>keep</b> preserve KidLisp as Tezos KEEP</div>
864<div class="pe"><b>kept</b> view KEEP mint result</div>
865<div class="pe"><b>prompt</b> LLM-backed "access-everything" console</div>
866<div class="pe"><b>learn</b> chatbot tutorial</div>
867<div class="pe"><b>lang</b> interface language chooser</div>
868<div class="pe"><b>decode</b> tokens → poems</div>
869<div class="pe"><b>encode</b> poems → tokens</div>
870<div class="pe"><b>docgen</b> generate piece API docs</div>
871<div class="pe"><b>$</b> live KidLisp code preview feed</div>
872<div class="pe"><b>pack</b> offline HTML for KidLisp piece</div>
873<div class="pe"><b>code</b> graphical KidLisp editor (.lisp)</div>
874<div class="pe"><b>chart</b> make a piece from a diagram</div>
875</div>
876
877<div class="piece-cat">
878<div class="piece-cat-header">Sequencing & Routing</div>
879<div class="pe"><b>merry</b> URL-able piece sequencer with timing</div>
880<div class="pe"><b>merryo</b> looping merry (plays forever)</div>
881<div class="pe"><b>mo</b> quick looping merry shorthand</div>
882<div class="pe"><b>merry-fade</b> crossfade between KidLisp $codes</div>
883<div class="pe"><b>pip</b> piece-in-piece, run multiple at once</div>
884<div class="pe"><b>split</b> two AC instances side by side</div>
885<div class="pe"><b>m4d</b> generate Max for Live device (prompt cmd)</div>
886</div>
887
888<div class="piece-cat">
889<div class="piece-cat-header">Whistlegraph & Media</div>
890<div class="pe"><b>whistlegraph</b> 2D recording tool</div>
891<div class="pe"><b>wg</b> Feral File card player</div>
892<div class="pe"><b>wgr</b> whistlegraph recorder</div>
893<div class="pe"><b>wipppps</b> audio-reactive fractals</div>
894<div class="pe"><b>neo-wipppps</b> wipppps music visualizations</div>
895<div class="pe"><b>m2w2</b> Music 2 Whistlegraph 2 instrumentals</div>
896<div class="pe"><b>stage</b> performance tool</div>
897<div class="pe"><b>tv</b> vertical tape feed ("For You")</div>
898<div class="pe"><b>tapes</b> browse recent tapes</div>
899<div class="pe"><b>replay</b> view any tape recording</div>
900<div class="pe"><b>video</b> playback + export video</div>
901<div class="pe"><b>cap</b> camera video recorder</div>
902<div class="pe"><b>screen</b> mirror system display</div>
903<div class="pe"><b>desk</b> webcam/Elmo selector</div>
904<div class="pe"><b>screenshots</b> browse dev screenshots</div>
905</div>
906
907<div class="piece-cat">
908<div class="piece-cat-header">Visualization & Art</div>
909<div class="pe"><b>halley</b> Halley's method fractal</div>
910<div class="pe"><b>morpho</b> pixel sorting morphogenesis lab</div>
911<div class="pe"><b>noise</b> noise on every pixel</div>
912<div class="pe"><b>rainbow-x</b> centered rainbow X</div>
913<div class="pe"><b>neural-garden</b> GPT learns drawing gestures</div>
914<div class="pe"><b>a-star</b> A* pathfinding demo</div>
915<div class="pe"><b>zzzwap</b> dynamic pathfinding for wipppps</div>
916<div class="pe"><b>spline</b> interactive line with curves</div>
917<div class="pe"><b>digitpain0–3</b> animated DIGITPAIN series</div>
918<div class="pe"><b>hell_-world</b> random hell_ painting viewer</div>
919<div class="pe"><b>freaky-flowers</b> random Freaky Flower token</div>
920<div class="pe"><b>commits</b> live GitHub commit visualization</div>
921<div class="pe"><b>visualizer</b> color history decay effect</div>
922<div class="pe"><b>lmn-flower</b> pull a petal</div>
923<div class="pe"><b>lmn-petal</b> touch an interactive petal</div>
924<div class="pe"><b>opinion</b> essays on computing & creativity</div>
925<div class="pe"><b>weather</b> Weather Channel + smooth jazz</div>
926</div>
927
928<div class="piece-cat">
929<div class="piece-cat-header">System & Utility</div>
930<div class="pe"><b>about</b> AC Q&A chatbot</div>
931<div class="pe"><b>demo</b> what is aesthetic.computer?</div>
932<div class="pe"><b>deck</b> slide deck explainer</div>
933<div class="pe"><b>description</b> read about any command</div>
934<div class="pe"><b>desktop</b> download Electron desktop app</div>
935<div class="pe"><b>mobile</b> download iOS/Android app</div>
936<div class="pe"><b>os</b> bootable FedAC OS image</div>
937<div class="pe"><b>theme</b> prompt theme chooser</div>
938<div class="pe"><b>token</b> display auth token (3 taps)</div>
939<div class="pe"><b>wallet</b> animated Tezos wallet display</div>
940<div class="pe"><b>connect-wallet</b> wallet connection page</div>
941<div class="pe"><b>download</b> screenshottable download screen</div>
942<div class="pe"><b>ads</b> advertise on AC</div>
943<div class="pe"><b>mug</b> ceramic mug with your painting</div>
944<div class="pe"><b>mugs</b> browse recent mugs</div>
945<div class="pe"><b>boots</b> boot telemetry viewer</div>
946<div class="pe"><b>booted-by</b> who booted AC</div>
947<div class="pe"><b>404</b> error page</div>
948<div class="pe"><b>delete-erase-and-forget-me</b> delete account</div>
949</div>
950
951<div class="piece-cat">
952<div class="piece-cat-header">Translation</div>
953<div class="pe"><b>english</b> / <b>en</b> translate to English</div>
954<div class="pe"><b>danish</b> / <b>da</b> translate to Danish</div>
955<div class="pe"><b>spanish</b> / <b>es</b> translate to Spanish</div>
956</div>
957
958<div class="piece-cat">
959<div class="piece-cat-header">External & Hardware</div>
960<div class="pe"><b>ableton</b> Max for Live device browser</div>
961<div class="pe"><b>aframe</b> A-Frame VR drawing (WebXR)</div>
962<div class="pe"><b>gameboy</b> GameBoy emulator</div>
963<div class="pe"><b>gamepad</b> gamepad connectivity test</div>
964<div class="pe"><b>ff1</b> send art to FF1 Art Computer</div>
965<div class="pe"><b>ordfish</b> virtual fish viewer</div>
966<div class="pe"><b>ordsy</b> B&W ordsy picture palette</div>
967<div class="pe"><b>snappidaggs</b> Goodiepal archive browser</div>
968<div class="pe"><b>prutti</b> Lessons NOT Learnt (Goodiepal)</div>
969<div class="pe"><b>triquilt</b> half-square triangle quilt tool</div>
970<div class="pe"><b>hueber</b> psychedelic Uber</div>
971</div>
972
973<div class="piece-cat">
974<div class="piece-cat-header">Education & Workshop</div>
975<div class="pe"><b>ucla-1</b> – <b>ucla-7</b> UCLA workshop lessons</div>
976<div class="pe">+ <b>-keyboard</b> <b>-box</b> <b>-turtle</b> <b>-balls</b> <b>-dial</b> <b>-jump</b> variants</div>
977<div class="pe"><b>baktok</b> learn to talk backwards</div>
978<div class="pe"><b>laer-klokken</b> learn the clock</div>
979<div class="pe"><b>alphapoet</b> alphabetical nonsense poet</div>
980</div>
981
982<div class="piece-cat">
983<div class="piece-cat-header">ABC123 Series (36)</div>
984<div class="pe"><b>a</b>–<b>z</b> interactive letters with musical notes</div>
985<div class="pe"><b>0</b>–<b>9</b> interactive numbers with sounds</div>
986</div>
987
988<div class="piece-cat">
989<div class="piece-cat-header">Dynamic Patterns</div>
990<div class="pe"><b>/@handle</b> → user profile</div>
991<div class="pe"><b>/@handle/piece</b> → user-published piece</div>
992<div class="pe"><b>/preview/*</b> → OG images</div>
993<div class="pe"><b>/session/*</b> → multiplayer rooms</div>
994</div>
995
996</div>
997
998<div class="page-footer">
999 Aesthetic<span style="color: rgb(180, 72, 135);">.</span>Computer Research Template 1.0  · 
1000 <span class="handle"><span class="at">@</span><span class="name">jeffrey</span></span>  · 
1001 github.com/whistlegraph/aesthetic-computer
1002</div>
1003
1004</body>
1005</html>