Amélie is a curiously mesmerising kaleidoscope visualization written in
React.js using D3 with
HTML5's
AnalyserNode
API.
You're more than welcome to run the example yourself locally – simply
clone the repository and run npm start
from your terminal – npm start
uses Parcel for running the example on
0.0.0.0:1234
.
Amélie utilises the
AnalyserNode
API to create the visualization – the example itself is built using React
and D3.
In audio.js
there are a handful of core methods; there is the configureAudioContext
method
that passes the HTML5 <audio>
stream through the AnalyserNode
API; there is
also
the analyseAudioStream
method
that performs the analysis on the current audio stream and defines the
frequencyData
which is used to create the visualizations; from there we have
the
renderCircles
and renderSplodges
that take the aforementioned frequencyData
variable to construct the circles
using the D3 library.