client-side javascript image glitches
Clone or download
Pull request Compare This branch is 195 commits ahead, 1 commit behind mncaudill:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
dist
site
source
test
.editorConfig
.gitignore
.jshintrc
CONTRIBUTING.md
Gruntfile.js
LICENSE
README.md
_config.yml
gpl-3.0.txt
index.js
package.json

README.md

Glitchy 3 Bit Dither

Test this online with Glitch Cruiser.

This is a commandline and web-based 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 web-based utility 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.

Usage

use this as a command-line utility

install with npm install -g git@github.com/jkirchartz/Glitchy3bitDither

then run gleech glitch <input image> <output image> <glitch function name> [optional: parameters]

for example: gleech glitch test.jpg output.jpg fractal to allow the fractal function to choose it's own parameters OR gleech.glitch test.jpg output.jpg fractal 0 to choose fractal type 0 (alternatively you can choose 1)

using this as a node package

install with npm install --save git@github.com/jkirchartz/Glitchy3bitDither

and import it into your project for use like so:

'use strict';
var gleech = require('gleech');

gleech.read('test.jpg', function(err, image) {
	image.fractal().write('output.jpg');
});

Additional Information

Gleech is based on [JIMP][https://github.com/oliver-moran/jimp] and (theoretically) any JIMP function can be used in place of a glitch function.

run gleech list to see all available function names.

todo:

  1. update site (and gh-pages branch) to use dist/gleech.js instead of site/js/Glitchy3bitDither.js
  2. optimize code w/ better code from the row-sorting algos
  3. web workers
  4. namespace
  5. better function names
  6. better comments
  7. Add glitches:
  • scan lines (1px black line the entire width every N lines)
  • move each "row" in opposite directions (1px at a time)
  • kaleidoscope
  1. Add blend modes: https://en.wikipedia.org/wiki/Blend_modes

Release Notes

v0.2.1 glitch function only calls existant functions

v0.2.0 glitch functionality is available as a node package and a command-line interface (gleech)

v0.1.0 has added glitch functions to jimp, and mostly successfully emulates Glitchy3bitDither in node.js. There are still some kinks to work out in a few of the glitch functions, use at your own peril.

Run the site 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.

JIMP (included in the node.js branch) is included under the MIT license (with Open Sans included under the Apache License)

Glitchy3bitDither is presented under the GPL3.0 license, copyleft 2013 JKirchartz, except as noted.

Development

build with npm build

test with npm test

manually inspect images output in current directory

I am open to any and all Pull Requests

please read CONTRIBUTING.md for more details.

and... hack away! huzzah!