57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
const canvas = document.getElementById("canvas")
|
|
const ctx = canvas.getContext("2d")
|
|
|
|
let h = window.innerHeight
|
|
let w = window.innerWidth
|
|
|
|
canvas.height = h;
|
|
canvas.width = w;
|
|
|
|
let string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+";
|
|
|
|
let maxCount = 300;
|
|
let fontSize = 13;
|
|
let columns = w / fontSize;
|
|
|
|
class Matrix {
|
|
constructor(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
draw(ctx) {
|
|
this.value = string[parseInt(Math.random() * 67)]; // Math.floor() is fine too
|
|
this.speed = (Math.random() * 10 + 10)
|
|
|
|
ctx.font = fontSize + "px sans-serif";
|
|
let str = `rgba(0, ${parseInt(Math.random() * 70) + 180}, 0)`;
|
|
ctx.fillStyle = str;
|
|
ctx.fillText(this.value, this.x, this.y);
|
|
this.y += this.speed;
|
|
|
|
if(this.y > h){
|
|
this.x = parseInt(Math.random() * columns) * fontSize;
|
|
this.y = (Math.random() * h) / 2 - 50;
|
|
this.speed = (-Math.random() * 10 + 10);
|
|
}
|
|
}
|
|
}
|
|
|
|
let charArr = [];
|
|
let cnt = 0;
|
|
|
|
function Move() {
|
|
if(charArr.length < maxCount) {
|
|
let currentChar = new Matrix(parseInt(Math.random() * columns) * fontSize, (Math.random() * h) / 2 - 50);
|
|
charArr.push(currentChar);
|
|
}
|
|
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
|
ctx.fillRect(0, 0, w, h);
|
|
for(let i = 0; i < charArr.length && (cnt % 3 == 1); ++i){
|
|
charArr[i].draw(ctx);
|
|
}
|
|
requestAnimationFrame(Move);
|
|
cnt++;
|
|
}
|
|
|
|
Move(); |