source/screens/demo/examples/matrix.liquid

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