glitch your canvas element
Switch branches/tags
Nothing to show
Pull request Compare This branch is 74 commits behind snorpey:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
dist
example
src
test
.gitignore
.travis.yml
LICENSE
readme.md

readme.md

Build Status

glitch-canvas

what is it?

glitch-canvas is a javascript library for applying a glitch effect (see this example) to a canvas element.

how to use it

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.

simple example

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

loading

the library supports loading as an amd module with requirejs.

requirements

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.

build script

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.

tests

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.

license

mit