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. ♥