Brijesh's Git Server — matrix @ 1cd5ddb5c0c0f6aeb613225696f4a4371e2c6000

iykyk

create matrix movie like website
Brijesh ops@brijesh.dev
Fri, 26 Jul 2024 12:43:24 +0530
commit

1cd5ddb5c0c0f6aeb613225696f4a4371e2c6000

2 files changed, 60 insertions(+), 0 deletions(-)

jump to
A index.html 
@@ -0,0 +1,20 @@ 
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      body {
+        background-color: black;
+        ovweflow: hidden;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <script src="script.js"></script>
+  </body>
+</html>
A script.js 
@@ -0,0 +1,40 @@ 
+const canvas = document.getElementById("canvas");
+const context = canvas.getContext("2d");
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const texts =
+  "1234567890!@#$%^&*()_+[]{};':,.<>?/|~`±§QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm'";
+
+const fontSize = 16;
+
+const columnCount = canvas.width / fontSize;
+
+const yAxisPositions = [];
+
+for (let x = 0; x < columnCount; x++) {
+  yAxisPositions[x] = 0;
+}
+
+const draw = () => {
+  context.fillStyle = "rgba(0,0,0,0.05)";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = "#0f0";
+  context.font = `${fontSize}px monospace`;
+
+  for (let x = 0; x < yAxisPositions.length; x++) {
+    const randomCharacter = texts[Math.floor(Math.random() * texts.length)];
+    context.fillText(
+      randomCharacter,
+      x * fontSize,
+      yAxisPositions[x] * fontSize,
+    );
+    if (yAxisPositions[x] * fontSize > canvas.height && Math.random() > 0.975) {
+      yAxisPositions[x] = 0;
+    }
+    yAxisPositions[x]++;
+  }
+};
+
+setInterval(draw, 100);