From d20e1431ec70ebbfbc168a7e0ec3b9f10776ee5e Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 2 Jul 2021 13:46:15 -0400
Subject: [PATCH] Create matrix effect

---
 Chapter 13/matrix effect | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 Chapter 13/matrix effect
diff --git a/Chapter 13/matrix effect b/Chapter 13/matrix effect
new file mode 100644
index 0000000..786e146
--- /dev/null
+++ b/Chapter 13/matrix effect	
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+
+</head>
+
+<body>
+
+
+    <div class="output"></div>
+    <script>
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.setAttribute('width', '600');
+        canvas.setAttribute('height', '400');
+        document.body.prepend(canvas);
+        const textPos = Array(60).join(0).split('');
+        console.log(textPos);
+
+        function matrix() {
+            let output = '0';
+            ctx.fillStyle = 'rgba(0,0,0,.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = 'green';
+            textPos.map((posY, index) => {
+                output = String.fromCharCode(62 + Math.random() * 26);
+                console.log(output);
+                let posX = (index * 10) + 10;
+                ctx.fillText(output, posX, posY);
+                if (posY > 100 + Math.random() * 1000) {
+                    textPos[index] = 0;
+                }
+                else {
+                    textPos[index] = posY + 10;
+                }
+            })
+        }
+        setInterval(matrix, 50);
+    </script>
+</body>
+
+</html>
