Buen dia amigos!
Recientemente revisó la "Matriz". Escuche lo que es una película genial (esto se aplica solo a la primera parte). Una vez más, llamé la atención sobre las líneas "caídas" con jeroglíficos en sus pantallas (deliberadamente usé la palabra "suyas" por diversión). Pensé en cómo se puede implementar esto ... lo más simple posible (debido a la pereza). Eso es lo que tengo.
Bienvenido a la matriz
El marcado se ve así:
<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>
Inicialice el lienzo, el contexto, el ancho y la altura del lienzo. Hacemos que este último sea igual al ancho y alto de la ventana del navegador:
const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight
Creamos una línea con caracteres que se utilizarán para la visualización (no quiero jeroglíficos, ¡quiero el alfabeto cirílico!). Convierta esta cadena en una matriz. Los espacios dan huecos en columnas, con ellos el efecto es más interesante:
const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')
Determinamos el tamaño de fuente, el número de columnas y creamos una matriz vacía. Usaremos esta matriz para determinar la coordenada y:
let font = 11,
Rellene una matriz vacía con unidades por el número de columnas:
for(let i = 0; i < col; i++) arr[i] = 1
Todo está listo para dibujar. Comenzando:
function draw() {
Comenzamos la función de dibujo cada 123 milisegundos (un número aleatorio):
setInterval(draw, 123)
Finalmente, al cambiar el tamaño de la ventana, volvemos a cargar la página (por pereza):
window.addEventListener('resize', () => location.reload())
El resultado se puede ver
aquí .
Hay un pequeño problema: de vez en cuando las columnas se unen, se dibujan casi al ras horizontalmente. Esto afecta la percepción: el ojo se aferra al orden. Hay una falta de caos, o algo así. Aún no se ha encontrado una solución digna.
Gracias por su atencion Todo lo mejor