/code/javascript/graph.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="icon" src="/images/favicon.png" />
		<title>graphing calculator thing</title>
		<style type="text/css">
			* { margin: 0; padding: 0; border: 0; }
			html, body {
				height: 100%;
				width: 100%;
				background: #000;
				color: #fff;
			}
			html { display: table; }
			body { display: table-cell; vertical-align: middle; text-align: center; }
		</style>
	</head>
	<body>
		<canvas width="960px" height="600px">Y U no canvas?</canvas>
		<script type="text/javascript">
var ele = document.getElementsByTagName("canvas")[0];
var scr = ele.getContext("2d");
scr.imageSmoothingEnabled = false;
var rsz = document.createElement("canvas");
rsz.height = 200;
rsz.width = 320;
var ctx = rsz.getContext("2d");
var img = ctx.createImageData(rsz.width, rsz.height);
img.draw = function draw () {
	if (this.x > this.width - 1 || this.y > this.height - 1 || this.x < 0 || this.y < 0) {
		console.log("requested drawing off-canvas");
		return;
	}
	var p = 4 * (this.width * this.y + this.x);
	this.data[p + 0] = this.pixel.red;
	this.data[p + 1] = this.pixel.grn;
	this.data[p + 2] = this.pixel.blu;
	this.data[p + 3] = this.pixel.alpha;
}
img.plot = function plot () {
	this.x = Math.round(this.x * this.height / 2.5 + this.width / 2);
	this.y = Math.round(this.y * this.height / 2.5 + this.height / 2);
	this.draw();
}
/* draw P0 and P1 of the mandelbrot set */
img.pixel = { red: 85, grn: 85, blu: 85, alpha: 255 };
for (var y = -2; y < 2; y += 1 / img.height) {
	for (var x = -2; x < 2; x += 1 / img.height) {
		img.y = y;
		img.x = x;
		var n = x - .25;
		var tmp = n * n + y * y;
		if (4 * tmp * (tmp + n) / y / y < 1) img.plot();
		n = x + 1;
		if (16 * (n * n + y * y) < 1) img.plot();
	}
}
// */
// draw crosshairs
img.pixel = { red: 170, grn: 170, blu: 170, alpha: 255 };
img.x = img.width / 2;
for (var i = img.height; i--; ) { img.y = i; img.draw(); }
img.y = img.height / 2;
for (var i = img.width; i--; ) { img.x = i; img.draw(); }
Math.TAU = 2 * Math.PI;
var step = Math.PI / 520;
for (var i = 0; i < Math.PI + Math.TAU; i += step) {
	var c = Math.floor(i * (1 << 24) / (Math.TAU + Math.PI));
	img.pixel = { red: c >> 16 & 255, grn: (c >> 8) & 255, blu: c & 255, alpha: 255 };
	if (i % (Math.TAU + Math.PI) < Math.TAU) {
		mr = -1.5 * Math.cos(i) -1.5 * Math.cos(2 * i);
		mi = -1.5 * Math.sin(i) -1.5 * Math.sin(2 * i);
	} else {
		mr = 1.05 * Math.cos(2 * i) - 4.05;
		mi = -1.1 * Math.sin(2 * i);
	}
	img.x = mr / 4;
	img.y = mi / 4;
	img.plot();
}
ctx.putImageData(img, 0, 0);
scr.drawImage(rsz, 0, 0, ele.width, ele.height);
		</script>
	</body>
</html>
download