hippie/source/view/demo/examples/matrix.liquid

---
title: Matrix
tags:
- demoExample
---
{% layout 'hippie/simple.liquid' %}

{% block style %}
<style>
	html, body {
		height: 100vh;
		box-sizing: border-box;
	}

	body {
		margin: 0;
		background-color: grey;
		font-family: 'Courier New', Courier, monospace;
	}

	#canvas {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
{% endblock %}

{% block body %}
<canvas id="canvas"></canvas>
{% endblock %}

{% block script %}
<script>
	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	// const observer = new ResizeObserver(() => {
	// 	canvas.width = canvas.clientWidth;
	// 	canvas.height = canvas.clientHeight;
	// 	console.log("resize");
	// });

	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;

	// observer.observe(canvas);

	ctx.font = "24px 'Courier New', Courier, monospace";
	ctx.textBaseline = "top";

	let char = characters.charAt(Math.floor(Math.random() * characters.length));
	let charMeasure = ctx.measureText(char);
	let charW = Math.ceil(Math.max(charMeasure.actualBoundingBoxLeft + charMeasure.actualBoundingBoxRight, charMeasure.width));
	let charH = charMeasure.fontBoundingBoxDescent + charMeasure.fontBoundingBoxAscent;
	let glyph = {
		text: char,
		x: 0,
		y: 0,
		w: charH,
		h: charH
	}
	let lane = [];
	let max = Math.floor(canvas.clientHeight / glyph.h);

	let newId = undefined;
	let holdId = undefined;
	let cleanId = undefined;
	let newInterval = 300;
	let holdInterval = 1000;
	let cleanInterval = 400;
	let newIndex = 0;
	let cleanIndex = randomIntFrom(1, max);

	console.log("init", newInterval);
	console.log(glyph);

	newId = setInterval(newTrail, newInterval);

	function newTrail() {
		clearInterval(holdId);

		glyph.text = characters.charAt(Math.floor(Math.random() * characters.length));
		console.log(newIndex, glyph.text);

		lane.push([newIndex, glyph.text, glyph.y]);

		ctx.fillStyle = "white";
		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
		ctx.fillStyle = "black";
		ctx.fillText(glyph.text, Math.floor((charH - charW) / 2), glyph.y);

		if (newIndex > 0) {
			let prevY = glyph.y - glyph.h;
			let alpha = randomBetween(.2, 1);
			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
			ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
			ctx.fillStyle = "rgba(255, 255, 255, " + alpha + ")";
			// TODO: can not use array lane if it is changed by cleanTrail()
			ctx.fillText(lane[newIndex - 1][1], Math.floor((charH - charW) / 2), prevY);
		}

		if (newIndex === cleanIndex) {
			console.log("clean", cleanInterval, cleanIndex);

			cleanId = setInterval(cleanTrail, cleanInterval);
		}

		newIndex++;
		glyph.y += glyph.h;

		if (newIndex > max) {
			// console.log("hold", holdInterval);
			console.log("end");

			clearInterval(newId);

			newIndex = 0;
			glyph.y = 0;
			newInterval = randomIntFrom(100, 1000, 2);

			// holdId = setTimeout(() => {
			// 	console.log("clean", cleanInterval);

			// 	holdInterval = randomIntFrom(1000, 10000, 3);
			// 	cleanId = setInterval(cleanTrail, cleanInterval);
			// }, holdInterval);
		}
	}

	function cleanTrail() {
		let pos = lane.shift();
		console.log(pos);

		ctx.clearRect(0, pos[2], glyph.w, glyph.h);

		if (!lane.length) {
			console.log("hold", holdInterval);

			clearInterval(cleanId);

			holdId = setTimeout(() => {
				console.clear();
				console.log("new", newInterval);

				cleanIndex = randomIntFrom(1, max);
				cleanInterval = randomIntFrom(1000, 10000, 3);
				holdInterval = randomIntFrom(1000, 10000, 3);
				newId = setInterval(newTrail, newInterval);
			}, holdInterval);
		}
	}

	function randomBetween(min, max) {
		return (Math.random() * (max - min) + min).toFixed(2);
	}

	function randomIntFrom(min, max, pos = 0) {
		pos = Math.pow(10, pos);
		min = Math.ceil(min);
		max = Math.floor(max);

		return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
	}
</script>
{% endblock %}