如果想畫圓的話,p5.js 提供了 circle
,在這個系列開頭的幾個文件,像是〈事件處理〉、〈動畫控制〉等就曾經使用過。
如果沒有 circle
,你要怎麼畫圓呢?基本上,可以透過以下的方式:
嗯?不是要畫圓嗎?怎麼是正多邊形來著?事實上就是如此,電腦上繪圓不會是連續,只不過正多邊形的邊數越多,看起來就越接近圓,然而電腦上繪圓從來不會是完美的,只是邊數達 96 時,就人類眼界可涵蓋整個多邊形時,就夠像個圓了。
在使用 beginShape
、endShape
時,預設是不會用線段將起始點與終點連接的,呼叫 endShape
時指定了 CLOSE
,就可以形成封閉,也就是連接起點與終點。
除了指定邊數之外,也可以直接指定切分的角度,這不過就是換算的問題,不過要記得,角度必須能整除 360 度:
你也可以指定組成圓的多邊形邊長最小長度 fs
,這可以用來換算為邊數,也就是 floor(2 * PI * r / fs)
,因為指定的邊長不一定能整除圓周長,小數點直接捨去,因此才說 fs
指定的是邊的最小長度。
這邊就來寫個通用的 xCircle
,可以指定 fn
、fa
、fs
,三個模式擇一就可以了,若有重複指定,就以 fn
、fa
、fs
的順序決定採用哪個,某些場合下,這個 xCircle
應該蠻有用的吧!
fn
會比較常用,然而有時會是已經算出了切分圓的角度,這時 xCircle
可以指定 fa
就蠻方便的了,因為不必自行換算回邊數,fs
算是比較少用,大概是想將多邊形的一邊限制在某個長度內,以便於另一形狀接合時使用吧!