Dynamic matrix in web browser

Question 1

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!

Question 2

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);

Question 3

This is great! It even runs decently on my iPod!

Joseph Joseph 25.4k2 gold badges26 silver badges37 bronze badges · Accepted Answer · 2014-04-04 23:24:41Z

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);

\$\begingroup\$ This is great! It even runs decently on my iPod! \$\endgroup\$

nimsson
– nimsson

2014年04月05日 11:08:40 +00:00
Commented Apr 5, 2014 at 11:08

Stack Exchange Network

Dynamic matrix in web browser

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Dynamic matrix in web browser

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions