Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
17 kB · 591 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592#!/usr/bin/env node
/** * Rosary Bead Visualizer for KidLisp - Sixel Output * * Parses KidLisp code and renders it as a rosary bead diagram. * Each expression becomes a bead on a string, loops form circles. * * Usage: * ./rosary-sixel.mjs "red, ink blue, line 0 0 100 100" * ./rosary-sixel.mjs "$mtz" # fetch from AC * echo "wipe, ink, box" | ./rosary-sixel.mjs */
const WIDTH = 400;const HEIGHT = 300;
// Bead types with colors (Calder-inspired palette)const BEAD_STYLES = { state: { color: [220, 60, 60], symbol: '○' }, // red - wipe, ink, def draw: { color: [60, 100, 220], symbol: '●' }, // blue - line, box, circle, point effect: { color: [220, 180, 40], symbol: '◆' }, // yellow - scroll, blur, zoom timing: { color: [180, 80, 180], symbol: '◇' }, // purple - 1s, 0.5s, later branch: { color: [40, 180, 120], symbol: '◈' }, // green - if, ? loop: { color: [255, 140, 40], symbol: '⬡' }, // orange - repeat atom: { color: [150, 150, 150], symbol: '·' }, // gray - numbers, strings};
// Command classificationconst COMMAND_TYPES = { // State changes 'wipe': 'state', 'ink': 'state', 'def': 'state', 'let': 'state', // Drawing 'line': 'draw', 'box': 'draw', 'circle': 'draw', 'point': 'draw', 'write': 'draw', 'oval': 'draw', 'tri': 'draw', 'draw': 'draw', // Effects 'scroll': 'effect', 'blur': 'effect', 'zoom': 'effect', 'pan': 'effect', 'coat': 'effect', 'fade': 'effect', 'noise': 'effect', // Timing '1s': 'timing', '0.5s': 'timing', '0.3s': 'timing', '2s': 'timing', 'later': 'timing', 'every': 'timing', // Branching 'if': 'branch', '?': 'branch', 'cond': 'branch', // Loops 'repeat': 'loop', 'loop': 'loop', 'for': 'loop',};
// Color names to RGBconst COLOR_NAMES = { 'red': [255, 80, 80], 'blue': [80, 80, 255], 'green': [80, 200, 80], 'yellow': [255, 255, 80], 'purple': [180, 80, 180], 'orange': [255, 160, 80], 'cyan': [80, 255, 255], 'magenta': [255, 80, 255], 'white': [255, 255, 255], 'black': [40, 40, 40], 'gray': [150, 150, 150], 'navy': [40, 40, 120], 'brown': [140, 90, 60], 'pink': [255, 180, 200],};
class SixelCanvas { constructor(width, height) { this.width = width; this.height = height; this.buffer = new Uint8Array(width * height * 3); this.clear(20, 20, 30); // Dark background }
clear(r, g, b) { for (let i = 0; i < this.buffer.length; i += 3) { this.buffer[i] = r; this.buffer[i + 1] = g; this.buffer[i + 2] = b; } }
setPixel(x, y, r, g, b) { x = Math.round(x); y = Math.round(y); if (x >= 0 && x < this.width && y >= 0 && y < this.height) { const idx = (y * this.width + x) * 3; this.buffer[idx] = r; this.buffer[idx + 1] = g; this.buffer[idx + 2] = b; } }
// Draw a filled circle (bead) fillCircle(cx, cy, r, color) { const [cr, cg, cb] = color; for (let y = -r; y <= r; y++) { for (let x = -r; x <= r; x++) { if (x * x + y * y <= r * r) { this.setPixel(cx + x, cy + y, cr, cg, cb); } } } }
// Draw circle outline strokeCircle(cx, cy, r, color, thickness = 1) { const [cr, cg, cb] = color; for (let y = -r - thickness; y <= r + thickness; y++) { for (let x = -r - thickness; x <= r + thickness; x++) { const dist = Math.sqrt(x * x + y * y); if (dist >= r - thickness / 2 && dist <= r + thickness / 2) { this.setPixel(cx + x, cy + y, cr, cg, cb); } } } }
// Draw a line (string between beads) line(x0, y0, x1, y1, color, thickness = 2) { const [r, g, b] = color; const dx = Math.abs(x1 - x0); const dy = Math.abs(y1 - y0); const steps = Math.max(dx, dy) * 2; for (let i = 0; i <= steps; i++) { const t = i / steps; const x = x0 + (x1 - x0) * t; const y = y0 + (y1 - y0) * t; // Thicken the line for (let ox = -thickness / 2; ox <= thickness / 2; ox++) { for (let oy = -thickness / 2; oy <= thickness / 2; oy++) { this.setPixel(x + ox, y + oy, r, g, b); } } } }
// Draw curved arc (for loops) arc(cx, cy, r, startAngle, endAngle, color, thickness = 2) { const [cr, cg, cb] = color; const steps = Math.abs(endAngle - startAngle) * r; for (let i = 0; i <= steps; i++) { const t = i / steps; const angle = startAngle + (endAngle - startAngle) * t; const x = cx + Math.cos(angle) * r; const y = cy + Math.sin(angle) * r; for (let ox = -thickness / 2; ox <= thickness / 2; ox++) { for (let oy = -thickness / 2; oy <= thickness / 2; oy++) { this.setPixel(x + ox, y + oy, cr, cg, cb); } } } }
toSixel() { let output = '\x1bPq'; const colors = new Map(); let colorIndex = 0; for (let band = 0; band < Math.ceil(this.height / 6); band++) { const bandArrays = new Map(); for (let x = 0; x < this.width; x++) { for (let dy = 0; dy < 6; dy++) { const y = band * 6 + dy; if (y >= this.height) break; const idx = (y * this.width + x) * 3; const r = this.buffer[idx]; const g = this.buffer[idx + 1]; const b = this.buffer[idx + 2]; const colorKey = (r << 16) | (g << 8) | b; if (!colors.has(colorKey)) { colors.set(colorKey, colorIndex++); output += `#${colors.get(colorKey)};2;${Math.round(r * 100 / 255)};${Math.round(g * 100 / 255)};${Math.round(b * 100 / 255)}`; } const color = colors.get(colorKey); if (!bandArrays.has(color)) { bandArrays.set(color, new Array(this.width).fill(0)); } bandArrays.get(color)[x] |= (1 << dy); } } for (const [color, pixels] of bandArrays) { output += `#${color}`; for (const pixel of pixels) { output += String.fromCharCode(63 + pixel); } output += '$'; } output += '-'; } return output + '\x1b\\'; }}
// Simple KidLisp tokenizer (handles commas and parens)// Splits on commas and newlines, keeps paren expressions togetherfunction tokenize(code) { const tokens = []; let current = ''; let inString = false; let parenDepth = 0; for (let i = 0; i < code.length; i++) { const char = code[i]; if (char === '"') { inString = !inString; current += char; } else if (inString) { current += char; } else if (char === '(') { if (parenDepth === 0 && current.trim()) { tokens.push(current.trim()); current = ''; } parenDepth++; current += char; } else if (char === ')') { parenDepth--; current += char; if (parenDepth === 0) { tokens.push(current.trim()); current = ''; } } else if (parenDepth > 0) { current += char; } else if (char === ',' || char === '\n') { if (current.trim()) tokens.push(current.trim()); current = ''; } else { current += char; } } if (current.trim()) tokens.push(current.trim()); return tokens;}
// Parse a token into a beadfunction parseBead(token) { token = token.trim(); // Handle parenthesized expressions if (token.startsWith('(') && token.endsWith(')')) { const inner = token.slice(1, -1).trim(); const parts = inner.split(/\s+/); const head = parts[0]; // Check for timing like (1s ...) if (/^\d+(\.\d+)?s$/.test(head)) { return { type: 'timing', name: head, children: parts.slice(1).map(p => parseBead(p)), style: BEAD_STYLES.timing }; } // Check for known commands const type = COMMAND_TYPES[head] || 'state'; return { type, name: head, args: parts.slice(1), children: type === 'loop' ? parts.slice(2).map(p => parseBead(p)) : [], style: BEAD_STYLES[type] }; } // Handle simple commands like "red" or "ink blue" const parts = token.split(/\s+/); const head = parts[0]; // Check if it's a color name (acts as wipe) if (COLOR_NAMES[head] && parts.length === 1) { return { type: 'state', name: head, args: [], style: { ...BEAD_STYLES.state, color: COLOR_NAMES[head] } }; } const type = COMMAND_TYPES[head] || 'state'; return { type, name: head, args: parts.slice(1), style: BEAD_STYLES[type] };}
// Layout beads in a rosary patternfunction layoutRosary(beads, width, height) { const positions = []; const n = beads.length; if (n === 0) return positions; const centerX = width / 2; const centerY = height / 2; const radius = Math.min(width, height) * 0.35; const beadRadius = Math.max(8, Math.min(20, 200 / n)); // Arrange in a circle for (let i = 0; i < n; i++) { const angle = (i / n) * Math.PI * 2 - Math.PI / 2; // Start from top positions.push({ x: centerX + Math.cos(angle) * radius, y: centerY + Math.sin(angle) * radius, radius: beadRadius, bead: beads[i], angle }); } return positions;}
// Draw the rosaryfunction drawRosary(canvas, positions) { const stringColor = [100, 100, 120]; // Draw the string (connect all beads in a loop) for (let i = 0; i < positions.length; i++) { const curr = positions[i]; const next = positions[(i + 1) % positions.length]; canvas.line(curr.x, curr.y, next.x, next.y, stringColor, 2); } // Draw beads for (const pos of positions) { const { x, y, radius, bead } = pos; const color = bead.style.color; // Draw bead shadow canvas.fillCircle(x + 2, y + 2, radius, [20, 20, 30]); // Draw bead canvas.fillCircle(x, y, radius, color); // Highlight canvas.fillCircle(x - radius * 0.3, y - radius * 0.3, radius * 0.3, [Math.min(255, color[0] + 60), Math.min(255, color[1] + 60), Math.min(255, color[2] + 60)]); } // Draw legend drawLegend(canvas, positions);}
function drawLegend(canvas, positions) { const startY = 20; const startX = 10; let y = startY; // Draw title // (Would need font rendering - skip for now) // Draw bead labels with lines pointing to beads const labelColor = [180, 180, 200]; // Just draw type indicators in corner const types = ['state', 'draw', 'effect', 'timing', 'loop']; types.forEach((type, i) => { const style = BEAD_STYLES[type]; canvas.fillCircle(startX + 8, y + i * 18, 6, style.color); });}
// Fetch code from ACasync function fetchCode(slug) { if (!slug.startsWith('$')) slug = '$' + slug; try { const response = await fetch(`https://aesthetic.computer/api/code/${slug.slice(1)}`); if (response.ok) { const data = await response.json(); return data.code || data.text || ''; } } catch (e) { // Ignore } return null;}
async function main() { let code = process.argv[2]; const asciiMode = process.argv.includes('--ascii'); // Check if it's a slug if (code && (code.startsWith('$') || /^[a-z0-9]{3}$/i.test(code))) { const fetched = await fetchCode(code); if (fetched) { code = fetched; console.error(`Fetched: ${code.substring(0, 50)}...`); } } // Or read from stdin if (!code) { const chunks = []; for await (const chunk of process.stdin) { chunks.push(chunk); } code = Buffer.concat(chunks).toString().trim(); } if (!code) { console.error('Usage: rosary-sixel.mjs "code" or rosary-sixel.mjs $slug'); console.error(' rosary-sixel.mjs "code" --ascii (text mode)'); console.error('Example: rosary-sixel.mjs "red, ink blue, line 0 0 100 100"'); process.exit(1); } // Parse and render const tokens = tokenize(code); const beads = tokens.map(parseBead); console.error(`Parsed ${beads.length} beads: ${beads.map(b => b.name).join(' → ')}`); if (asciiMode) { // ASCII rosary renderAsciiRosary(beads); } else { // Sixel rosary const canvas = new SixelCanvas(WIDTH, HEIGHT); const positions = layoutRosary(beads, WIDTH, HEIGHT); drawRosary(canvas, positions); process.stdout.write('\x1b[H\x1b[2J'); // Clear screen process.stdout.write(canvas.toSixel()); process.stdout.write('\n'); }}
// ASCII rosary rendererfunction renderAsciiRosary(beads) { const n = beads.length; if (n === 0) { console.log('(empty rosary)'); return; } // Type symbols const symbols = { state: '○', draw: '●', effect: '◆', timing: '◇', branch: '◈', loop: '⬡', atom: '·' }; // ANSI colors const colors = { state: '\x1b[91m', // red draw: '\x1b[94m', // blue effect: '\x1b[93m', // yellow timing: '\x1b[95m', // magenta branch: '\x1b[92m', // green loop: '\x1b[33m', // orange-ish atom: '\x1b[90m', // gray }; const reset = '\x1b[0m'; const dim = '\x1b[2m'; // Circular layout for larger programs if (n > 4) { renderCircularRosary(beads, symbols, colors, reset, dim); } else { // Linear for small programs console.log(); console.log(' ┌' + '─'.repeat(n * 4 + 2) + '┐'); console.log(' │ ' + dim + 'LOOP' + reset + ' '.repeat(n * 4 - 2) + '│'); console.log(' └─┬' + '─'.repeat(n * 4) + '┬┘'); console.log(' │' + ' '.repeat(n * 4) + '│'); let beadLine = ' '; let nameLine = ' '; for (let i = 0; i < n; i++) { const b = beads[i]; const sym = symbols[b.type] || '○'; const col = colors[b.type] || ''; beadLine += col + sym + reset + ' ── '; const name = b.name.substring(0, 5).padEnd(5); nameLine += name; } beadLine = beadLine.slice(0, -4) + dim + ' ↩' + reset; console.log(beadLine); console.log(dim + nameLine + reset); } console.log(); console.log(dim + ' Legend: ' + reset + colors.state + '○' + reset + ' state ' + colors.draw + '●' + reset + ' draw ' + colors.effect + '◆' + reset + ' effect ' + colors.timing + '◇' + reset + ' timing ' + colors.loop + '⬡' + reset + ' loop'); console.log();}
// Render circular rosary for larger programsfunction renderCircularRosary(beads, symbols, colors, reset, dim) { const n = beads.length; const width = 50; const height = 20; const cx = width / 2; const cy = height / 2; const rx = 18; // x radius const ry = 7; // y radius (compressed for terminal) // Create grid const grid = Array(height).fill(null).map(() => Array(width).fill(' ')); const colorGrid = Array(height).fill(null).map(() => Array(width).fill('')); // Place beads around ellipse const positions = []; for (let i = 0; i < n; i++) { const angle = (i / n) * Math.PI * 2 - Math.PI / 2; const x = Math.round(cx + Math.cos(angle) * rx); const y = Math.round(cy + Math.sin(angle) * ry); positions.push({ x, y, bead: beads[i], index: i }); } // Draw connecting arcs (simplified as lines) for (let i = 0; i < n; i++) { const curr = positions[i]; const next = positions[(i + 1) % n]; drawLine(grid, curr.x, curr.y, next.x, next.y, dim + '·' + reset); } // Place beads (overwrite lines) for (const pos of positions) { const b = pos.bead; const sym = symbols[b.type] || '○'; const col = colors[b.type] || ''; if (pos.y >= 0 && pos.y < height && pos.x >= 0 && pos.x < width) { grid[pos.y][pos.x] = sym; colorGrid[pos.y][pos.x] = col; } } // Render console.log(); for (let y = 0; y < height; y++) { let line = ' '; for (let x = 0; x < width; x++) { const col = colorGrid[y][x]; const char = grid[y][x]; if (col) { line += col + char + reset; } else { line += char; } } console.log(line); } // Labels below console.log(); console.log(dim + ' Beads: ' + reset + beads.map((b, i) => { const col = colors[b.type] || ''; return col + (i + 1) + '.' + b.name + reset; }).join(' → '));}
// Bresenham line for ASCIIfunction drawLine(grid, x0, y0, x1, y1, char) { const dx = Math.abs(x1 - x0); const dy = Math.abs(y1 - y0); const sx = x0 < x1 ? 1 : -1; const sy = y0 < y1 ? 1 : -1; let err = dx - dy; let x = x0, y = y0; while (true) { if (y >= 0 && y < grid.length && x >= 0 && x < grid[0].length) { if (grid[y][x] === ' ') grid[y][x] = char; } if (x === x1 && y === y1) break; const e2 = 2 * err; if (e2 > -dy) { err -= dy; x += sx; } if (e2 < dx) { err += dx; y += sy; } }}
main().catch(console.error);