JavaScript animation example: helix

Time:2021-3-3

There are all kinds of poetic curves in mathematics, and helix is a special one. The term helix comes from Greek, which means “helix”ConvolutionorWinding. For example, a plane spiral is a curve that starts at a fixed point and turns outward one by one. More than 2000 years ago, Archimedes, an ancient Greek mathematician, studied helix. Descartes, a famous mathematician, first described the logarithmic helix in 1683, and listed its analytical formula.

1. Archimedes spiral

Archimedes spiral is also calledIsokinetic spiral. When a point P moves along the moving ray OP at the same speed, the ray rotates around point o at the same angular speed. The trajectory of point P is calledArchimedes spiral

The trajectory of the moving point P appears dynamically, and the following HTML code is written.

Archimedes spiral

   var canvas = document.getElementById(‘myCanvas’);

   var ctx = canvas.getContext(‘2d’);

   var i=0;

   var j=0.1;

   ctx.clearRect(0,0,400,300);

   function motion()

   {

      i=i+j;

      r=15*i;

      ang=12;

      ctx.beginPath();

      ctx.moveTo(200,150);

      var x=200+r*Math.sin(i);

      var y=150+r*Math.cos(i);

      ctx.font=”40px Georgia”;

      ctx.textAlign=’center’;

      ctx.fillStyle=’red’;

      ctx.fillText(‘.’,x,y);

      ctx.lineTo(x,y);

      ctx.strokeStyle=’rgba(0,255,0,0.6)’;

      ctx.stroke();

      if (i<0)

      {

          j=0.1;

          ctx.clearRect(0,0,400,300);

      }

      if (i>ang)

      {

          j=-0.1;

          ctx.clearRect(0,0,400,300);

       }

   }

   setInterval(‘motion()’,100);

Open the HTML file containing this HTML code in the browser, and you can see the dynamic drawing process of Archimedes spiral in the browser window, as shown in Figure 1.

 

Figure 1. Archimedes spiral

2. More spirals

Hyperbolic spiral is also a typical spiral, which is the reciprocal of Archimedes spiral.

Because the polar coordinate equation of Archimedes spiral is: r = C θ (where C is a constant)

The polar coordinate equation of the hyperbolic helix is R θ = C (where C is a constant)

Therefore, the statements in the above program will be

       r=15*i;

       ang=12;

Rewrite as: r = 200 / I;

        ang=24;

You can see the dynamic drawing process of hyperbolic spiral as shown in Figure 2 on the canvas.

 

Figure 2 – hyperbolic spiral

There are other spirals, such as Fermat spiral, chain spiral, logarithmic spiral and so on, which can be the same as hyperbolic spiral. Just modify the sentences “r = 15 * I;” and “ang = 12;” appropriately.

To do this, write the following HTML code.

<a target="_blank" href="https://developpaper.com/tag/spiral/" title="View all posts in Spiral" target="_blank">Spiral</a> animation

Archimedes spiral

Hyperbolic spiral

Fermat spiral

Logarithmic spiral

Double button line

Interlocking spiral

 

   var canvas = document.getElementById(‘myCanvas’);

   var ctx = canvas.getContext(‘2d’);

   var i=0;

   var j=0.05;

   function motion()

   {

      i=i+j;

      if(document.getElementById(‘R1’).checked)

      {  r=15*i;   ang=12;  }

      if(document.getElementById(‘R2’).checked)

      {  r=200/i;  ang=18;  }

      if(document.getElementById(‘R3’).checked)

      {  r=20*Math.pow(i,0.5);  ang=36;  }

      if(document.getElementById(‘R4’).checked)

      {  r=Math.pow(1.2,i);  ang=30;   }

      if(document.getElementById(‘R5’).checked)

      {  r=Math.pow(10000*Math.cos(2*i),0.5);  ang=32;  }

      if(document.getElementById(‘R6’).checked)

      {  r=Math.pow(10000/i,0.5);  ang=32;    }

      ctx.beginPath();

      ctx.moveTo(200,150);

      var x=200+r*Math.sin(i);

      var y=150+r*Math.cos(i);

      ctx.font=”40px Georgia”;

      ctx.textAlign=’center’;

      ctx.fillStyle=’red’;

      ctx.fillText(‘.’,x,y);

      ctx.lineTo(x,y);

      ctx.strokeStyle=’rgba(0,255,0,0.6)’;

      ctx.stroke();

      if (i<0)

      {

          j=0.05;

          ctx.clearRect(0,0,400,300);

      }

      if (i>ang)

      {

          j=-0.05;

          ctx.clearRect(0,0,400,300);

       }

   }

   function go()

   {

      ctx.clearRect(0,0,400,300);

      i=0;

      j=0.05;

      setInterval(‘motion()’,70);

   }

   go();

Open the HTML file containing the HTML code in the browser, and you can see six kinds of spiral animation effects in the browser window, as shown in Figure 3.

 

Figure 3 – spiral animation