Skip to content

Commit

Permalink
v0.2.0: glitch functionality is available as a node package and a com…
Browse files Browse the repository at this point in the history
…mand-line interface (gleech)
  • Loading branch information
JKirchartz committed Nov 4, 2017
1 parent 5eecc3b commit ec2cfb2
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 36 deletions.
70 changes: 35 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
Glitchy 3 Bit Dither
==============

Mutilate images online with <a href="http://jkirchartz.com/Glitchy3bitdither/GlitchCruiser.html" title="Glitch Cruiser">Glitch Cruiser</a>.
Test this online with <a href="http://jkirchartz.com/Glitchy3bitdither/GlitchCruiser.html" title="Glitch Cruiser">Glitch Cruiser</a>.

<p>This is a utility to mutilate images in unpredictable ways. It can randomly choose between algorithms, and many algorithms randomly mutate themselves.
<p>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.</p>
</p>
<p>Check out some curated images at <a href="http://glitches.jkirchartz.com/">glitches.jkirchartz.com</a></p>
<p>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.</p>
<p>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.</p>
<p>Based on Nolan Caudill's <a href="https://github.com/mncaudill/3bitdither">3bitdither</a></p>
<p>Heavily modified by JKirchartz, <a href="https://github.com/jkirchartz/Glitchy3bitdither">code on github</a></p>
<p>Experimental functions may not be 100% stable, this is a work in progress.</p>

## Sample Code
## Usage

### use this as a command-line utility

install with `npm install -g [email protected]/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 [email protected]/jkirchartz/Glitchy3bitDither`

and import it into your project for use like so:

```javascript
// 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);

// send output to img element on the page
var out = document.createElement('img');
out.src = canvas.toDataURL("image/png");
document.body.appendChild(out);
'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`
1. optimize code w/ better code from the row-sorting algos
2. web workers
3. namespace
Expand All @@ -57,14 +56,15 @@ document.body.appendChild(out);
- scan lines (1px black line the entire width every N lines)
- move each "row" in opposite directions (1px at a time)
- kaleidoscope
8. nodejs/cli - for batch/bots/etc. (via JIMP)

## Release Notes

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 locally
## Run the site locally

The demo site in this repo is a [Jekyll](http://jekyllrb.com) project. To run locally install the gem &amp; run `jekyll --serve`.

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gleech",
"version": "0.1.0",
"version": "0.2.0",
"description": "Image glitching & dithering in NodeJS",
"main": "index.js",
"bin": "./bin/gleech",
Expand Down

0 comments on commit ec2cfb2

Please sign in to comment.