Creating 2-D Animations on Canvas - spiral of pi

The following animation, created against the background of an image of PI, shows the first 60 digits of the universal constant.

π = 3.141592653589793238462643383279502884197169399375105820974944...

Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

The Tail of PI

These are the first 60 digits of PI; they form a beautiful Archimedes spiral in colours:

 

 

The Code for the animation is as follows:

<script>
{
var canvas = document.getElementById('Canvas_One');
var context = canvas.getContext('2d');
var i = 0; j = 0.2; var b = 60; var c = -1;
function timing() {
var a = new Array('3', '.', '1', '4', '1', '5', '9', '2', '6', '5', '3', '5', '8', '9', '7', '9', '3', '2', '3', '8', '4', '6', '2', '6', '4', '3', '3', '8', '3', '2', '7', '9', '5', '0', '2', '8', '8', '4', '1', '9', '7', '1', '6', '9', '3', '9', '9', '3', '7', '5', '1', '0', '5', '8', '2', '0', '9', '7', '4', '9', '4');
i = i + j;
var r = 15 * i; ;
b = b + c;
context.beginPath();
context.moveTo(200, 150);
var x = 200 + r * Math.sin(i); var y = 150 + r * Math.cos(i);
context.font = "12px Georgia";
context.textAlign = 'center';
context.fillText(a[b], x, y);
//context.fillText(a[b] + '-'+ i,380,280);
context.fillStyle = 'orange';
context.lineTo(x, y);
context.strokeStyle = 'rgba(0,255,0,0.4)';
context.stroke();
if (b > 61) { context.clearRect(0, 0, 400, 300); b = 61; c = -1; i = 0; j = 0.2 }
if (b == 0) { context.clearRect(0, 0, 400, 300); c = 1; i = 12; j = -0.2; }
} window.setInterval('timing()', 500);
</script>

 

All Canvas Animations

 

 

 

Recommended Reading

Amazon Best Seller

 

Advertisements

Amazon Best Seller

Advertisement