147 lines
No EOL
3.2 KiB
Text
147 lines
No EOL
3.2 KiB
Text
---
|
|
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");
|
|
});
|
|
|
|
let newId = undefined;
|
|
let holdId = undefined;
|
|
let cleanId = undefined;
|
|
let newInterval = 300;
|
|
let holdInterval = 1000;
|
|
let cleanInterval = 3000;
|
|
let index = 0;
|
|
|
|
ctx.font = "24px 'Courier New', Courier, monospace";
|
|
|
|
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 = [];
|
|
|
|
console.log("init", newInterval);
|
|
console.log(glyph);
|
|
|
|
observer.observe(canvas);
|
|
|
|
newId = setInterval(newTrail, newInterval);
|
|
|
|
function newTrail() {
|
|
clearInterval(holdId);
|
|
|
|
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) {
|
|
console.log("hold", holdInterval);
|
|
|
|
clearInterval(newId);
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
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 %} |