Merge pull request #140 from Rahul-oops/matrix-rain-frontend

kaal-coder · web-flow · commit 12fdeb13100a · 2022-10-29T09:15:40.000+05:30
Matrix Rain Frontend Project Added
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");
