examples/web/P5L_p5.glitch-image.html

<!DOCTYPE html>
<html>
<head>
	<title>p5.glitch-image</title>
	<meta charset="utf-8">
	<!-- Compiled w/ P5LIVE, http://github.com/ffd8/p5live -->
	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/addons/p5.sound.min.js"></script>
	<style type="text/css">
		body{
			margin:0;
			overflow:hidden;
		}
		canvas{
			position:fixed;
			top:0;
			left:0;
			z-index:-1;
			width:100vw;
			height:100vh;
			margin:0;
		}
	</style>
	<script type="text/javascript">
		// eco-mode = only render if window focused
		window.onblur = function () {
			noLoop()
		}
		window.onfocus = function () {
			loop();
		}
	</script>
<script type="text/javascript" src="includes/libs/p5.glitch.js"></script>

<script type="text/javascript">
//p5.glitch-image

// p5.glitch-image
// cc teddavis.org 2020

let libs = ["includes/libs/p5.glitch.js"];

let glitch;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	imageMode(CENTER);

	glitch = new Glitch();
	loadImage('includes/demos-data/images/fish.png', function(im){
		glitch.loadImage(im);
	});
}

function draw() {
	glitch.resetBytes();

	glitch.replaceBytes(100, 104); // swap all decimal byte 100 for 104
	glitch.randomBytes(1); // add one random byte for movement

	glitch.buildImage();
	image(glitch.image, width/2, height/2)
}

/* CUSTOM FUNCTIONS FOR P5LIVE */
// keep fullscreen if window resized
function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

// custom ease function
function ease(iVal, oVal, eVal){
	return oVal += (iVal - oVal) * eVal;
}

// processing compatibility
function println(msg){
	print(msg);
}
</script>

</head>
<body>

</body>
</html>