From 5b10d106136354ac450c3fab2fe33b7f9048ece6 Mon Sep 17 00:00:00 2001 From: Rahul_oops Date: Tue, 25 Oct 2022 23:41:16 +0530 Subject: [PATCH] Matrix Rain Frontend Project Added --- Fronted Projects/Matrix Rain/index.html | 33 +++++++ Fronted Projects/Matrix Rain/index.js | 109 ++++++++++++++++++++++++ 2 files changed, 142 insertions(+) create mode 100644 Fronted Projects/Matrix Rain/index.html create mode 100644 Fronted Projects/Matrix Rain/index.js diff --git a/Fronted Projects/Matrix Rain/index.html b/Fronted Projects/Matrix Rain/index.html new file mode 100644 index 00000000..e7829301 --- /dev/null +++ b/Fronted Projects/Matrix Rain/index.html @@ -0,0 +1,33 @@ + + + + + + + Matrix Rain + + + + + + + diff --git a/Fronted Projects/Matrix Rain/index.js b/Fronted Projects/Matrix Rain/index.js new file mode 100644 index 00000000..0a8d4d1b --- /dev/null +++ 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");