Lissajous-3D
Lissajous-inspired 3D Plottings of chords
Background
This project started as an offshoot of another one called klangbild, where I explored audio visualization using the Web Audio API. While working on that, I came across Lissajous curves: a cool way to visualize harmonic relationships using two oscillators, one plotted horizontally, the other vertically.
These curves can create mesmerizing patterns that can even resemble rotating 3D objects. This inspired me to question, how this could look like in 3D.
Simply placing oscilloscopes on 2D planes in 3D space wasn't visually satisfying, so instead I used the three oscillators to control the X, Y, and Z coordinates of a line moving through 3D space. While it doesn't resemble Lissajous stacked oscilloscopes, it preserves the core idea: creating patterns that reflect harmonic relationships between tones.
Technologies & Tools
- SvelteKit
- TailwindCSS
- Three.js
- Web Audio API
- WebGL
Features
- 3D Lissajous-inspired curve generation
- CRT-styled post-processing shader
- intuitive, responsive waveform UI
Challenges
While the basic idea was easy to implement, I wanted to capture that retro oscilloscope feeling and therefore created a CRT shader material. To achieve this, I had to combine six different shaders to get the desired effect.
Another challenge involved crafting an intuitive UI/UX design. My initial approach had extensive customization options: controlling line-properties (length, smoothness, thickness, color), sliders for each oscillator (frequency, phase, volume) and more. It didn't feel right, because it missed the purpose of this app, having just cool visuals to look at. Therefore, some settings got stripped away, some got included more elegantly. To pause the animation, the user now double-clicks the screen and to change frequency/phase, there are intuitive dragging controls directly on the waveforms.
Learnings
- Cool looking shaders are often just a bunch of less cool looking shaders combined
- Less is More: The goal of this app is to have some cool visuals, so everything that would distract from that is not needed
- Minor chords look cleaner than major chords
Click here for the live demo
This project was a nice roundup of my dive into the Web Audio API, learning how to synthesize sound directly in the browser.