用 p5.js 畫個正方形,應該沒問題吧!
接著,將正方形劃分為九宮格,除了正中央方格之外,其他方格逐一畫上正方形:
接著,將正方形劃分為九宮格,除了正中央方格之外,其他方格再逐一劃分為九宮格,劃分後除了正中央方格之外,其他方格逐一畫上正方形,你會怎麼寫呢?
雖然文字描述上顯得拗口,不過程式碼上若透過遞迴描述其實很簡單,以下是直接劃分五次的程式碼:
簡單來說,在不用再劃分九宮格時,直接繪個正方形,接著劃分九宮格,當次任務就完成了,每個格子要再劃分的工作,就交給下一次呼叫吧!
畫出來的圖案,稱為謝爾賓斯基地毯(Sierpinski carpet),任取其中九宮格之一,圖案與外圍正方形都是相似的,這稱為自相似性(self-similarity),自相似性是一種內在重複的模式,自然界有許多現象都呈現自相似性,像是海岸線、植物生長等,對這類現象整體來看,與其其中一部份來看,都有著類似的構成,呈現出另一種規律之美。
那麼,你有辦法讓這張謝爾賓斯基地毯動起來嗎?這需要一些先前談到的 p5.js 功能,以及一些嘗試,端看你想完成什麼效果,以下是我完成的其中之一,有興趣可以自己研究看看: