5
\$\begingroup\$

Today, my project was to make a matrix in my web browser. It is really slow, so help with optimizing it would be nice. It runs slow on my PC, yet alone my iPod 4 which this is going to be for.

<html>
<head>
    <title>Matrix</title>
    <style type="text/css">
        body {
            background-color:black;
            background-size: 100%;

        }
        #mat {
            font-size:8px;
            font-family:"Courier";
            font-weight:bold;
        }

    </style>

<body onLoad="randomMatrix()">


<div id="mat">
    <span style="color:#005400"> hi </span><span>hi</span>
</div>

<script type="text/javascript">

    function randomLine()
    {
        var text = "<span>";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for(var i=0; i < 63; i++ ) text += "</span><span style=\"color:"+randomGreen()+"\">"+possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }

    function randomMatrix() {
        document.getElementById("mat").innerHTML = randomLine();
        for(var i = 0; i<45;i++) document.getElementById("mat").innerHTML += "<br/>"+randomLine();
        sleep(125, randomMatrix);
    }

    function sleep(millis, callback) {
    setTimeout(function()
            { callback(); }
    , millis);
    }

    function randomGreen() {
        return "#00"+randInt(0,255).toString(16)+"00";
    }

    function randInt(min,max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }


</script>

</body>
</html>

You can try it out here. ANY speed improvements would greatly help!

\$\endgroup\$

1 Answer 1

Reset to default
6
\$\begingroup\$

Here's what I did

var theMatrix = (function (containerId, lines, columns) {
    // We wrap everything in a closure, and expose only a single
    // global. Avoids global pollution, and keeps everything in
    // one place.

    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    // We break functionality into functions, naming verbosely
    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function randomGreen() {
        return "#00" + randomInt(0, 255).toString(16) + "00";
    }

    function randomLetter() {
        return characters.charAt(Math.floor(Math.random() * characters.length));
    }

    function generateLine(columns) {
        var line = document.createElement('div');
        while (columns--) {
            var letter = document.createElement('span');
            letter.style.color = randomGreen();
            letter.innerHTML += randomLetter();
            line.appendChild(letter);
        }
        return line;
    }

    function writeLines(container, lines, columns) {
        for (var i = 0; i < lines; i++) {
            container.appendChild(generateLine(columns));
        }
    }

    function startMatrix(container,columns) {
        setInterval(function loop() {
            // Instead of rebuilding the DOM all at once, we change
            // by line, by removing the top line, and appending
            // at the bottom.
            var firstLine = container.firstChild;
            container.removeChild(firstLine);
            container.appendChild(generateLine(columns));

            // Also, used doesn't care, you can replace the line
            // before this with the following line to cycle the
            // lines instead of regenerating the last line
            //container.appendChild(firstLine);
        }, 50);
    }

    // The exposed function. The only function that "keeps state"
    // (knows instance settings). All other function are reusable
    // and are not bound to a single call
    return function (containerId, lines, columns) {
        var container = document.getElementById(containerId);

        // we write the initial lines
        var textNodes = writeLines(container, lines, columns);

        // start the matrix
        startMatrix(container,columns);
    };
}());


theMatrix('mat', 50, 80);
\$\endgroup\$
1
  • \$\begingroup\$ This is great! It even runs decently on my iPod! \$\endgroup\$
    – nimsson
    Commented Apr 5, 2014 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.