Sound Abstraction

Rendering audio beyond the waveform.

This module experiments with ways to translate sonic data—amplitude peaks, frequency bands, rhythmic signatures—into crisp monochrome compositions. The goal: visuals that feel like listening, even when muted.

Live spectrum studies

Sample a random ambient recording and watch its frequency spectrum evolve. Pick the renderer style that best fits your study.

Ambient Sound Visualiser

Press play to listen and watch the Layered sine waves respond in real time.

Now queued Select refresh to sample a new sound.
Canvas Setup

Define the stage size and background that the waves are rendered on.

Canvas width 640px
Canvas height 220px
Wave Arrangement

Control how many waves are rendered and how frequently they sample the audio.

3
FFT resolution 1024
Visual Styling

Tune the wave appearance, accents, and area fill.

Line thickness 2.0px
Wave colours

Ambient Sound Visualiser

Press play to listen and watch the Circular sine halo respond in real time.

Now queued Select refresh to sample a new sound.
Canvas Setup

Define the stage size and background that the waves are rendered on.

Canvas width 640px
Canvas height 220px
Wave Arrangement

Control how many waves are rendered and how frequently they sample the audio.

3
FFT resolution 1024
Visual Styling

Tune the wave appearance, accents, and area fill.

Line thickness 2.0px
Wave colours

Ambient Sound Visualiser

Press play to listen and watch the Spectral energy lattice respond in real time.

Now queued Select refresh to sample a new sound.
Canvas Setup

Define the stage size and background that the waves are rendered on.

Canvas width 640px
Canvas height 320px
Sound Analysis

Adjust how finely the analyser samples and how smoothly energy changes are tracked.

FFT resolution 1024
Smoothing 0.20
Matrix Density

Set the grid resolution (multiples of 12) used for dot placement.

Cells per side 120 × 120
Highlight Trail

Control how many recent highlights remain visible as new notes appear.

Active cells 20
Grid Overlay

Toggle the lattice guides that frame each cell.

Tone Colours

Assign one colour per semitone (C → B); highlights use the matching tone colour.

Ambient Sound Visualiser

Press play to listen and watch the Chromatic bloom lattice respond in real time.

Now queued Select refresh to sample a new sound.
Canvas Setup

Define the stage size and background that the waves are rendered on.

Canvas width 640px
Canvas height 320px
Sound Analysis

Adjust how finely the analyser samples and how smoothly energy changes are tracked.

FFT resolution 1024
Smoothing 0.20
Matrix Density

Set the grid resolution (multiples of 12) used for dot placement.

Cells per side 120 × 120
Highlight Trail

Control how many recent highlights remain visible as new notes appear.

Active cells 20
Grid Overlay

Toggle the lattice guides that frame each cell.

Blob Styling

Toggle supporting layers for the bloom renderer.

Tone Colours

Assign one colour per semitone (C → B); highlights use the matching tone colour.

Data2Design

An ongoing study of how raw signals become visual systems, crafted by Honest Playground Association.