examples/web/P5L_p5.glitch-image-types.html

<!DOCTYPE html>
<html>
<head>
	<title>p5.glitch-image-types</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-types

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

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

let glitch, typeCounter = 0;

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

	glitch = new Glitch();
	setupGlitch(); // load image w/ random type
}

function draw() {
	glitch.resetBytes();

	glitch.randomBytes(1); // add one random byte for movement

	glitch.buildImage(function() {
		background(0); // clear background once image is ready
		displayType(); // show text
	});
	image(glitch.image, width / 2, height / 2)
}

function mousePressed() {
	typeCounter++;
	setupGlitch(); // grab another random format
}

function setupGlitch() {
	loadImage('includes/demos-data/images/fish.png', function(im) {
		glitch.loadType(glitch.types[typeCounter%glitch.types.length]); // use random type
		glitch.loadImage(im);
	});
}

function displayType() {
	fill(255);
	textAlign(CENTER, CENTER);
	textSize(20);
	text('press mouse to walkthrough image types \n' + glitch.types[typeCounter%glitch.types.length], 0, 0, width, 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>