hippie/source/screens/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");
	});

	let newId = undefined;
	let holdId = undefined;
	let cleanId = undefined;
	let newInterval = 300;
	let holdInterval = 1000;
	let cleanInterval = 3000;
	let index = 0;

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

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

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

	observer.observe(canvas);

	newId = setInterval(newTrail, newInterval);

	function newTrail() {
		clearInterval(holdId);

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

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

		ctx.fillStyle = "white";
		ctx.fillRect(glyph.x, glyph.y, glyph.w, glyph.h);
		// ctx.fillText(glyph.text, glyph.x, glyph.y + glyph.h);

		if (index > 0) {
			let prevY = glyph.y - glyph.h;
			ctx.fillStyle = "rgba(0, 0, 0, " + randomBetween(.6, 1) + ")";
			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
		}

		index++;
		glyph.y += glyph.h;

		if (index > 10) {
			console.log("hold", holdInterval);

			clearInterval(newId);

			index = 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() {
		clearInterval(holdId);

		let pos = lane.shift();
		console.log(pos);

		ctx.clearRect(0, pos[2], glyph.w, glyph.h);
		// ctx.clearRect(0, 0, canvas.width, canvas.height);

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

			clearInterval(cleanId);

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

				cleanInterval = 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 %}