/code/javascript/galaxy.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="icon" src="/images/favicon.gif" />
		<title>galaxy thing</title>
		<style type="text/css">
			* { padding: 0; margin: 0; border: 0; font-size: 8pt; font-weight: normal; }
			html, body {
				height: 100%;
				width: 100%;
				background: #000;
				color: #fff;
				font-family: sans-serif;
			}
			html { display: table; }
			body { display: table-cell; vertical-align: middle; text-align: center; }
			a { color: #88f; }
		</style>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="viewport" content="width=800, height=700" />
	</head>
	<body>
		<canvas height="600px" width="800px">Y U no canvas?</canvas>
		<script type="text/javascript">
var ele = document.getElementsByTagName("canvas")[0];
var scr = ele.getContext("2d");
scr.ratio = ele.width / ele.height;
// having to do this is silly. browser vendors, stop this shit.
if (scr.imageSmoothingEnabled) scr.imageSmoothingEnabled = false;
else if (scr.webkitImageSmoothingEnabled) scr.webkitImageSmoothingEnabled = false;
else if (scr.mozImageSmoothingEnabled) scr.mozImageSmoothingEnabled = false;
else if (scr.msImageSmoothingEnabled) scr.msImageSmoothingEnabled = false;
else if (scr.oImageSmoothingEnabled) scr.oImageSmoothingEnabled = false;
var rsz = document.createElement("canvas");
rsz.height = (""+document.location.href).match(/[?&](lines|height)=([^&]*)/) ? RegExp.lastParen : 200;
rsz.width = (""+document.location.href).match(/[?&](columns|width)=([^&]*)/) ? RegExp.lastParen : 4 * rsz.height / 3;
var ctx = rsz.getContext("2d");
var img = ctx.createImageData(rsz.width, rsz.height);
img.ratio = img.width / img.height;
img.astigmatism = scr.ratio / img.ratio;
img.getpx = function getpx (x, y) {
	var p = 4 * (this.width * y + x);
	var r = this.data[p + 0];
	var g = this.data[p + 1];
	var b = this.data[p + 2];
	var a = this.data[p + 3];
	return { "r": r, "g": g, "b": b, "a": a };
}
img.putpx = function putpx (x, y, r, g, b, a) {
	var p = 4 * (this.width * y + x);
	this.data[p + 0] = r;
	this.data[p + 1] = g;
	this.data[p + 2] = b;
	this.data[p + 3] = a;
}
var perframe = 10;
var adj = 255 / perframe;
var animate = {}
animate.doframe = function () {
	for (var i = 0; i < perframe; i++) {
		var dist = Math.acos(Math.random()) / Math.PI;
		var theta = Math.random() * 180 / Math.PI;
		dist = dist * img.height - img.height / 2;
		var x = Math.round(img.width / 2 + dist * Math.sin(theta));
		var y = Math.round(img.height / 2 + dist * Math.cos(theta));
		var p = img.getpx(x, y);
		img.putpx(x, y, 255, 255, 255, p.r == 255 ? p.a < 255 - adj ? p.a + adj : p.a : adj);
	}
	ctx.putImageData(img, 0, 0);
	scr.clearRect(0, 0, 9999, 9999);
	scr.drawImage(rsz, 0, 0, ele.width, ele.height);
}
animate.t = 0;
animate.doframe();
setInterval(animate.doframe.bind(animate), 1000/30);
		</script>
	</body>
</html>
download