從小數學就不及格的我，居然用極座標系表白了個人女神！（附代碼）

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

本文由 郭詩雅發表於 雲+社區專欄

在數學中，極座標系（英語：Polar coordinate system）是一個二維座標系統。該座標系統中任意位置可由一個夾角和一段相對原點—極點的距離來表示。在兩點間的關係用夾角和距離很容易表示時，極座標系便顯得尤其有用；而在平面直角座標系中，這樣的關係就只能使用三角函數來表示。對於不少類型的曲線，極座標方程是最簡單的表達形式，甚至對於某些曲線來講，只有極座標方程可以表示。（來自維基百科）

​ 經過轉換，極座標的(φ, r)能夠變換爲直角座標系中的(x,y)座標，轉化公式以下

這樣，許多用極座標函數表示的曲線，均可以在js裏面轉成直角座標系並畫出來了。下面介紹一下如下幾種曲線並用canvas繪製了曲線動畫：

1. 心形線

函數：

參數意義：a表示從x軸上從原點到最遠點的一半。

js動畫：在js中實現時，只需將極座標角度從0到360代入方程，求出(x,y)座標

2. 伯努利雙紐線

函數：

參數意義：a表示從中心點到兩端最遠處的距離。

js動畫：繪製時，代入角度的區間是[-45，45]，須要繪製(-x,-y)和(x,y)兩部分的座標。

3. 星形線

函數：

參數意義：a表示從中心點到最遠處的距離。

js動畫：在js中實現時，只需將角度從0到360代入方程，求解過程當中不須要轉換極座標，直接代入x,y，求出(x,y)座標

4. 玫瑰線

函數：

參數意義：k表明有「幾朵花瓣」，若是k是奇數，則獲得的花瓣數就是k，若是k爲偶數，則獲得的花瓣數爲2k。a同上表示從中心點到最遠處的距離。

js動畫：當k爲奇數時，角度區間在[0,180]便可閉合；當k爲偶數時，區間在[0,360].

5. 阿基米德螺線

函數：

參數意義：相鄰「臂」之間的距離爲2180a

js動畫：角度通常要設置大於360，纔有螺線效果，例子中角度爲弧度，因此相鄰「臂」之間的距離爲2PIa。

除此以外，還有這樣以幾何級數增大的螺線和從外往內描繪的螺線：

6. 對數螺線

函數：

js動畫：

7. 雙曲螺線

函數：

js動畫：

以上七種曲線的demo：展現地址

總結

​ 在簡單的圖形和動畫軌跡上，咱們能夠換一種實現思惟，例如經過函數來實現。最後，使用k=6的玫瑰線定義了(x,y)座標，並設置z座標爲 (x,y)到z軸距離的3次方根，經過threejs，設置圖片的頂點數，用曲線鏈接畫了一個小demo。

demo地址：代碼地址展現地址

問答
遊戲體系結構
相關閱讀
玩轉flex佈局
動感光波發射！Unity AR開發之 3d 物體識別小記
Three.js 粒子系統學習小記：禮花效果實現
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由做者受權騰訊雲+社區發佈，更多原文請點擊

搜索關注公衆號「雲加社區」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社區！