Compound Radial Waves v2

100%

Compound Radial Waves v2

✓ Published0🌍 Public

Last edited Apr 16, 2017

Created on Apr 16, 2017

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.

AI-generated description

This is another in a series exploring how to calculate and display the combinations of multiple waves. See the previous blocks:

<a href='http://bl.ocks.org/alexmacy/c5d36ac67eee2ca7b69824f74fb501d5'>Compound Radial Waves</a>
<a href='http://bl.ocks.org/alexmacy/03547a3e7498dbe3690b7eb35578022b'>Compound Waves</a>

This makes a radial rendering of the compound wave made from three different frequencies. The resulting wave can be very long - easily getting above 100,000 or even above 1,000,000 points! That's why the sliders are limited to a maximum of 100 each. This is way beyond what can cleanly be done with SVG, so I used canvas for the rendering. But that was still running slow, so I removed d3 altogether and rebiult it in VanillaJS.

The base frequencies are randomly selected when the page is loaded, so refreshing will produce a new compound wave, and there's also capability to save a combination of frequencies to be accessed later. The button at the bottom will bring up a prompt with a URL for current waveform - note that this will only work when loaded 'raw' <a href="https://bl.ocks.org/alexmacy/raw/29966cadaab0053d3ed5c8c85a5e4582">here</a>.

For example: <a href="https://bl.ocks.org/alexmacy/raw/29966cadaab0053d3ed5c8c85a5e4582?78,30,49">78,30,49</a>

mit Licensed

Similar vizzes

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

90% 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

88% match

Loading thumbnail…

Compound Radial Waves

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.

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…

Additive Synthesizer

This interactive demo visualizes additive synthesis, where up to ten sine waves are combined to produce a single complex tone. Each wave has individual controls for frequency, amplitude, phase, and offset, with checkboxes to mute specific oscillators. The visualization displays the compound wave in red alongside the individual component waves, rendered as SVG paths animated in real time. The audio engine uses Web Audio's createPeriodicWave() method to generate the composite tone from a Fourier series populated by the oscillator values, with phase offsets handled via 2D rotation. The "Random Wave" buttons generate arbitrary combinations of frequencies, amplitudes, and phase offsets.

Aalexmacy

74% match

Loading thumbnail…

sine wave Generator

This visualization demonstrates the summation of three independently generated sine waves, combining them into a single composite signal. The line chart plots signal amplitude against sequential data points, with the combined waveform rendered as a continuous black line over a gray background. Built with D3.js, the example uses `scaleLinear` for both axes, a D3 `line` generator for the path, and custom `sineGenerator` functions that compute waveforms using the formula sin(2π·frequency·t). The code also leverages `observeResize` from `@drbagwell/responsive-viz-axes` for responsive sizing and displays axis labels for data points and amplitude.

DDonald Bagwell

70% 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

69% match

Loading thumbnail…

HTML Canvas Wave Line

This example demonstrates a sine wave pattern drawn on an HTML canvas element, showing how mathematical functions can generate visual curves. The wave oscillates vertically across the 800-pixel-wide canvas, centered vertically with an amplitude of 50 pixels and a frequency controlled by dividing the x-coordinate by 50. The visualization uses the Canvas API's `getContext('2d')` method and `lineTo()` function to plot each point incrementally, advancing horizontally by 2 pixels per iteration. A goldenrod border frames the canvas, while the wave itself is rendered with the default black stroke. No external libraries are used; the implementation relies purely on native JavaScript and the HTML5 Canvas API.

JJack Lyons

68% match