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.

The boilerplate

<!-- 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 Example

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 Example

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>

Beglitch Example

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>