/code/javascript/graph2.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="icon" src="/images/favicon.gif" />
		<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(); }
var lowx = 20;
var highx = -20;
for (var i = 0; i < 720; i++) {
	var c = i * Math.PI / 90;
	if (i < 360) {
		img.x = -.4 * (Math.cos(c / 2) + Math.cos(c)) + .05;
		img.y = -.4 * (Math.sin(c / 2) + Math.sin(c));
		if (img.x < lowx) { lowx = img.x; }
	} else {
		img.x = .3 * (Math.cos(c)) - 1.05;
		img.y = -.3 * (Math.sin(c));
		if (img.x > highx) { highx = img.x; }
	}
	img.plot();
}
console.log("highest: "+highx+", lowest: "+lowx);
ctx.putImageData(img, 0, 0);
scr.drawImage(rsz, 0, 0, ele.width, ele.height);
		</script>
	</body>
</html>
download