Matrix Effect in JS: explained

The most famous effect in the 2000s era is in my opinion the Matrix™ effect. You can easily obtain this effect from a simple javascript.

Below there is a my example of a complete HTML page. That script is easily adaptable for another web page.

I've left the code below with comments that explain, step by step, how the script works.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Matrix Effect in JS: explained</title>
        <style>
            /* In order to do a full screen matrix effect, remove the margins. */
            body {
                margin: 0;
                overflow: hidden;
            }
            
            /* The canvas will occupy all of the page space. */
            #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 context = canvas.getContext("2d");
            
            let em1;
            let w;
            let h;
            let numcolumns;
            let columns;
            
            function fnMatrixInitialize() {
                // Convert 1em in px
                em1 = parseInt(getComputedStyle(canvasdiv).fontSize);

                // Store the width and height in two variables.
                w = canvas.width = canvasdiv.offsetWidth;
                h = canvas.height = canvasdiv.offsetHeight;

                // A certain number of columns will be created.
                numcolumns = Math.floor(w / em1) + 1;

                // Create the columns and fill 'em with zeros (empty character).
                columns = Array(numcolumns).fill(0);

                // Initially, color the background screen of black.
                context.fillStyle = "#000000";
                context.fillRect(0, 0, w, h);
            }
            fnMatrixInitialize();
            
            function fnMatrix() {
                // Reduce the color of the canvas, towards black.
                context.fillStyle = "#00000010";
                context.fillRect(0, 0, w, h);
                
                // The new character will be colored with green.
                context.fillStyle = "#00ff00";
                context.font = "1em monospace";
                
                columns.forEach((y, index) => {
                    // Randomly get a character.
                    let character = String.fromCharCode(Math.random() * 127);
                    
                    // Position the X cursor on the current column.
                    let x = index * em1;
                    
                    // Write che character to the canvas.
                    context.fillText(character, x, y);
                    
                    // Occasionally break descending of the characters.
                    if (y > (Math.random() * 5000))
                        columns[index] = 0;
                    else
                        columns[index] = y + em1;
                });
            }
            
            // Draw onto screen once every 50ms.
            setInterval(fnMatrix, 50);
            
            // If the page is being resized, update the variables.
            window.onresize = function (event) {
                fnMatrixInitialize();
            };
        </script>
    </body>
</html>

Click here to see the final result.

2023
Dec, 20