Matrix Effect

index.html

<script type="text/javascript" src="script.js" ></script>
<div align="center">  
  <canvas id="q" width="500" height="500">Sorry Browser Won't Support</canvas><br/><br/>
  <button id="play" onClick="RunMatrix()">Play</button>
  <button id="pause" onClick="StopMatrix()">pause</button>
</div>

Matrix Effect.markdown

Matrix Effect ('-' * 13)

A Pen by Amit Rana on CodePen.

License.

script.js

    var q = document.getElementsByTagName('canvas');
    var s=window.screen;
    var width = s.width;
    var height = s.height;
    var yPositions = Array(300).join(0).split('');
    var ctx=q.getContext('2d');
    
    function shuffle(array) {
      var m = array.length, t, i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m], array[m] = array[i], array[i] = t;
      }
      return array;
    }
    // var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
    var alphabet = "01".split("");
    var draw = function () {
      ctx.fillStyle='rgba(0,0,0,.05)';
      ctx.fillRect(0,0,width,height);
      ctx.fillStyle='#0F0';
      ctx.font = '10pt Georgia';
      yPositions.map(function(y, index){
       text = String.fromCharCode(1e2+Math.random()*33);   
        //text = shuffle(alphabet)[0]     ;
        x = (index * 10)+10;
        q.getContext('2d').fillText(text, x, y);
        if(y > 100 + Math.random()*1e4)
        {
          yPositions[index]=0;
        }
        else
        {
          yPositions[index] = y + 10;
        }
      });
    };

    RunMatrix();

    function RunMatrix()
    {
      if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
            Game_Interval = setInterval(draw, 33);
    }

    function StopMatrix()
    {
      clearInterval(Game_Interval);
    }