Change Log
[ 2025 | 09 | 16 ]
- Successful Integration which includes a circular Lissajous visualizer, dynamic track selection, and minimalist controls.
- Added scanlines + cartesian coordinate system, optimized track selector.
[ 2025 | 09 | 17 ]
- Integrated ANS synthesizer-like graphical image recording feature.
- Added Sonogram aka ANS synthesizer as additional audio source input for Oscilloscope visualizer.
[ 2025 | 09 | 19 ]
- Integrated better GUI sliders, improved performance.
Lissajous Oscillator
2 5 2 5
0 9 0 9
1 6 1 6
1 0 d c
I was always fascinated by visualizing audio in real time on my website. During the last weekend - while working on the 3d file veiewer with Three.js - I got the idea to create an interactive oscilloscope-like visualizer that reacts to music files. When starting today in the morning I had no idea how to realize it. Fortunately, with guidance from the GenAI chatbot, I managed to implement a circular Lissajous visualizer with glowing axes, integrated file selection next to the play button, and a dynamic display of the audio title beneath the oscilloscope. Now - 2 hours later - I have an MVP that combines audio interaction, real-time visualization, and stylish CSS effects in a compact, interactive interface.
Lissajous-based Oscillator for visualizing aud files.
ANS-inspired audio generator
2 5 2 5
0 9 0 9
1 6 1 9
3 0 d c
The ANS synthesizer, developed by Evgeny Murzin, transforms drawings on a glass plate into sound by converting scratched patterns into light signals, enabling playback of 720 microtones across 10 octaves. Inspired by this principle, I built a web-based MVP of the ANS and combined it with the Oscilloscope visualizer that I made yesterday. The user can ...
- change the size and transparency of the brush,
- change the recording length and
- clear the canvas,
- add an image as computation source,
- download the track as *.wav file,
- use the recording as an audio source for the Oscillator (--Select Track --).