This week I leaned into organizing “time” by sketching a neon waveform timeline that mimics the clean, minimal look of Ableton’s clip view. I’ve been producing in Ableton a lot lately, so I wanted the sketch to feel like I was staring at one of my sessions—multiple layers of audio data, a transport playhead, and that pulse of neon energy that keeps a track moving. The plan is to swap my procedural data for a real beat later so the visuals sync with my own audio.
Structure with functions
I broke the sketch into single-purpose helpers like generateWaves(), drawWave(), and drawPlayhead(). Each waveform layer is just an array of numbers, looped over to plot points across the canvas. buildLayer() synthesizes those arrays with sin, noise, and an envelope function so I can fake the look of different instruments.
generateWaves() initializes the layers by calling buildLayer() with different settings. buildLayer() blends sine waves, Perlin noise, and smoothPulse() to shape each wave’s motion. drawWave() maps those values to x/y positions and uses curveVertex() to render smooth curves, while drawFillBand() adds a translucent base to separate layers.
drawBackdrop() builds the 16-measure grid, drawPlayhead() moves the vertical marker with lerp(), and drawHUD() translates playback progress into measures and beats. For interaction, mousePressed() handles scrubbing and keyPressed() toggles playback speed. Each helper handles one job, keeping the sketch modular and clean.
Timing Logic
A simple timer advances while the sketch plays. The transport converts the elapsed seconds into measures and beats, giving me a visual metronome and an easy hook if I later feed in true tempo data.
Interaction
Clicking the timeline jumps the playhead, and keys 1–3 nudge playback speed—small touches that make it feel more like navigating a DAW, yet they only require conditionals and map(), both already in our toolkit.
Palette and Mood
I used HSB mode for quick neon tweaks and layered transparent strokes and fills to suggest evolving audio energy. Each track sits on its own band, so the canvas reads as a stacked arrangement rather than a single waveform.
The animation layers three waveform lanes across a timeline grid, each drawn from arrays of sampled values that mimic bass, lead, and percussion energy. Helper functions (generateWaves(), buildLayer(), drawWave(), drawPlayhead()) keep the logic tidy: buildLayer() mixes sine waves, noise, and a smooth envelope, while drawWave() iterates through the arrays and plots their curves from left to right. A transport clock advances with each frame; it converts elapsed seconds into measures and beats, drives the sweeping playhead, and updates the HUD so the loop always feels synced. Color lives in HSB space, letting the neon palette shift smoothly as translucent strokes stack into glossy bands on the canvas.
Challenges I Faced
Balancing clarity with atmosphere took a few iterations. Early drafts drowned in gradients and glow, which looked cool but obscured the actual waveform shapes. Dialing back the background and giving each lane its own band kept the arrangement readable. I also spent time tuning the fake audio data: if the noise was too strong the wave looked chaotic, but too little noise made every lane feel identical. Tweaking the sine/noise ratios and envelopes for each layer finally gave the mix a believable rhythm.