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