🎨 Aesthetic Computer #

A Creative Computing Platform #

45-Minute Lecture for El Cid #

---

🎯 OPENING #

5 minutes

Hook & Core Concept #

"What if your phone could be a musical instrument for making art and code?"

What Aesthetic Computer is:
A mobile-first runtime and social network for creative computing

The Musical Instrument Metaphor:
Interface designed like an instrument where users:

• 🎵 Discover "memorizable paths" through command sequences
• 🎼 Build "performable repertoires" of creative techniques
• 🎹 Improvise and recombine learned patterns

Timeline:
Started April 2021 → evolved from No Paint (2020 viral success) → 3+ years of development

Live Demo Setup:
aesthetic.computer → activate prompt → try notepat

---

🏗️ ARCHITECTURAL INNOVATION #

8 minutes

Revolutionary Design Principles #

🧩 PIECES not APPS #

Every program is a lightweight "piece" with instant URL addressability

aesthetic.computer/notepat
aesthetic.computer/paint  
aesthetic.computer/chat

✅ Instant loading, no app stores, works universally across devices

💬 Prompt-Driven Navigation #

Single unified command interface for all functionality

> list                    # Discover all pieces
> notepat                # Launch tone matrix
> [Esc] [`] [Backspace]  # Return to prompt

📱 Mobile-First Design #

Touch-optimized interface, seamless across phones/tablets/desktop

🌐 Browser-Native #

Zero downloads, installations, or dependencies - pure web technology

---

🎨 CREATIVE TOOLS SHOWCASE #

15 minutes total

1. 🖼️ Visual Art Creation #

5 minutes

Command	Action	Result
new 128	Start canvas	128×128 pixel canvas
rect red	Paint tool	Drag to paint colored rectangles
line, shape, fill, oval	Brush types	Different drawing tools
smear	Effect brush	Pixel scattering for organic textures
dl	Export	Download timestamped PNG
print	Physical	Order actual stickers via mail
done	Publish	Upload to AC servers with permanent URL

Live Demo: Camera integration + real-time photo effects

2. 🎵 Music Creation #

5 minutes

Featured Tools #

🎹 notepat - Playable tone matrix
Recent Hacker News viral sensation

• Real-time musical performance tool
• Works with touch, mouse, keyboard

⏱️ metronome 120 - Rhythm foundation at any BPM

🎼 tracker - Full composition tool
Professional 12-tone music sequencing in browser

🎸 chord - Interactive musical chord player

Key Feature: All synthesis happens in browser, no external software needed

3. 🚀 Interactive Experiences #

5 minutes

🥽 wand - VR/WebXR 3D Drawing #

• Motion-controlled drawing with VR controllers
• Works in browser with WebXR-compatible devices
• Draw in virtual 3D space

🗣️ baktok - Speech Training Tool #

• Voice recording for learning backwards speech
• Records voice → plays back reversed
• Pronunciation practice tool (NOT video effects)

📹 tape - Video Recording #

• Record any piece as 7-second looping videos
• Frame-accurate recording system
• Export formats: GIF, MP4, WebP

---

🧠 KIDLISP PROGRAMMING LANGUAGE #

8 minutes

Revolutionary Creative Coding #

KidLisp: Simplified Lisp dialect designed specifically for creative expression

⚡ Real-Time Execution #

Code runs as you type with immediate visual feedback

📝 Simplified Syntax Examples #

(wipe "purple")              ; Clear screen with purple
(ink "red")                  ; Set drawing color to red  
(circle 100 100 50)         ; Draw circle at (100,100) radius 50

(repeat 10 i                 ; Programmatic repetition
  (line (* i 20) 0 (* i 20) height))

🚀 Key Features #

Feature	Description
No Compilation	Browser-native execution, instant results
Educational	Learn programming through visual experimentation
Function Definitions	later for custom functions
Time-based Animation	1s, 2s syntax for temporal control
User Interaction	tap and draw events
Variables & Math	Full programming capabilities
JavaScript Integration	Embed KidLisp within JS pieces

🎓 Educational Philosophy #

Teaching programming through visual experimentation and play

---

🌐 SOCIAL & COLLABORATIVE FEATURES #

5 minutes

Community-Driven Platform #

👤 Handle System #

@username identity for sharing and attribution

💬 Real-Time Chat #

chat → Live community discussion and support

📚 User Publishing #

Anyone can publish pieces:

• @bash/hub
• @jeffrey/examples
• Your creations here!

🔗 Instant Sharing #

> share notepat    # Generates QR codes for mobile access

👥 Collaborative Creation #

• Multiple prompt windows for parallel work
• Shared virtual spaces like pond for collaborative drawing
• Real-time synchronization across devices

📤 Publishing Pipeline #

> done    # Uploads with timestamped URLs + attribution

---

💻 VS Code Extension & Educational Impact #

📚 Real UCLA Classroom Testing #

• Course: DESMA 28 - Computation and Creative Practice
• Year: 2024 academic year
• Students: ~20 undergraduates learning creative coding
• Pieces Created: ucla-1 through ucla-7 series covering graphics, interaction, sound synthesis, and animation

🔧 VS Code Extension Features #

// Live coding workflow:
// 1. Write piece in VS Code
// 2. Save file → auto-runs in AC panel
// 3. Enter "publish" to share online
// 4. Use "channel custom-name" for multi-device testing

Feature	Benefit
🔄 Live Reload	Save .mjs file → instant execution in AC panel
📚 Inline Documentation	Hover over AC functions for instant help
🔗 Channel Sync	Multi-device testing for studios/classrooms
⚡ Local Development	Works with localhost for faster iteration
🎯 Code Actions	Quick-fix suggestions and documentation links

---

🖥️ Jeffrey's Work Environment #

💻 Hardware Setup #

• Laptop: Intel Core Ultra 5 125U processor
• Memory: 16GB RAM
• Storage: 476GB NVMe SSD
• Daily Driver: This exact setup runs AC development 24/7

🐳 Development Container #

# Fedora Linux 42 dev container with full AC toolchain
FROM fedora:latest
# Complete creative coding environment in a box

Technology	Purpose
🐧 Fedora Linux 42	Container base OS
🐟 Fish Shell	Command line interface
⚡ fnm + Node.js (LTS)	JavaScript runtime management
🦕 Deno 1.45.5	Netlify edge functions
🦀 Rust	AC event daemon & websocat
🐍 Python 3.11	Tezos blockchain tools
📝 Emacs + VS Code	Dual editor setup
🔧 Additional Tools	ngrok, redis, caddy, ffmpeg, gcloud

🏗️ Platform Architecture #

Client-Side (Browser) #

// Main web platform runs in browser
// System: /aesthetic.computer/boot.mjs
// WebGL + Canvas + WebAudio APIs
// Mobile-first responsive design

Component	Technology	Purpose
🎨 Frontend	Vanilla JavaScript + WebGL	Piece execution environment
🎵 Audio	Web Audio API	Real-time synthesis
📱 Mobile	PWA + Touch APIs	Cross-platform compatibility
🔗 WebXR	WebXR Device API	VR/AR functionality

Server-Side (Cloud) #

// Multi-service architecture on different platforms
// Netlify: Main platform + edge functions (Deno)
// Google Cloud: Chat system (Node.js nanos unikernels) 
// JamSocket: Real-time session servers (Node.js)
// Auth0: Multi-tenant authentication (aesthetic.us.auth0.com)
// MongoDB: User profiles, handles, and social data

Service	Platform	Tech Stack
🌐 Main Platform	Netlify Functions	Deno + JavaScript
💬 Chat System	Google Cloud	Node.js 20.5.0 + Nanos unikernels
🎮 Session Server	JamSocket	Node.js + Fastify + WebSockets
📊 Database	MongoDB Atlas	Document storage + user data
🗃️ Assets	Digital Ocean Spaces	CDN + file storage
🔐 Authentication	Auth0	Multi-tenant user management

👥 User System Architecture #

// Auth0 handles authentication, MongoDB stores social data
// Flow: Auth0 login → MongoDB profile → @handle system

Component	Responsibility
🔐 Auth0	Login/signup, email verification, OAuth
🏪 MongoDB @handles	Unique social identities (@username)
📁 MongoDB profiles	User pieces, activity, preferences
🔄 Cross-tenant	Works across aesthetic.computer + sotce.net

🔄 Daily Workflow #

1. Morning: Coffee + git pull + ./aesthetic-launch.sh
2. Development: Live code in VS Code with AC extension
3. Testing: Multi-device testing via channel system
4. Deployment: Auto-deploy to Netlify on git push
5. Evening: git commit + production monitoring

---

📊 Real Platform Data & Impact #

🎯 Live Usage Statistics (pulled from production MongoDB) #

Metric	Count	What This Means
👥 Registered Users	2,576	Active @handle holders
✅ Email Verified	1,919	Authenticated creators
🎨 Paintings Created	2,778	Visual artworks made
🧩 Custom Pieces	212	User-built programs
🤖 KidLisp Programs	2,723	Live coding creations
💬 Chat Messages	16,197	Community conversations
📝 Activity Logs	2,123	Platform interactions

📈 Growth Insights #

• Creative Output: 2,778 paintings + 2,723 KidLisp programs = 5,501 total creations
• Social Engagement: 16,197 chat messages show active daily community
• Retention Rate: 74.5% email verification rate (1,919/2,576) indicates quality signups
• Creator Tools: 212 custom pieces show advanced users building their own tools

🌟 Community Highlights #

Active Creators: @jeffrey, @ida, @georgica, @sage, @yearoftheocean, @tina, @dollmath Recent Activity: Live chat continues daily with messages like "woaaa," "it works!" showing organic engagement Educational Impact: UCLA students created 7+ curriculum pieces that now serve as teaching examples

---

📈 History of the Repository #

📊 Development Timeline #

📅 December 23, 2022: Initial commit (e671cccc)
📈 Total commits to date: 3,784

Year	Commits	Major Milestones
2022	47	🌱 Project inception, basic infrastructure
2023	1,724	🚀 Core platform development, piece system
2024	1,426	🎓 UCLA class integration, VS Code extension
2025	587+	🔬 KidLisp language, advanced features

🏗️ Key Development Phases #

Phase 1: Foundation (2022-2023) #

• Basic prompt system and piece architecture
• WebGL rendering pipeline
• Initial mobile-first design

Phase 2: Creative Tools (2023-2024) #

• Visual art tools (painting, drawing, filters)
• Audio synthesis and recording capabilities
• Social features (chat, handles, publishing)

Phase 3: Education & Language (2024-2025) #

• UCLA classroom deployment and testing
• KidLisp programming language development
• VS Code extension for professional workflows

🎯 UCLA Integration Commits #

Recent educational milestones tracked in git history:

• ucla-1 through ucla-7: Progressive curriculum pieces
• Multi-device classroom testing infrastructure
• Student piece publishing and portfolio system

---

🎯 Value Propositions & Impact #

For Students	For Educators	For Artists
✅ No complex setup or installation	✅ Instant classroom deployment	✅ Professional-grade tools
✅ Works on any device with a browser	✅ Real-time collaboration features	✅ Social publishing platform
✅ Immediate visual/audio feedback	✅ Built-in curriculum examples	✅ Cross-platform compatibility
✅ Gentle learning curve	✅ Live coding demonstrations	✅ Community of practitioners

---

🎬 Demo Flow & Presentation Tips #

---

🚀 CLOSING & CALL TO ACTION #

1 minute

Immediate Engagement #

🔥 Try it RIGHT NOW: aesthetic.computer

Getting Started #

1. Press anywhere or type any key → activates prompt
2. Type list → see all available pieces
3. Try: notepat, paint, chat for hands-on experience

Join the Community #

• 💬 Chat: Join @chat
• 📱 Follow: @jeffrey for platform updates
• 💻 Contribute: GitHub repository open for exploration
• 🎯 Mission: Democratizing creative computing through play, accessibility, and social connection

---

📊 TIMING BREAKDOWN #

Section	Duration	Focus
🎯 Opening	5 min	Hook + musical instrument metaphor
🏗️ Architecture	8 min	Pieces vs apps, prompt system
🎨 Creative Tools	15 min	Art (5) + Music (5) + Interactive (5)
🧠 KidLisp	8 min	Live coding demonstration
🌐 Social Features	5 min	Community + collaboration
🎯 Value Propositions	3 min	What makes AC unique
🚀 Closing	1 min	Call to action
Total	45 min	Perfect timing

---

💡 PRESENTATION TIPS #

🎬 Demo Strategy #

• Pre-load: aesthetic.computer on multiple devices
• Live interaction: Encourage real-time audience exploration
• QR codes: Display for instant mobile access
• Hands-on priority: Active exploration > passive listening

🎭 Key Themes #

• 🎵 Musical instrument metaphor throughout presentation
• 🎮 Playful exploration over technical complexity
• 🌍 Creative democracy and accessible computing
• 👥 Community-driven development and sharing

📱 Audience Engagement #

• Use audience phones for live demos
• Show QR codes for instant access
• Encourage experimentation during presentation
• Connect to broader themes of computational literacy

---

Ready to democratize creative computing! 🎨✨