About Wave Drawer

Draw a waveform with your mouse or finger, then play it on a keyboard… the idea was simple, the execution was relatively simple, the result was… perfectly whelming. I mean, how much can you really do with a single note. That said, I think it’s a cool way to visualize and hear the difference between the tones.

• Draw to design sound — sketch any shape on the canvas and it becomes a playable waveform
• Preset waveforms — start from sine, sawtooth, square, or triangle and modify from there
• Piano keyboard — play your waveform chromatically with mouse, touch, or computer keyboard (A-K keys)
• Sustain mode — toggle notes on/off without holding keys
• Live waveform display — see your drawn shape and the real-time audio output overlaid

How it works

Your drawn waveform is taken into 512 samples, the lines are converted [1][2] to points and then used to create a Web Audio API PeriodicWave. This means the browser’s oscillator natively plays your custom shape at any pitch. Drawing updates the waveform in real time. Sustain and harmonize help “kinda” make it ok to listen to.

• [1] converted** to Fourier coefficients via DFT
• [2] ai coded this, the math was way above me.

Keyboard shortcuts

White keys: A S D F G H J K — Black keys: W E T Y U