Bom dia amigos
Revisou recentemente o "Matrix". Ouça o que é um filme legal (isso se aplica apenas à primeira parte). Mais uma vez, chamei a atenção para as linhas "caindo" com hieróglifos em suas telas (usei deliberadamente a palavra "deles" por diversão). Pensei em como isso pode ser implementado ... o mais simples possível (por preguiça). Foi o que eu consegui.
Bem-vindo à Matrix
A marcação é assim:
<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>
Inicialize a tela, contexto, largura e altura da tela. Tornamos o último igual à largura e altura da janela do navegador:
const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight
Criamos uma linha com caracteres que serão usados para visualização (não quero hieróglifos, quero o alfabeto cirílico!). Converta essa sequência em uma matriz. Os espaços dão vazios nas colunas, com eles o efeito é mais interessante:
const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')
Determinamos o tamanho da fonte, o número de colunas e criamos uma matriz vazia. Usaremos essa matriz para determinar a coordenada y:
let font = 11,
Preencha uma matriz vazia com unidades pelo número de colunas:
for(let i = 0; i < col; i++) arr[i] = 1
Tudo está pronto para desenhar. Introdução:
function draw() {
Iniciamos a função de desenho a cada 123 milissegundos (um número aleatório):
setInterval(draw, 123)
Finalmente, ao redimensionar a janela, recarregamos a página (por preguiça):
window.addEventListener('resize', () => location.reload())
O resultado pode ser visto
aqui .
Há um pequeno problema: de tempos em tempos as colunas ficam juntas, elas são desenhadas quase niveladas horizontalmente. Isso afeta a percepção: o olho se apega à ordem. Há uma falta de caos, ou algo assim. Uma solução válida ainda não foi encontrada.
Obrigado pela atenção. Tudo de bom.