# 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 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

## [redis] redis’ basic principles and solutions of cache breakdown, cache penetration and cache avalanche

Article catalogue Cache penetration principle resolvent Buffer breakdown principle resolvent Cache avalanche principle resolvent Cache penetration principle The data corresponding to the key does not exist in the database. Every request for the key cannot be obtained from the cache. The request will access the database. A large number of visits to the database may […]