>$ The Matrix background

The Matrix background is actually 100% vanilla javascript

• It's built using a HTML5 < canvas > element
• I made an interactive coding screencast where I walk through the javascript on Scrimba

Head ⬇ to checkout the script

"This is your last chance. After this, there is no turning back. You take the BLUE PILL ➡ - the story ends, you wake up in your bed and believe whatever you want to believe. You take the RED PILL ⬇ - you stay in Wonderland and I show you how deep the rabbit-hole goes."

-Morpheus

>$ Enter The Matrix

    // geting canvas by id c
    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 matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";

    //converting the string into an array of single characters
    matrix = matrix.split("");
                
    var font_size = 10; // set font_size to 10
    var columns = c.width/font_size; //number of columns for the rain
    var drops = []; //an array of drops - one per column
                    
    // for each column assign 1 letter to be dropped in unison
    for(var x = 0, x < columns, x++)
    drops[x] = 1; 
                
    //drawing the characters
    function draw() {
      // translucent BG color to show trail
      ctx.fillStyle = "rgba(0, 0, 0, 0.04)"; 
      // fillRect() function over whole viewport
      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 = matrix[Math.floor(Math.random()*matrix.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.975)
          drops[i] = 0;
                
        //incrementing Y coordinate
         drops[i]++;
      }
    }
    // draw a new letter every 35milliseconds
    setInterval(draw, 35);
            

Become the ONE