Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (80 sloc) 3.27 KB
<html><head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.tile {
background: #222;
color: white;
font-family: 'Roboto Mono', monospace;
font-size: 18px;
display: inline;
}
</style>
<script type="text/javascript">
function ready() {
window.GARBAGE_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`~!@#$%^&*()_+-={}[]|?<>";
var container = document.getElementById("container");
window.tiles = [];
const TILES_WIDE = 50;
const TILES_HIGH = 15;
const TILE_WIDTH = 16;
const TILE_HEIGHT = 18;
const TARGET_FPS = 60; // har, har. 60FPS? Orly?
window.lastFpsUpdate = Date.now();
window.numDraws = 0;
for (var y = 0; y < TILES_HIGH; y++) {
var row = document.createElement("div");
for (var x = 0; x < TILES_WIDE; x++) {
var tile = document.createElement("div");
tile.className = "tile";
// apply style
// DRY by doing it programatically
tile.style.width = TILE_WIDTH;
tile.style.height = TILE_HEIGHT;
row.appendChild(tile);
window.tiles.push(tile);
var char = '.';
if (x == 0 || y == 0 || x == TILES_WIDE - 1 || y == TILES_HIGH - 1) {
char = '#';
}
tile.innerText = char;
}
container.appendChild(row);
}
setInterval(renderGarbage, 1000 / TARGET_FPS);
}
function renderGarbage()
{
for (var i = 0; i < window.tiles.length; i++) {
// Random character/colour
var character = window.GARBAGE_CHARS.charAt(Math.floor(Math.random() * window.GARBAGE_CHARS.length));
var colour = "#"+((1<<24)*Math.random()|0).toString(16);
var tile = window.tiles[i];
// This is the bottleneck. Browsers have already optimized this.
tile.innerText = character;
tile.style.color = colour;
}
window.numDraws++;
// Calculate/show FPS
var now = Date.now();
var elapsedMilliseconds = now - window.lastFpsUpdate;
if (elapsedMilliseconds >= 1000) {
var fps = Math.round(window.numDraws / (elapsedMilliseconds / 1000));
var fpsDisplay = document.getElementById("fpsDisplay");
if (fpsDisplay != null) {
fpsDisplay.innerText = fps + " FPS";
}
window.numDraws = 0;
window.lastFpsUpdate = now;
}
}
</script>
</head>
<body onload="ready()">
<div id="container" />
<div id="fpsDisplay" />
</body>
</html>
You can’t perform that action at this time.