自然的演算法

〈自然的演算法〉是吳哲宇新媒體藝術全景課的第 3 堂（共 11 堂），2026/10/13（二） 19:00–21:30 在 Hahow 直播，工具是 p5.js。

課綱：Boids 群聚、L-system 生長、有機模擬，這堂做出群聚／生長動態。

2 小時 30 分。先分享 The Last Input 在 C-LAB 的測試、NAS 整理與主視覺迭代，接著看 Flow Field 作業；主要課程從「用規則畫樹」講到碎形、L-System 的括號（存檔與還原）、Boids 的分離、對齊、聚合，再看鏈條、地形與 Circle Packing。示範從 OPC 拉桿與粒子模板開始，依序做出粒子死亡時分裂出子代的遞迴樹、照字串畫圖的海龜與點一下長一代的 L-System，最後把粒子模板改成鳥群。作業是用今晚的規則延伸一個自己的作品，交 Hahow 作業區、Discord 貼一份。

錄影長度 2:29:55。回放與完整筆記在學員登入後看（學員登入）。

• [0:20] 打招呼與今天的流程
• [3:18] The Last Input 改版、聲鬥陣、Leap Motion
• [7:45] NAS 盤點，讓 AI 迭代演出主視覺
• [12:10] 回答 iPad 問題；花、流場、噴泉、drawBuffer、水母
• [17:30] 微光聖誕、迷彩、格子圈圈、石頭、小船海報
• [24:13] 用規則畫樹，碎形入門
• [27:48] 白板：主幹分三段，規則一換長出花
• [31:21] 海龜繪圖與粒子遞迴分裂
• [34:24] L-System 白板：括號就是存檔與還原
• [40:00] 灌木、雪花、生命之樹，到會晃的樹
• [46:49] The Last Input 的 3D 樹、Paper Planes、Boids
• [50:51] 無人機群、Nature of Code 與 ABOP
• [55:23] 鏈條：用剛體骨節畫蛇與魚
• [58:10] Perlin Noise 地形、年輪與 Circle Packing
• [1:01:36] 概念收尾：Demo 預告與模板
• [1:04:01] 研究所申請、Noise 切片、作品集
• [1:10:44] 粒子模板逐段講解
• [1:15:01] OPC 拉桿、顏色、接 MIDI、Coolors 色票
• [1:22:40] 粒子死亡時長出子代
• [1:28:39] for 迴圈、世代上限、依世代上色
• [1:33:46] 用 noise 風場彎枝條
• [1:40:31] 海龜繪圖從零寫起
• [1:51:20] 存檔還原、OPC 拉桿、Turtle Preset
• [1:55:25] L-System：點一下 replaceAll 長一代
• [2:01:54] 會搖的樹、中文版 L-System
• [2:06:23] 看完成品與公式
• [2:11:02] 模板改成 500 隻鳥：速度、穿牆、heading
• [2:21:28] 作業問答；舊作「亂改出好東西」
• [2:24:47] 作業說明、問卷、下堂預告

1. Fork 粒子模板（Hahow Week 3-0）或今晚任何一個示範（3-1 遞迴分裂、3-2 海龜與 L-System、3-3 Boid）
2. 把規則練過一遍，改數字、做變體，改成自己喜歡的樣子
3. 找自己的 moodboard（建議 Pinterest）和生活裡的靈感，往想要的感覺調
4. 錄一段影片或截圖，替作品取名字、寫一首詩，試著讓它長得越怪越好
5. 交到 Hahow 作業區，Discord #作業分享 貼一份；可以用 AI 輔助，但目標是理解結構

筆記目錄（其餘各節登入後看）

