- glitch-canvas.min.js 2kb
- glitch-canvas.js 7kb
- glitch-canvas-master.zip 326kb
$ bower install glitch-canvas
$ npm install glitch-canvas
glitch-canvas is a javascript library for applying a glitch effect to a canvas element. it can be used to transform images like this:
for a live example, you can check out my jpg-glitch editor online.
glitch-canvas is designed to be used in web browsers (see requirements for more information).
the library is used like this:
glitch(image_data, parameters, callback);
imagedata image_data (required): is an ImageData object as returned by canvas.getImageData().
object parameters (required): object containing the parameters for the glitch effect. you can check out my jpg-glitch experiment to get a better understanding of the values. The following parameters are accepted:
{
seed: 25, // integer between 0 and 99
quality: 30, // integer between 0 and 99
amount: 35, // integer between 0 and 99
iterations: 20 // integer
}
function callback (required): callback function that gets passed a glitched imagedata object as argument.
// assuming there's a loaded image and a canvas element in the DOM.
var my_image = document.getElementById('my-image');
var my_canvas = document.getElementById('my-canvas');
var ctx = my_canvas.getContext('2d');
// draw the image on the canvas
ctx.drawImage(my_image, my_image);
var my_image_data = ctx.getImageData( 0, 0, my_canvas.clientWidth, my_canvas.clientHeight );
var parameters = { amount: 10, seed: 45, iterations: 30, quality: 30 };
function drawGlitchedImageData(image_data) {
ctx.putImageData(image_data, 0, 0);
}
glitch(my_image_data, parameters, drawGlitchedImageData);
there are more detailed examples available in the ./example/
folder.
the library supports loading as an amd module with requirejs.
the following browser features are required for the library to work:
- canvas support (including canvas.toDataURL method)
- Array.prototype.forEach
the library does not check if those features are actually supported in the browser.
the build script takes care of minifying the scripts files. it uses gruntjs.
please make sure that both nodejs and grunt-cli are set up properly on your machine. run npm install
from within the ./build/
folder to install the dependencies of the build script.
to build, run grunt
from within the ./build/
folder. the optimized files will get copied to the ./dist/
folder.
before you run the tests, make sure you have nodejs and npm installed on your machine. open the ./test/
folder in your terminal and install the dependencies with npm install
. in addition to that, you may have to install mocha-phantomjs globally: npm install -g mocha-phantomjs
.
to run the tests, run mocha-phantomjs tester.html
from the ./test/
folder.
- jpg-glitch: glitch editor
- glitch-img: glitch-canvas web component
- fuzzy.cc: hover effect
- G͋l̷i᷉t͠c̭h: glitch html
- python: jpglitch
if you want to add your site or project to one of these lists, you can create a pull request or send me an email.