Another Pretty HTML5 thing
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