Pi Day Meets the HTML5 Canvas

Originally published on: Sun, 14 Mar 2010 17:11:27 +0000

Today is March 14th. It's Albert Einstein's birthday. Does anyone else find it interesting that many of us in the U.S. accelerated time by one hour on his birthday?

It's also Pi Day ... 3.14.

I usually try to do something nerdy on Pi Day. Last year, I wrote a quine. I'm getting tired of quines, so I decided to do something that actually involved the use of Pi.

Back in the 80's, my brother showed me a technique that could be used to plot points on a circle. The sine and cosine functions available on his microcomputer accepted arguments in radians. To convert degrees to radians, one had to multiply the argument by Pi and then divide by 180.

The formulae for determining a point on a Cartesian plane goes something like:

x=cos( degrees * Pi / 180 ) * radius y=sin( degrees * Pi / 180 ) * radius

In order to adjust the point-plotting for a computer screen ( which did not understand negative coordinates on the x and y axes ) one needed to add the radius again:

x=cos( degrees * Pi / 180 ) * radius + radius y=sin( degrees * Pi / 180 ) * radius + radius

I have altered this formulae for use in JavaScript:

      var radius=300;
      var toRadians=3.141592/180.0;

      x=parseInt(Math.cos(count*toRadians)*radius)+radius;
      y=parseInt(Math.sin(count*toRadians)*radius)+radius;

I threw together a little HTML5 document that draws a circle on a canvas element using these formulae. It slowly draws a circle from by drawing a line from the center to the desired point. The final output looks like this very small thumbnail picture.

You can watch the graphic render in a much larger area by clicking here while using an HTML5 compliant browser ( such as Firefox ):

http://www.mailsend-online.com/wp/piday.htm

<html><head /><body onload="loader()">
<script type="text/javascript">
// License: MIT / x1
// Copyright (c) 3009 by James K. Lawless
// jimbo@radiks.net http://www.radiks.net/~jimbo
// http://www.mailsend-online.com
//
// Permission is hereby granted, free of charge, to any person
// obtaining a copy of this software and associated documentation
// files (the "Software"), to deal in the Software without
// restriction, including without limitation the rights to use,
// copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following
// conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
// OTHER DEALINGS IN THE SOFTWARE.
   var ctx;
   var count=0;
   var timer;
   var radius=300;
   var toRadians=3.141592/180.0;

   function timey() {
      var x,y;

      x=parseInt(Math.cos(count*toRadians)*radius)+radius;
      y=parseInt(Math.sin(count*toRadians)*radius)+radius;
      count++;
      if(count>=360) {
         clearInterval(timer);
      }
      ctx.moveTo(radius-1,radius-1);
      ctx.lineTo(x,y);
      ctx.stroke();
   }
   function loader() {
      ctx = document.getElementById('myCanvas').getContext('2d');
      ctx.clearRect(0,0,599,599);
      timer=setInterval("timey()",10);
  }
</script>
<p>
<canvas id="myCanvas" width="600" height="600">
</canvas>
</body></html>

Unless otherwise noted, all code and text entries are Copyright Š2010 by James K. Lawless

Save to del.icio.us
Save to StumbleUpon
Digg it
Save to Reddit
Share on Facebook
Share on Twitter
More bookmarks