<!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; }
div { text-align: center; }
</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) {
var start = performance.now();
for (y = -2; y < 2; y += 4 / canvas.height) {
for (x = -2; x < 2; x += 4 / canvas.width) {
if (eq(x, y)) scr.putpx(canvas.width * (2 + x) / 4, canvas.height * (2 + y) / 4);
}
}
ctx.putImageData(scr, 0, 0);
//requestAnimationFrame(draw);
fps.innerHTML = "Function plotted in "+Math.round(performance.now() - start)+"ms";
}
addEventListener("load", function load (e) {
removeEventListener("load", load, false);
try {
eq = new Function ('x', 'y', "return (" + decodeURI(document.location.href.match(/\?(.*)/)[1]) + ")");
eq(0, 0);
} catch (e) {
alert(e);
throw(e);
}
fps = document.querySelector("div");
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.putpx = function (x, y) {
x = Math.round(x);
y = Math.round(y);
var i = 4 * (this.width * y + x);
//*
this.data[i++] = 85;
this.data[i++] = 255;
this.data[i++] = 255;
/*/
this.data[i++] = Math.random() * 85;
this.data[i++] = Math.random() * 255;
this.data[i++] = Math.random() * 85;
// */
this.data[i] = 255;
return this;
}
requestAnimationFrame(draw);
});
addEventListener("selectstart", function (e) { return false; });
</script>
</head>
<body>
<div id="fps">&nbsp;</div>
<canvas></canvas>
</body>
</html>