I remember writing ARM assembler code to make these pretty things about 15 years ago. Anyway, now in html5!
Click Here to open in new window.
And here’s the JS for reference:
<script type="text/javascript">
var ittr=10;
var delta=-0.05;
function draw_thing(ctx,ox,oy,sx,sy,ds,ex,ey,de) {
var mins=0;
var maxs=0;
if(ds < 0) {mins=-200; maxs=0;} else {mins=200; maxs=0;}
for(sy=maxs;Math.abs(sy) < Math.abs(mins);sy=sy+ds) {
ctx.beginPath();
ctx.moveTo(ox+sx,oy+sy);
ctx.lineTo(ox+ex,oy+ey);
ctx.closePath();
ctx.stroke();
ex=ex+de;
}
ctx.beginPath();
ctx.moveTo(ox,oy);
ctx.lineTo(ox,oy+mins);
ctx.closePath();
ctx.stroke();
}
function draw_frame() {
var canvas = document.getElementById("m_canvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.fillStyle = "rgb(0,0,0)";
var size=1;
var offset=0;
draw_thing(ctx,200,200,0,0, ittr, 200,0,0-ittr);
draw_thing(ctx,200,200,0,0,0-ittr, 200,0,0-ittr);
draw_thing(ctx,200,200,0,0, ittr,-200,0, ittr);
draw_thing(ctx,200,200,0,0,0-ittr,-200,0, ittr);
ittr = ittr + delta;
if(ittr<2 ) {delta = 0-delta; ittr=2;}
if(ittr>10) {delta = 0-delta;}
}
}
</script>
RSS
[...] If you liked this thing, there’s another one here. [...]