JavaScript 數學曲線—等角螺線


引子

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

簡介

86-1

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

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

在極坐標系中公式描述:

86-2

公式說明:

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

自然現象有:

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

繪制

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

86-3

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

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

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

86-4

這是示例,繪制主要邏輯代碼:

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});
}

參考資料


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM