Wave Phasing

100%

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Feb 11, 2017

Two waveforms, each generated by applying a different D3 easing function to a sawtooth wave, are drawn as dashed gray lines and summed into a solid red wave. Drop-down menus select the easing functions and the phase offset speed, while a button starts and stops animation and audio playback. The code uses D3 v4’s `d3.line`, `d3.timer`, and `d3.scaleLinear`, and the Web Audio API to generate and loop the sound, with a circle marker tracking the summed wave’s value.

AI-generated description

The first two drop-downs change the wave combination. The third drop-down adjusts the phase.

mit Licensed

Similar vizzes

Loading thumbnail…

Phase Shifting

Two audio waveforms, rendered as black lines on an SVG, visualize the phase-shifting technique from Steve Reich’s *Come Out* and *It’s Gonna Rain*. The top waveform shows the original track, while the bottom one offsets the second channel by a user-selected millisecond delay, creating repeating phase patterns. Controls let the viewer load either piece, step the offset manually, reset it, or play the sound while a red rectangle tracks playback position. The code uses D3 v4’s `d3.line` and `d3.scaleLinear` to draw the waveforms, and the Web Audio API’s `AudioContext` and `BufferSource` to manipulate and play the audio data.

Aalexmacy

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

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

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

74% match

Loading thumbnail…

Web Audio Sampler with Effects

This interactive Web Audio Sampler visualizes audio waveforms as SVG paths, with a main focus wave and a smaller context wave for navigation. Users can load audio files, then brush and zoom on the main wave to select portions, apply fade-in/out effects using D3 v4’s native easing functions, or add delay effects with adjustable intervals. The interface also supports playback, looping, and clearing cue points, with red position markers indicating playback location.

Aalexmacy

73% match

Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais

73% match

Loading thumbnail…

Wave Packet

This animation shows a red wave packet propagating back and forth across an SVG canvas, wrapped in a semi-transparent blue envelope that traces the pulse’s amplitude. The motion is driven by an explicit time loop with a constant step, reversing direction when the packet reaches the graph’s edge. The code uses d3.line and d3.area with d3.curveBasis to render the signal and envelope paths, while a d3.transition with duration 20 and d3.easeLinear repeatedly restarts itself to update the data. D3 v4 scales map input ranges to screen coordinates.

KKelvinZCH

73% match

Loading thumbnail…

Wave with gradient

This example animates a growing wave of circles across the screen, with each circle’s size and vertical position modulated by a sine function over time. The circles are colored with a radial gradient that transitions from purple to white. Written in D3.js, the code uses `select`, `range`, and a join to append new circles each frame, while `transition` and `easeLinear` control the size change. The animation runs on a `setInterval` at 60fps, incrementally adding circles until they fill the viewport width, then resetting.

AAlena

72% match