Wavefield: real-time immersive audio visualizer

Showcase
,
1

demo

tldr; I made a browser-based cymatic-inspired audio visualizer for playing around with audio-reactive visuals for DJ sets, house parties, projections, and general visual experiments.

Demo: https://wavefield.vercel.app/

Repo: GitHub - niko-dellic/wavefield · GitHub

Wavefield is a small WebGL visual instrument for turning sound into animated wave-field patterns. It started from cymatics / Chladni plate references, but it is not trying to be physically accurate. I considered it a starting point for making reactive visuals that feel musical, tunable, and fun to project.

There have been a few cool cymatic / oscillator-based visual experiments posted here before, like Bayron & Cymatics-Labs, which deserve a head nod.

The main thing I’m trying to add with this version is not just the cymatic field itself, but the layers around it: post-processing effects, transitions, templates, color response, trails, projection modes, and controls that make the output feel less like a single simulation and more like a flexible visual system.

You can drive the visuals in a few different ways: live audio input, uploaded audio files like MP3s, or a manual Hz mode if you just want to lock into a specific frequency and experiment without music. Uploaded tracks also get a waveform view, so you can scrub around and tune looks to specific moments.

Most of the visual system is exposed in the GUI: field controls, projection modes, templates, and layered effects like trails, bloom, fisheye, pixelation, contouring, and feedback.There are also premade templates so you can jump between different moods quickly. The hope is that the cymatics become one ingredient in a broader reactive visual engine, rather than the whole thing.

It would be cool to see people use it for generative visuals, music videos, party projections, DJ-set backdrops, live AV sketches, or just messing around with audio-reactive fields.

Some obvious next things would be MIDI / OSC controls, better live audio workflows, capture / export tools, more templates, and better mapping between audio features and visual behavior. In the meantime, I’m putting this out there as a small open-source visual toy / instrument. Curious to hear what comes to mind, or where people could imagine using it!

cheers

1 Like
2

The visuals are already impressive on their own. But to better appreciate your work, I’d like to hear the audio, too, that these viuals are derived from. I haven’t found out yet, how to enable sound. Any hints?

MacBook Pro M4 Max, macOS Sequoia 15.6.1, Firefox 151.0.1

GPU-Load of your visualizer stands @99%, btw. :face_with_raised_eyebrow: :flushed_face:

3

Thanks for checking it out- I pushed a few updates to make it less GPU intensive, which mainly comes from the post-processing. For sound, there’s a play button at the bottom, as well as the driver choice:

  1. manual: manually select the Hz, and optionally undulate around it
  2. audio: I have a handful of royalty free songs as samples (now the default mode)
  3. live: plays audio from your mic (requests permissions)

Thanks for the feedback and hope that helps!

Niko

4

Yes, I can confirm that the GPU load went down to the 60-70% range. It now takes clearly longer, before the fans of my MBP go off :wink:

I only tested the supplied audio tracks - now hearing the sound and looking at the visualization gives a much better overall impression. When switching audio tracks, it sometimes takes two (2) clicks on the play button until it updates to the new track.

The menu options kind of overwhelm the uninitiated, and other than the choice of “screen” vs. “sphere” projection I didn’t notice any visible effect. Sorry.

Also, I noticed a very considerable improvement in visual “continuity” in comparison to the low-res, visible scanlines video -like presentation in your initial post. Now it’s smooth almost like infinite resolution.

All in all, I can very well imagine this to be used as a backdrop in party projections.

I like it! :+1:

1 Like