diff --git a/matrix.js b/matrix.js index 059e94a..9638742 100644 --- a/matrix.js +++ b/matrix.js @@ -1,57 +1,39 @@ -const canvas = document.getElementById("canvas") -const ctx = canvas.getContext("2d") +const canvas = document.getElementById("Matrix") +const context = canvas.getContext("2d") -let h = window.innerHeight -let w = window.innerWidth +canvas.height = window.innerHeight +canvas.width = window.innerWidth -canvas.height = h; -canvas.width = w; +const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\|=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω"; -let string = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+"; +const fontSize = 16; +const columns = canvas.width / fontSize; -let maxCount = 300; -let fontSize = 13; -let columns = w / fontSize; +const charArr = []; +for(let i = 0; i < columns; ++i) { + charArr[i] = 1; +} -class Matrix { - constructor(x, y) { - this.x = x; - this.y = y; - } +let frame = 0; - 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); +function Update() { + context.fillStyle = "rgba(0, 0, 0, 0.05)"; + context.fillRect(0, 0, canvas.width, canvas.height); + + let str = `rgba(${parseInt(Math.random() * 30) + 220}, 130, 130, 0.55)`; + context.fillStyle = str; + context.font = fontSize + "px monospace"; + + for(let i = 0; i < columns; ++i){ + const text = chars[Math.floor(Math.random() * chars.length)]; + context.fillText(text, i * fontSize, charArr[i] * fontSize); + if(charArr[i] * fontSize > canvas.height && Math.random() > 0.95){ + charArr[i] = 0; } + charArr[i]++; } + frame++; + if(frame <= 40 * (Math.floor(Math.random() * 100) + 3)) requestAnimationFrame(Update); // 40 a frame } -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(); \ No newline at end of file +Update();