Skip to main content
100%

Compound Radial Waves

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 9, 2017
Created on Apr 15, 2017

Two adjustable sliders set the frequencies of two individual waves, which are drawn as thin white lines. A red line plots their compound sum along a horizontal axis, while a green radial line wraps the same compound wave around a circle. The visualization uses d3.line and d3.radialLine, with an animated transition between radial configurations as the compound wavelength changes, computed via the least common multiple of the two frequencies.

AI-generated description

This is the second in a series exploring how to calculate and display the combinations of multiple waves. See the previous block <a href='http://bl.ocks.org/alexmacy/03547a3e7498dbe3690b7eb35578022b'>Compound Waves</a>. This requires finding the least common multiple of the frequencies, which can get pretty heavy to process. This version uses adds a radial line to display the compound wave. This is very much restricted by the capabilities of SVG, which is why this one only has inputs for two frequencies - but the transitions are kinda nice...

More to come!

mit Licensed

Similar vizzes

Loading thumbnail…

Compound Radial Waves v2

This interactive visualization renders the combination of three sine waves as a single radial waveform, where the amplitude at each angle is the sum of three frequency contributions. The resulting compound wave can span hundreds of thousands of points, so the rendering uses Canvas 2D API directly with dynamic line width adjustments based on complexity. Three HTML range inputs control the frequencies, and the compound wavelength is computed via least common multiple calculations. A "Save This Wave" button generates a shareable URL containing the current frequency values, and refreshing the page randomly initializes the sliders.

Aalexmacy
85% match
Loading thumbnail…

Compound Waves

Three slider-controlled frequencies generate individual sine-like waves and their compound average, rendered as layered polylines on a black canvas. The visualization computes the least common multiple of the three frequencies to determine the compound wave’s full period, which can reach over a million samples for certain combinations. Individual waves appear in gray, while the red compound wave shows their combined effect. The code uses D3 v4’s line generator with a monotone curve, canvas rendering via `getContext("2d")`, and `d3.easeSinInOut` for wave shape calculation.

Aalexmacy
83% match
Loading thumbnail…

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.

Aalexmacy
80% match
Loading thumbnail…

Compound Radial Waves v3 [WARNING: LOUD!]

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.

TThanaporn-sk
78% match
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
75% match
Loading thumbnail…

Circle Wave

Three semi-transparent rings in cyan, magenta, and yellow form undulating circular waves around a shared center. Each ring’s radius oscillates based on a cosine function modulated by time, creating a continuously morphing, layered pattern with a darken blend mode. The animation uses `d3.radialLine` to generate the wave paths from an array of 200 angles, while `d3.timer` drives the redraw of each SVG path every frame. The code relies on D3 v4’s SVG rendering and the `mix-blend-mode` CSS property to composite the overlapping strokes.

Mmbostock
71% match
Loading thumbnail…

Radial Line - Bright

The visualization displays the live audio input from the user’s microphone as a bright, red radial line that continuously rotates and pulses around a central point. It shows the real-time waveform of the audio buffer, with the line’s radius reflecting the amplitude of each sample. The code uses d3.radialLine with a curveBasis interpolation to draw the path on a Canvas element, while the Web Audio API’s AnalyserNode captures the time-domain data via getByteTimeDomainData. Animation is driven by requestAnimationFrame, and the canvas is cleared each frame with a white fill.

Aalexmacy
70% match
Loading thumbnail…

Radial Line - Dark

This example visualizes live microphone audio as a dark, glowing red radial line that pulses and distorts in response to the sound’s waveform. It listens to the user’s audio input and draws the time-domain buffer as a circular, smooth curve using d3.radialLine with a curveBasis interpolation. The visualization runs on a Canvas 2D context, updating each animation frame via requestAnimationFrame, and relies on the Web Audio API’s AnalyserNode to capture the audio data.

Aalexmacy
69% match