P5.glitch
p5.js library for glitching images and binary files
Install / Use
/learn @ffd8/P5.glitchREADME
p5.glitch
p5.js library for glitching images and binary files in the web browser.
cc teddavis.org 2020 –
Contents
Examples
Here are a few examples to get you going:
- image – demo / html / editor.p5js / p5live
- image-types – demo / html / editor.p5js / p5live
- webcam – demo / html / editor.p5js / p5live
- video – demo / html / editor.p5js / p5live
- binary-font – demo / html / editor.p5js / p5live
- almost-everything – demo / html / editor.p5js / p5live
- callback – demo / html / editor.p5js / p5live
- instance - demo / html
Installation
Download p5.glitch.js and include with your p5.js sketch's index.html file.
Optionally clone/download the GitHub Repo.
Load remotely via jsdelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/p5.glitch@latest/p5.glitch.js"></script>
Usage
p5.glitch is a class, so after an instance has been attached to a variable, you'll need to use that prefix in front of every function listed below, ie: glitch.loadImage(). This enables you to have multiple glitches running parallel. All examples below use glitch as the instance prefix.
Setup
Create a global instance of p5.glitch:
let glitch;
function setup() {
createCanvas(windowWidth, windowHeight);
/* create glitch instance */
glitch = new Glitch();
/* optional settings */
// glitch.pixelate(1); // hard pixel edges (pixelDensity)
// glitch.errors(false); // hide any bad data warnings
// glitch.debug(); // show debugs - avoid if anything called in draw()
// glitch.debug(false); // hide debug
}
See instance demo above for using with p5.js instance mode.
Images
Images can be live previewed within your sketch and browser:
/* load image */
glitch.loadType('jpg'); // specify jpeg file glitching, default
glitch.loadQuality(.25); // optionally crunch to low quality
glitch.loadImage('data/images/fish.png'); // load image by path
// glitch.loadImage(capture); // load existing p5.js image
/* reset bytes */
// glitch.resetBytes(); // reset glitch to original bytes if loaded in setup
/* sample glitching functions */
glitch.randomBytes(10); // randomize 10 bytes
glitch.replaceBytes(45, 127); // find + replace all
glitch.replaceHex('ffdb00430001','ffdb004300ff'); // jpg quant table
/* build and display image */
glitch.buildImage(); // creates image from glitched data
image(glitch.image, 0, 0); // display glitched image
/* save image */
glitch.saveImage('fish_glitched.jpg'); // save raw glitched file
// glitch.saveSafe('fish_glitched'); // save safe glitched file
// glitch.saveCanvas('fish_glitched'); // saves entire canvas
Binary
Binary data (any file) can be loaded, glitched, saved. Best in setup() or on demand:
/* load binary file with callback when ready */
glitch.loadBytes('data/movies/fish.mp4', function(){
/* sample glitching functions */
glitch.randomBytes(100); // randomize 100 bytes
glitch.replaceBytes(45, 127); // find + replace all
/* save binary file */
glitch.saveBytes('fish_glitched.mp4'); // compiles and download
});
References
Throughout the reference sub-heads, the instance prefix has been left away for easier reading. Don't forget to include it during use (ie. glitch.image).
Variables
types
Array containing list of available image/filetypes, based on browser, for image glitching.
print(glitch.types); // see list of available image types
bytes / bytesGlitched
Array of original and glitched bytes after running loadImage() or loadBytes().
The bytesGlitched array is updated with each glitch function. Use in combination with updateBytes() for creating custom glitch functions.
image
After running buildImage(), contains glitched bytes as p5.js image to display.
image(glitch.image, 0, 0); // image from top-left downward
imageMode(CENTER); // set center-out images
image(glitch.image, width / 2, height / 2); // draw in center of canvas
width / height
Automatically calculated dimensions to fill canvas when displaying image.
image(glitch.image, 0, 0, glitch.width, glitch.height); // fills canvas
Image Functions
pixelate( [newDensity] )
Use to force hard pixels when resizing (nearest neighbor). Sets the sketch to noSmooth() and the canvas style imageRendering to pixelated. Optionally set the pixelDensity() by including a newDensity value (constrainted from 0 to displayDensity()). Only set within the setup().
glitch.pixelate(0.5);
loadType( newType )
Sets the image/type when converting loaded image to base64/bytes.
Check types for list of available filetypes based on your browser (each support different ones).
glitch.loadType('image/png'); // complete type as processed
glitch.loadType('png'); // same as above, 'image/' inserted if missing
glitch.loadType(random(glitch.types)); // load random available types
// used before glitch.loadImage()
loadQuality( newQuality )
Sets the quality when converting loaded image to base64/bytes.
Only available for jpeg and webp. Number between 0.0 – 1.0
glitch.loadQuality(1.0); // set hi-quality
glitch.loadQuality(0.01); // set extremely low-quality
glitch.loadQuality(random(0.01, 1.0); // set random quality
// used before glitch.loadImage()
loadImage( img, [callback] )
Load an image by string (filepath) or passing an existing p5.js image from the built-in loadImage() or video/webcam. Optionally declare a callback function to be run once loaded.
Each time function is called, bytes + bytesGlitched are replaced. If a static image, simply load it once and use resetBytes() to revert changes.
// load by filepath string
glitch.loadImage('data/images/fish.png');
// load p5.js image (same as above, useful if already loaded)
loadImage('data/images/fish.png', function(img){
glitch.loadImage(img);
});
// load using webcam (see p5.js example for capture)
glitch.loadImage(capture);
buildImage( [callback] )
Compile any processed glitches into image for displaying and saving. Optionally use a callback function to display the compiled image after each glitch.
// basic usage before displaying image
glitch.buildImage(); // compile glitched data
image(glitch.image, 0, 0); // display image whenever compiled
// callback usage
glitch.randomBytes(1); // 1 random byte
glitch.buildImage(function(img){
image(img, width / 2, height * 0.25);
});
glitch.randomBytes(100); // 100 additional random bytes
glitch.buildImage(function(img){
image(img, width / 2, height * 0.75);
});
