Skip to main content
100%

Horizontal Ellipses

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 29, 2017
Created on Jun 29, 2017

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.

AI-generated description

This listens to your computer's microphone and draws the contents of the audio buffer as a series of (mostly) horizontal ellipses.

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