<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" src="/images/favicon.gif" />
<title>star 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>
</head>
<body>
<canvas height="600px" width="800px">Y U no canvas?</canvas>
<script type="text/javascript">
/* let's build a canvas rendering environment comparable to oldschool vga hardware */
/* handily, we also get triple buffering out of this setup, for free. */
var ele = document.getElementsByTagName("canvas")[0];
var scr = ele.getContext("2d");
scr.ratio = ele.width / ele.height;
/* turn off smooth resizing of huge pixels. we want all the pixelly goodness. */
/* 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=([^&]*)/) ? RegExp.lastParen : 4 * rsz.height / 3;
var ctx = rsz.getContext("2d");
var img = ctx.createImageData(rsz.width, rsz.height);
/* now, let's build some simple graphics functions */
img.ratio = img.width / img.height;
img.astigmatism = scr.ratio / img.ratio;
img.a = 255; /* alpha */
img.inBounds = function inBounds () {
return (
this.x >= 0 && this.x < this.width &&
this.y >= 0 && this.y < this.height
);
}
img.setIndex = function setIndex () {
if (!this.inBounds()) return false;
this.i = 4 * (this.width * this.y + this.x);
return this;
}
img.putpxRaw = function putpxRaw () {
var b = this.i;
this.data[b++] = this.r & 255;
this.data[b++] = this.g & 255;
this.data[b++] = this.b & 255;
this.data[b] = this.a & 255;
return this;
}
img.putpx = function putpx () {
if (!this.setIndex()) return false;
return this.putpxRaw();
}
img.getpxRaw = function getpxRaw () {
var b = this.i;
this.r = this.data[b++];
this.g = this.data[b++];
this.b = this.data[b];
/* skip alpha */
return this;
}
img.getpx = function getpx () {
if (!this.setIndex()) return false;
return this.getpxRaw();
}
/* render loop! go! */
var shift = 0;
var animate = { frame: 0 };
var maxradius = Math.sqrt(img.width * img.width + img.height * img.height) / 2;
animate.doframe = function () {
/* avoid killing browsers that actually do threads properly */
if (this.busy++) { return --this.busy; }
for (img.y = 0; img.y < img.height; img.y++) {
for (img.x = 0; img.x < img.width; img.x++) {
var x = img.x - img.width / 2 + .5;
var y = img.y - img.height / 2 + .5;
var r = Math.sqrt(x * x + y * y);
var q = animate.frame / 5 - 2 * Math.PI * r / maxradius;
var c = 1;
for (var n = 1; n <= 5; n++)
c *= Math.sin(n*q+1.5*n) / 2 + .5;
c *= (maxradius - r) / maxradius;
img.r = 53 * c;
img.g = 107 * c + 20;
img.b = 215 * c + 40;
img.putpx();
}
}
animate.frame = animate.frame + .33;
while (animate.frame >= 256) animate.frame -= 256;
ctx.putImageData(img, 0, 0);
scr.drawImage(rsz, 0, 0, ele.width, ele.height);
/* clear semaphore */
this.busy--;
}
animate.doframe();
setInterval(animate.doframe.bind(animate), 1000/10);
</script>
</body>
</html>