glitch.js

Corrupt jpg glitcher - DOWNLOAD - DEMO

Broken is beautiful.

Break everything

Static

Break it ones and keep it broken.

Static image example

var static = document.querySelector('.static'); var static_glitch = new Glitch(static, function (img) { static.src = img.src; }).ones(4); static.onclick = function() { static_glitch.ones(4) }

Animated

Break it again and again

Example

var animated = document.querySelector('.animated'); var animated_glitch = new Glitch(animated, function (img) { animated.src = img.src; }).anim(2);

Basics

glitch.js is asynchronous, and will fire the supplied callback function when it's done. After the initialization you can access the object to do changes on the fly.

Example

//Set up a callback function, //this gets one argument every time the element is gliched function callback_when_image_is_glitched(image_object) { //Do whatever you like with the returned Image object } var glitch = new Glitch( element_to_glitch, callback_when_image_is_glitched ); //By default glitch.js will not do anything, //this is to facilitate on demand usage (wich is nice) glitch.ones();

Beyond

glitch.js eats images of any kind that can be rendered as a <img/> , but that's not all. Anything that can be rendered in a canvas can be fed to glitch.js

Public methods

//All public methods are chaniable! //Animates the glitching with the supplied strength glitch.anim({strength_int}); //Stops the glitching if it's animated glitch.stop(); //Update the amount of glitching glitch.setStrength(strength_int); //Sets the FPS of the glitch animation glitch.setFps({frames_per_second_int}) //Update the element to glitch //(e.g. if the canvas is updated) glitch.update({element_to_glitch}); //Glitch it ones with the supplied strength glitch.ones({strength_int}); //Resets the internal image object, and fires the callback glitch.reset();

Convenience Methods

Bundled with the glitch functionality there's a couple of methods to do things a bit easier. I added these because I seemed to need them.

Extra functions

//Glitch a text object, while keeping it selectable glitchText({ target_element }, { settings_object }); /* The settings object can have any or all of these keys (here with default values): "strength": 1, // Amount of glitch "baseline": "hanging", //Text baseling "background": "#000", //Text background (use the CSS rule 'background-blend-mode' for interesting effects) "animated": false, //Animates the glitch "class": "glitched", //Specifies the class to be added after glitching (convenient for styling) "fps": 60, //Used if animation flag is set to true "clearText": false //Clear the text object after render */ //Glitch a image ones glitchImage({ target_element }, { settings_object }); /* The settings object only accepts one optional setting "strength": 1, // Amount of glitch */

I'm a glitchy teapot!

That's it. ♥