From c1633e0bc9ae8a70e8b7661446d294426e07a9d3 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Mar 2026 19:44:07 +0100
Subject: [PATCH] feat: Change matrix

- Use blocks for now
- Hold and clean for line
- Only one line for now
---
 source/screens/demo/examples/matrix.liquid | 294 ++++++---------------
 1 file changed, 83 insertions(+), 211 deletions(-)

diff --git a/source/screens/demo/examples/matrix.liquid b/source/screens/demo/examples/matrix.liquid
index 5685600..8306978 100644
--- a/source/screens/demo/examples/matrix.liquid
+++ b/source/screens/demo/examples/matrix.liquid
@@ -7,255 +7,127 @@ tags:
 
 {% block style %}
 <style>
-	:root {
-		--space: 16px;
-	}
-
 	html, body {
-		height: calc(100vh - calc(var(--space) * 2));
+		height: 100vh;
 		box-sizing: border-box;
 	}
 
 	body {
-		position: relative;
-		margin: var(--space);
-		/* background-color: grey; */
-		border: 1px solid black;
+		margin: 0;
+		background-color: grey;
 		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;
+	#canvas {
+		display: block;
+		width: 100%;
+		height: 100%;
 	}
 </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>
+<canvas id="canvas"></canvas>
 {% endblock %}
 
 {% block script %}
 <script>
 	const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	const glyphEls = document.getElementsByClassName('glyph');
-	const glyphEl = document.getElementById('a');
-	const cEl = document.getElementById('container');
+	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 createId = undefined;
-	let changeId = undefined;
+	let newId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
-	let createInterval = 300;
-	let changeInterval = 300;
+	let newInterval = 300;
 	let holdInterval = 1000;
-	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;
+	let cleanInterval = 3000;
 	let index = 0;
 
-	cEl.style.display = 'none';
+	ctx.font = "24px 'Courier New', Courier, monospace";
 
-	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.');
-		}
+	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 = [];
 
-	function createGlyph(ctx, chars, glyph, lane) {
-		clearTimeout(cleanId);
-		glyph.text = chars.charAt(Math.floor(Math.random() * chars.length));
-		console.log(glyph.text, glyph.y);
+	console.log("init", newInterval);
+	console.log(glyph);
 
-		lane.push([glyph.text, glyph.y]);
+	observer.observe(canvas);
 
-		// 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);
+	newId = setInterval(newTrail, newInterval);
 
-		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);
-
-	/**
-	 * Change glyph
-	 */
-	console.log("init", changeInterval);
-	changeId = setInterval(change, changeInterval);
-
-	function change() {
+	function newTrail() {
 		clearInterval(holdId);
-		let char = characters.charAt(Math.floor(Math.random() * characters.length));
-		console.log(index, char);
+
+		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) {
-			clearInterval(changeId);
-			index = 0;
-			changeInterval = randomIntFrom(100, 1000, 2);
-			console.clear();
 			console.log("hold", holdInterval);
 
-			holdId = setTimeout(() => {
-				holdInterval = randomIntFrom(1000, 10000, 3);
+			clearInterval(newId);
 
-				console.log("change", changeInterval);
-				changeId = setInterval(change, changeInterval);
+			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);
 		}
 	}