Compound Radial Waves v3 [WARNING: LOUD!]

100%

Compound Radial Waves v3 [WARNING: LOUD!]

✓ Published0🌍 Public

Last edited May 31, 2017

Created on May 31, 2017

This animated canvas visualization synthesizes and displays multiple radial sine waves radiating from a central point, with interactive sliders controlling each wave’s frequency and amplitude. The compound wave—the sum of all individual waves—is drawn in real time, and users can toggle visibility of individual waves, shuffle frequencies, or sweep one oscillator across a range. The code uses the Web Audio API’s built-in oscillators and gain nodes to produce corresponding sound, synchronizing audio and visual updates. Highlighting occurs on hover over controls, and the visualization is built entirely with vanilla JavaScript and Canvas 2D rendering.

AI-generated description

This 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.

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/c287489c4925719821a108006a9362d5'>Compound Radial Waves v3 [WARNING: LOUD!]</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo

70% match

Loading thumbnail…

circular-synth

This interactive visualization builds a circular synthesizer where each of the 16 beats is a rotating segment containing concentric pitch arcs. Users click or hover over arcs to toggle notes on and off, with four states cycling through white, blue, red, and green. The visualization uses D3’s `d3.svg.arc` and linear scales to map pitch frequencies to radii, while an audio context schedules oscillators for each active note. A `setInterval` loop advances the beat, highlighting the current segment in purple and triggering sounds through the Web Audio API’s `createOscillator` and `createGainNode`.

11wheel

70% match

Loading thumbnail…

Simplex Radiations

Animated radial lines bloom outward from a moving center point on a canvas, each shape growing continuously via SimplexNoise. The visualization uses simplex-noise.js to generate smooth, evolving vertex positions in polar coordinates, addressing the challenge of creating seamless noise around the 0 and 2π boundary by blending two noise functions. Rendered with the Canvas 2D API and d3.interval for animation, the radiations follow the mouse cursor while damping their movement, showing how polar-coordinate noise can produce organic, ever-changing geometric forms.

KKcnarf

69% match

Loading thumbnail…

Untitled

This interactive visualization demonstrates how different easing functions shape periodic waveforms and their interference patterns. It renders two wave paths from audio buffers generated with selectable easing curves, plus a combined average wave, using SVG paths and a circular position marker. Users can choose easing functions for each wave, adjust playback speed, and trigger audio playback. Built with React, it uses d3.v4’s scaleLinear, line, curveMonotoneX, and timer APIs, while audio synthesis relies on the Web Audio API’s AudioContext, Buffer, and BufferSource for looping sound.

WWill Carter

68% match

Loading thumbnail…

Changing Colors with Waves

A grid of colored circles animates in a wave-like pattern, shifting between red and blue based on their size. The canvas rendering shows 40 by 30 circles, where each circle’s horizontal position and radius oscillate with sine and cosine functions over time. The code uses the Canvas API’s `getContext('2d')`, `beginPath`, `arc`, and `fill` methods, with `requestAnimationFrame` driving the continuous animation. Colors change dynamically: circles larger than a threshold appear blue, while smaller ones turn red, creating a pulsing, color-shifting visual effect.

CCurran Kelleher

68% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. The code maps a 30×30 grid of points through sine and cosine functions using time-based parameters, causing the positions and sizes of the circles to shift continuously. Each frame applies a semi-transparent black overlay before redrawing, creating fading trails that enhance the motion effect. The rendering uses the Canvas 2D API’s `arc()` and `fillRect()` methods, with colors computed from sine waves tied to the grid position and animation time. The visualization is inspired by a mathematical patterns tutorial and runs as an infinite loop via `requestAnimationFrame`.

PPeter S

67% match

Loading thumbnail…

Fork of Fork of HTML Starter

This animated visualization demonstrates a sine wave traveling across an HTML5 Canvas, with a horizontal center reference line and adjustable wave parameters for amplitude, frequency, and speed. The code uses the Canvas API’s `getContext('2d')` for drawing, `requestAnimationFrame` for smooth animation, and `addEventListener` with the window resize event to maintain a responsive canvas. The wave’s phase updates each frame, creating the motion effect against a white background with a subtle border and shadow.

KKareena

67% match

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated visualization, built with the Canvas API, generates a shifting field of colored circles arranged on a grid. The code applies mathematical functions to coordinates and radii, creating rhythmic patterns where circle positions and sizes oscillate over time. As the animation loops, it layers translucent dark rectangles to create a fading trail effect, while the circles' colors cycle through based on their grid position and the current time value. The entire canvas resizes dynamically to match the window dimensions, with the pattern always centered and scaled proportionally.

MMauricio García Benítez

67% match