• 開場與近況
• 　The Last Input：用手捏出一個世界
• 　讓 AI 迭代出主視覺
• 作業賞析：粒子加上限制，細節才出來
• 自然的演算法：用規則畫出一棵樹
• 白板推導：主幹分三段，規則一換就長出花
• 海龜繪圖與粒子分裂：兩種長出樹的路
• L-System：括號就是存檔與還原
• 灌木、雪花、生命之樹：原理不難
• 會晃的樹：每一層多一點角度
• Boids：三條規則長出鳥群
• 無人機群與拆成步驟的公式
• 鏈條：用剛體骨節畫蛇與魚
• Perlin Noise：地形與年輪
• Circle Packing：放放看，不行再說
• 休息前：三個示範都從同一個模板出發
• Demo 0：粒子模板與 OPC 拉桿
• 　OPC：把數字變成拉桿
• Demo 1：粒子死亡時長出子代
• 　用 noise 風場彎枝條
• Demo 2：海龜繪圖從零寫起
• L-System：滑鼠點一下，長一代
• 　會搖的樹
• 　單字換成規則
• 　中文版 L-System
• Demo 3：Boid
• 舊作示範：亂改出好東西
• 課堂問答
• 　近況與白板上的 L-System
• 　休息時間：研究所、noise 切片與作品集
• 　Demo 1：粒子與 noise 風場
• 　Demo 2 與作業
• 作業與下一堂
• 　本週作業：用今晚的規則延伸一個作品
• 　下一堂：音像演出
• 卡住的時候
• 延伸資源

「我覺得現在是對創作者，或是對大家在學這些東西，很幸福的一段時光是，你可以很輕鬆的把你的東西推到表演等級，只要你知道你要往哪邊推，然後有哪些關鍵字，你要的品質是什麼。」

「我現在都沒有推薦的 App 了，我真的都是以自己的網站做為主，我連那個畫畫板都自己做了，因為它可以跟我的系統完整對接起來。」

「沿著格子放、沿著樹放，或是沿著地形放這些粒子，通常能夠去打造一種混亂跟有秩序之間的某種平衡。」

範例程式（OpenProcessing）

• 3-0 粒子模板：Fork 這份開始，今晚的示範都從它改
• 3-1 粒子遞迴分裂：Demo 1：粒子死掉時長出子代
• 3-2 海龜繪圖與 L-System：Demo 2：照字串畫圖、點一下長一代
• 3-3 Boid：Demo 3：分離、對齊、聚合三根拉桿
• 課堂現場版：OPC 拉桿
• 課堂現場版：海龜與 L-System
• 課堂現場版：Boid

哲宇的案例

• The Last Input《終局之前》：裡面的樹就是 3D 的 L-System
• 《未竟之花》：白板上「規則一換就長出花」的作品
• L-system dynamic tree：會晃的樹
• 230124 Chain Drawing：鏈條
• 201226 Nervous System：遞迴
• 210811 Unsolvable Knot
• 200802 Tangled
• 230520 Three Stages of Reconstruction

其他人的案例與延伸閱讀

• Paper Planes
• Craig Reynolds〈Boids〉（1986）
• The Nature of Code：自主行為
• The Nature of Code：碎形
• The Algorithmic Beauty of Plants：L-System 的經典
• Moodboard：自然與生命

工具

• OPC（OP Configurator 3000）：把數字變成拉桿
• JavaScript replaceAll：L-System 的字串取代
• p5.Vector.random2D()
• Coolors 配色
• 互動教學模組
• 常用指令（粒子模板、OPC、boid 規則）

• 課堂作品：中文版海龜規則。把 F、B、+、-、[、] 換成「進、退、順、逆、【、】」，句子「進【順進】進【逆進】進」點三下長成一棵白色的樹
• 課堂作品：粒子遞迴分裂。灰底上紫粉色調的枝條從中心向外分裂成一圈放射狀的樹，用 OPC 色盤上色

全部作品

上一堂：第 2 堂〈數學之美：向量與粒子〉　下一堂：第 4 堂〈聲音 × 視覺：音頻分析〉

到 Hahow 報名。價格與優惠以 Hahow 頁面為準。