1. Home
  2. Computer Programming

Computer Programming

Creating 2-D Animations on Canvas - mathematical spirals

  • How to draw six famous spirals, including Fibonacci and Archimedean.
  • How to change the colours and animate the spirals.

The polar equations of the curves are as follows:

  • Archimedes Spiral - r = aθ
  • Fermat's Spiral - r2 = a2θ
  • Hyperbolic Spiral - r / θ
  • Logarithmic Spiral - rebθ
  • Lemniscates - r2 = a2cos(2θ)
  • Lituus - r2 = a2 / θ
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 World of Spirals

There are six famous spirals in the animation. They are:

  1. Archimedes Spiral
  2. Fermat's Spiral
  3. Hyperbolic Spiral
  4. Logarithmic Spiral
  5. Lemniscates
  6. Lituus

 

 Archimedes

 Fermat

 Hyperbolic

 Logarithmic

 Lemniscate

 Lituus

 Clear

 

Please press clear button, before choosing a new spiral, so that you can see each smoothly.

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.1;var ang;var col1;var col2;var p;
function clear(){
window.clearInterval(p);
context.clearRect(0,0,400,300);
context.strokeStyle="black";
context.fillStyle="black";
}
function timing(col1,col2) {
i=i+j;
//for Archimedes Spiral
if(document.getElementById('R1').checked){r=15*i;ang=12;col1='rgb(255,255,0)';col2='rgba(0,255,0,0.6)';}
//for Fermat's Spiral
if(document.getElementById('R2').checked){r=20*Math.pow(i,0.5);var ang=36;col1='orange';col2='rgba(255,0,0,0.6)';}
// for Hyperbolic Spiral
if(document.getElementById('R3').checked){r=200/i;ang=24;col1='purple';col2='rgba(0,0,255,0.6)';}
// for Logarithmic
if(document.getElementById('R4').checked){r=Math.pow(1.2,i);ang=30;col1='rgb(255,255,0)';col2='rgba(0,255,0,0.6)';}
// for Lemniscate
if(document.getElementById('R5').checked){r=Math.pow(10000*Math.cos(2*i),0.5);ang=32;col1='orange';col2='rgba(255,0,0,0.6)';}
// for Lituus
if(document.getElementById('R6').checked){r=Math.pow(10000/i,0.5);ang=32;col1='purple';col2='rgba(0,0,255,0.6)';}
// To clear
if(document.getElementById('R7').checked){clear();}
context.beginPath();
context.moveTo(200,150);
var x=200+r*Math.sin(i); var y=150+r*Math.cos(i);
context.font="40px Georgia";
context.textAlign='center';
context.fillText('.',x,y);
context.fillStyle=col1;
context.lineTo(x,y);
context.strokeStyle=col2;
context.stroke();
if(i>ang){i=0;context.clearRect(0,0,400,300);}
}
function motion(){
p=window.setInterval('timing()',100);
}
</script>

 

All Canvas Animations