Matrix chovendo efeito de código usando JavaScript
o novo filme Matrix está chegando este ano, e estou tão empolgado por isso que tive que criar esse efeito icônico com minhas ferramentas. A implementação em si é realmente simples e eu só usei HTML, CSS e vanilla javascript para isso.
Se você preferir um formato de vídeo, você pode verificar o meu tutorial sobre ele no YouTube:
Implementação
vou usar HTML canvas para criar Digital “chuva” de efeito, e teremos todo o login em javascript.
HTML
o arquivo HTML será realmente simples. No corpo, teremos apenas um <canvas>, e também incluí o arquivo javascript aqui na parte inferior, você também pode incluí-lo na cabeça com o 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
isso também será muito curto. Em CSS, basicamente faço o corpo preencher toda a janela de visualização e definir uma cor de fundo preta para ela.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Esta implementação será o 🦁 lionshare do projeto.
primeiro temos que inicializar nossa tela com um contexto 2D. Eu também definir a tela para ocupar toda a janela de visualização, definindo a largura e altura do:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;em seguida, criar o alfabeto a partir da qual vamos escolher os nossos personagens para a chuva. Vou usar personagens katakana (uma variação de símbolos Katakana foi usada no próprio filme Matrix.), o alfabeto latino e os números árabes. A concatenação destes criará o alfabeto.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;temos que calcular quantos “chuva ” colunas” vai caber na tela e fazer o que eu vou definir uma fixo fontsize e dividir a largura da janela innerWidth para obter a exata contagem de colunas.
const fontSize = 16;const columns = canvas.width/fontSize;vou usar uma matriz para armazenar e renderizar as gotas de chuva. O índice de um determinado elemento será a coordenada da gota de chuva no eixo X, e o valor de um determinado elemento manterá sua coordenada no eixo Y. Dessa forma, não precisamos de uma matriz 2D. Para inicializar a matriz, eu a preencho com outras, então, após a inicialização, teremos a mesma altura exata para cada coluna: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}agora é hora de implementar a lareira do nosso efeito a função draw. Primeiro vamos pintar toda a tela com uma cor preta transparente. Isso nos dará o efeito da trilha nas gotas de chuva, quando a queda cair, os personagens já Afogados desaparecerão lentamente. Em seguida, definirei o tamanho da fonte e a cor (é claro que é verde 😎). E agora vem a 🔑 chave. Vou percorrer o array raindrop, e para cada elemento vou escolher um caractere Aleatório do nosso alfabeto e renderizá-lo na próxima posição da coluna. O importante aqui é que você tem que multiplicar as coordenadas (valor elemnt e índice) com o tamanho da fonte para obter o espaçamento perfeito. Por fim, temos que mover nossas gotas de chuva que caíram abaixo da altura da janela de visualização, para o topo dessa coluna. Para obter o efeito de chuva, não o coloco no topo imediatamente, mas adiciono um pouco de aleatoriedade adicionando uma chance aleatória de fazer isso.
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 passo eu preciso chamar a função draw em um intervalo e isso vai chamar a função draw em todos os 30ms.
setInterval(draw, 30);Conclusão
Este é um divertido projeto para criar e eu tentei manter a implementação como iniciante-friendly como eu poderia. Espero que você tenha gostado, se você procura conteúdo educacional sobre Desenvolvimento web siga-me, eu crio vídeos educacionais do YouTube e postagens do Instagram também.
Hacking Feliz!
onde você pode aprender mais comigo?
eu crio conteúdo educacional cobrindo desenvolvimento web em várias plataformas, sinta-se à vontade para check confira.
também crio um boletim informativo onde compartilho o conteúdo educacional da semana ou da semana 2 que criei. Nenhum touro just apenas conteúdo educacional.
Links ligações:
- 🍺 Apoio a educação gratuita e de me comprar uma cerveja
- 💬 Participe de nossa comunidade no Discórdia
- 📧 Newsletter Assine aqui
- 🎥 YouTube Javascript Academia
- 🐦 Twitter: @dev_adamnagy
- 📷 Instagram @javascriptacademy