Matrix Animation

Matrix Animation, as seen from CodePlayer.

by Adlene Denni

HTML

<canvas id='canvas'></canvas>

CSS

body {
	    margin: 0;
	    padding: 0;
	    background-color: #000000;
	    cursor: none;
	}
	canvas {
	    display: block;
	}

JavaScript

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());


var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

var japanese = 'azeryuitop^qsdf$pklmùglfjlkhWXv,n;:!1234567890';
japanese = japanese.split('');

var size = 10;
var column = canvas.width / size;
var y = [];
for (var x = 0; x < column; x++) {
    y[x] = 1;
}

function draw() {

    context.fillStyle = 'rgba(0,0,0,0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = '#0f0';
    context.font = size + ' px Meiryo';

    for (var i = 0; i < y.length; i++) {
        var text = japanese[Math.floor(Math.random() * japanese.length)];
        context.fillText(text, i * size, y[i] * size);
        y[i] += 0.3;
        if (y[i] * size > canvas.height && Math.random() > 0.975) {
            y[i] = 0;
        }
    }
}


(function animLoop() {
    draw();
    requestAnimationFrame(animLoop);
})();