Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
HTML
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style> /* === AC FONTS === */ @font-face { font-family: 'YWFTProcessing-Regular'; src: url('../system/public/type/webfonts/ywft-processing-regular.woff2') format('woff2'), url('../system/public/type/webfonts/ywft-processing-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'YWFTProcessing-Bold'; src: url('../system/public/type/webfonts/ywft-processing-bold.woff2') format('woff2'), url('../system/public/type/webfonts/ywft-processing-bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'YWFTProcessing-Light'; src: url('../system/public/type/webfonts/ywft-processing-light.woff2') format('woff2'), url('../system/public/type/webfonts/ywft-processing-light.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Berkeley Mono Variable'; src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff2') format('woff2'), url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Berkeley Mono Variable'; src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Italic.woff2') format('woff2'), url('../system/public/type/webfonts/BerkeleyMonoVariable-Italic.woff') format('woff'); font-weight: normal; font-style: italic; }
* { margin: 0; padding: 0; box-sizing: border-box; }
@page { size: letter; margin: 0.65in 0.75in; }
/* === BASE: clean whitepaper prose === */ body { font-family: Georgia, 'Times New Roman', serif; font-size: 10pt; line-height: 1.65; color: #1a1a1a; }
/* === AC-BRANDED ELEMENTS === */
.title-block { text-align: center; margin-bottom: 1.6em; padding-bottom: 1em; border-bottom: 2.5px solid rgb(64, 56, 74); }
.title-block h1 { font-family: 'YWFTProcessing-Bold', monospace; font-size: 26pt; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.15em; color: rgb(64, 56, 74); }
.title-block .subtitle { font-family: 'YWFTProcessing-Light', monospace; font-size: 12pt; color: rgb(180, 72, 135); margin-bottom: 0.5em; }
.title-block .meta { font-size: 9pt; color: #777; line-height: 1.8; }
.title-block .meta a { font-family: 'Berkeley Mono Variable', monospace; font-size: 8pt; color: rgb(120, 80, 180); text-decoration: none; }
/* @handle coloring — pink and purple */ .handle { font-family: 'Berkeley Mono Variable', monospace; font-weight: bold; white-space: nowrap; } .handle .at { color: rgb(120, 80, 180); } .handle .name { color: rgb(180, 72, 135); }
/* === TWO-COLUMN LAYOUT === */
.columns { column-count: 2; column-gap: 1.8em; column-rule: 1px solid #e0e0e0; }
h2 { font-family: 'YWFTProcessing-Bold', monospace; font-size: 12pt; margin-top: 1.3em; margin-bottom: 0.35em; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(180, 72, 135); break-after: avoid; }
h2:first-child { margin-top: 0; }
p { margin-bottom: 0.6em; text-align: justify; hyphens: auto; }
ul { margin: 0.3em 0 0.65em 1.1em; } li { margin-bottom: 0.15em; } li strong { color: rgb(64, 56, 74); }
code { font-family: 'Berkeley Mono Variable', monospace; font-size: 8.5pt; background: rgba(120, 80, 180, 0.07); padding: 0.08em 0.25em; border-radius: 2px; color: rgb(100, 60, 160); }
em { font-style: italic; }
/* === SECTION DIVIDERS === */ .section-divider { border: none; border-top: 2px solid rgb(64, 56, 74); margin: 1.2em 0 0.8em; }
/* === APPENDIX SHARED === */
.appendix-title { font-family: 'YWFTProcessing-Bold', monospace; font-size: 14pt; text-align: center; margin-bottom: 0.15em; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(64, 56, 74); break-after: avoid; }
.appendix-subtitle { font-family: 'YWFTProcessing-Light', monospace; font-size: 9pt; text-align: center; color: #999; margin-bottom: 1em; break-after: avoid; }
.appendix-header { break-after: avoid; break-inside: avoid; }
/* === STAT GRID === */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.45em; margin: 0.6em 0; break-inside: avoid; }
.stat-box { background: linear-gradient(135deg, rgba(180, 72, 135, 0.05) 0%, rgba(120, 80, 180, 0.05) 100%); border: 1.5px solid rgba(180, 72, 135, 0.18); border-radius: 4px; padding: 0.35em 0.4em; text-align: center; }
.stat-box .num { font-family: 'YWFTProcessing-Bold', monospace; font-size: 15pt; color: rgb(180, 72, 135); line-height: 1.2; }
.stat-box .label { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(120, 80, 180); margin-top: 0.1em; }
.makers { font-size: 8pt; color: #666; margin: 0.5em 0; text-align: center; } .makers strong { color: rgb(180, 72, 135); font-family: 'Berkeley Mono Variable', monospace; font-size: 8pt; }
/* === DIAGRAMS === */
.diagram-box { background: rgba(244, 235, 250, 0.5); border: 1.5px solid rgba(120, 80, 180, 0.18); border-radius: 5px; padding: 0.6em 0.8em; margin: 0.6em 0; break-inside: avoid; }
.diagram-label { font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; color: rgb(120, 80, 180); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25em; break-after: avoid; }
.flow { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; line-height: 1.7; text-align: center; color: #333; }
.flow .arrow { color: rgba(180, 72, 135, 0.5); } .flow .node { font-family: 'YWFTProcessing-Bold', monospace; color: rgb(180, 72, 135); background: rgba(180, 72, 135, 0.1); padding: 0.15em 0.4em; border-radius: 3px; } .flow .note { font-family: 'Berkeley Mono Variable', monospace; color: rgb(120, 80, 180); font-size: 7pt; }
/* === DOC SAMPLES === */
.doc-sample { background: #fff; border-left: 3px solid rgb(180, 72, 135); padding: 0.3em 0.5em; margin: 0.35em 0; font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; line-height: 1.45; color: #444; white-space: pre-wrap; } .doc-sample strong { color: rgb(120, 80, 180); }
.appendix-cols { column-count: 2; column-gap: 1.6em; margin-top: 0.4em; } .doc-samples { break-inside: avoid; }
/* === TECH STACK === */
.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin: 0.5em 0; }
.stack-card { background: rgba(244, 235, 250, 0.4); border: 1.5px solid rgba(120, 80, 180, 0.13); border-radius: 4px; padding: 0.4em 0.55em; break-inside: avoid; overflow: hidden; }
.stack-card-title { font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; color: rgb(180, 72, 135); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2em; }
.stack-card ul { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; margin: 0.1em 0 0 0.8em; color: #444; line-height: 1.6; } .stack-card li { margin-bottom: 0.12em; }
.tool-row { display: flex; gap: 0.4em; flex-wrap: wrap; margin: 0.4em 0; }
.tool-chip { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; background: rgba(180, 72, 135, 0.08); color: rgb(140, 50, 110); padding: 0.2em 0.5em; border-radius: 3px; border: 1px solid rgba(180, 72, 135, 0.13); } .tool-chip.green { background: rgba(92, 205, 155, 0.1); color: rgb(30, 120, 80); border-color: rgba(92, 205, 155, 0.2); } .tool-chip.purple { background: rgba(120, 80, 180, 0.08); color: rgb(90, 50, 150); border-color: rgba(120, 80, 180, 0.15); } .tool-chip.blue { background: rgba(60, 120, 200, 0.08); color: rgb(40, 90, 170); border-color: rgba(60, 120, 200, 0.15); }
.source-box { background: #faf8fc; border: 1.5px solid rgba(120, 80, 180, 0.13); border-radius: 5px; padding: 0.5em 0.7em; margin: 0.5em 0; font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; line-height: 1.5; color: #555; break-inside: avoid; } .source-box strong { color: rgb(120, 80, 180); font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; }
/* === SITEMAP === */
.sitemap-section { break-inside: avoid; margin-bottom: 0.5em; }
.sitemap-header { font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; color: rgb(180, 72, 135); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15em; padding-bottom: 0.1em; border-bottom: 1px solid rgba(180, 72, 135, 0.18); break-after: avoid; }
.sitemap-routes { font-family: 'Berkeley Mono Variable', monospace; font-size: 6.5pt; color: #555; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 0.15em 0.6em; }
.sitemap-route::before { content: "/"; color: rgba(120, 80, 180, 0.35); }
.sitemap-cols { column-count: 3; column-gap: 1.2em; }
.domain-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.35em; margin: 0.4em 0; }
.domain-card { background: rgba(244, 235, 250, 0.4); border: 1.5px solid rgba(120, 80, 180, 0.13); border-radius: 4px; padding: 0.3em 0.4em; text-align: center; overflow: hidden; }
.domain-name { font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; color: rgb(120, 80, 180); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .domain-grid-sm .domain-name { font-size: 7pt; }
.domain-desc { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; color: #999; margin-top: 0.1em; }
/* === PIECE CATALOG === */ .piece-catalog { column-count: 3; column-gap: 1em; font-size: 6.5pt; line-height: 1.35; } .piece-cat { break-inside: avoid; margin-bottom: 0.4em; } .piece-cat-header { font-family: 'YWFTProcessing-Bold', monospace; font-size: 8pt; color: rgb(180, 72, 135); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.1em; padding-bottom: 0.05em; border-bottom: 1px solid rgba(180, 72, 135, 0.18); break-after: avoid; } .pe { margin-bottom: 0.06em; color: #444; } .pe b { font-family: 'Berkeley Mono Variable', monospace; font-weight: normal; color: rgb(120, 80, 180); }
/* === FOOTER === */ .page-footer { font-family: 'Berkeley Mono Variable', monospace; font-size: 7pt; color: #bbb; text-align: center; margin-top: 1.5em; padding-top: 0.5em; border-top: 1px solid #eee; }</style></head><body>
<!-- ============ PAGE 1: PROPOSAL ============ -->
<div class="title-block"> <h1>Aesthetic<span style="color: rgb(180, 72, 135);">.</span>Computer</h1> <div class="subtitle">Proposal for Social Software Cycle 2</div> <div class="meta"> Jeffrey Scudder  /  <span class="handle"><span class="at">@</span><span class="name">jeffrey</span></span><br> Score for Social Software — Cycle 2  ·  DESMA 596/199  ·  March 2026<br> https://aesthetic.computer  ·  https://github.com/whistlegraph/aesthetic-computer  ·  https://nopaint.art </div></div>
<div class="columns">
<h2>What AC Is</h2>
<p>Aesthetic 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.</p>
<h2>What I Need</h2>
<p>I 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:</p>
<ul> <li>What feels opaque when you first encounter the platform?</li> <li>Which social features sustain participation vs. which are socially inert?</li> <li>How does the "instrument" metaphor read to someone encountering it fresh?</li> <li>What would you want to do on AC that you currently can't?</li> <li>Where does the design exclude people it should welcome?</li></ul>
<p>These 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.</p>
<h2>What AC Has</h2>
<ul> <li><strong>2,798 @handles</strong> — per-character color customization, profile scorecards</li> <li><strong>18,016 chat messages</strong> — real-time group messaging with hearts and custom fonts</li> <li><strong>4,392 paintings</strong> — pixel art published via built-in drawing tools</li> <li><strong>16,174 KidLisp programs</strong> — a 118-function Lisp dialect for generative art</li> <li><strong>265 published pieces</strong> — user-written interactive programs at public URLs</li> <li><strong>351 built-in pieces</strong> — drawing, music, games, programming, social tools</li> <li><strong>22 domains</strong> — aesthetic.computer, kidlisp.com, notepat.com, and more</li></ul>
<p>Everyone in the cohort gets an @handle and full access to the platform, the codebase, and the development process.</p>
<h2>Why This Cycle</h2>
<p>AC'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.</p>
<h2>Practice</h2>
<p>I'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.</p>
</div>
<!-- ============ APPENDIX A: NETWORK DATA ============ -->
<hr class="section-divider">
<div class="appendix-header"><div class="appendix-title">The Network</div><div class="appendix-subtitle">Live data from AC's MongoDB cluster — March 2, 2026</div></div>
<div class="stat-grid"> <div class="stat-box"><div class="num">2,798</div><div class="label">@handles</div></div> <div class="stat-box"><div class="num">18,016</div><div class="label">chat messages</div></div> <div class="stat-box"><div class="num">4,392</div><div class="label">paintings</div></div> <div class="stat-box"><div class="num">2,900</div><div class="label">moods</div></div> <div class="stat-box"><div class="num">16,174</div><div class="label">kidlisp programs</div></div> <div class="stat-box"><div class="num">265</div><div class="label">published pieces</div></div> <div class="stat-box"><div class="num">333</div><div class="label">clocks</div></div> <div class="stat-box"><div class="num">102</div><div class="label">tapes</div></div> <div class="stat-box"><div class="num">93,122</div><div class="label">boot events</div></div></div>
<p class="makers"> <strong>Who makes things:</strong> 1,067 have painted  ·  997 have posted moods  ·  59 have written KidLisp  ·  19 have published pieces</p>
<div class="appendix-cols">
<div class="diagram-box"> <div class="diagram-label">The Instrument Loop</div> <div class="flow"> <span class="node">prompt</span> <span class="arrow"> → </span> type a piece name <span class="arrow"> → </span> <span class="node">enter</span> <span class="arrow"> → </span> play the piece <span class="arrow"> → </span> <span class="node">esc</span> <span class="arrow"> → </span> back to prompt </div></div>
<div class="diagram-box"> <div class="diagram-label">User Data Flow</div> <div class="flow"> <span class="node">@handle</span> <span class="arrow"> → </span> paint / chat / mood / kid / publish <span class="arrow"> → </span> <span class="node">MongoDB</span> <span class="arrow"> → </span> profile <span class="arrow"> → </span> <span class="node">public URL</span> <br> <span class="note">ATProto PDS → Bluesky (identity + moods)  ·  paintings → DO Spaces CDN</span> </div></div>
<div class="doc-samples"> <div class="diagram-label">Sample Documents (live)</div> <div class="doc-sample"><strong>mood</strong> { mood: "studying astronomy", when: "2026-03-02T12:32:49Z", atproto: { rkey: "3mg3b6jcj4k2x" } }</div> <div class="doc-sample"><strong>painting</strong> { code: "gfl", slug: "2026.03.02.14.14.39", when: "2026-03-02T13:14:48Z" }</div> <div class="doc-sample"><strong>kidlisp</strong> { code: "27z", source: "fade:red-blue-black-blue-red\nscroll (* 100 amp)", hits: 1 }</div> <div class="doc-sample"><strong>chat</strong> { text: "y'all gonna piss me off", when: "2026-03-02T05:26:25Z", font: "font_1" }</div> <div class="doc-sample"><strong>piece</strong> { code: "zod", slug: "zod", name: "3d-cube", extension: ".mjs", hits: 1 }</div></div>
</div>
<!-- ============ APPENDIX B: ARCHITECTURE & SITEMAP ============ -->
<div class="appendix-header" style="margin-top: 1.2em;"><div class="appendix-title">Architecture & Sitemap</div><div class="appendix-subtitle">22 domains  ·  ~355 disk routes  ·  ~85 API endpoints  ·  open source since 2021</div></div>
<!-- SERVICES: each domain mapped to its tech --><div class="stack-grid" style="grid-template-columns: 1fr 1fr 1fr; gap: 0.4em; margin-bottom: 0.6em;">
<div class="stack-card"> <div class="stack-card-title">aesthetic.computer</div> <ul> <li>Netlify — ~85 API endpoints, edge functions</li> <li>Canvas 2D + WebGL2 frontend</li> <li>ES Modules, WebSocket hot-reload</li> <li>Auth0, Firebase, Stripe</li> <li>351 built-in pieces</li> </ul> </div>
<div class="stack-card"> <div class="stack-card-title">session server</div> <ul> <li>Fastify + Geckos.io (WebSocket)</li> <li>Jamsocket ephemeral containers</li> <li>Redis state sync</li> <li>Chat, multiplayer, rooms</li> <li>DigitalOcean + pm2</li> </ul> </div>
<div class="stack-card"> <div class="stack-card-title">oven.aesthetic.computer</div> <ul> <li>Express.js + FFmpeg</li> <li>Tape → MP4, screenshots</li> <li>OG image generation</li> <li>Caddy (auto HTTPS)</li> <li>DigitalOcean droplet</li> </ul> </div>
<div class="stack-card"> <div class="stack-card-title">feed.* / grab.*</div> <ul> <li>Cloudflare Workers</li> <li>Hono + TypeScript (feed)</li> <li>Browser Rendering API (grab)</li> <li>KV, Durable Objects</li> </ul> </div>
<div class="stack-card"> <div class="stack-card-title">data layer</div> <ul> <li>MongoDB Atlas — user content</li> <li>Redis — session cache</li> <li>DO Spaces (S3 CDN) — media</li> <li>ATProto PDS — identity + Bluesky</li> </ul> </div>
<div class="stack-card"> <div class="stack-card-title">kidlisp.com</div> <ul> <li>118 built-in functions, 12 categories</li> <li>Evaluator: lib/kidlisp.mjs</li> <li>Programs stored in MongoDB</li> <li>Shareable by 3-char code</li> </ul> </div>
</div>
<!-- Source + tools + domains compact --><div class="source-box" style="margin-bottom: 0.5em;"> <strong>Source:</strong> github.com/whistlegraph/aesthetic-computer  ·  boot.mjs → bios.mjs → disk.mjs (~572KB API) → disks/*.mjs<br> <strong>Languages:</strong> JavaScript (ES Modules), TypeScript (workers), KidLisp, HTML/CSS<br> <strong>Dev:</strong> Docker devcontainer across Windows / macOS / Fedora  ·  Emacs (Evil mode) + VS Code + Claude Code  ·  Fish shell  ·  esbuild, Jasmine, Vitest, Wrangler, pm2<br> <strong>22 domains:</strong> notepat.com, kidlisp.com, sotce.net, botce.ac, wipppps.world + subdomains (feed, grab, help, oven, etc.)</div>
<!-- PIECE CATALOG with descriptions --><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><div class="piece-catalog">
<div class="piece-cat"><div class="piece-cat-header">Drawing & Painting</div><div class="pe"><b>paint</b> AI-powered auto-painting from text</div><div class="pe"><b>nopaint</b> paint or reject, then publish</div><div class="pe"><b>line</b> simple line brush</div><div class="pe"><b>pline</b> perfect 1px line algorithm</div><div class="pe"><b>shape</b> filled freehand shapes</div><div class="pe"><b>oval</b> draw ovals and circles</div><div class="pe"><b>box</b> rectangles with modes + thickness</div><div class="pe"><b>fill</b> flood fill with a color</div><div class="pe"><b>spray</b> stylus-based spray painting</div><div class="pe"><b>smear</b> smear brush (co-designed by Rapter)</div><div class="pe"><b>marker</b> brush interpolation tool</div><div class="pe"><b>crayon</b> draw with a crayon</div><div class="pe"><b>sparkle-brush</b> sparkle emitter</div><div class="pe"><b>bits</b> confetti/speckle brush</div><div class="pe"><b>multipen</b> multi-touch tracked cursors</div><div class="pe"><b>doodle</b> build up and replay points</div><div class="pe"><b>wand</b> generative art viewer</div><div class="pe"><b>blur</b> blur pixels with a radius</div><div class="pe"><b>crop</b> crop or extend painting</div><div class="pe"><b>stamp</b> import painting as stamp</div><div class="pe"><b>pull</b> copy + move pixels</div><div class="pe"><b>snap</b> camera still to painting</div><div class="pe"><b>camera</b> paste stills to painting</div><div class="pe"><b>paste</b> load external image</div><div class="pe"><b>handprint</b> stamp your hand</div><div class="pe"><b>selfie</b> decorated photo (w/ Molly Soda)</div><div class="pe"><b>painting</b> view any painting by number</div><div class="pe"><b>paintings</b> user portfolio page</div><div class="pe"><b>colors</b> scrollable CSS color list</div><div class="pe"><b>nail</b> multiplayer thumbnailing</div><div class="pe"><b>wipe</b> clear painting with a color</div><div class="pe"><b>icon</b> add vector glyphs (Molly Soda)</div><div class="pe"><b>colplay</b> painting as tonal keyboard</div><div class="pe"><b>make</b> KidLisp from text prompts</div><div class="pe"><b>vary</b> AI-vary an existing image</div></div>
<div class="piece-cat"><div class="piece-cat-header">Music & Audio</div><div class="pe"><b>notepat</b> tap pads to play notes</div><div class="pe"><b>beat</b> rhythmic percussion</div><div class="pe"><b>tone</b> single frequency + wave type</div><div class="pe"><b>chord</b> play a musical chord</div><div class="pe"><b>melody</b> plays back a tracker score</div><div class="pe"><b>song</b> melody + lyrics sing-along</div><div class="pe"><b>sing</b> character responds with notes</div><div class="pe"><b>bleep</b> colored box tone maker</div><div class="pe"><b>say</b> text-to-speech</div><div class="pe"><b>whistle</b> mic input → sine wave melody</div><div class="pe"><b>metronome</b> visual metronome</div><div class="pe"><b>microphone</b> audio + video monitor</div><div class="pe"><b>uke</b> live ukulele pitch detector</div><div class="pe"><b>pedal</b> audio effect pedal for Ableton</div><div class="pe"><b>amp</b> microphone amplifier</div><div class="pe"><b>tracker</b> 12-tone composer</div><div class="pe"><b>3x3</b> ortholinear pad instrument</div><div class="pe"><b>rattle</b> accelerometer shaker</div><div class="pe"><b>squaresong</b> a song as a program</div><div class="pe"><b>dync</b> percussive pad instrument</div><div class="pe"><b>slip</b> single voice instrument</div><div class="pe"><b>clock</b> clock with melody + live keyboard</div><div class="pe"><b>clocks</b> browse saved clock melodies</div><div class="pe"><b>stick</b> render clock melody to WAV</div><div class="pe"><b>amby</b> tonal radial music generator</div><div class="pe"><b>autopat</b> notepat autoplay jukebox</div><div class="pe"><b>stample</b> spread a sample across pats</div><div class="pe"><b>sfx</b> sound effects player</div><div class="pe"><b>bgm</b> background music + visualizer</div><div class="pe"><b>r8dio</b> Danish talk radio stream</div><div class="pe"><b>kpbj</b> KPBJ.FM community radio</div><div class="pe"><b>audio</b> longform player + subtitles</div><div class="pe"><b>butterflies</b> multi-touch bitmap instrument</div><div class="pe"><b>seashells</b> bytebeat algorithmic synthesis</div><div class="pe"><b>shh</b> noise drones</div><div class="pe"><b>notepat-tv</b> remote notepat pictures</div></div>
<div class="piece-cat"><div class="piece-cat-header">Games & Interactive</div><div class="pe"><b>1v1</b> multiplayer Quake-like 3D shooter</div><div class="pe"><b>brick-breaker</b> brick breakout game</div><div class="pe"><b>scawy-snake</b> snake game with color growth</div><div class="pe"><b>run&gun</b> 2D side-scrolling shooter</div><div class="pe"><b>hop</b> first-person shooter</div><div class="pe"><b>sno</b> snowball game (ida, mxsage, jeffrey)</div><div class="pe"><b>words</b> Word Munchers-style game</div><div class="pe"><b>gostop</b> body movement regulation game</div><div class="pe"><b>staka</b> stack colors with your hand</div><div class="pe"><b>flap</b> animated flapping sequence</div><div class="pe"><b>fly</b> bounce around in 3D</div><div class="pe"><b>field</b> open 3D walking space</div><div class="pe"><b>pond</b> chat in ripples</div><div class="pe"><b>bubble</b> floating bubbles (mxsage + jeffrey)</div><div class="pe"><b>balls</b> balls bouncing on lines</div><div class="pe"><b>rain</b> rain falling (drawn by Aspen)</div><div class="pe"><b>toss</b> two oscillators at once</div><div class="pe"><b>starfield</b> classic starfield effect</div><div class="pe"><b>metaballs</b> blob rendering</div><div class="pe"><b>ant</b> colony simulation + pheromones</div><div class="pe"><b>fps</b> basic first-person environment</div><div class="pe"><b>game</b> basic game template</div><div class="pe"><b>horizon</b> side-scrolling world</div><div class="pe"><b>i</b> walk as the letter "i"</div><div class="pe"><b>paintball</b> paint on a 3D ball</div><div class="pe"><b>cards</b> playing card (tap to flip)</div><div class="pe"><b>tremory</b> temporal memory trainer</div></div>
<div class="piece-cat"><div class="piece-cat-header">Social & Community</div><div class="pe"><b>mood</b> choose a mood + build image</div><div class="pe"><b>moods</b> live feed of all moods</div><div class="pe"><b>chat</b> multiplayer messaging</div><div class="pe"><b>share</b> QR code link sharing</div><div class="pe"><b>sign</b> IRL message, upside down</div><div class="pe"><b>signature</b> timestamped painting stamp</div><div class="pe"><b>mail</b> email preferences + blast history</div><div class="pe"><b>list</b> comprehensive piece directory</div><div class="pe"><b>handle</b> customize @handle colors</div><div class="pe"><b>handles</b> directory of all handles</div><div class="pe"><b>get-handle</b> claim your @handle</div><div class="pe"><b>profile</b> public user scorecard</div><div class="pe"><b>ptt</b> push-to-talk voice chat</div><div class="pe"><b>handtime</b> hand-based messaging</div><div class="pe"><b>insta</b> browse Instagram profiles</div><div class="pe"><b>play</b> dramaturgical messaging game</div></div>
<div class="piece-cat"><div class="piece-cat-header">Characters</div><div class="pe"><b>mom</b> doting mother</div><div class="pe"><b>dad</b> handyman disguised as father</div><div class="pe"><b>brother</b> younger brother</div><div class="pe"><b>sister</b> know-it-all sister</div><div class="pe"><b>husband</b> forgetful husband</div><div class="pe"><b>wife</b> nagging wife</div><div class="pe"><b>boyfriend</b> avoidant boyfriend</div><div class="pe"><b>girlfriend</b> GF with savior complex</div><div class="pe"><b>kid</b> software kid</div><div class="pe"><b>angel</b> guardian angel (Judeo-Christian)</div><div class="pe"><b>liar</b> compulsive liar</div><div class="pe"><b>sage</b> walker demo (mxsage + jeffrey)</div><div class="pe"><b>tobby</b> type characters in time</div><div class="pe"><b>valbear</b> valentine bear card maker</div><div class="pe"><b>gargoyle</b> character (@georgica)</div><div class="pe"><b>dolls</b> 2D cartoon videos with mic</div><div class="pe"><b>robo</b> robot drawing automation</div><div class="pe"><b>botce</b> paywalled AI chatbot</div></div>
<div class="piece-cat"><div class="piece-cat-header">KidLisp & Programming</div><div class="pe"><b>kidlisp</b> default KidLisp piece</div><div class="pe"><b>keep</b> preserve KidLisp as Tezos KEEP</div><div class="pe"><b>kept</b> view KEEP mint result</div><div class="pe"><b>prompt</b> LLM-backed "access-everything" console</div><div class="pe"><b>learn</b> chatbot tutorial</div><div class="pe"><b>lang</b> interface language chooser</div><div class="pe"><b>decode</b> tokens → poems</div><div class="pe"><b>encode</b> poems → tokens</div><div class="pe"><b>docgen</b> generate piece API docs</div><div class="pe"><b>$</b> live KidLisp code preview feed</div><div class="pe"><b>pack</b> offline HTML for KidLisp piece</div><div class="pe"><b>code</b> graphical KidLisp editor (.lisp)</div><div class="pe"><b>chart</b> make a piece from a diagram</div></div>
<div class="piece-cat"><div class="piece-cat-header">Sequencing & Routing</div><div class="pe"><b>merry</b> URL-able piece sequencer with timing</div><div class="pe"><b>merryo</b> looping merry (plays forever)</div><div class="pe"><b>mo</b> quick looping merry shorthand</div><div class="pe"><b>merry-fade</b> crossfade between KidLisp $codes</div><div class="pe"><b>pip</b> piece-in-piece, run multiple at once</div><div class="pe"><b>split</b> two AC instances side by side</div><div class="pe"><b>m4d</b> generate Max for Live device (prompt cmd)</div></div>
<div class="piece-cat"><div class="piece-cat-header">Whistlegraph & Media</div><div class="pe"><b>whistlegraph</b> 2D recording tool</div><div class="pe"><b>wg</b> Feral File card player</div><div class="pe"><b>wgr</b> whistlegraph recorder</div><div class="pe"><b>wipppps</b> audio-reactive fractals</div><div class="pe"><b>neo-wipppps</b> wipppps music visualizations</div><div class="pe"><b>m2w2</b> Music 2 Whistlegraph 2 instrumentals</div><div class="pe"><b>stage</b> performance tool</div><div class="pe"><b>tv</b> vertical tape feed ("For You")</div><div class="pe"><b>tapes</b> browse recent tapes</div><div class="pe"><b>replay</b> view any tape recording</div><div class="pe"><b>video</b> playback + export video</div><div class="pe"><b>cap</b> camera video recorder</div><div class="pe"><b>screen</b> mirror system display</div><div class="pe"><b>desk</b> webcam/Elmo selector</div><div class="pe"><b>screenshots</b> browse dev screenshots</div></div>
<div class="piece-cat"><div class="piece-cat-header">Visualization & Art</div><div class="pe"><b>halley</b> Halley's method fractal</div><div class="pe"><b>morpho</b> pixel sorting morphogenesis lab</div><div class="pe"><b>noise</b> noise on every pixel</div><div class="pe"><b>rainbow-x</b> centered rainbow X</div><div class="pe"><b>neural-garden</b> GPT learns drawing gestures</div><div class="pe"><b>a-star</b> A* pathfinding demo</div><div class="pe"><b>zzzwap</b> dynamic pathfinding for wipppps</div><div class="pe"><b>spline</b> interactive line with curves</div><div class="pe"><b>digitpain0–3</b> animated DIGITPAIN series</div><div class="pe"><b>hell_-world</b> random hell_ painting viewer</div><div class="pe"><b>freaky-flowers</b> random Freaky Flower token</div><div class="pe"><b>commits</b> live GitHub commit visualization</div><div class="pe"><b>visualizer</b> color history decay effect</div><div class="pe"><b>lmn-flower</b> pull a petal</div><div class="pe"><b>lmn-petal</b> touch an interactive petal</div><div class="pe"><b>opinion</b> essays on computing & creativity</div><div class="pe"><b>weather</b> Weather Channel + smooth jazz</div></div>
<div class="piece-cat"><div class="piece-cat-header">System & Utility</div><div class="pe"><b>about</b> AC Q&A chatbot</div><div class="pe"><b>demo</b> what is aesthetic.computer?</div><div class="pe"><b>deck</b> slide deck explainer</div><div class="pe"><b>description</b> read about any command</div><div class="pe"><b>desktop</b> download Electron desktop app</div><div class="pe"><b>mobile</b> download iOS/Android app</div><div class="pe"><b>os</b> bootable FedAC OS image</div><div class="pe"><b>theme</b> prompt theme chooser</div><div class="pe"><b>token</b> display auth token (3 taps)</div><div class="pe"><b>wallet</b> animated Tezos wallet display</div><div class="pe"><b>connect-wallet</b> wallet connection page</div><div class="pe"><b>download</b> screenshottable download screen</div><div class="pe"><b>ads</b> advertise on AC</div><div class="pe"><b>mug</b> ceramic mug with your painting</div><div class="pe"><b>mugs</b> browse recent mugs</div><div class="pe"><b>boots</b> boot telemetry viewer</div><div class="pe"><b>booted-by</b> who booted AC</div><div class="pe"><b>404</b> error page</div><div class="pe"><b>delete-erase-and-forget-me</b> delete account</div></div>
<div class="piece-cat"><div class="piece-cat-header">Translation</div><div class="pe"><b>english</b> / <b>en</b> translate to English</div><div class="pe"><b>danish</b> / <b>da</b> translate to Danish</div><div class="pe"><b>spanish</b> / <b>es</b> translate to Spanish</div></div>
<div class="piece-cat"><div class="piece-cat-header">External & Hardware</div><div class="pe"><b>ableton</b> Max for Live device browser</div><div class="pe"><b>aframe</b> A-Frame VR drawing (WebXR)</div><div class="pe"><b>gameboy</b> GameBoy emulator</div><div class="pe"><b>gamepad</b> gamepad connectivity test</div><div class="pe"><b>ff1</b> send art to FF1 Art Computer</div><div class="pe"><b>ordfish</b> virtual fish viewer</div><div class="pe"><b>ordsy</b> B&W ordsy picture palette</div><div class="pe"><b>snappidaggs</b> Goodiepal archive browser</div><div class="pe"><b>prutti</b> Lessons NOT Learnt (Goodiepal)</div><div class="pe"><b>triquilt</b> half-square triangle quilt tool</div><div class="pe"><b>hueber</b> psychedelic Uber</div></div>
<div class="piece-cat"><div class="piece-cat-header">Education & Workshop</div><div class="pe"><b>ucla-1</b> – <b>ucla-7</b> UCLA workshop lessons</div><div class="pe">+ <b>-keyboard</b> <b>-box</b> <b>-turtle</b> <b>-balls</b> <b>-dial</b> <b>-jump</b> variants</div><div class="pe"><b>baktok</b> learn to talk backwards</div><div class="pe"><b>laer-klokken</b> learn the clock</div><div class="pe"><b>alphapoet</b> alphabetical nonsense poet</div></div>
<div class="piece-cat"><div class="piece-cat-header">ABC123 Series (36)</div><div class="pe"><b>a</b>–<b>z</b> interactive letters with musical notes</div><div class="pe"><b>0</b>–<b>9</b> interactive numbers with sounds</div></div>
<div class="piece-cat"><div class="piece-cat-header">Dynamic Patterns</div><div class="pe"><b>/@handle</b> → user profile</div><div class="pe"><b>/@handle/piece</b> → user-published piece</div><div class="pe"><b>/preview/*</b> → OG images</div><div class="pe"><b>/session/*</b> → multiplayer rooms</div></div>
</div>
<div class="page-footer"> Aesthetic<span style="color: rgb(180, 72, 135);">.</span>Computer Research Template 1.0  ·  <span class="handle"><span class="at">@</span><span class="name">jeffrey</span></span>  ·  github.com/whistlegraph/aesthetic-computer</div>
</body></html>