JavaScript mathematical curve – equiangular spiral

Time:2021-11-28

Introduction

FollowArchimedes spiralAfter that, an equiangular spiral was found.

brief introduction

JavaScript mathematical curve - equiangular spiral

Isometric spiral, also known as golden spiral or logarithmic spiral, was discovered by Descartes in 1638. Later, Jakob Bernoulli studied and found the self reconstruction characteristics of isometric spiral. Jakob Bernoulli was so fascinated with spiral that he asked to engrave it on his tombstone with the word “eadem mutata resurgo” (“even if it changes, stay the same as me”). Finally, Torricelli completed the work independently and found the length of the curve.

The origin of the name of equiangular helix is due to its characteristics: take any point a on the helix, which is a straight line formed by connecting the pole of polar coordinates, and the included angle formed by the tangent of this point is a fixed value.

Formula description in polar coordinate system:

Formula Description:

  • r: Distance from the origin.
  • a: Constant.
  • b: Constant.
  • e: Constant.
  • θ : Angle from the x-axis.

Natural phenomena include:

  • The shell of a Nautilus is like an equiangular spiral.
  • The seeds of chrysanthemum are arranged in an equiangular spiral.
  • Insects approach the light source in an equiangular spiral.
  • The spiral arms of spiral galaxies are almost equiangular spirals.
  • The appearance of low pressure (tropical cyclone, extratropical cyclone, etc.) is like an equiangular spiral

draw

Draw the curve with canvas. The coordinate system of canvas is Cartesian coordinate system, and a transformation is needed.

JavaScript mathematical curve - equiangular spiral

It can be seen from the above figure that taking a point has the following mathematical conversion relationship:

x = rcos(θ)
y = rsin(θ)
θ = arctan(y/x)

Combined with the formula of polar coordinate system, we can get:

This isExample, draw the main logic code:

function draw() {
  let a = 0.1, b = 0.3, angle = 0;
  let x = 0, y = 0, points = [];
  const acceleration = 0.1, circleNum = 4;
  //Note the increase of angle here. Compare with 2 * math.pi to control how many circles to draw
  while (angle <= circleNum * 2 * Math.PI) {
    const anglePow = Math.pow(Math.E, b * angle);
    x = a * anglePow * Math.cos(angle);
    y = a * anglePow * Math.sin(angle);
    points.push([x, y]);
    angle = angle + acceleration;
  }
  //Method for drawing points into lines
  line({ points: points});
}

reference material