Compound Radial Waves v3 [WARNING: LOUD!]
Interactive canvas animation visualizes compound radial waves as overlapping sine waves emanating from a central point. Users control frequency and amplitude for each of three oscillators via sliders, with toggles for showing the compound wave and individual waves. The animation uses Web Audio API to synthesize sound corresponding to the wave frequencies, with sweep and shuffle features for exploring wave interactions.
AI-generated descriptionThis is a big update from the previous version, including the addition of sound!
Please note that this is part of an ongoing series of experiments. While it should run smoothly in Chrome, it hasn't been optimized for other browsers at this time.
Previous blocks in this series:
One note on the sound synthesis: I started with generating the sound for the compound wave by calculating each sample and pushing it to the sound buffer. The idea being that it would be a more 'pure' demonstration of how sound waves interact by synthesizing the sound using an algorithm rather than using Web Audio's built-in oscillators. But this was causing a lot of problems. Namely, the longer waves would never be able to fit in the buffer unless treated like a queue - but that was causing a lot of clipping when changing the frequencies due to difficulties ensuring that the waves meet at a zero crossing point. The workaround for this was to just use the built-in oscillator.
All that said, the end result is ultimately the same since the sound generated by the oscillators gets combined when it goes to the AudioDestinationNode.
Other features include:
- Highlighting of the individual waves when the cursor is over its controls
- The ability to toggle visibility of the compound wave and the individual waves
- The sweep button makes all but two oscillators innactive adn sweeps one of them through the available frecuencies to show how the two waves interact.
- The shuffle button shuffles all the oscillators 10 times.
I chose to only use three oscillators because more than that can cause the drawn compound wave to be too busy. But there's a hidden feature for adding more oscillators by running addNewOsc() in the console. This is included for stress-testing and exploring more complex combinations.