Rewrite matrix.js

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();
+Update();