Effetto Matrix in JS: spiegato

L'effetto più famoso degli anni 2000 è a mio avviso quello di Matrix™. Si può ottenere facilmente tale effetto anche con un semplice javascript.

Quello che lascio qui sotto è un mio esempio di pagina HTML completa. Lo script è facilmente adattabile all'interno di ogni pagina web.

Ho lasciato qui sotto il codice con i commenti che spiegano, passo per passo, come funziona lo script.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Effetto Matrix in JS: spiegato</title>
        <style>
            /* Per fare un effetto matrix a pieno schermo, togliere i margini */
            body {
                margin: 0;
                overflow: hidden;
            }
            
            /* Il canvas occupera' tutto lo spazio della pagina */
            #matrixDiv {
                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>
    <body>
        <div id="matrixDiv">
            <canvas id="matrixCanvas"></canvas>
        </div>
        <script>
            const canvas = document.getElementById("matrixCanvas");
            const canvasdiv = document.getElementById("matrixDiv");
            const contesto = canvas.getContext("2d");
            
            let em1;
            let w;
            let h;
            let numcolonne;
            let colonne;
            
            function fnMatrixInizializza() {
                // Converti 1em in px
                em1 = parseInt(getComputedStyle(canvasdiv).fontSize);

                // Memorizza la larghezza e l'altezza in due variabili.
                w = canvas.width = canvasdiv.offsetWidth;
                h = canvas.height = canvasdiv.offsetHeight;

                // Verranno create un certo numero di colonne.
                numcolonne = Math.floor(w / em1) + 1;

                // Crea le colonne e riempile di zeri (nessun carattere).
                colonne = Array(numcolonne).fill(0);

                // Inizialmente, colora di nero lo sfondo del canvas.
                contesto.fillStyle = "#000000";
                contesto.fillRect(0, 0, w, h);
            }
            fnMatrixInizializza();
            
            function fnMatrix() {
                // Riduci il colore di tutto il canvas, verso il nero.
                contesto.fillStyle = "#00000010";
                contesto.fillRect(0, 0, w, h);
                
                // Il nuovo carattere verra' colorato di verde.
                contesto.fillStyle = "#00ff00";
                contesto.font = "1em monospace";
                
                colonne.forEach((y, indice) => {
                    // Ricava casualmente un carattere.
                    let carattere = String.fromCharCode(Math.random() * 127);
                    
                    // Posiziona il cursore X sulla colonna giusta.
                    let x = indice * em1;
                    
                    // Scrivi il carattere sul canvas.
                    contesto.fillText(carattere, x, y);
                    
                    // Interrompi la discesa dei caratteri di tanto in tanto.
                    if (y > (Math.random() * 5000))
                        colonne[indice] = 0;
                    else
                        colonne[indice] = y + em1;
                });
            }
            
            // Disegna lo schermo una volta ogni 50ms.
            setInterval(fnMatrix, 50);
            
            // Se la pagina viene ridimensionata, aggiornare le variabili.
            window.onresize = function (evento) {
                fnMatrixInizializza();
            };
        </script>
    </body>
</html>

Clicca qui per vedere il risultato finale.

2023
20 dic