Matrix raining code effect using JavaScript
Il nuovo film Matrix è in arrivo quest’anno, e sono così pubblicizzato per questo che ho dovuto creare questo effetto iconico con i miei strumenti. L’implementazione in sé è davvero semplice e ho usato solo HTML, CSS e vanilla javascript per questo.
Se si preferisce un formato video, è possibile controllare il mio tutorial su di esso su YouTube:
Implementazione
Userò la tela HTML per creare l’effetto “Pioggia digitale” e avremo tutti i login in javascript.
HTML
Il file HTML sarà molto semplice. Nel corpo avremo solo un <canvas>, e ho anche incluso il file javascript qui in basso, puoi anche includerlo nella testa con l’attributo 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
Anche questo sarà molto breve. In CSS, in pratica, faccio in modo che il corpo riempia l’intera finestra e imposta un colore di sfondo nero per questo.
html { background: black; height: 100%; overflow: hidden;}body { margin: 0; padding: 0; height: 100%;}Javascript
Questa implementazione sarà la lion lionshare del progetto.
Per prima cosa dobbiamo inizializzare la nostra tela con un contesto 2D. Ho anche impostato la tela per occupare l’intera finestra impostando la sua larghezza e altezza:
const canvas = document.getElementById('Matrix');const context = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;Successivamente creo l’alfabeto da cui sceglieremo i nostri personaggi per la pioggia. Userò i caratteri katakana (Una variante dei simboli Katakana è stata utilizzata nel film Matrix stesso.), l’alfabeto latino e numeri arabi. La concatenazione di questi creerà l’alfabeto.
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';const nums = '0123456789';const alphabet = katakana + latin + nums;Dobbiamo calcolare quante “colonne di pioggia” si adatteranno sullo schermo e per farlo imposterò un fontsize fisso e dividerò la larghezza sull’innerWidth della finestra per ottenere il conteggio esatto delle colonne.
const fontSize = 16;const columns = canvas.width/fontSize;Userò un array per memorizzare e rendere le gocce di pioggia. L’indice di un dato elemento sarà la coordinata della goccia di pioggia sull’asse X e il valore di un dato elemento manterrà la sua coordinata sull’asse Y. In questo modo non abbiamo bisogno di un array 2D. Per inizializzare l’array lo riempio con quelli, quindi dopo l’inizializzazione avremo la stessa altezza esatta per ogni colonna: 1.
const rainDrops = ;for( let x = 0; x < columns; x++ ) { rainDrops = 1;}Ora è il momento di implementare il focolare del nostro effetto la funzione draw. Per prima cosa dipingeremo l’intera tela con un colore nero trasparente. Questo ci darà l’effetto scia sulle gocce di pioggia, quando la goccia cade i personaggi già annegare lentamente svanirà. Successivamente imposterò la dimensione del carattere e il colore (ovviamente è verde 😎). E ora arriva la key chiave. Scorrerò l’array di gocce di pioggia e per ogni elemento sceglierò un carattere casuale dal nostro alfabeto e lo renderò nella posizione successiva della colonna. La cosa importante qui è che devi moltiplicare le coordinate (valore elemnt e indice) con la dimensione del carattere per ottenere la spaziatura perfetta. Infine dobbiamo spostare le nostre gocce di pioggia che sono scese sotto l’altezza della vista, in cima a quella colonna. Per ottenere l’effetto pioggia non lo metto subito in cima, ma aggiungo un po ‘ di casualità aggiungendo una possibilità casuale di farlo.
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++; }};Come ultimo passaggio ho bisogno di chiamare la funzione draw in un intervallo di tempo e questo sarà chiamata la funzione draw in ogni 30ms.
setInterval(draw, 30);Conclusione
Questo è davvero un progetto di divertimento per creare e ho cercato di mantenere l’implementazione come principiante amichevole, come ho potuto. Spero che ti sia piaciuto, se cerchi contenuti educativi sullo sviluppo web seguimi, creo video educativi di YouTube e anche post di Instagram.
Felice Hacking!
Dove puoi imparare di più da me?
Creo contenuti educativi che coprono lo sviluppo web su diverse piattaforme, sentitevi liberi di check check them out.
Creo anche una newsletter in cui condivido i contenuti educativi della settimana o della settimana 2 che ho creato. Nessun toro content solo contenuti educativi.
Links Collegamenti:
- 🍺 Supporto istruzione gratuita e mi compra una birra
- Join Unisciti alla nostra comunità su Discord
- Newsletter Newsletter Iscriviti qui
- YouTube YouTube Javascript Academy
- Twitter Twitter: @dev_adamnagy
- Instagram Instagram @javascriptacademy