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 - re
  • 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>

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Amazon Product Search

Sponsors