1. 程式人生 > 其它 >JavaScript 數學曲線—等角螺線

JavaScript 數學曲線—等角螺線

引子

阿基米德螺線之後,發現等角螺線。

簡介

等角螺線又稱為黃金螺線或對數螺線,1638 年 Descartes 發現了等角螺線,後來 Jakob Bernoulli 研究發現了等角螺線自再造的特性,Jakob Bernoulli 對螺線非常著迷,以至於他要求刻在自己的墓碑上,並附詞 “eadem mutata resurgo”(“縱使改變,依然故我”)。最後,Torricelli 獨立完成了這項工作,並找到了曲線的長度。

等角螺線名稱的由來,由於其特性:在螺線上任取一點 A ,該點與極座標極點相連形成的直線,與該點的切線形成的夾角為定值。

在極座標系中公式描述:

公式說明:

  • r :與原點的距離。
  • a :常數。
  • b :常數。
  • e :常數。
  • θ :與 x 軸的角度。

自然現象有:

  • 鸚鵡螺的貝殼像等角螺線。
  • 菊的種子排列成等角螺線。
  • 昆蟲以等角螺線的方式接近光源。
  • 旋渦星系的旋臂差不多是等角螺線。
  • 低氣壓(熱帶氣旋、溫帶氣旋等)的外觀像等角螺線

繪製

用 canvas 繪製曲線,canvas 的座標系是笛卡爾座標系,需要做一個轉換。

由上面的圖可知取一個點有下面的數學轉換關係:

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

結合極座標系的公式可得:

這是示例,繪製主要邏輯程式碼:

function draw() {
  let a = 0.1, b = 0.3, angle = 0;
  let x = 0, y = 0, points = [];
  const acceleration = 0.1, circleNum = 4;
  // 注意這裡角度的遞增,以 2 * Math.PI 為基準進行比較,控制畫多少圈
  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;
  }
  // 實現把點繪製成線的方法
  line({ points: points});
}

參考資料