Rotating Ellipses v2

100%

Rotating Ellipses v2

✓ Published0🌍 Public

Last edited Jun 29, 2017

Created on Jun 29, 2017

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.

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. The difference between this one and <a href='http://bl.ocks.org/alexmacy/455d69e7617c0c7c60ba3b55fedb21e2'>v1</a> is that v1 has a sort of threshold so that it only shows values above a certain level. To compensate, the line on v2 is 1/10 the width.

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 v1

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.

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

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

68% match

Loading thumbnail…

Ellipse

The visualization renders a grid of overlapping ellipse and circle shapes, composed through nested loops that map array indices to rotational transforms and RGB color values. Using React and SVG, the example constructs a repeating pattern where ellipses with swapped radii axes intersect with small circles, creating a layered geometric composition. The code leverages ReactDOM to render the SVG canvas, with randomized translation and rotation applied to each group, while the fill colors are derived from the loop index to produce a varied palette across the 10x10x10 iteration structure.

NNita

68% match

Loading thumbnail…

Ellipse

The visualization displays 500 randomly positioned ellipses and circles across an SVG canvas, rendered with React 16.10 and ReactDOM. Each ellipse component draws two overlapping ellipses with swapped radii, creating a compound shape. The code generates random x and y coordinates scaled by progress through the dataset, applies rotation to each group, and fills shapes with color values derived from the index position. The SVG background features a linear gradient transitioning from orange to black, with all geometry rendered using standard SVG elements like `ellipse` and `circle`.

NNita

68% match

Loading thumbnail…

Ellipse

A grid of ellipses in red tones rotates randomly across a 960×500 SVG canvas, with each overlapping ellipse pair sharing a central circle. The React component `Ellipse` renders two perpendicular ellipses and a circle for each position, while the main `App` component uses nested `A.map()` iterations to generate ten randomized translations and rotations. Rendering relies on React 16.10 and ReactDOM, producing the SVG output with `fill` colors derived from the loop index.

NNita

67% match

Loading thumbnail…

Ellipse

The visualization displays a dense field of overlapping ellipses and circles scattered across a gray SVG canvas, with randomized positions and rotations creating a chaotic, layered composition. Each ellipse is rendered twice—once with its standard axes (rx, ry) and once with swapped axes (ry, rx)—producing cross-like patterns. The React component Ellipse defines the SVG ellipse elements, while the main index.js generates a 10×10×10 grid of these shapes using nested array maps, assigning colors based on loop indices. The randomization uses Math.random() within translate transforms, and the SVG API sets the background to #a0a5ad.

NNita

67% match

Loading thumbnail…

Ellipse

A grid of ten ellipses per axis is rendered, with each cell containing two overlapping ellipses and a circle. The ellipses and circles use random positions and rotations, with colors varying by array index. This React and SVG example uses the `Ellipse` component to draw both an ellipse and a rotated counterpart for each placement. The SVG canvas has a gray background, and the rendering relies on React's component mapping and SVG primitives like `ellipse` and `circle`.

NNita

66% match