o1crimson1o/html5-canvas-matrix-effect.markdown

## html5-canvas-matrix-effect.markdown

      
    Raw
  

              html5-canvas-matrix-effect.markdown
            
          
    HTML5 Canvas Matrix Effect

Matrix fallning code rain made with HTML5 canvas  ofcourse JS.
just for FUN  :D
A Pen by Riaz Laskar on CodePen.
License.

  
## index.html
<html>
  <head>
        <title>HTML5 Canvas Matrix Effect</title>

  </head>
  <body>

    <canvas id="canvas">Canvas is not supported in your browser.</canvas>
    <canvas id="canvas2">Canvas is not supported in your browser.</canvas>
</body>
</html>

## script.js
var canvas = document.getElementById( 'canvas' ),
		ctx = canvas.getContext( '2d' ),
    canvas2 = document.getElementById( 'canvas2' ),
    ctx2 = canvas2.getContext( '2d' ),
		// full screen dimensions
		cw = window.innerWidth,
		ch = window.innerHeight,
    charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
    maxCharCount = 100,
    fallingCharArr = [],
    fontSize = 10,
    maxColums = cw/(fontSize);
    canvas.width = canvas2.width = cw;
    canvas.height = canvas2.height = ch;


    function randomInt( min, max ) {
    	return Math.floor(Math.random() * ( max - min ) + min);
    }

    function randomFloat( min, max ) {
    	return Math.random() * ( max - min ) + min;
    }

    function Point(x,y)
    {
      this.x = x;
      this.y = y;
    }

    Point.prototype.draw = function(ctx){

      this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase();
      this.speed = randomFloat(1,5);


      ctx2.fillStyle = "rgba(255,255,255,0.8)";
      ctx2.font = fontSize+"px san-serif";
      ctx2.fillText(this.value,this.x,this.y);

        ctx.fillStyle = "#0F0";
        ctx.font = fontSize+"px san-serif";
        ctx.fillText(this.value,this.x,this.y);


        this.y += this.speed;
        if(this.y > ch)
        {
          this.y = randomFloat(-100,0);
          this.speed = randomFloat(2,5);
        }
    }

    for(var i = 0; i < maxColums ; i++) {
      fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0)));
    }


    var update = function()
    {

    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0,0,cw,ch);

    ctx2.clearRect(0,0,cw,ch);

      var i = fallingCharArr.length;

      while (i--) {
        fallingCharArr[i].draw(ctx);
        var v = fallingCharArr[i];
      }

      requestAnimationFrame(update);
    }

  update();

## style.css

body {
margin: 0;
}

canvas {
display: block;
position:absolute;
top:0;
left:0;
}
	<html>
	<head>
	<title>HTML5 Canvas Matrix Effect</title>

	</head>
	<body>

	<canvas id="canvas">Canvas is not supported in your browser.</canvas>
	<canvas id="canvas2">Canvas is not supported in your browser.</canvas>
	</body>
	</html>
	var canvas = document.getElementById( 'canvas' ),
	ctx = canvas.getContext( '2d' ),
	canvas2 = document.getElementById( 'canvas2' ),
	ctx2 = canvas2.getContext( '2d' ),
	// full screen dimensions
	cw = window.innerWidth,
	ch = window.innerHeight,
	charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
	maxCharCount = 100,
	fallingCharArr = [],
	fontSize = 10,
	maxColums = cw/(fontSize);
	canvas.width = canvas2.width = cw;
	canvas.height = canvas2.height = ch;


	function randomInt( min, max ) {
	return Math.floor(Math.random() * ( max - min ) + min);
	}

	function randomFloat( min, max ) {
	return Math.random() * ( max - min ) + min;
	}

	function Point(x,y)
	{
	this.x = x;
	this.y = y;
	}

	Point.prototype.draw = function(ctx){

	this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase();
	this.speed = randomFloat(1,5);


	ctx2.fillStyle = "rgba(255,255,255,0.8)";
	ctx2.font = fontSize+"px san-serif";
	ctx2.fillText(this.value,this.x,this.y);

	ctx.fillStyle = "#0F0";
	ctx.font = fontSize+"px san-serif";
	ctx.fillText(this.value,this.x,this.y);



	this.y += this.speed;
	if(this.y > ch)
	{
	this.y = randomFloat(-100,0);
	this.speed = randomFloat(2,5);
	}
	}

	for(var i = 0; i < maxColums ; i++) {
	fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0)));
	}


	var update = function()
	{

	ctx.fillStyle = "rgba(0,0,0,0.05)";
	ctx.fillRect(0,0,cw,ch);

	ctx2.clearRect(0,0,cw,ch);

	var i = fallingCharArr.length;

	while (i--) {
	fallingCharArr[i].draw(ctx);
	var v = fallingCharArr[i];
	}

	requestAnimationFrame(update);
	}

	update();

	body {
	margin: 0;
	}

	canvas {
	display: block;
	position:absolute;
	top:0;
	left:0;
	}