https://lab4.kvzhuang.net/gen-art/
簡單說就是用程式碼定義規則,讓演算法幫你「畫」出圖來。每次執行結果都不一樣,但整體風格一致。有點像是你設計了基因,讓它自己長出不同的花。
我的作品大致分成幾類:
Truchet Curves — 經典 Truchet 瓷磚的曲線變體。每個方格裡放兩條四分之一圓弧,隨機旋轉後組合出迷宮般的流動路徑。準備了 60 幾組調色盤,從 Bauhaus 到 Evangelion 風格都有。
什麼是 Generative Art?
1. 瓷磚與圖案類
Truchet Weave — 同樣是 Truchet 概念,但改成兩條緞帶交叉,透過 over/under 遮擋產生編織的立體錯覺。加了陰影和高光讓布料感更明顯。
台灣花磚 — 以台灣老屋花磚為靈感,用對稱演算法生成八瓣花、蓮花、牡丹等圖案。配色從實際花磚取樣,17 組傳統色調。
家紋 Kamon — 日本傳統家紋的生成版本,菊、桐、蝶、鶴丸、青海波等 30 種紋樣,黑白極簡風格。
2. 場景與建築類
Isometric Cubes — 等角立體方塊堆疊動畫,每個面隨機填入圓點、棋盤格、條紋等圖案。有個 wave front 的掉落動畫蠻療癒的。
Botanical Line Art — 鋼筆繪圖機(plotter)風格的植物線描,遞迴分支演算法產生有機樹木,搭配飄落花瓣。純線條無填色的美學。
3. 數學與演算法視覺化
四色定理 — 用 Voronoi 圖產生隨機地圖,再用 Welsh-Powell 貪婪演算法只用 4 種顏色著色,使相鄰區域永不同色。離散數學教科書上的經典定理,做成互動版本。集合論圖解 — 聯集、交集、差集、補集的 Venn Diagram 互動式教學。
Eight Queens — 經典八皇后問題。點擊棋盤放置第一個皇后,backtracking 演算法自動解出剩餘七個皇后的合法位置,附攻擊範圍視覺化。
DP Minimum Path — Dynamic Programming 的視覺化教學。在隨機成本網格上,動畫展示 DP 表逐格填入,最後回溯出最小成本路徑。
4. 其他有趣的
Loading Spinners — 把 15 種 loading 動畫排成網格,每個有不同速度和配色,意外地好看。
Google Trends Cloud — 串接 Google 熱門搜尋,每小時更新的文字雲。涵蓋台灣、美國、日本、英國。
Wordle + Solver — 自己刻的 Wordle 遊戲,每天早上 8 點換一個新字。另外做了一個 Solver 幫你推薦最佳猜測。
技術面
大部分作品用 p5.js 寫,部分有整合 fxhash 的確定性隨機數系統(同一個 hash 永遠產生同一張圖)。全部都是純前端,沒有後端,打開瀏覽器就能跑。 每個作品都支援按空白鍵重新生成、按 s 存圖。手機上也能看,但桌面體驗最佳。小結
Generative Art 最吸引我的地方是「可控的意外」—— 你設計規則,但不完全控制結果。每次按下空白鍵都像拆禮物,有時候演算法會畫出你沒預期到的漂亮組合。 有興趣的話歡迎到 Gallery 玩玩看。Ref: