🎹 Synth Universe

\n \n \n \n\n","label",[189,69],"frontend","pulls","branches","forks","envVars",{"_197":26,"_199":26},"connections",{"_197":26,"_198":26},"count","unfilledCount","emptyCount",{"_34":275,"_13":189,"_67":181,"_44":-5,"_36":37,"_182":41,"_183":105,"_38":276,"_40":26,"_70":272,"_185":-5,"_71":24,"_187":-5,"_215":277,"_17":278},{"_34":270,"_13":269,"_67":263,"_44":181,"_36":37,"_182":41,"_183":105,"_38":271,"_40":26,"_70":272,"_185":-5,"_71":24,"_187":-5,"_215":273,"_17":274},{"_34":260,"_13":261,"_67":262,"_44":263,"_36":37,"_182":264,"_183":105,"_38":265,"_40":77,"_70":230,"_185":266,"_71":24,"_187":-5,"_215":267,"_17":268},{"_34":252,"_13":253,"_67":254,"_44":181,"_36":37,"_182":255,"_183":105,"_38":256,"_40":41,"_70":21,"_185":257,"_71":24,"_187":-5,"_215":258,"_17":259},{"_34":180,"_13":69,"_67":68,"_44":181,"_36":37,"_182":85,"_183":105,"_38":249,"_40":77,"_70":21,"_185":186,"_71":24,"_187":-5,"_215":250,"_17":251},{"_34":242,"_13":243,"_67":244,"_44":181,"_36":37,"_182":41,"_183":105,"_38":245,"_40":26,"_70":230,"_185":246,"_71":24,"_187":-5,"_215":247,"_17":248},{"_34":234,"_13":235,"_67":236,"_44":181,"_36":37,"_182":237,"_183":105,"_38":238,"_40":26,"_70":230,"_185":239,"_71":24,"_187":-5,"_215":240,"_17":241},{"_34":225,"_13":226,"_67":227,"_44":181,"_36":37,"_182":228,"_183":105,"_38":229,"_40":26,"_70":230,"_185":231,"_71":24,"_187":-5,"_215":232,"_17":233},{"_34":218,"_13":219,"_67":220,"_44":-5,"_36":37,"_182":128,"_183":105,"_38":221,"_40":41,"_70":21,"_185":222,"_71":24,"_187":-5,"_215":223,"_17":224},{"_34":210,"_13":211,"_67":103,"_44":-5,"_36":37,"_182":41,"_183":105,"_38":212,"_40":26,"_70":213,"_185":214,"_71":24,"_187":-5,"_215":216,"_17":217},"5bc154f2-5517-11f1-ab88-ee650bb23af1","index.ts",["D",1779369423632],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[211],"fa907c66-5517-11f1-885c-ee650bb23af1","README.md","019e4aae-b356-73f8-880d-c1008e589272",["D",1779369690126],"# 🎹 Synth Universe\n\nA browser-based synthesizer with real-time audio-reactive visualizations. Play music with your keyboard and watch the universe respond.\n\n## Features\n\n- **Playable piano keyboard** — use keys A–L (white) and W/E/T/Y/U/O/P (black) or click the on-screen keys\n- **4 waveforms** — sine, triangle, sawtooth, square\n- **Audio-reactive visuals** — frequency bars, expanding rings, morphing geometry, waveform oscilloscope, drifting stars\n- **Reverb** — built-in convolution reverb for lush sound\n- **Touch support** — works on mobile too\n\n## Architecture\n\n```mermaid\ngraph TD\n Browser -->|GET /| Hono[index.ts]\n Hono -->|serves| HTML[index.html]\n HTML -->|loads| Entry[index.tsx]\n Entry -->|renders| App[App.tsx]\n App -->|audio| Synth[synth.ts]\n App -->|graphics| Viz[visualizer.ts]\n Synth -->|frequency data| Viz\n```\n",[],[219],"d72a3136-5517-11f1-a028-ee650bb23af1","visualizer.ts","d72a31d6-5517-11f1-a028-ee650bb23af1",8,["D",1779369630756],"script","// Canvas visualizer — renders audio-reactive graphics\nimport { getFrequencyData, getWaveformData, getActiveNoteCount } from \"./synth.ts\";\n\nlet hueOffset = 0;\nlet time = 0;\nlet rings: { radius: number; hue: number; alpha: number; width: number }[] = [];\nlet stars: { x: number; y: number; size: number; hue: number; speed: number; angle: number }[] = [];\n\nfunction initStars(w: number, h: number) {\n stars = [];\n for (let i = 0; i < 200; i++) {\n stars.push({\n x: Math.random() * w,\n y: Math.random() * h,\n size: Math.random() * 2 + 0.5,\n hue: Math.random() * 360,\n speed: Math.random() * 0.5 + 0.1,\n angle: Math.random() * Math.PI * 2,\n });\n }\n}\n\nexport function render(ctx: CanvasRenderingContext2D, width: number, height: number) {\n time++;\n hueOffset = (hueOffset + 0.2) % 360;\n\n if (stars.length === 0) initStars(width, height);\n\n const freq = getFrequencyData();\n const wave = getWaveformData();\n const noteCount = getActiveNoteCount();\n\n // Average energy levels\n let bass = 0, mid = 0, high = 0, total = 0;\n const len = freq.length;\n for (let i = 0; i < len; i++) {\n const v = freq[i];\n total += v;\n if (i < len * 0.1) bass += v;\n else if (i < len * 0.4) mid += v;\n else high += v;\n }\n bass = bass / (len * 0.1) / 255;\n mid = mid / (len * 0.3) / 255;\n high = high / (len * 0.6) / 255;\n const energy = total / len / 255;\n\n // Background fade\n ctx.fillStyle = `rgba(0, 0, 5, ${0.15 - energy * 0.08})`;\n ctx.fillRect(0, 0, width, height);\n\n const cx = width / 2;\n const cy = height / 2;\n\n // Stars react to music\n for (const star of stars) {\n star.angle += star.speed * 0.01 * (1 + energy * 3);\n const drift = energy * 2;\n star.x += Math.cos(star.angle) * drift;\n star.y += Math.sin(star.angle) * drift;\n if (star.x < 0) star.x = width;\n if (star.x > width) star.x = 0;\n if (star.y < 0) star.y = height;\n if (star.y > height) star.y = 0;\n\n const pulse = star.size * (1 + energy * 2);\n ctx.beginPath();\n ctx.arc(star.x, star.y, pulse, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${(star.hue + hueOffset) % 360}, 80%, 80%, ${0.3 + energy * 0.5})`;\n ctx.fill();\n }\n\n // Spawn rings on notes\n if (noteCount > 0 && time % 4 === 0) {\n rings.push({\n radius: 10,\n hue: (hueOffset + Math.random() * 90) % 360,\n alpha: 0.8,\n width: 2 + noteCount * 1.5,\n });\n }\n\n // Draw expanding rings\n rings = rings.filter(r => {\n r.radius += 3 + energy * 8;\n r.alpha -= 0.012;\n if (r.alpha <= 0) return false;\n ctx.beginPath();\n ctx.arc(cx, cy, r.radius, 0, Math.PI * 2);\n ctx.strokeStyle = `hsla(${r.hue}, 90%, 60%, ${r.alpha})`;\n ctx.lineWidth = r.width * r.alpha;\n ctx.stroke();\n return true;\n });\n\n // Circular frequency bars\n if (freq.length > 0) {\n const bars = 180;\n const step = Math.floor(freq.length / bars);\n for (let i = 0; i < bars; i++) {\n const val = freq[i * step] / 255;\n const angle = (i / bars) * Math.PI * 2 - Math.PI / 2;\n const baseR = 80 + bass * 40;\n const barLen = val * 150 * (1 + energy);\n const x1 = cx + Math.cos(angle) * baseR;\n const y1 = cy + Math.sin(angle) * baseR;\n const x2 = cx + Math.cos(angle) * (baseR + barLen);\n const y2 = cy + Math.sin(angle) * (baseR + barLen);\n\n const hue = (i / bars * 360 + hueOffset) % 360;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.strokeStyle = `hsla(${hue}, 100%, ${50 + val * 30}%, ${0.4 + val * 0.6})`;\n ctx.lineWidth = 2;\n ctx.stroke();\n\n // Glow dots at tips\n if (val > 0.5) {\n ctx.beginPath();\n ctx.arc(x2, y2, 2 + val * 3, 0, Math.PI * 2);\n ctx.fillStyle = `hsla(${hue}, 100%, 80%, ${val * 0.8})`;\n ctx.fill();\n }\n }\n }\n\n // Center orb\n const orbSize = 30 + bass * 50 + energy * 20;\n const orbGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, orbSize);\n const h1 = (hueOffset) % 360;\n const h2 = (hueOffset + 120) % 360;\n orbGrad.addColorStop(0, `hsla(${h1}, 100%, 90%, ${0.6 + energy * 0.4})`);\n orbGrad.addColorStop(0.5, `hsla(${h2}, 100%, 50%, ${0.3 + energy * 0.3})`);\n orbGrad.addColorStop(1, `hsla(${h2}, 100%, 30%, 0)`);\n ctx.beginPath();\n ctx.arc(cx, cy, orbSize, 0, Math.PI * 2);\n ctx.fillStyle = orbGrad;\n ctx.fill();\n\n // Waveform oscilloscope\n if (wave.length > 0) {\n ctx.beginPath();\n const sliceWidth = width / wave.length;\n let x = 0;\n for (let i = 0; i < wave.length; i++) {\n const v = wave[i] / 128.0;\n const y = cy + (v - 1) * 100 * (1 + energy * 2);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n x += sliceWidth;\n }\n ctx.strokeStyle = `hsla(${(hueOffset + 180) % 360}, 100%, 70%, ${0.15 + energy * 0.3})`;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n }\n\n // Morphing geometry\n const shapes = 3 + Math.floor(noteCount * 1.5);\n for (let s = 0; s < shapes; s++) {\n const sides = 3 + s;\n const r = 120 + s * 60 + mid * 80;\n const rotSpeed = (s % 2 === 0 ? 1 : -1) * 0.003 * (1 + energy * 3);\n const rot = time * rotSpeed + s * 0.5;\n ctx.beginPath();\n for (let i = 0; i <= sides; i++) {\n const a = (i / sides) * Math.PI * 2 + rot;\n const wobble = 1 + Math.sin(time * 0.02 + i) * energy * 0.2;\n const px = cx + Math.cos(a) * r * wobble;\n const py = cy + Math.sin(a) * r * wobble;\n if (i === 0) ctx.moveTo(px, py);\n else ctx.lineTo(px, py);\n }\n ctx.closePath();\n ctx.strokeStyle = `hsla(${(hueOffset + s * 40) % 360}, 80%, 60%, ${0.1 + energy * 0.2})`;\n ctx.lineWidth = 1 + energy * 2;\n ctx.stroke();\n }\n}\n",[],[189,226],"c3c52538-5517-11f1-8753-ee650bb23af1","synth.ts","c3c5260a-5517-11f1-8753-ee650bb23af1",7,["D",1779369598210],"// Audio engine — Web Audio API synthesizer + analyser\nlet audioCtx: AudioContext | null = null;\nlet analyser: AnalyserNode | null = null;\nlet masterGain: GainNode | null = null;\nconst activeOscs = new Map();\n\nconst NOTE_FREQS: Record = {\n a: 261.63, // C4\n w: 277.18, // C#4\n s: 293.66, // D4\n e: 311.13, // D#4\n d: 329.63, // E4\n f: 349.23, // F4\n t: 369.99, // F#4\n g: 392.00, // G4\n y: 415.30, // G#4\n h: 440.00, // A4\n u: 466.16, // A#4\n j: 493.88, // B4\n k: 523.25, // C5\n o: 554.37, // C#5\n l: 587.33, // D5\n p: 622.25, // D#5\n};\n\nexport type WaveShape = \"sine\" | \"triangle\" | \"sawtooth\" | \"square\";\n\nlet currentWave: WaveShape = \"sawtooth\";\nlet reverbNode: ConvolverNode | null = null;\nlet reverbGain: GainNode | null = null;\nlet dryGain: GainNode | null = null;\n\nexport function setWaveShape(w: WaveShape) {\n currentWave = w;\n}\n\nexport function getWaveShape(): WaveShape {\n return currentWave;\n}\n\nfunction createReverb(ctx: AudioContext): ConvolverNode {\n const conv = ctx.createConvolver();\n const rate = ctx.sampleRate;\n const length = rate * 2.5;\n const buf = ctx.createBuffer(2, length, rate);\n for (let ch = 0; ch < 2; ch++) {\n const data = buf.getChannelData(ch);\n for (let i = 0; i < length; i++) {\n data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2.5);\n }\n }\n conv.buffer = buf;\n return conv;\n}\n\nexport function initAudio() {\n if (audioCtx) return;\n audioCtx = new AudioContext();\n analyser = audioCtx.createAnalyser();\n analyser.fftSize = 2048;\n analyser.smoothingTimeConstant = 0.85;\n\n masterGain = audioCtx.createGain();\n masterGain.gain.value = 0.3;\n\n reverbNode = createReverb(audioCtx);\n reverbGain = audioCtx.createGain();\n reverbGain.gain.value = 0.4;\n dryGain = audioCtx.createGain();\n dryGain.gain.value = 0.7;\n\n masterGain.connect(dryGain);\n masterGain.connect(reverbNode);\n reverbNode.connect(reverbGain);\n dryGain.connect(analyser);\n reverbGain.connect(analyser);\n analyser.connect(audioCtx.destination);\n}\n\nexport function noteOn(key: string) {\n if (!audioCtx || !masterGain) return;\n if (activeOscs.has(key)) return;\n const freq = NOTE_FREQS[key];\n if (!freq) return;\n\n const osc = audioCtx.createOscillator();\n osc.type = currentWave;\n osc.frequency.value = freq;\n\n const gain = audioCtx.createGain();\n gain.gain.setValueAtTime(0, audioCtx.currentTime);\n gain.gain.linearRampToValueAtTime(0.5, audioCtx.currentTime + 0.02);\n\n osc.connect(gain);\n gain.connect(masterGain);\n osc.start();\n\n activeOscs.set(key, { osc, gain });\n}\n\nexport function noteOff(key: string) {\n if (!audioCtx) return;\n const entry = activeOscs.get(key);\n if (!entry) return;\n const { osc, gain } = entry;\n gain.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 0.3);\n setTimeout(() => { try { osc.stop(); osc.disconnect(); } catch {} }, 400);\n activeOscs.delete(key);\n}\n\nexport function getFrequencyData(): Uint8Array {\n if (!analyser) return new Uint8Array(0);\n const data = new Uint8Array(analyser.frequencyBinCount);\n analyser.getByteFrequencyData(data);\n return data;\n}\n\nexport function getWaveformData(): Uint8Array {\n if (!analyser) return new Uint8Array(0);\n const data = new Uint8Array(analyser.frequencyBinCount);\n analyser.getByteTimeDomainData(data);\n return data;\n}\n\nexport function getActiveNoteCount(): number {\n return activeOscs.size;\n}\n\nexport function getNoteFreqs() {\n return NOTE_FREQS;\n}\n",[],[189,235],"5bc13e40-5517-11f1-ab88-ee650bb23af1","index.tsx","019e4aae-b356-73f8-880d-b9831ff22db6",["D",1779369423632],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[189,243],["D",1779369580124],[],[189,69],"77db300e-5517-11f1-b5c7-ee650bb23af1","favicon.svg","019e4aae-b356-73f8-880d-b185c53e237c",5,["D",1779369470803],"\n\n",[],[189,253],"ef3c0b14-5517-11f1-a028-ee650bb23af1","App.tsx","019e4aae-b355-7240-ab73-c6aa8f28b61a","019e4aae-b356-73f8-880d-aca478e9634a",9,["D",1779369671129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n initAudio, noteOn, noteOff, getNoteFreqs,\n setWaveShape, getWaveShape,\n type WaveShape,\n} from \"../synth.ts\";\nimport { render } from \"../visualizer.ts\";\n\nconst KEY_LABELS: Record = {\n a: { note: \"C\" }, w: { note: \"C#\", black: true },\n s: { note: \"D\" }, e: { note: \"D#\", black: true },\n d: { note: \"E\" },\n f: { note: \"F\" }, t: { note: \"F#\", black: true },\n g: { note: \"G\" }, y: { note: \"G#\", black: true },\n h: { note: \"A\" }, u: { note: \"A#\", black: true },\n j: { note: \"B\" },\n k: { note: \"C\" }, o: { note: \"C#\", black: true },\n l: { note: \"D\" }, p: { note: \"D#\", black: true },\n};\n\nconst WHITE_KEYS = [\"a\",\"s\",\"d\",\"f\",\"g\",\"h\",\"j\",\"k\",\"l\"];\nconst BLACK_KEYS_MAP: Record = {\n w: { key: \"w\", offset: 0 },\n e: { key: \"e\", offset: 1 },\n t: { key: \"t\", offset: 3 },\n y: { key: \"y\", offset: 4 },\n u: { key: \"u\", offset: 5 },\n o: { key: \"o\", offset: 7 },\n p: { key: \"p\", offset: 8 },\n};\n\nconst WAVES: WaveShape[] = [\"sine\", \"triangle\", \"sawtooth\", \"square\"];\nconst WAVE_ICONS: Record = {\n sine: \"∿\",\n triangle: \"△\",\n sawtooth: \"⩘\",\n square: \"⊓\",\n};\n\nexport function App() {\n const canvasRef = useRef(null);\n const [started, setStarted] = useState(false);\n const [wave, setWave] = useState(\"sawtooth\");\n const [activeKeys, setActiveKeys] = useState>(new Set());\n const [showHelp, setShowHelp] = useState(true);\n\n const start = useCallback(() => {\n initAudio();\n setStarted(true);\n setTimeout(() => setShowHelp(false), 4000);\n }, []);\n\n // Keyboard handler\n useEffect(() => {\n if (!started) return;\n const freqs = getNoteFreqs();\n const down = (e: KeyboardEvent) => {\n if (e.repeat) return;\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOn(k);\n setActiveKeys(prev => new Set(prev).add(k));\n }\n };\n const up = (e: KeyboardEvent) => {\n const k = e.key.toLowerCase();\n if (freqs[k]) {\n noteOff(k);\n setActiveKeys(prev => { const s = new Set(prev); s.delete(k); return s; });\n }\n };\n window.addEventListener(\"keydown\", down);\n window.addEventListener(\"keyup\", up);\n return () => { window.removeEventListener(\"keydown\", down); window.removeEventListener(\"keyup\", up); };\n }, [started]);\n\n // Canvas animation\n useEffect(() => {\n if (!started) return;\n const canvas = canvasRef.current!;\n const ctx = canvas.getContext(\"2d\")!;\n let animId: number;\n\n const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; };\n resize();\n window.addEventListener(\"resize\", resize);\n\n const loop = () => {\n render(ctx, canvas.width, canvas.height);\n animId = requestAnimationFrame(loop);\n };\n loop();\n return () => { cancelAnimationFrame(animId); window.removeEventListener(\"resize\", resize); };\n }, [started]);\n\n if (!started) {\n return (\n

🎹

\n SYNTH UNIVERSE\n

\n Audio-reactive visualizer & keyboard synthesizer\n

\n ▶ CLICK TO START\n

\n \n

\n Use keyboard keys A–L to play • Works best on desktop\n

\n );\n }\n\n const keyWidth = 52;\n const pianoWidth = WHITE_KEYS.length * keyWidth;\n\n return (\n <>\n

History · index.html