Phase Shifting

100%

Phase Shifting

✓ Published0🌍 Public

Last edited Nov 27, 2016

Created on Nov 26, 2016

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.

AI-generated description

This is an experiment in manipulating audio at the bit level, using the Web Audio API. It's also a kind of homage to a couple Steve Reich pieces: <a href="https://en.wikipedia.org/wiki/Come_Out_(Reich)">Come Out</a> and <a href="https://en.wikipedia.org/wiki/It%27s_Gonna_Rain">It's Gonna Rain</a>. Where Reich spliced audio tape, this offsets the second track on each repetition, thus creating the phase.

The select menu at the top left selects between the two pieces.
Another select menu adjusts the phase offset/rate of change.
The 'One Step' button lets you skip forward if you get impatient.
And the 'Reset' button brings the two tracks back into phase.

Also see: <a href="http://bl.ocks.org/alexmacy/f25c39867546f8c72af13cb7e5bc654a">I Am Sitting in a Room - Alvin Lucier</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Wave Phasing

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.

Aalexmacy

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

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

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

70% match

Loading thumbnail…

I Am Sitting in a Room - Alvin Lucier

This visualization demonstrates the progressive audio distortion of Alvin Lucier’s *I Am Sitting in a Room* by repeatedly applying delay offsets to a waveform. It displays the original audio as a static context wave and a zoomable focus wave, with a red position indicator tracking playback. Users trigger each effect step via buttons, while a brush and d3.zoom enable panning and scaling. Built with d3.v4 and the Web Audio API, it renders SVG paths from decoded audio data and animates the waveform as the effect layers copies of the track.

Aalexmacy

69% match

Loading thumbnail…

Web Audio Sampler v2

This interactive Web Audio sampler loads audio files from a GitHub repository or the user’s local machine, displaying the waveform as an SVG path rendered with d3.line. Users can click the timeline to start playback, shift-click to place up to nine custom cue markers, and use number keys to jump to cues. The code uses d3.v4 for scales, event handling, and transitions, while the Web Audio API handles audio decoding, buffer sources, and looping. A red position line and hover line animate to show playback progress, with looping controlled by a checkbox.

Aalexmacy

69% match

Loading thumbnail…

Peaceful Waves

Eight semi-transparent sine waves, each with a distinct amplitude, frequency, color, and phase, float across a blurred gradient background as a live SVG animation. The waves continuously shift leftward, with phases advancing per frame via `requestAnimationFrame`. Rendered using D3 v5’s `d3.line` and `d3.range` to generate smooth paths, each wave’s path is recalculated and updated on every frame. The animation, made with `d3.curveNatural`, runs over a glassmorphism-styled SVG canvas.

CCurran Kelleher

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

67% match