Rotating Ellipses v1

100%

Rotating Ellipses v1

✓ Published0🌍 Public

Last edited Jun 29, 2017

Created on Jun 29, 2017

This visualization uses the computer’s microphone as its data source, drawing the live audio waveform as a series of concentric, rotating ellipses on a Canvas. Each ellipse corresponds to a sample in the audio buffer, with its size scaled logarithmically via `d3.scaleLog` and its rotation based on the sample’s position in the buffer. The code uses the Web Audio API’s `AnalyserNode` to capture time-domain data, then redraws the entire scene every animation frame with `requestAnimationFrame`. The result is a dynamic, red-on-black display that reacts in real time to sound volume and pitch.

AI-generated description

This listens to your computer's microphone and draws the contents of the audio buffer as a series of ellipses that are rotated based upon the audio sample's position in the buffer.

This was made as part of a series exploring the visualization of audio that was presented at a d3.oakland. A big list of the demos from this series can be found <a href="https://alexmacy.github.io/d3.oakland" target="_blank">here</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Rotating Ellipses v2

The visualization listens to the computer’s microphone and renders the live audio buffer as a field of rotating ellipses centered on the canvas. Each ellipse’s size reflects the sample’s amplitude, while its rotation angle corresponds to the sample’s position in the buffer. It uses the Web Audio API’s `AnalyserNode` to capture time-domain data, and the Canvas 2D API’s `ellipse()` method to draw the shapes. Unlike an earlier version, it removes any amplitude threshold, so all samples are drawn, with a thinner stroke to compensate.

Aalexmacy

92% match

Loading thumbnail…

Horizontal Ellipses

Microphone input drives a real-time canvas animation that renders the audio waveform as a cluster of overlapping red ellipses centered on screen. Each sample in the time-domain buffer becomes one ellipse, with its radii and rotation derived from the sample’s amplitude and position. The visualization continuously redraws using `requestAnimationFrame`, clearing the canvas with a black fill each frame. It uses the Web Audio API’s `AnalyserNode` and `getByteTimeDomainData` to capture live audio, then draws ellipses via Canvas 2D’s `ellipse` method.

Aalexmacy

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

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

74% match

Loading thumbnail…

Audio viz

This example visualizes a randomly generated audio buffer as a waveform on a Canvas. It creates an `AudioBuffer` with 10,000 samples of white noise, then draws the signal as a continuous line across the canvas width. The code uses the native Canvas 2D API (`getContext`, `moveTo`, `lineTo`, `stroke`) with D3 v7 available for potential enhancements, while the page itself is styled with minimal CSS and hosted in a plain HTML file.

GgwendalF

72% match

Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel

72% match

Loading thumbnail…

Spectrum - Dots

A real-time audio spectrum analyzer renders live microphone input as a field of dots on a canvas. Each dot represents a frequency bin, with its vertical position mapped to amplitude via d3.scaleLinear and its color transitioning from white to red based on intensity. The visualization uses the Web Audio API’s AnalyserNode to capture frequency data, while d3.js scales the x and y coordinates. Animation runs continuously through requestAnimationFrame, drawing translucent overlays to create a fading trail effect.

Aalexmacy

71% match

Loading thumbnail…

Spectrum - Dots

This visualization presents a real-time audio spectrum analyzer that animates a canvas of colored dots. It uses the Web Audio API to capture microphone input, and then d3.js scales map frequency data to screen coordinates and color values. Each frame, the code reads frequency data using `analyser.getByteFrequencyData`, then draws fading circles to create a dynamic, trailing effect. The visualization displays the raw frequency amplitude, with low values shown in black and higher amplitudes in red, rendered as a continuously updating canvas animation.

Aalexmacy

70% match