Matriz de llover código de efectos con JavaScript
La nueva película Matrix se vienen este año, y estoy tan entusiasmado por lo que tuve que crear este efecto emblemático con mis herramientas. La implementación en sí es muy simple y solo usé HTML, CSS y javascript vainilla para ella.
Si prefieres un formato de vídeo, puedes consultar mi tutorial en YouTube:
Implementación
Usaré HTML canvas para crear el efecto «Lluvia digital», y tendremos todo el inicio de sesión en javascript.
HTML
El archivo HTML será muy simple. En el cuerpo solo tendremos un <canvas>, y también incluí el archivo javascript aquí en la parte inferior, también puedes incluirlo en la cabeza con el atributo defer.
<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./styles.css"> <title>Matrix digital rain</title></head><body> <canvas></canvas> <script src="./index.js"></script></body></html>CSS
Esto también será muy corto. En CSS, básicamente, hago que el cuerpo llene toda la ventana y establezco un color de fondo negro para ella.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Esta implementación será lashare lionshare del proyecto.
Primero tenemos que inicializar nuestro lienzo con un contexto 2D. También configuré el lienzo para que ocupe toda la ventana de visualización configurando su ancho y altura:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;A continuación, creo el alfabeto del que elegiremos nuestros personajes para la lluvia. Usaré personajes de katakana (Una variación de los símbolos de Katakana se usó en la película Matrix.), el alfabeto latino y los números arábigos. La concatenación de estos creará el alfabeto.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;Tenemos que calcular cuántos «lluvia columnas» caben en la pantalla y hacer que voy a establecer un fijo fontsize y divida el ancho de la ventana innerWidth obtener el exacto número de columnas.
const fontSize = 16;const columns = canvas.width/fontSize;Usaré una matriz para almacenar y renderizar las gotas de lluvia. El índice de un elemento dado será la coordenada de la gota de lluvia en el eje X, y el valor de un elemento dado mantendrá su coordenada en el eje Y. De esta manera no necesitamos una matriz 2D. Para inicializar el array lo lleno con unos, por lo que después de la inicialización tendremos la misma altura exacta para cada columna: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}Ahora es el momento de implementar el hogar de nuestro efecto la función de dibujo. Primero pintaremos todo el lienzo con un color negro transparente. Esto nos dará el efecto de rastro en las gotas de lluvia, cuando la gota caiga, los personajes ya ahogados se desvanecerán lentamente. A continuación, estableceré el tamaño de fuente y el color (por supuesto, es verde green). Y ahora viene la key llave. Recorreré la matriz de gotas de lluvia, y para cada elemento elegiré un carácter aleatorio de nuestro alfabeto y lo representaré en la siguiente posición de la columna. Lo importante aquí es que tienes que multiplicar las coordenadas (valor elemnt e índice) con el tamaño de fuente para obtener el espaciado perfecto. Por último, tenemos que mover las gotas de lluvia que cayeron por debajo de la altura de la ventana, a la parte superior de esa columna. Para obtener el efecto de lluvia, no lo pongo en la parte superior de inmediato, sino que agrego un poco de aleatoriedad al agregar una oportunidad aleatoria para hacer eso.
const draw = () => { context.fillStyle = 'rgba(0, 0, 0, 0.05)'; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#0F0'; context.font = fontSize + 'px monospace'; for(let i = 0; i < rainDrops.length; i++) { const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); context.fillText(text, i*fontSize, rainDrops*fontSize); if(rainDrops*fontSize > canvas.height && Math.random() > 0.975){ rainDrops = 0; } rainDrops++; }};Como último paso, necesito llamar a la función draw en un intervalo y esto llamará a la función draw en cada 30 ms.
setInterval(draw, 30);Conclusión
Este es un proyecto muy divertido de crear y traté de mantener la implementación lo más amigable posible para principiantes. Espero que lo hayas disfrutado, si buscas contenido educativo en desarrollo web sígueme, creo videos educativos de YouTube y publicaciones de Instagram también.
¡Feliz hackeo!
¿Dónde puedes aprender más de mí?
Creo contenido educativo que cubre el desarrollo web en varias plataformas, siéntase libre de check echarles un vistazo.
También creo un boletín de noticias en el que comparto el contenido educativo de la semana o 2 semanas que creé. Nada de mentiras just solo contenido educativo.
Links Enlaces:
- 🍺 Apoya la educación gratuita y cómprame una cerveza
- Join Únete a nuestra comunidad en Discord
- Newsletter Boletín de noticias Suscríbete aquí
- YouTube YouTube Javascript Academy
- Twitter Twitter: @ dev_adamnagy
- Instagram Instagram @javascriptacademy