Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

at main 186 lines 5.4 kB view raw view rendered
1# Aesthetic Computer: A Creative Platform 2**El Cid Lecture - 45 Minutes** 3*Jeffrey Alan Scudder* 4 5--- 6 7## What is Aesthetic Computer? 8 9Aesthetic Computer is a place to make art with code. You type commands into a prompt, and things happen. Sometimes you paint. Sometimes you program. Sometimes you just explore what's there. 10 11I started building it in 2021 because I wanted to make creative coding more accessible. No downloads, no setup - just open a browser and start making. 12 13--- 14 15## The Basic Idea 16 17You go to `aesthetic.computer` and see a prompt. Type `paint` and you get a canvas. Type `notepat` and you get a musical instrument. Type anything else and you might discover something new. 18 19Everything runs in your browser. Your phone, laptop, tablet - doesn't matter. The same tools work everywhere. 20 21--- 22 23## What People Actually Make 24 25Looking at the database, people have created: 26- 2,778 paintings 27- 2,723 programs in KidLisp (our programming language) 28- 212 custom tools and experiences 29- 16,197 chat messages (people like to talk while they create) 30 31--- 32 33## The Technical Bits 34 35### How Code Becomes Art 36```javascript 37// A simple piece that draws when you touch the screen 38function paint({ wipe, ink, pen }) { 39 wipe("blue"); 40 ink("white"); 41 pen(64); // thick brush 42} 43 44function act({ event, sound }) { 45 if (event.is("touch")) { 46 // Draw where you touched 47 sound.synth("c"); // play a note too 48 } 49} 50``` 51 52Each "piece" is just a JavaScript file. Save it, run it, share it. The system handles the rest. 53 54### KidLisp: Programming as Play 55```lisp 56(wipe gray) 57(ink red) 58(write (* 2 3 4)) 59``` 60 61KidLisp is our attempt at making programming feel immediate. Type an expression, see it happen. No compilation, no ceremony. 62 63--- 64 65## Some Things People Built 66 67**notepat** - A tone matrix that went viral on Hacker News. Grid of buttons, touch them to make melodies. 68 69**baktok** - Records your voice and plays it backwards. Surprisingly useful for pronunciation practice. 70 71**wand** - Draw in VR space. Works with WebXR headsets or just mouse/touch. 72 73**tracker** - Serious music composition tool with 12-tone support. 74 75**tape** - Records whatever you're doing and exports to GIF/MP4. Frame-accurate. 76 77--- 78 79## Real Classroom Use 80 81Last year I taught UCLA students using VS Code with an Aesthetic Computer extension. They could write code in their editor and see it run instantly in a browser panel. 82 83The students made pieces like `ucla-1` (basic graphics) through `ucla-7` (bouncing balls). These pieces now serve as examples for other learners. 84 85Having real students use your tools teaches you things no amount of solo development can. 86 87--- 88 89## How Jeffrey Works 90 91I develop this every day on: 92- Intel laptop (16GB RAM, nothing fancy) 93- Fedora Linux in a Docker container 94- Fish shell, Emacs, VS Code 95- The same VS Code extension my students use 96 97The platform runs on: 98- Netlify (main site, uses Deno) 99- Google Cloud (chat system, Node.js) 100- MongoDB (user data, @handles) 101- Auth0 (login stuff) 102 103Everything auto-deploys when I push to git. Simple. 104 105--- 106 107## Real Numbers 108 109As of today, the platform has: 110- 2,576 people with @handles 111- 1,919 verified email addresses (people stick around) 112- 5,501 total creations 113- Daily chat activity (someone's always making something) 114 115Not huge numbers, but genuine engagement. Quality over scale. 116 117--- 118 119## The Social Bit 120 121Everyone gets an @handle. Your creations link to your profile. There's a chat where people share techniques and debug problems together. 122 123The community formed naturally. I built tools for making things; people started helping each other use them. 124 125Some active folks: @ida, @georgica, @sage, @yearoftheocean, @tina, @dollmath. Plus me (@jeffrey). 126 127--- 128 129## Code History 130 131Started December 2022. 3,784 commits so far: 132- 2022: 47 commits (getting started) 133- 2023: 1,724 commits (core platform) 134- 2024: 1,426 commits (UCLA class, VS Code extension) 135- 2025: 587 commits (KidLisp language) 136 137The git history tells the story of what mattered when. 138 139--- 140 141## Why This Matters 142 143Creative coding shouldn't require a computer science degree. You should be able to have an idea and express it quickly, whether you're 8 or 80. 144 145Most creative tools either assume you're a complete beginner or an expert. There's not much in between. Aesthetic Computer tries to grow with you. 146 147--- 148 149## User Authentication & Data 150 151We use Auth0 for login (aesthetic.us.auth0.com). MongoDB stores everything else - your @handle, your pieces, chat messages, paintings. 152 153Cross-tenant system works on both aesthetic.computer and sotce.net (my other project). 154 155The database shows people actually use this stuff. 74.5% email verification rate means people care enough to confirm their accounts. 156 157--- 158 159## Tech Architecture (The Real Stuff) 160 161**Client side**: Vanilla JavaScript + WebGL in browser. No frameworks, just web standards. 162 163**Server side**: 164- Netlify Functions (Deno) for main platform 165- Google Cloud (Node.js nanos unikernels) for chat 166- JamSocket for real-time collaboration 167- MongoDB Atlas for data 168- Digital Ocean Spaces for assets 169 170Auth0 handles authentication. MongoDB handles everything else. Simple division of labor. 171 172--- 173 174## Demo Time 175 176Let's see what happens when we... 177- Open aesthetic.computer 178- Try some basic commands 179- Look at what others have made 180- Maybe write some code together 181 182--- 183 184## Questions? 185 186*[Leave time for discussion and hands-on exploration]*