HTML5 Canvas : Matrix Effect

I haven't explored the possibilities of HTML5 Canvas element much till now. Recently only I started playing with it and I must say - it amazing. Well, I had seen various web apps made with the 'canvas' - like in 10K Competition etc. But now only I am exploring the various options it got. And while learning the basics of animations in canvas, I have created a dynamic Matrix effect.

Below some of the code are explained.

(Please, don't mind the special characters in the matrix effect - as all are randomly generated and I haven't put much restriction on those. Also, everytime the page refreshes new characters will appear.)

1. First the 2D array of random characters is being created. Each character object contains

  • The Text character to print
  • X & Y - Coordinates : where to print the character
  • Color of the character to print - first character White, rest green
  • Random speed - for animation along Y-axis only
  • Random font size

        var charArray = [];
        for (var i = 0; i &lt 75; i++) {
            var temp = [];
            var yspeed = Math.random() * 10;
            var xspacing = Math.random() * 15 + 15;
            var fontSize = Math.random() * 20 + 5;
			var charlengh = 10+Math.floor(Math.random()*20);
            for (var j = 0; j &lt charlengh; j++) {
				//creating array of random length 'temp' with randomly created char objects.
				//each char object in temp array have same x coordinate. Only y-coordinate increases.
                temp.push(new create_chars(i * 15 + xspacing, j * 20+20, yspeed, j, fontSize));
            }
            charArray.push(temp);
        }

		//To create the random characters.
        function create_chars(xloc, yloc, yspeed, j, fontSize) {
			this.text = String.fromCharCode(64 + Math.floor(Math.random()*65));
            this.x = xloc;
            this.y = -yloc;
            this.dy = yspeed;
            this.fontSize = fontSize;
            if (j == 0)
                this.color = "white";
            else
                this.color = "green";
            
        }

2. The next part of the code does the actual animations. In layman terms, in every 20 mili seconds, it paint the canvas black and then draws each of the characters in defined positions in defined colors. And the position of the each of the characters are being changed in y-axis which is why they are moving downward.

        function Draw() {
            context.globalCompositeOperation = "source-over";
            context.fillStyle = "rgba(0,0,0,0.9)";
            context.fillRect(0, 0, cW, cH);
            context.globalCompositeOperation = "lighter";

            for (var k = 0; k &lt charArray.length; k++) {
                for (var m = 0; m &lt charArray[k].length; m++) {
                    var charObject = charArray[k][m];
                    context.fillStyle = charObject.color;
                    context.font = "bold "+charObject.fontSize+"px Arial";
                    context.fillText(charObject.text, charObject.x, charObject.y);
                    context.fill();

					//incrementing the y-ccordinate for next frame. Which gives the moving effect.
                    charObject.y += charObject.dy;
					
					//redrawing the array once it goes out of the canvas.
                    if (charObject.y > cH) { charObject.y = 0; }
                }
            }
        }
		//call the Draw function after every 20 miliseconds.
        setInterval(Draw, 20);

PS: This is my first experiment with the canvas element. So, please bear with me about the not-so-refined codes.

Category: 

Bookr

10
6
8
6
8
8
7
7
7
9
6
6
5
8
8
10
6
1 of 17

Navigation