ASCII Art Music Visualizer Built with React and Tone.js

A browser toy that turns mouse movement into animated ASCII patterns and plays notes and chords as you interact with it.

@vyakart

claude.ai/public/artifacts/18fe897f-6e56-4464-91d3-fffdc9c5eff5visit ↗

process.log7 fields

toolsClaude

iterationsA few tries

built the visual patterns first, then added an audio layer on top

time20 mins

%_ai71

me 29

ai 71

self-reported · generously rounded

# how_it_was_made

This is a browser-based instrument: four generative ASCII patterns (with names like Balance, Duality, Flow, Chaos) that redraw using math functions like sine and cosine, with mouse clicks and drags mapped to musical notes and chords through the Tone.js audio library. I described the concept and asked for a working prototype, and the AI wrote the pattern math and character-mapping logic (turning numeric values into ASCII density characters like █, ▓, ▒, ░) in one pass. From there I asked for sound: clicking cycles through patterns and plays a chord, dragging plays notes where horizontal position sets pitch and vertical position sets note length. I also had the AI write a technical design document covering the architecture, audio mapping, and a planned fifth mode that simulates Conway's Game of Life with glider patterns, meant as a spec to hand to a coding-focused AI tool for the next build phase.

questions0

no questions yet

ask how it was made — the dead-ends are usually the good part

ask about the process…sign in

~/slopfolio··

# prompting_approach

Started with a loose creative brief, let the AI produce a full working version, then added one feature at a time (sound, then documentation, then a new pattern spec) rather than describing everything up front. Later prompts pointed back at specific sections of the design document so requests stayed precise instead of vague.