Glitchy 3 Bit Dither

Check out the increasingly insane Demo.

This is a utility to mutilate images in unpredictable ways. It can randomly choose between algorithms, and many algorithms randomly mutate themselves. You can choose different encodings, effects, and emulate several glitch techniques, resulting in aleatoric new images and hidden configurations.

Check out some curated images at glitches.jkirchartz.com

This runs completely client-side, using the FileReader and canvas APIs, your image isn't being uploaded to any server. If you have a decent browser, this should work. Also, you can right-click and save the result of the processing.

Based on Nolan Caudill's 3bitdither

Heavily modified by JKirchartz, code on github

Experimental functions may not be 100% stable, this is a work in progress.

##Sample Code

// setup canvas
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext('2d');

// draw some red circles with black outlines
for (var i = 0; i < 12; i++) {
    var centerX = Math.floor(Math.random() * 500) + 10;
    var centerY = Math.floor(Math.random() * 500) + 10;
    var radius = Math.floor(Math.random() * 50) + 20;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = "#ff0000";
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000000";
    ctx.stroke();
}
// get data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// apply a corruption to an image
ctx.putImageData(glitch(imageData), 0, 0);
var out = document.createElement('img');
// send output to img element on the page
out.src = canvas.toDataURL("image/png");
document.body.appendChild(out);

##todo:

1. optimize code w/ better code from the row-sorting algos
2. web workers
3. namespace
4. function names
5. better comments
6. add paremeters for granular control - but use randomness as default functionality if no params are used
7. Add Glitches:

• move each "row" in opposite directions (1px at a time)
• kaleidoscope

8. nodejs/cli - for batch processing etc.

##run locally The demo site in this repo is a Jekyll project, to run locally install the gem & run jekyll --serve. You can also use the --auto flag to make jekyll automatically update the site as files change.

portions under the included MIT license, copyright 2013 Matthew Nolan Caudill, as noted. 99% of the rest copyleft 2013 JKirchartz, except as noted.

hack away! huzzah!