feat: Change matrix

Add change function and test in console.

source/screens/demo/examples/matrix.liquid

@@ -56,16 +56,19 @@ tags:
 	const cEl = document.getElementById('container');
 
 	let createId = undefined;
+	let changeId = undefined;
 	let holdId = undefined;
 	let cleanId = undefined;
 	let createInterval = 300;
-	let holdInterval = 5000;
+	let changeInterval = 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 index = 0;
 
 	cEl.style.display = 'none';
 
@@ -226,17 +229,47 @@ tags:
 	}
 
 	// containerTrail(0, cEl);
-	window.addEventListener("load", canvasTrail);
+	// window.addEventListener("load", canvasTrail);
+
+	/**
+	 * Change glyph
+	 */
+	console.log("init", changeInterval);
+	changeId = setInterval(change, changeInterval);
+
+	function change() {
+		clearInterval(holdId);
+		let char = characters.charAt(Math.floor(Math.random() * characters.length));
+		console.log(index, char);
+
+		index++;
+
+		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);
+
+				console.log("change", changeInterval);
+				changeId = setInterval(change, changeInterval);
+			}, holdInterval);
+		}
+	}
 
 	function randomBetween(min, max) {
 		return (Math.random() * (max - min) + min).toFixed(2);
 	}
 
-	function randomIntFrom(min, max) {
+	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);
+		return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
 	}
 </script>
 {% endblock %}