If you haven't seen regl, go check out the website: . It's a really nice library for stateless WebGL programming, created by . Because of the statelessness, regl commands are naturally parameterized, making it straightforward to include WebGL sketches inline with your text in Idyll.
For example, with a minor modification to regl's I can embed it in an Idyll document. With just a couple of lines, I can add a dynamic variable to change the size of the particles,
Particle size:
and let a reader change the angle of rotation of this .
θ =
To help with this, I've abstracted out a component that uses
to multiplex a single regl instance over the entire page. To create a custom regl component, create a class that
extends from idyll-regl-component and implements the initialize() function:
The idyll-regl-component handles taking control of the DOM from react, and instantiating the multiplexer.
This can be combined with many of Idyll's built-in components to quickly add interactivity. See this component
on github: .
For example, you could implement a play/pause button.
And add a way to scrub through time:
In this case, the particle code was updated to take a parameter that will pause its internal frame count, and a parameter to add an offset to that count.
Read more about Idyll at , or .