Efecto Matrix con 40 líneas de JavaScript

NUESTRO SITIO necesita la publicidad para costear hosting y el dominio. Por favor considera deshabilitar tu AdBlock en nuestro sitio. También puedes hacernos una donación entrando en linuxparty.es, en la columna de la derecha.

Efecto Matrix con 40 líneas de JavaScript

Publicado: 23 Noviembre 2015 | Correo electrónico | Visto: 6869

Ratio: 5 / 5

Efecto Mátrix en JavaScript, bueno, es chulo tenerlo o al menos conocerlo, no se muy bien para qué, pero por tenerlo...

Este es el código fuente...

//Fuente Original :  http://timelessname.com/sandbox/matrix.html
//Configura el canvas para que ocupe la pantalla entera
canvas.height = window.screen.height;
canvas.width = window.screen.width;

// una entrada en el array por columna de texto
//cada valor represnta la posición y actual de la columna.  (en canvas 0 es en la parte superior y los valores positivos de y van disminuyendo)
var columns = []
for (i = 0; i < 256; columns[i++] = 1);

//ejecutado una vez por fotograma
function step() {
    //Ligeramente oscurece todo el canvas dibujando un rectángulo negro casi trasnsparente sobre todo el canvas
    /*esto explica tanto el flash inicial de blanco a negro (por defecto el canvas es blanco y progresivamente se convierte en negro) como el fading de los caracteres.*/
    canvas.getContext('2d').fillStyle = 'rgba(0,0,0,0.05)';
    canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);
   
    //verde
    canvas.getContext('2d').fillStyle = '#0F0';
    //para cada clolumna
    columns.map(function (value, index) {
        //fromCharCode convierte puntos de código unicode ( http://en.wikipedia.org/wiki/Code_point ) a un string
        //Los code points están en el rango 30000-30032 (0x7530-0x7550) (田-畐)
        //que está incluido en el bloque de ideogramas unificado CJK ( http://en.wikipedia.org/wiki/CJK_Unified_Ideographs )
        var character = String.fromCharCode(3e4 +
                                            Math.random() * 33);
        //dibujar el carácter
        canvas.getContext('2d').fillText(character, //texto
                                         index * 10, //x
                                         value //y
                                        );
       
        //desplaza hacia abajo el carácter
        //si el carácter es menor de 758 entonces hay una posibilidad aleatoria de que sea reseteado
        columns[index] = value > 758 + Math.random() * 1e4 ? 0 : value + 10
    })
}

//1000/33 = ~30 veces por segundo
setInterval(step, 33)

Ejemplo funcionado: aquí.

La versión resumida del mismo código, es este de aquí abajo. (Para reducir los caracteres un truco es declararlos en la sentencia for, pero lo válido de este está al final)

<body style=margin:0 onload=
"for(Pantalla=window.screen, Ancho=q.width=Pantalla.width, Altura=q.height=Pantalla.height, Caracteres=Math.random, Columnas=[], i=0; i<256; Columnas[i++]=1 ); setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,Ancho,Altura)9Style=\'#0F0\'; Columnas.map(function(v,i){9Text(String.fromCharCode(3e4+Caracteres()*33),i*10,v); Columnas[i]=v>758+Caracteres()*1e4?0:v+10})'.split(9).join(';q.getContext(\'2d\').fill'),33)">
<canvas id=q>