不完美的圓


如果想畫圓的話,p5.js 提供了 circle,在這個系列開頭的幾個文件,像是〈事件處理〉、〈動畫控制〉等就曾經使用過。

如果沒有 circle,你要怎麼畫圓呢?基本上,可以透過以下的方式:

嗯?不是要畫圓嗎?怎麼是正多邊形來著?事實上就是如此,電腦上繪圓不會是連續,只不過正多邊形的邊數越多,看起來就越接近圓,然而電腦上繪圓從來不會是完美的,只是邊數達 96 時,就人類眼界可涵蓋整個多邊形時,就夠像個圓了。

在使用 beginShapeendShape 時,預設是不會用線段將起始點與終點連接的,呼叫 endShape 時指定了 CLOSE,就可以形成封閉,也就是連接起點與終點。

除了指定邊數之外,也可以直接指定切分的角度,這不過就是換算的問題,不過要記得,角度必須能整除 360 度:

你也可以指定組成圓的多邊形邊長最小長度 fs,這可以用來換算為邊數,也就是 floor(2 * PI * r / fs),因為指定的邊長不一定能整除圓周長,小數點直接捨去,因此才說 fs 指定的是邊的最小長度。

這邊就來寫個通用的 xCircle,可以指定 fnfafs,三個模式擇一就可以了,若有重複指定,就以 fnfafs 的順序決定採用哪個,某些場合下,這個 xCircle 應該蠻有用的吧!

fn 會比較常用,然而有時會是已經算出了切分圓的角度,這時 xCircle 可以指定 fa 就蠻方便的了,因為不必自行換算回邊數,fs 算是比較少用,大概是想將多邊形的一邊限制在某個長度內,以便於另一形狀接合時使用吧!