15.01.2022 a las 14:20
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 🤯:
Creamos un canvas y le asignamos un identificador
<canvas style="width: 100%; height: 400px;" id='mCanvas'></canvas>
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 🖖
Software
IoT
Digitalización
Aplicaciones móviles
Consultoría