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>

One thought on “Another Pretty HTML5 thing

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>