feat: Add matrix screen

source/screens/demo/examples/matrix.liquid

@@ -0,0 +1,242 @@
+---
+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 %}