Initial Commit

bad1dea · Sep 6, 2020 · 4abb87e · amirabbas83 · Oct 10, 2022 · RahulYadav56
commit 4abb87e
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 0 deletions.
diff --git a/LivelyInfo.json b/LivelyInfo.json
@@ -0,0 +1,12 @@
+{
+  "AppVersion": "1.0.0.0",
+  "Title": "Matrix Rain Customizable",
+  "Thumbnail": "thumbnail.jpg",
+  "Preview": "preview2.gif",
+  "Desc": "Matrix like rain animation using HTML5 Canvas. Customizable",
+  "Author": "parambirs / khuong",
+  "License": "",
+  "Contact": "original: https://github.com/parambirs/matrix - edited: khuong#8225",
+  "Type": 1,
+  "FileName": "index.html"
+}
diff --git a/LivelyProperties.json b/LivelyProperties.json
@@ -0,0 +1,20 @@
+{
+  "matrixColor": {
+    "text": "Font Color",
+    "type": "color",
+    "value": "#00FF46"
+  },
+  "rainbowSpeed": {
+    "max": 100,
+    "min": 0,
+    "tick": 25,
+    "text": "Rainbow Speed",
+    "type": "slider",
+    "value": 50
+  },
+  "rainBow": {
+    "type": "checkbox",
+    "value": false,
+    "text": "Rainbow"
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+# matrix
+Matrix like animation using HTML5 Canvas. Inspired from [sample code](http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript) on [thecodeplayer.com](http://thecodeplayer.com/).
+
+See it in action @ http://parambirs.github.io/matrix
+
+@ 2020-09-05 - added lively customizable options (rainbow / color select) - khuong
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <title>The Matrix</title>
+    </head>
+<body>
+    <canvas id="c"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/preview2.gif b/preview2.gif
diff --git a/script.js b/script.js
@@ -0,0 +1,103 @@
+var root = {
+  wavecolor: {  
+    r: 125,
+    g: 52,
+    b: 253
+    },
+    rainbowSpeed: 0.5,
+    rainbow: true,
+    matrixspeed: 50
+};
+
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+
+var hueFw = false;
+var hue = -0.01;
+
+// making the canvas full screen
+c.height = window.innerHeight;
+c.width = window.innerWidth;
+
+// the characters
+var konkani  = "゠アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレワヰヱヲンヺ・ーヽヿ0123456789"
+// converting the string into an array of single characters
+var characters = konkani.split("");
+var font_size = 14;
+var columns = c.width/font_size;    // number of columns for the rain
+var gradient = ctx.createLinearGradient(0,10, 0,200);
+// an array of drops - one per column
+var drops = [];
+// x below is the x coordinate
+// 1 = y-coordinate of the drop (same for every drop initially)
+for (var x = 0; x < columns; x++)
+    drops[x] = 1;
+
+// drawing the characters
+function draw() {
+    // Get the BG color based on the current time i.e. rgb(hh, mm, ss)
+    // translucent BG to show trail
+
+    ctx.fillStyle = "rgba(0,0,0, 0.05)";
+    ctx.fillRect(0, 0, c.width, c.height);
+
+    ctx.fillStyle = "#BBB"; // grey text
+    ctx.font = font_size + "px arial";
+
+    // looping over drops
+    for (var i = 0; i < drops.length; i++)
+    {
+        // background color
+        ctx.fillStyle = "rgba(10,10,10, 1)";
+        ctx.fillRect(i * font_size, drops[i] * font_size,font_size,font_size);
+        // a random chinese character to print
+        var text = characters[Math.floor(Math.random() * characters.length)];
+        // x = i * font_size, y = value of drops[i] * font_size
+
+        if (root.rainbow) {
+          hue += (hueFw) ? 0.01 : -0.01;
+          var rr = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 0) + 128);
+          var rg = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 2) + 128);
+          var rb = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 4) + 128);
+          ctx.fillStyle = 'rgba(' + rr + ',' + rg + ',' + rb + ')';
+        } else {
+          ctx.fillStyle = 'rgba(' + root.wavecolor.r + ',' + root.wavecolor.g + ',' + root.wavecolor.b + ')';
+        }
+
+        ctx.fillText(text, i * font_size, drops[i] * font_size);
+        // Incrementing Y coordinate
+        drops[i]++;
+        // sending the drop back to the top randomly after it has crossed the screen
+        // adding randomness to the reset to make the drops scattered on the Y axis
+       if (drops[i] * font_size > c.height && Math.random() > 0.975)
+			      drops[i] = 0;
+    }
+}
+
+setInterval(draw, root.matrixspeed);
+
+
+function livelyPropertyListener(name, val)
+{
+  switch(name) {
+    case "matrixColor":
+      root.wavecolor =  hexToRgb(val);
+      break;
+    case "rainBow":
+      root.rainbow = val;
+      break;   
+    case "rainbowSpeed":
+      root.rainbowSpeed = val/100;
+      break;     
+  }
+}
+
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
diff --git a/style.css b/style.css
@@ -0,0 +1,22 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: black;
+}
+
+canvas {
+    display: block;
+}
+
+#color {
+    color: #BBB;
+    font-family: helvetica, arial, sans-serif;
+    font-size: 1.2em;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 1000;
+}
diff --git a/thumbnail.jpg b/thumbnail.jpg