let glitch; const words = []; const layers = ["weird", "girls", "psyche", "religion", "distortion", "kids", "society", "rumors", "protocol", "love", "infornography", "landscape", "ego"]; let loveLetter; let noiseX = 0; let noiseY = 0; let start = 0; let step = 0.1; function preload() { loveLetter = loadFont('https://stat.neort.io/externalResource/bv6e1rc3p9f7gigedp3g.ttf'); } function setup() { createCanvas(windowWidth, windowHeight); imageMode(CENTER); tint(250, 250, 200, 140); textFont(loveLetter); glitch = new Glitch(); glitch.loadType('jpg'); glitch.loadQuality(.01); loadImage('https://stat.neort.io/externalResource/bv6e0tk3p9f7gigedp2g.jpg', (img) => { img.resize(img.width/8, img.height/8); glitch.loadImage(img); }); // noLoop(); for (let i = 0; i < layers.length; i++) { words[i] = new Word(layers[i].toUpperCase(), random(30, 100)); } } function draw() { drawBg(); glitch.resetBytes(); glitch.replaceBytes(1, 1); glitch.randomBytes(1/8); glitch.buildImage(); image(glitch.image, width/2, height/2); words.forEach((w) => { w.draw(); w.update(); }); } function drawBg() { background(0); noStroke(); for (let y = 0; y < height; y+=20) { noiseX = start; for (let x = 0; x < width; x+=20) { let r = noise(noiseX, noiseY) * 250; let b = noise(noiseX, noiseY) * 180; fill(r, 0, b, 80); rect(x, y, 20); noiseX += step; } noiseY += step; } } class Word { constructor(text, size) { this.text = text; this.x = random(width); this.y = random(height); this.randomness = random(1) * 0.03; this.color = 0; this.interval = 200; this.size = size; this.velocity = random(1, 6); this.width = textWidth(this.text); } draw() { fill(this.color); textSize(this.size); text(this.text, this.x, this.y); } update() { this.x += this.velocity; if (this.x - this.width > width) { this.x = -this.width; } this.color = abs(sin(frameCount * this.randomness)) * 255; } } // p5.glitch v0.1.0 // cc teddavis.org 2020 class Glitch{ constructor(){ this.mode = 'image'; this.width = 1; this.height = 1; this.image = createImage(1, 1); this.bytes = []; this.bytesGlitched = []; this.hex = []; this.hexGlitched = []; this.base64 = ''; this.base64Glitched = ''; this.base64Type = ''; this.limitStart = 0.2; this.limitStop = 1; this.fileType = 'image/jpeg'; this.fileQuality = 1.0; this.fileFormat = 'jpeg'; this.types = []; this.initTypes(); this.initBase64(); this.errorOut = true; this.debugOut = false; } /* BINARY DATA FUNCTIONS */ // load bytes by passing filepath string or p5.js loadBytes object. optional callback when ready loadBytes(bytes, callback){ this.debugMsg('p5.glitch - loadBytes()...'); if(typeof bytes === 'string'){ loadBytes(bytes, loadedBytes => { this.parseBytes(loadedBytes.bytes, callback); }, function(){this.errorMsg('p5.glitch - error loading bytes');}.bind(this)); }else if(typeof bytes === 'object' && bytes.hasOwnProperty('bytes') && bytes.bytes.length > 0){ this.parseBytes(bytes.bytes, callback); }else if(typeof bytes === 'object' && bytes.constructor.name == 'Uint8Array' && bytes.length > 0){ this.parseBytes(bytes, callback); }else if(bytes instanceof Array && bytes.length > 0){ this.parseBytes(bytes, callback); }else{ this.errorMsg('p5.glitch - error loading bytes'); } } // handle loadBytes() parseBytes(bytes, callback){ this.debugMsg('p5.glitch - parseBytes()...'); this.mode = 'binary'; this.bytes = bytes; this.bytesGlitched = this.bytes; this.debugMsg('p5.glitch - binary loaded - bytes.length: ' + this.bytes.length); if(typeof callback == 'function' && callback !== undefined){ callback(); } } // save binary file from glitched bytes, use filename with same extension as loadBytes() // https://github.com/sindresorhus/file-type for example files saveBytes(fileName = 'p5.glitch'){ if(this.mode === 'binary'){ this.debugMsg('p5.glitch - saveBytes()...'); var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; if(fileName === 'p5.glitch'){ fileName = fileName + '_' + this.timeStamp(); this.debugMsg('p5.glitch - saving unknown datatype, use saveBytes(filename.xxx) with file extension'); } let blob = new Blob([this.bytesGlitched], {type: "octet/stream"}); let blobURL = window.URL.createObjectURL(blob); a.href = blobURL; a.download = fileName; a.click(); window.URL.revokeObjectURL(blobURL); this.debugMsg('p5.glitch - binary downloaded'); } } /* IMAGE FUNCTIONS */ // create array of available in-browser image glitching types, glitch.types // available types check inspired from https://output.jsbin.com/davemir initTypes(){ const tests = [ "image/png", "image/jpeg", "image/jpg", "image/webp", "image/ico", "image/bmp", "image/gif", "image/tif", ]; let types = []; let tempCanvas = document.createElement("canvas"); tests.forEach((type) => { const url = tempCanvas.toDataURL(type); let supported = url.startsWith(`data:${type}`); if(supported){ types.push(type); } }); this.types = types; tempCanvas.remove(); return types; } // set loaded image type for different types of glitch (glitch.types = browser compatibility) loadType(newType){ if(newType.indexOf('/') === -1){ newType = 'image/' + newType; } if(newType === 'image/jpg'){ newType = 'image/jpeg'; } if(this.types.indexOf(newType) === -1){ this.errorMsg('p5.glitch - '+newType+' is not supported in this browser'); } this.fileType = newType; this.debugMsg('p5.glitch - loadType: '+this.fileType); } // set loaded image quality (only relevant for jpeg or webp) loadQuality(newQuality){ this.fileQuality = constrain(newQuality, 0, 1); this.debugMsg('p5.glitch - loadQuality: '+this.fileQuality); } // load image by path or p5.js loaded image (video, capture, image) loadImage(img, callback){ this.debugMsg('p5.glitch - loadImage()...'); if(typeof img === 'string'){ loadImage(img, im => { this.parseImage(im, callback); }, function(){this.errorMsg('p5.glitch - error loading image');}.bind(this)); }else if(img.hasOwnProperty('width') && img.width > 0){ this.parseImage(img, callback); }else{ this.errorMsg('p5.glitch - error loading image'); } } // handle loaded image parseImage(img, callback){ this.debugMsg('p5.glitch - parseImage()...'); this.mode = 'image'; let grabimg = img.get(); let dataimg = grabimg.canvas.toDataURL(this.fileType, this.fileQuality).split(','); this.fileFormat = this.fileType.split('/')[1]; this.base64Type = dataimg[0]; this.base64 = dataimg[1]; this.base64Glitched = this.base64; this.bytes = this.base64ToBytes(dataimg[1]); this.bytesGlitched = this.bytes; this.buildImage(this.bytes); this.debugMsg('p5.glitch - image loaded - bytes.length: ' + this.bytes.length); if(typeof callback == 'function' && callback !== undefined){ callback(); } } // updates width + height for auto scaling image to canvas imageScale(img){ let scl = 1; if(height >= width || abs(height-width) < 5) { scl = height / img.height; } else { scl = width / img.width; } this.width = img.width * scl; this.height = img.height * scl; } // recompile image based on glitched bytes buildImage(callback){ if(this.mode === 'image' && this.base64Type !== '' && this.base64Glitched !== ''){ loadImage(this.base64Type + ', ' + this.base64Glitched, img => { this.imageScale(img); this.image = img.get(); if(typeof callback == 'function' && callback !== undefined){ callback(img); } }, function(){this.errorMsg('p5.glitch - error building image');}.bind(this)); } } // save recompiled image saveImage(fileName = 'p5.glitch'){ if(this.mode === 'image'){ this.debugMsg('p5.glitch - saveImage()...'); if(fileName === 'p5.glitch'){ fileName = fileName + '_' + this.timeStamp(); } glitch.image.save(fileName +'.'+ this.fileFormat); this.debugMsg('p5.glitch - image downloaded'); } } // save recompiled image as copy (safe) saveSafe(fileName = 'p5.glitch', fileType = 'png'){ if(this.mode === 'image'){ this.debugMsg('p5.glitch - saveSafe()...'); if(fileName === 'p5.glitch'){ fileName = fileName + '_' + this.timeStamp(); } if(fileType !== undefined && fileType === 'jpg'){ fileType = 'jpg'; } let imgSafe = glitch.image.get(); imgSafe.save(fileName +'_safe.'+ fileType); this.debugMsg('p5.glitch - safe image downloaded'); } } // save canvas as png (incase layering multiple glitch states) saveCanvas(fileName = 'p5.glitch', fileType = 'png'){ if(this.mode === 'image'){ this.debugMsg('p5.glitch - saveCanvas()...'); if(fileName === 'p5.glitch'){ fileName = fileName + '_' + this.timeStamp(); } if(fileType !== undefined && fileType === 'jpg'){ fileType = 'jpg'; } save(fileName + '_canvas.' + fileType); this.debugMsg('p5.glitch - canvas downloaded'); } } /* GLITCH FUNCTIONS */ // reset glitched bytes/base64 back to original imported resetBytes(){ this.bytesGlitched = this.bytes.slice(); this.base64Glitched = this.base64; this.debugMsg('p5.glitch - resetBytes()'); } // limit glitching to percentage of file limitBytes(limitStart = 0.2, limitStop = 1.0){ this.limitStart = constrain(limitStart, 0.0, 1.0); this.limitStop = constrain(limitStop, this.limitStart, 1.0); this.debugMsg('p5.glitch - limitStart: ' + limitStart + '/ limitStop: ' + limitStop); } // handle new limit parseLimit(newLimit){ if(newLimit !== undefined && newLimit instanceof Array){ if(newLimit.length === 1){ this.limitBytes(newLimit[0]); }else if(newLimit.length === 2){ this.limitBytes(newLimit[0], newLimit[1]); } } } // set single byte of whole image to random value randomByte(bytePos){ bytePos = this.parsePosition(bytePos); let newData = this.bytesGlitched.slice(); newData[bytePos] = this.parseByte(random(255)); this.updateBytes(newData); } // set x (byteCount) bytes within pre-set limits to random or newValue randomBytes(byteCount, replaceVal){ let newData = this.bytesGlitched.slice(); if(byteCount === undefined){ byteCount = 1; } for(let i = 0; i < byteCount; i++) { if(replaceVal !== undefined){ replaceVal = this.parseByte(replaceVal); }else{ replaceVal = this.parseByte(random(255)); } let randomPos = floor(random(newData.length * this.limitStart, newData.length * this.limitStop)); newData[randomPos] = replaceVal; } this.updateBytes(newData); } // replace single byte with new value (accepts HEX position and value) replaceByte(bytePos, replaceVal){ let newData = this.bytesGlitched.slice(); bytePos = this.parsePosition(bytePos); newData[bytePos] = this.parseByte(replaceVal); this.updateBytes(newData); } // find and replace bytes within pre-set limits (accepts HEX values) replaceBytes(findVal, replaceVal){ let newData = this.bytesGlitched.slice(); findVal = this.parseByte(findVal); replaceVal = this.parseByte(replaceVal); let iStart = floor(newData.length * this.limitStart); let iStop = floor(newData.length * this.limitStop); for(let i = iStart; i < iStop; i++){ if(newData[i] === findVal){ newData[i] = replaceVal; } } this.updateBytes(newData); } // find + replace contents based on hex values replaceHex(findVal, replaceVal){ let newData = this.bytesGlitched.slice(); let hex = this.bytesToHex(newData); if(typeof findVal === 'string' && typeof replaceVal === 'string'){ hex = hex.split(findVal).join(replaceVal); } this.updateBytes(this.hexToBytes(hex)); } // find and replace bytes within pre-set limits (accepts HEX values) swapBytes(aByte, bByte){ let newData = this.bytesGlitched.slice(); aByte = this.parseByte(aByte); bByte = this.parseByte(bByte); let iStart = floor(newData.length * this.limitStart); let iStop = floor(newData.length * this.limitStop); for(let i = iStart; i < iStop; i++){ if(newData[i] === aByte){ newData[i] = bByte; }else if(newData[i] === bByte){ newData[i] = aByte; } } this.updateBytes(newData); } // handle changes updateBytes(newBytes = this.bytes){ this.base64Glitched = this.bytesToBase64(newBytes.slice()); this.bytesGlitched = newBytes.slice(); } // eval new byte position parsePosition(newPos, bytes){ if(typeof newPos === 'string'){ newPos = parseInt(newPos, 16); } let bytesLength = this.bytesGlitched.length; if(bytes !== undefined && bytes instanceof Array && bytes.length > 0){ bytesLength = bytes.length; } newPos = floor(constrain(newPos, 0, bytesLength)); return newPos; } // eval new byte value parseByte(newVal){ if(typeof newVal === 'string'){ newVal = parseInt(newVal, 16); }else if(!isNaN(newVal)){ newVal = floor(constrain(newVal, 0, 255)); } return newVal; } /* META FUNCTIONS */ // hard (nearest neighbor) pixels, optionally scale canvas (only use in setup) pixelate(newDensity = 1){ newDensity = constrain(newDensity, 0.0, displayDensity()); pixelDensity(newDensity); document.body.style.imageRendering = "pixelated"; noSmooth(); this.debugMsg('p5.glitch - pixelate density: ' + newDensity); } // toggle errors in console errors(mode){ if(typeof mode == 'boolean'){ this.errorOut = mode; }else{ this.errorMsg('p5.glitch - errors() use true/false'); return false; } if(!this.errorOut){ window.addEventListener('error', function(){return true;}); }else{ window.removeEventListener('error', function(){return true;}); } this.debugMsg('p5.glitch - errors: ' + this.errorOut); } // if errors() active, log messages errorMsg(msg){ if(this.errorOut || this.debugOut){ console.log(msg); } } // toggle debug info debug(mode = true){ this.debugOut = mode; if(this.debugOut){ this.debugMsg('p5.glitch - debug: ' + this.debugOut); this.debugMsg('p5.glitch - available image types:\n' + this.types.join(', ')); } } // if debug active, log messages debugMsg(msg){ if(this.debugOut){ console.log(msg); } } // custom timestamp for exporting timeStamp(){ let d = new Date(); d.setTime( d.getTime() - new Date().getTimezoneOffset()*60*1000 ); let ts = d.toISOString().replace(/[^0-9]/g, '').slice(0, -3); return ts; } /* BYTES/BASE64/HEX FUNCTIONS */ // https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727 initBase64(){ this.base64abc = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "/" ]; this.base64codes = [ 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 62, 255, 255, 255, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 255, 255, 255, 0, 255, 255, 255, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 255, 255, 255, 255, 255, 255, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51 ]; } getBase64Code(charCode) { if(charCode > this.base64codes.length) { throw new Error("Unable to parse base64 string."); } const code = this.base64codes[charCode]; if(code === 255) { throw new Error("Unable to parse base64 string."); } return code; } bytesToBase64(bytes) { let result = '', i, l = bytes.length; for(i = 2; i < l; i += 3) { result += this.base64abc[bytes[i - 2] >> 2]; result += this.base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)]; result += this.base64abc[((bytes[i - 1] & 0x0F) << 2) | (bytes[i] >> 6)]; result += this.base64abc[bytes[i] & 0x3F]; } if(i === l + 1) { // 1 octet yet to write result += this.base64abc[bytes[i - 2] >> 2]; result += this.base64abc[(bytes[i - 2] & 0x03) << 4]; result += "=="; } if(i === l) { // 2 octets yet to write result += this.base64abc[bytes[i - 2] >> 2]; result += this.base64abc[((bytes[i - 2] & 0x03) << 4) | (bytes[i - 1] >> 4)]; result += this.base64abc[(bytes[i - 1] & 0x0F) << 2]; result += "="; } return result; } base64ToBytes(str) { if(str.length % 4 !== 0) { throw new Error("Unable to parse base64 string."); } const index = str.indexOf("="); if(index !== -1 && index < str.length - 2) { throw new Error("Unable to parse base64 string."); } let missingOctets = str.endsWith("==") ? 2 : str.endsWith("=") ? 1 : 0, n = str.length, result = new Uint8Array(3 * (n / 4)), buffer; for(let i = 0, j = 0; i < n; i += 4, j += 3) { buffer = this.getBase64Code(str.charCodeAt(i)) << 18 | this.getBase64Code(str.charCodeAt(i + 1)) << 12 | this.getBase64Code(str.charCodeAt(i + 2)) << 6 | this.getBase64Code(str.charCodeAt(i + 3)); result[j] = buffer >> 16; result[j + 1] = (buffer >> 8) & 0xFF; result[j + 2] = buffer & 0xFF; } return result.subarray(0, result.length - missingOctets); } // https://stackoverflow.com/a/34356351/10885535 // Convert a hex string to a byte array hexToBytes(hex) { for (var bytes = [], c = 0; c < hex.length; c += 2) { bytes.push(parseInt(hex.substr(c, 2), 16)); } return bytes; } // Convert a byte array to a hex string bytesToHex(bytes) { for (var hex = [], i = 0; i < bytes.length; i++) { var current = bytes[i] < 0 ? bytes[i] + 256 : bytes[i]; hex.push((current >>> 4).toString(16)); hex.push((current & 0xF).toString(16)); } return hex.join(""); } }