引子
最近在研究曲線運動的時候，嘗試了用 AI 導出的 SVG 路徑之后，發現有些還是回歸到數學中更合適一些。搜集了一些資料，嘗試后總結一下。
簡介
阿基米德螺旋是以公元前 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});
}
改變其中的參數，會產生很多不同的圖形，有的看起來並不是曲線。