kaal-coder · kaal-coder · Oct 29, 2022 · Oct 25, 2022
diff --git a/Fronted Projects/Matrix Rain/index.html b/Fronted Projects/Matrix Rain/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Matrix Rain</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        overflow: hidden;
+        background: black;
+      }
+
+      canvas {
+        background: transparent;
+        position: absolute;
+        top: 0;
+        left: 0;
+        filter: brightness(2);
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/Fronted Projects/Matrix Rain/index.js b/Fronted Projects/Matrix Rain/index.js
@@ -0,0 +1,109 @@
+function Matrix(canvasName) {
+  const { floor: f, random: rand } = Math;
+  let canvas = document.getElementById(canvasName);
+
+  const ctx = canvas.getContext("2d");
+  canvas.height = window.innerHeight;
+  canvas.width = window.innerWidth;
+
+  let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+  gradient.addColorStop(0, "red");
+  gradient.addColorStop(0.2, "yellow");
+  gradient.addColorStop(0.4, "green");
+  gradient.addColorStop(0.6, "cyan");
+  gradient.addColorStop(0.8, "blue");
+  gradient.addColorStop(1, "magenta");
+
+  class Symbol {
+    constructor(x, y, fontSize, canvasHeight) {
+      this.characters =
+        "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      this.x = x;
+      this.y = y;
+      this.fontSize = fontSize;
+      this.font_size = this.fontSize;
+      this.text = "";
+      this.canvasHeight = canvasHeight;
+    }
+    draw(context) {
+      this.text = this.characters.charAt(f(rand() * this.characters.length));
+      context.fillText(
+        this.text,
+        this.x * this.fontSize,
+        this.y * this.fontSize
+      );
+      if (this.y * this.fontSize > this.canvasHeight && rand() > 0.95) {
+        this.y = 0;
+      } else {
+        this.y += 1;
+      }
+    }
+  }
+
+  class Effect {
+    constructor(canvasWidth, canvasHeight) {
+      this.canvasWidth = canvasWidth;
+      this.canvasHeight = canvasHeight;
+      this.fontSize = 20;
+      this.columns = this.canvasWidth / this.fontSize;
+      this.symbols = [];
+      this.#initialize();
+    }
+    #initialize() {
+      for (let i = 0; i < this.columns + 1; i++) {
+        this.symbols[i] = new Symbol(i, 0, this.fontSize, this.canvasHeight);
+      }
+    }
+    resize(width, height) {
+      this.canvasWidth = width;
+      this.canvasHeight = height;
+      this.columns = this.canvasWidth / this.fontSize;
+      this.symbols = [];
+      this.#initialize();
+    }
+  }
+
+  const effect = new Effect(canvas.width, canvas.height);
+
+  let lastTime = 0;
+  const FPS = 62;
+  const nextFrame = 1000 / FPS;
+  let timer = 0;
+
+  function animate(timeStamp) {
+    const deltaTime = timeStamp - lastTime;
+    lastTime = timeStamp;
+
+    if (timer > nextFrame) {
+      ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
+      ctx.textAlign = "center";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      // ctx.fillStyle = "#0aff0a";
+      ctx.fillStyle = gradient;
+      ctx.font = effect.fontSize + "px monospace";
+      effect.symbols.forEach((symbol) => symbol.draw(ctx));
+      timer = 0;
+    } else {
+      timer += deltaTime;
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate(0);
+
+  window.addEventListener("resize", () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, "red");
+    gradient.addColorStop(0.2, "yellow");
+    gradient.addColorStop(0.4, "green");
+    gradient.addColorStop(0.6, "cyan");
+    gradient.addColorStop(0.8, "blue");
+    gradient.addColorStop(1, "magenta");
+    effect.resize(canvas.width, canvas.height);
+  });
+}
+
+Matrix("canvas");