Generative geometric animation/audio by Mark Cowan

Click to start!

Works fine in either portrait or landscape orientation

Click to start!

Tech info

All audio is generated on-the-fly using web audio

All visuals are rendered with WebGL

The geometric visuals are generated by vertex shaders (GLSL)

The "pushing bars" are raytraced in advance with PovRAY

The selfie is created using a Nikon D5100 and my face

The audio generation and video generation are driven by a state machine

The "timeline" for the entire project makes specific changes to the state machine (e.g. show element, hide element) on certain "beats"

Some parts of the timeline include operations which continuously modify the state (e.g. rotating objects) for the timespan that they are active

As this is pretty basic and low-level, it doesn't benefit much from high-level libraries like three.js/Babylon

It's written in JavaScript as it started out as a quick experiment, but I wish I'd used TypeScript instead

Differential equation evolution (for the first part) is implemented in JS with finite-difference, but could probably also be implemented using convolutions via WebGL

Click to start!