資訊專欄INFORMATION COLUMN
摘要：在兩點間的關(guān)系用夾角和距離很容易表示時，極坐標(biāo)系便顯得尤為有用而在平面直角坐標(biāo)系中，這樣的關(guān)系就只能使用三角函數(shù)來表示。對于很多類型的曲線，極坐標(biāo)方程是最簡單的表達(dá)形式，甚至對于某些曲線來說，只有極坐標(biāo)方程能夠表示。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實踐干貨哦~
本文由郭詩雅發(fā)表于云+社區(qū)專欄
在數(shù)學(xué)中，極坐標(biāo)系（英語：Polar coordinate system）是一個二維坐標(biāo)系統(tǒng)。該坐標(biāo)系統(tǒng)中任意位置可由一個夾角和一段相對原點—極點的距離來表示。在兩點間的關(guān)系用夾角和距離很容易表示時，極坐標(biāo)系便顯得尤為有用；而在平面直角坐標(biāo)系中，這樣的關(guān)系就只能使用三角函數(shù)來表示。對于很多類型的曲線，極坐標(biāo)方程是最簡單的表達(dá)形式，甚至對于某些曲線來說，只有極坐標(biāo)方程能夠表示。（來自維基百科）
? 通過轉(zhuǎn)換，極坐標(biāo)的(φ, r)可以變換為直角坐標(biāo)系中的(x,y)坐標(biāo)，轉(zhuǎn)化公式如下
這樣，許多用極坐標(biāo)函數(shù)表示的曲線，都可以在js里面轉(zhuǎn)成直角坐標(biāo)系并畫出來了。下面介紹一下以下幾種曲線并用canvas繪制了曲線動畫：
1. 心形線函數(shù)：
參數(shù)意義：a表示從x軸上從原點到最遠(yuǎn)點的一半。
js動畫：在js中實現(xiàn)時，只需將極坐標(biāo)角度從0到360代入方程，求出(x,y)坐標(biāo)
2. 伯努利雙紐線函數(shù)：
參數(shù)意義：a表示從中心點到兩端最遠(yuǎn)處的距離。
js動畫：繪制時，代入角度的區(qū)間是[-45，45]，需要繪制(-x,-y)和(x,y)兩部分的坐標(biāo)。
3. 星形線函數(shù)：
參數(shù)意義：a表示從中心點到最遠(yuǎn)處的距離。
js動畫：在js中實現(xiàn)時，只需將角度從0到360代入方程，求解過程中不需要轉(zhuǎn)換極坐標(biāo)，直接代入x,y，求出(x,y)坐標(biāo)
4. 玫瑰線函數(shù)：
參數(shù)意義：k代表有“幾朵花瓣”，如果k是奇數(shù)，則得到的花瓣數(shù)就是k，如果k為偶數(shù)，則得到的花瓣數(shù)為2k。a同上表示從中心點到最遠(yuǎn)處的距離。
js動畫：當(dāng)k為奇數(shù)時，角度區(qū)間在[0,180]即可閉合；當(dāng)k為偶數(shù)時，區(qū)間在[0,360].
5. 阿基米德螺線函數(shù)：
參數(shù)意義：相鄰“臂”之間的距離為2180a
js動畫：角度一般要設(shè)置大于360，才有螺線效果，例子中角度為弧度，所以相鄰“臂”之間的距離為2PIa。
除此之外，還有這樣以幾何級數(shù)增大的螺線和從外往內(nèi)描繪的螺線：
6. 對數(shù)螺線函數(shù)：
js動畫：
7. 雙曲螺線函數(shù)：
js動畫：
以上七種曲線的demo：展示地址
總結(jié)? 在簡單的圖形和動畫軌跡上，我們可以換一種實現(xiàn)思維，例如通過函數(shù)來實現(xiàn)。最后，使用k=6的玫瑰線定義了(x,y)坐標(biāo)，并設(shè)置z坐標(biāo)為 (x,y)到z軸距離的3次方根，通過threejs，設(shè)置圖片的頂點數(shù)，用曲線連接畫了一個小demo。
demo地址：代碼地址展示地址
問答
游戲體系結(jié)構(gòu)
相關(guān)閱讀
玩轉(zhuǎn)flex布局
動感光波發(fā)射！Unity AR開發(fā)之 3d 物體識別小記
Three.js 粒子系統(tǒng)學(xué)習(xí)小記：禮花效果實現(xiàn)
【每日課程推薦】機(jī)器學(xué)習(xí)實戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點擊
搜索關(guān)注公眾號「云加社區(qū)」，第一時間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！
海量技術(shù)實踐經(jīng)驗，盡在云加社區(qū)！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108506.html
摘要：在年我參加兄弟連的培訓(xùn)，成為一名程序員。我認(rèn)為成為程序員的有以下三種途徑。為大家準(zhǔn)備了一份年程序員發(fā)展路線。可見也可以關(guān)注下上個時代框架霸主他的新版本可能會有奇跡發(fā)生擴(kuò)展異步編程框架這個就不必多說了。 showImg(https://segmentfault.com/img/bVbmMdM?w=640&h=364); 我一生的文章都會放在這里，我的博客，我希望每一行代碼，每一段文字都能...
摘要：而過去發(fā)生的一切，恍若昨天我一直都有個計劃每隔半年寫一篇總結(jié)以記錄我的大學(xué)生活，回看過去，總結(jié)不足，這便是我當(dāng)初寫這個專題的目的。在大一結(jié)束的時候，我也寫過一篇一年總結(jié)記我的大一生活。 ...
摘要：我的決定是學(xué)人工智能，當(dāng)時對這個比較感興趣。從機(jī)器學(xué)習(xí)學(xué)到深度學(xué)習(xí)再學(xué)回機(jī)器學(xué)習(xí)。面試，成功地去公司從事機(jī)器學(xué)習(xí)深度學(xué)習(xí)方面的基礎(chǔ)工作。這個系列不僅僅以學(xué)習(xí)為目的，目的是為了達(dá)到機(jī)器學(xué)習(xí)的工作入門標(biāo)準(zhǔn)。 每個字都是經(jīng)驗所得，都是站在一個零基礎(chǔ)的人的角度寫的，純手打+網(wǎng)上優(yōu)秀資源整合，希望大家能每個字都認(rèn)真看。 接下來文章會側(cè)重在以下幾方面 1、零基礎(chǔ)如何進(jìn)行人工智能的自學(xué)（以找工作為目...
閱讀 1265·2021-11-24 09:39
閱讀 1515·2021-09-07 09:59
閱讀 3479·2019-08-30 15:54
閱讀 2474·2019-08-30 11:00
閱讀 2669·2019-08-29 15:06
閱讀 2159·2019-08-26 13:52
閱讀 427·2019-08-26 13:24
閱讀 2489·2019-08-26 12:20
