forked from mncaudill/3bitdither
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
v0.2.0: glitch functionality is available as a node package and a com…
…mand-line interface (gleech)
- Loading branch information
1 parent
5eecc3b
commit ec2cfb2
Showing
2 changed files
with
36 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
@@ -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 & run `jekyll --serve`. | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters