Efecto Matrix

Crea el famoso efecto de la película de Matrix de lluvia de caracteres aleatorios con JavaScript

El pasado 2 de enero fui al cine a ver la cuarta entrega de Matrix, y como me aburrí un poco 😪 pues estuve dándole vueltas a cómo poder hacer el famoso efecto de la pantalla negra con los caracteres aleatorios sin necesidad de librerías externas, y aquí el resultado 🤯:

Al lío

HTML

Creamos un canvas y le asignamos un identificador

<canvas style="width: 100%; height: 400px;" id='mCanvas'></canvas>

JavaScript

const canvas = document.getElementById("mCanvas");
const context = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

context.fillStyle='#000';
context.fillRect(0,0,width,height);

const nColumns:number=10;

const columns = Math.floor(width/nColumns)+1;
const yPosition = Array(columns).fill(0); /* empezamos a pintar desde arriba, la posición 0 */

aBailar(context,width,height,yPosition,nColumns){
  context.fillStyle = '#0001'; /* coloreamos el fondo con un negro muy transparente, así cada vez que pinta tapa un poco la capa anterior */
  context.fillRect(0,0,canvasWidth,canvasHeight);
  context.fillStyle='#0f0'; /* color verde para la fuente */
  context.font='8pt monospace';
  
  /* ahora, por cada posición y de cada columna obtendremos la posición(y) y un índice (ind) */
  yPosition.forEach((y, ind)=>{ 
    const text = String.fromCharCode(Math.random()*128); /* calculamos un caracter aleatorio */
    const x = ind * nColumns; /* posición x donde escribimos */
    context.fillText(text,x,y);
    if(y>100+Math.random()*1000){
      /* Vuelvo a arriba */
      yPosition[ind]=0;
    }else{
      /* incremento la posición de la columna en 12 uds, ajústalo para que se te vea bien*/
      yPosition[ind]=y+12;
    }
  })
}

/* ejecuto la función cada 50ms */
setInterval(aBailar(context, width,height,yPosition,nColumns),50);

Hasta luego 🖖

¿Te gusta mi contenido? Apóyame