1 files changed, 82 insertions, 0 deletions
diff --git a/Data/background/background.html b/Data/background/background.html
new file mode 100755
index 0000000..0ca84b6
--- /dev/null
+++ b/Data/background/background.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <style>
+        /*basic reset*/
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        /*adding a black bg to the body to make things clearer*/
+        body {
+            background: black;
+        }
+
+        canvas {
+            display: block;
+        }
+    </style>
+    
+</head>
+<body>
+    <canvas id="c"></canvas>
+</body>
+<script>
+    var c = document.getElementById("c");
+    var ctx = c.getContext("2d");
+
+    //making the canvas full screen
+    c.height = window.innerHeight;
+    c.width = window.innerWidth;
+
+    //chinese characters - taken from the unicode charset
+    var chinese = "1      1      0     1    0   1 0 1   1     1   0      1    1 1 1 1 1 0 0 0  10 1 0 10 0 10     0     0    1";
+    //converting the string into an array of single characters
+    chinese = chinese.split("");
+
+    var font_size = 10;
+    var columns = c.width / font_size; //number of columns for the rain
+    //an array of drops - one per column
+    var drops = [];
+    //x below is the x coordinate
+    //1 = y co-ordinate of the drop(same for every drop initially)
+    for (var x = 0; x < columns; x++)
+        drops[x] = 1;
+
+    //drawing the characters
+    function draw() {
+        //Black BG for the canvas
+        //translucent BG to show trail
+        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+        ctx.fillRect(0, 0, c.width, c.height);
+
+        ctx.fillStyle = "#0F0"; //green text
+        ctx.font = font_size + "px arial";
+        //looping over drops
+        for (var i = 0; i < drops.length; i++) {
+            //a random chinese character to print
+            var text = chinese[Math.floor(Math.random() * chinese.length)];
+            //x = i*font_size, y = value of drops[i]*font_size
+            ctx.fillText(text, i * font_size, drops[i] * font_size);
+
+            //sending the drop back to the top randomly after it has crossed the screen
+            //adding a randomness to the reset to make the drops scattered on the Y axis
+            if (drops[i] * font_size > c.height && Math.random() > 0.2)
+                drops[i] = 0;
+
+            //incrementing Y coordinate
+            drops[i]++;
+        }
+    }
+
+    setInterval(draw, 33);
+
+
+
+
+</script>
+
+</html>
+\ No newline at end of file