See sound as a rainbow. Try the live instrument at studio.spectrum-chisel.tak3.jp — guide and docs at spectrum-chisel.tak3.jp.
This project generates abstract visualizations that accumulate over time from audio captured in real time. Its central aim is to capture "sound" — a fleeting phenomenon — in a visual, organic form, and to preserve it as a permanent record: an artwork.
- 🎧 Visualizing the structure of sound: Sound is decomposed into seven frequency bands — an audible "rainbow" from low frequency (red) to high frequency (violet) — and each band is assigned a distinct geometric, abstract drawing style, translating the hierarchical structure of sound into visual expression.
- 🌱 Organic motion and accumulation: Animations such as noise, fluctuation, and rotation respond to the intensity and change of the sound, accumulating on the screen as time passes.
- 🖼️ Toward static works: Drawings can be saved as SVG, with a design that anticipates applications such as printing and printmaking.
Through this approach, the project offers the experience of "seeing sound" rather than "hearing sound," enabling creative and analytical use by artists and researchers.
This project is a creative-coding tool that generates abstract visual art from the spectral information of sound, built on the p5.js family of libraries. With "Phase 1: Preparing the material and the 'chisel'" complete, the basic foundation is now in place for inputting sound and adjusting a rich set of parameters to create "sculptures of sound and time."
Use the controller at the top right of the screen to manage the sound source and playback.
| UI element | Function |
|---|---|
| Mic input button | Inputs audio from a microphone connected to your PC in real time. |
| File playback button | Opens a file-selection dialog so you can load and play any audio file (mp3, wav, etc.). |
| Mic Boost | A sensitivity-amplification slider dedicated to mic input. When the mic input level is low, raise this value to increase drawing sensitivity. |
| File Volume | A volume slider dedicated to audio-file playback. Adjusts the input level of the source to control drawing sensitivity. |
| Play / Pause | Toggles the start and pause of the visualization. |
| Stop / Reset | Stops playback and clears all drawing on the canvas. |
Use the UI panel at the top left to fine-tune the appearance of the drawing.
- General settings (Controls, Frame Rate)
- Save as SVG or PNG, show/hide the UI, and reset the canvas.
- The
Frame Rateslider adjusts how many times per second the drawing is rendered. Lower values produce works in which time passes more slowly.
- Global layers (Spectrum Layers)
- Spectrum Ring: Toggles the layer that draws the energy of all frequency bands as a ring.
GainandThresholdadjust its sensitivity independently. - Spectrum Diff: A layer that expresses the volume difference from the previous frame as stippling. It captures attacks and passages with sharp change. Its sensitivity is adjustable as well.
- Spectrum Ring: Toggles the layer that draws the energy of all frequency bands as a ring.
- Per-band layers (Red, Orange, Yellow, Green, Blue, Indigo, Violet)
- For each of the seven frequency bands, you can finely configure drawing on/off, color, drawing style (8 types), line width, opacity, and more. Each band defaults to its rainbow color (low frequency = red ... high frequency = violet), and the color picker remains fully editable.
Gain/Threshold: The most important parameters for adjusting the sensitivity of each band. Raising Threshold (or lowering Gain) makes the band respond only to louder sounds.IntensityGain/AngleSpeed: Adjust the magnitude and speed of motion of the selected drawing style.
- S key: Saves the current canvas as an SVG file.
- P key: Saves the current canvas as a PNG image.
- C key: Toggles the visibility of all UI.
- E key: Resets the drawing.
You can save the current settings as a JSON "technique" and load it back later. Presets created before the seven-color rainbow redesign used an older eight-band layout; loading one still applies the global settings, but its per-band settings are skipped because the band names no longer match. The app detects this and warns you when it happens.
Next, the project will move to "Phase 2: Exploring the techniques of the 'chisel'", aiming to implement the following features:
- Saving and loading an artist's own discovered UI parameter settings as a "technique" in a JSON file.
- Automatically inscribing information such as creation time and frame count into the filename when saving a work as SVG.
Spectrum Chisel is a Progressive Web App. Once it is loaded over HTTPS you can
install it to your device, after which it runs fully offline — the service
worker precaches the whole app, including the separate viewing window
(view.html). Because an installed PWA is a secure context, the microphone
(getUserMedia) keeps working offline, which it cannot do when the files are
opened directly from file://.
The app builds to a static bundle, so any static host works. The reference
target is a Cloudflare Worker serving static assets: wrangler.jsonc
declares an assets-only Worker (no server script) that serves the dist/ build
output, and wrangler deploy uploads it.
- Push this repository to GitHub.
- In the Cloudflare dashboard, create a Worker and connect the repository (Workers → Import a repository).
- Set the build configuration:
- Build command:
pnpm build - Deploy command:
npx wrangler deploy - Node version: 20.19 or newer (set a
NODE_VERSIONenvironment variable if the default is older).
- Build command:
- Deploy. Every push to the production branch then rebuilds and redeploys automatically.
The site is served over HTTPS, so the microphone works and the app is
installable. public/_headers (copied into dist/) keeps the service worker,
its registration script, the manifest, and the page navigations uncached so a
new deployment is picked up immediately, while the content-hashed assets under
assets/ are cached long-term.