引子

最近在研究曲線運動的時候，嘗試了用 AI 匯出的 SVG 路徑之後，發現有些還是迴歸到數學中更合適一些。蒐集了一些資料，嘗試後總結一下。

• Origin
• My GitHub

簡介

阿基米德螺旋是以公元前 3 世紀希臘數學家阿基米德命名的螺旋。它是一個軌跡，對應於一個點在一段時間內的位置，該點沿著一條以恆定角速度旋轉的線以恆定速度離開一個固定點。在極座標系中的公式描述：

當 c = 1 時，就是通常所說的阿基米德螺旋。

公式說明：

• r ：徑向距離。
• a ：常數，起始點與極座標中心的距離。
• b ：常數，控制螺旋相鄰兩條曲線之間的距離。
• θ ：極角。

實際應用有：

• 阿基米德螺線可以在螺旋天線中找到，它可以在很寬的頻率範圍內工作。
• 要求患者畫一個阿基米德螺旋線是一種量化人類顫抖的方法，這些資訊有助於診斷神經系統疾病。
• 阿基米德螺旋線也用於數字光處理（DLP）投影系統，以最小化“彩虹效應”，使其看起來好像同時顯示多種顏色，而實際上是由於紅色、綠色和藍色的迴圈速度非常快。
• 阿基米德螺旋線在食品微生物學中用於通過螺旋盤量化細菌濃度。

繪製

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

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

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

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

x = (a + bθ)cos(θ)
y = (a + bθ)sin(θ)
 

這是示例，繪製主要邏輯程式碼：

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

改變其中的引數，會產生很多不同的圖形，有的看起來並不是曲線。

參考資料

• Archimedean spiral Wiki
• Archimedean spiral Wolfram MathWorld
• Archimedean Spiral Plane Curves
• 螺旋線