Compound Waves

100%

Compound Waves

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Apr 15, 2017

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.

AI-generated description

This is the beginning of exploring how to calculate and display the combinations of multiple waves. This requires finding the least common multiple of the frequencies, which can get pretty heavy to process.

Adjust the sliders to change frequency combinations. But watch out with some of the more complicated waves, sometimes the least common multiple can get above 1 million! (e.g. 79, 80, 81)

mit Licensed

Similar vizzes

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

83% match

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

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

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

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

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

72% match

Loading thumbnail…

Audio Synth via d3-ease

This example generates an audio waveform from scratch by combining four different waves—elastic, sine, square, and triangle—whose ratios change based on mouse position, affecting the timbre. The waveform is rendered as an SVG path using `d3.line` with `d3.curveMonotoneX`, while audio is produced via the Web Audio API. Each wave is derived from D3 easing functions: `d3.easeElasticIn`, `d3.easeSinInOut`, `d3.easeLinear`, and `Math.round` for the square wave. Labels show the current percentage mix of each wave.

Aalexmacy

71% match