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

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

{% block style %}
<style>
	:root {
		--space: 16px;
	}

	html, body {
		height: calc(100vh - calc(var(--space) * 2));
		box-sizing: border-box;
	}

	body {
		position: relative;
		margin: var(--space);
		/* background-color: grey; */
		border: 1px solid black;
		font-family: 'Courier New', Courier, monospace;
	}

	.container {
		background-color: grey;
	}

	.glyph {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24px;
		line-height: 1;
		font-weight: bold;
	}
</style>
{% endblock %}

{% block body %}
<canvas id="canvas">
	<div>Canvas element not supported.</div>
</canvas>
<div id="container">
	<span id="a" class="glyph">A</span>
</div>
{% endblock %}

{% block script %}
<script>
	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	const glyphEls = document.getElementsByClassName('glyph');
	const glyphEl = document.getElementById('a');
	const cEl = document.getElementById('container');

	let createId = undefined;
	let holdId = undefined;
	let cleanId = undefined;
	let createInterval = 300;
	let holdInterval = 5000;
	let cleanInterval = 1000;
	let bodyHeight = Math.max(document.body.offsetHeight, document.body.clientHeight, 0);
	let glyphY = parseInt(window.getComputedStyle(glyphEl).top);
	let glyphW = glyphEl.offsetWidth;
	let glyphH = glyphEl.offsetHeight;
	let maxHeight = bodyHeight - glyphY - 2 * 16;

	cEl.style.display = 'none';

	function canvasTrail() {
		const canvas = document.getElementById("canvas");
		const body = document.querySelector("body");
		canvas.width = body.clientWidth - 2;
		canvas.height = body.clientHeight - 2;

		if (canvas.getContext) {
			const ctx = canvas.getContext("2d");

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

			let glyphText = "A";
			let glyphMeasure = ctx.measureText(glyphText);
			let glyphX = 0;
			let glyphY = 0;
			let glyphW = Math.max(glyphMeasure.actualBoundingBoxLeft + glyphMeasure.actualBoundingBoxRight, glyphMeasure.width);
			let glyphH = glyphMeasure.fontBoundingBoxDescent + glyphMeasure.fontBoundingBoxAscent;
			let glyph = {
				text: glyphText,
				measure: glyphMeasure,
				x: glyphX,
				y: glyphY,
				w: glyphW,
				h: glyphH
			}
			let lane = [];

			ctx.fillStyle = "grey";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			// ctx.fillStyle = "black";
			// ctx.fillRect(glyphX, glyphY, glyphW, glyphH);
			// ctx.fillStyle = "red";
			// ctx.fillText(glyphText, glyphX, glyphY + glyphMeasure.fontBoundingBoxAscent);

			ctx.fillStyle = "black";

			createId = setInterval(createGlyph, createInterval, ctx, characters, glyph, lane);
		} else {
			console.log('Canvas element not supported.');
		}
	}

	function createGlyph(ctx, chars, glyph, lane) {
		clearTimeout(cleanId);
		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
		console.log(glyph.text, glyph.y);

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

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

		if (glyph.y >= glyph.h) {
			let prevY = glyph.y - glyph.h;
			let bkg = "rgba(128, 128, 128, " + randomBetween(.1, 1) + ")";

			ctx.clearRect(glyph.x, prevY, glyph.w, glyph.h);
			ctx.fillStyle = "grey";
			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
			ctx.fillStyle = "black";
			ctx.fillText(glyph.text, glyph.x, prevY + glyph.measure.fontBoundingBoxAscent);
			ctx.fillStyle = bkg;
			ctx.fillRect(glyph.x, prevY, glyph.w, glyph.h);
		}

		glyph.y += glyph.h;

		if (glyph.y > canvas.height) {
			// holdLane(ctx, chars, glyph, lane);
			clearInterval(createId);
			holdId = setTimeout(holdLane, holdInterval, ctx, chars, glyph, lane);
		}
	}

	function holdLane(ctx, chars, glyph, lane) {
		console.log("hold");

		glyph.y = 0;

		// clearInterval(createId);

		// Änderung der Transparenz (sehr selten)

		// Änderung des Symbols (selten)

		cleanId = setTimeout(cleanLane, cleanInterval, ctx, chars, glyph, lane);
	}

	function cleanLane(ctx, chars, glyph, lane) {
		console.log("clean");

		clearTimeout(holdId);

		lane = [];

		ctx.clearRect(glyph.x, glyph.y, glyph.w, canvas.height);
		ctx.fillStyle = "grey";
		ctx.fillRect(0, 0, glyph.w, canvas.height);

		createId = setInterval(createGlyph, randomIntFrom(100, 1000), ctx, chars, glyph, lane);
	}

	function containerTrail(position, container) {
		const laneEl = document.createElement('div');

		laneEl.className = 'lane';
		container.appendChild(laneEl);

		let changeGlyphId = setInterval(() => {
			let newEl = glyphEl.cloneNode();
			let glyphX = position;

			glyphY += glyphEl.clientHeight;
			newEl.innerHTML = characters.charAt(Math.floor(Math.random() * characters.length));
			newEl.id = '';
			newEl.style.top = glyphY + 'px';
			newEl.style.left = glyphX + 'px';
			newEl.style.opacity = 1;

			if (glyphY > maxHeight) {
				glyphY = 0;
				laneEl.textContent = '';
			}

			laneEl.appendChild(newEl);
			let prevEl = newEl.previousElementSibling;

			if (prevEl !== null) {
				prevEl.style.opacity = randomBetween(.5, 1);
			}
		}, createInterval);
	}

	function addTrails(amount) {
		for (let index = 0; index <= amount; index++) {
			let position = index * glyphW;
			containerTrail(position);
		}
	}

	function getGlyph(fontSize = 24, lineHeight = 1) {
		const glyphEl = document.createElement('span');

		glyphEl.style = 'glyph';

		return glyphEl;
	}

	function createStyle() {
		const stylesheet = document.styleSheets[0];
		stylesheet.cssRules[0].style.backgroundColor = "aqua";
	}

	// containerTrail(0, cEl);
	window.addEventListener("load", canvasTrail);

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

	function randomIntFrom(min, max) {
		min = Math.ceil(min);
		max = Math.floor(max);

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