cringe-studios.com/matrix.js

67 lines
1.7 KiB
JavaScript
Raw Normal View History

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = window.innerWidth;
let ch = window.innerHeight;
window.onresize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
cw = window.innerWidth;
ch = window.innerHeight;
maxColumns = cw/fontSize;
};
let charArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '€', '$', '£', 'µ', '§'];
let maxCharCount = 100;
let fallingCharArr = [];
let fontSize = 15;
let maxColumns = cw/fontSize;
canvas.width = cw;
canvas.height = ch;
let frames = 0;
class FallingChar {
constructor(x, y) {
this.x = x;
this.y = y;
}
draw(ctx) {
this.value = charArr[Math.floor(Math.random() * (charArr.length - 1))].toUpperCase();
this.speed = Math.random() * fontSize * 3 /4 + fontSize * 3 /4;
ctx.fillStyle = "rgba(0, 255, 0)";
ctx.font = fontSize + "px Courier";
ctx.fillText(this.value, this.x, this.y);
this.y += this.speed;
if (this.y > ch) {
this.y = Math.random() * ch/2 - 50;
this.x = Math.floor(Math.random() * maxColumns) * fontSize;
this.speed = - Math.random() * fontSize * 3 /4 + fontSize * 3 /4;
}
}
}
let update = () => {
if (fallingCharArr.length < maxCharCount) {
let fallingChar = new FallingChar(Math.floor(Math.random() * maxColumns) * fontSize, Math.random() * ch/2 - 50);
fallingCharArr.push(fallingChar);
}
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, cw, ch);
for (let i = 0; i < fallingCharArr.length && frames % 2 == 0; i++){
fallingCharArr[i].draw(ctx);
}
requestAnimationFrame(update);
frames++;
}
update();