too many bees
===+*Back to Portfolio
beglitch
(source via github)
beglitch
loads a fragment shader, specified by a url path, and gives the illusion of applying it to a DOM element.
It uses html2canvas
to capture a screenshot of a DOM node, then uses that as the input texture to a second canvas which has the shader applied to it. It then overlays the second canvas on top of the original DOM node, disabling pointer events so the original page can still be clicked and selected.
beglitched
elements pause when they scroll offscreen, and repaint when the screen is resized.
<!-- paint the target dom node -->
<script src="./html2canvas.min.js"></script>
<!-- handle a webgl context -->
<script src="./gl.js"></script>
<!-- define the `beglitch` function -->
<script src="./glitch.js"></script>
beglitch(element, shaderPath)
fetches a fragment shader from shaderPath
and applies it to a canvas that covers element
.
<h1 id="page-title-1">Beglitch Example</h1>
<script>
beglitch(
document.getElementById('page-title-1'),
"/shaders/jitter.frag",
);
</script>
beglitch(element, shaderPath[, uniforms])
accepts an optional third param which is a key/value object of shader uniform values.
<h1 id="page-title-2">Beglitch Example</h1>
<script>
beglitch(
document.getElementById('page-title-2'),
"/shaders/jitter.frag",
{
u_magnitude: Math.floor(5 * Math.random()),
u_jitter: -0.020,
},
);
</script>
beglitchThis(shaderPath)
uses the script tag's parent node as the target element. This must be run in a blocking script tag because it uses document.scripts
to find the current script tag in order to find its parent element.
<h1>
Beglitch Example
<script>beglitchThis("/shaders/vhs.frag");</script>
</h1>