<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teaching AJ to math</title>
<style type="text/css">
* { background: #000; color: #fff; margin: 0; padding: 0; border: 0; font-family: monospace; }
html, body { height: 100%; }
html { display: table; margin: auto; }
body { display: table-cell; vertical-align: middle }
canvas { height: 512px; width: 512px; border: 5px solid #555; overflow: show; }
</style>
<script type="text/javascript">
var r = 100;
var n_lobes = 32;
var r_lobes = 10;
Math.TAU = 2 * Math.PI;
var fps;
function draw (e) {
// draw
scr.noise();
ctx.putImageData(scr, 0, 0);
requestAnimationFrame(draw);
// fps
fps.log.push(Math.round(1000 / (performance.now() - fps.start)));
fps.start = performance.now();
if (fps.next <= performance.now()) {
var t = 0;
for (v in fps.log) { t += fps.log[v]; }
fps.innerHTML = Math.round(100 * t / fps.log.length) / 100 + " fps";
fps.log = [];
fps.next = performance.now() + 1000 * 2;
}
}
addEventListener("load", function load (e) {
removeEventListener("load", load, false);
// setup
canvas = document.getElementsByTagName("canvas")[0];
canvas.height = canvas.scrollHeight;
canvas.width = canvas.scrollWidth;
ctx = canvas.getContext("2d");
scr = ctx.createImageData(canvas.height, canvas.width);
scr.clear = function () {
for (i = 0; i < this.data.length; i++) {
this.data[i] = 0;
}
}
scr.noise = function () {
for (i = 0; i < this.data.length;) {
this.data[i++] = Math.random() * 85;
this.data[i++] = Math.random() * 255;
this.data[i++] = Math.random() * 85;
this.data[i++] = Math.random() * 255;
}
}
scr.putpx = function (x, y) {
x = Math.round(x);
y = Math.round(y);
var i = 4 * (this.width * y + x);
this.data[i++] = Math.random() * 85;
this.data[i++] = Math.random() * 255;
this.data[i++] = Math.random() * 85;
this.data[i] = 255;
return this;
}
// fps
fps = document.getElementById("fps");
fps.log = [];
fps.start = performance.now();
fps.next = fps.start + 1000 * 2;
// begin
requestAnimationFrame(draw);
});
addEventListener("selectstart", function (e) { return false; });
</script>
</head>
<body>
<div id="fps"> </div>
<canvas></canvas>
</body>
</html>