# 自然的演算法

正式網址：https://newmediaart.course.monolab.world/lesson/03

〈自然的演算法〉是吳哲宇新媒體藝術全景課的第 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。回放與完整筆記在學員登入後看（[學員登入](https://newmediaart.course.monolab.world/learn)）。

## 章節

- [0:20] 打招呼與今天的流程：說今天一樣先講解、回答問題、看作業，內容「非常好玩但好難」；問大家覺得作業難不難，提醒有錄影可回放、有 AI 可以救。
- [3:18] The Last Input 改版、聲鬥陣、Leap Motion：沒人提問就先講近況：參與 C-LAB 聲鬥陣與 IRCAM 工作坊（徵件已截止），10 月底把 The Last Input 做成第二版；用 Leap Motion 抓手部骨架（約 100fps、不佔 GPU）捏出世界，iPad 網頁當虛擬控台，10/24 演出約 20 分鐘。
- [7:45] NAS 盤點，讓 AI 迭代演出主視覺：用 AI 盤點家裡四五台電腦與硬碟、建 NAS 備份系統並推第二大腦課；途中回答「空間建構會學到嗎」；再講把 The Last Input 的演出邏輯（0–20 分鐘）資料視覺化，讓 AI 當「超壞的設計師」迭代出海報主視覺。
- [12:10] 回答 iPad 問題；花、流場、噴泉、drawBuffer、水母：回答 iPad app 的問題後，在 Hahow 上逐件看作業：花瓣形狀當粒子初始點、Noise 流場改版、噴泉、drawBuffer 疊糊畫布、水母的遮罩與觸手物件。
- [17:30] 微光聖誕、迷彩、格子圈圈、石頭、小船海報：續看微光聖誕、迷彩、沿格子畫圈的作品、Polygon Packing 石頭、半透明疊霧、火箭、傷心小棧、小船；建議把作品想成海報並做動態 mockup，並收在「沿著格子／樹／地形放粒子＝混亂與秩序的平衡」。
- [24:13] 用規則畫樹，碎形入門：說明自然形狀很難逐點寫，數學家找到演算法描述；帶出 L-System（小朋友寫字板比喻）、Boid 對創意編程影響最深；打開 Pinterest mood board，以科赫曲線講碎形。
- [27:48] 白板：主幹分三段，規則一換長出花：在白板畫主幹／小幹的遞迴分裂，第三層加紅圈當花，再換成四枝兩長兩短、加花瓣花蕊，連到《未竟之花》與粒子分裂（第幾代＝是莖、葉還是花）。
- [31:21] 海龜繪圖與粒子遞迴分裂：用教學模組講海龜繪圖（前進、旋轉可畫星星、螺旋、花），再看粒子遞迴分裂的動態版，調分裂角度、擾動、壽命。
- [34:24] L-System 白板：括號就是存檔與還原：用白板一步步演算 F[+F][-F]F，把括號比成自動車的存檔點與 Ctrl-Z；再示範每個 F 取代成整串規則，一代代變長，括號一定要成對。
- [40:00] 灌木、雪花、生命之樹，到會晃的樹：接著講第五代植物、U 型灌木、雪花與三角形、圓疊出生命之樹；收在「原理不難」，再秀 mood board 的蒲公英與 L-System Dynamic Tree，說樹要每層多加一點角度才會自然晃。
- [46:49] The Last Input 的 3D 樹、Paper Planes、Boids：說 The Last Input 裡的樹就是 3D 的 L-System；轉到生物，用 Paper Planes 引出 Craig Reynolds 1986 的 Boid，三條規則（分離、對齊、聚合），用教學模組看各規則單開與全開的樣子。
- [50:51] 無人機群、Nature of Code 與 ABOP：把 Boid 連到無人機群與邊緣運算，說數學太難所以拆成步驟；介紹 Nature of Code 的自主個體與碎形（海岸線悖論）、《The Algorithmic Beauty of Plants》，並預告中間休息。
- [55:23] 鏈條：用剛體骨節畫蛇與魚：用靈魂魚的旗子和蛇為例，講鏈條（每節長度固定、拉著尾巴跟上）與 Chain Drawing，留下軌跡就很漂亮。
- [58:10] Perlin Noise 地形、年輪與 Circle Packing：Noise 畫成彩色地圖／海平面／等高線，放在圓周上畫成年輪；再講 Circle Packing（放放看、長大到碰到為止，孔隙控制）。
- [1:01:36] 概念收尾：Demo 預告與模板：預告 Demo：粒子遞迴分裂（根系）、海龜／L-System、第三個看時間；說明 3-0 模板可 Fork；宣布休息約三分鐘，8 點 07 回來。
- [1:04:01] 研究所申請、Noise 切片、作品集：休息時間逐題回覆：申請 HCI 研究所的經驗（NYU 重作品集）與建議、Noise 三維切片是什麼（取一個點，只是切不同面）、作品集可畫日常與喜歡的主題；結論「技術不是一切」。
- [1:10:44] 粒子模板逐段講解：Fork 3-0 模板，快速複習 Particle class：物件參數、life 倒數與 alive 布林、draw 裡的 push／pop，再示範註解背景、noStroke 變煙火。
- [1:15:01] OPC 拉桿、顏色、接 MIDI、Coolors 色票：介紹 OpenProcessing 的 OPC 套件：勾選設定、OPC.slider／color 一行就出拉桿，現場試接 MIDI 控制器，再列 toggle、palette、events 等控制項，貼 Coolors 色票。
- [1:22:40] 粒子死亡時長出子代：把生成粒子搬進 setup、放畫面正中；講 p5.Vector.random2D，在 life 歸零時 new 子粒子並繼承位置（要 copy）、半徑、顏色。
- [1:28:39] for 迴圈、世代上限、依世代上色：for 一次生五個、加 gen 世代欄位與 if gen<4 防無限分裂；位置改成母粒子速度旋轉一個角度；依世代上色（莖白、花紅）。
- [1:33:46] 用 noise 風場彎枝條：用 noise 取 x、y 與切片當加速度，示範除以 10／100、為何一直往右下、map 成 -1 到 1；中途回答「Particle 未定義」報錯，最後收 Demo 1。
- [1:40:31] 海龜繪圖從零寫起：先看完成品，再用 Create Sketch 從頭寫：sentence 字串、for 逐字讀 currentCode、F 前進、B 倒退、+／- 轉向，deltaLength／deltaAngle 變數；中途解釋 i++。
- [1:51:20] 存檔還原、OPC 拉桿、Turtle Preset：加 [ ] 的 push／pop，樹枝出現；把變數換成 OPC.slider，並貼 Turtle Preset（雪花、風車、五角星花、樹木）。
- [1:55:25] L-System：點一下 replaceAll 長一代：用 mousePressed 對 sentence 做 replaceAll，每點一下長一代；把樹種在畫面下方並轉 -90 度；回答 replace 在 p5 查不到（JS 字串函式）與取代即遞迴。
- [2:01:54] 會搖的樹、中文版 L-System：加 rotate(sin(frameCount)) 讓樹晃，講單字換規則與 F 可以改成中文字（錢／進退順逆），鼓勵做中文版 L-System。
- [2:06:23] 看完成品與公式：看 3-3 完成品與滑桿；誤把 3-0 模板蓋成自己的 demo，用 history 還原；講 boid 的 forEach：距離、separation／alignment／cohesion 的累加與平均、乘比例。
- [2:11:02] 模板改成 500 隻鳥：速度、穿牆、heading：把 life 設 1 萬、貼 OPC 與 boid 核心、隨機撒位置、500 隻；setMag 限速、取餘數讓鳥穿牆；改畫長方形並 rotate(v.heading())。中途模板的 life 被還原錯，當場修。
- [2:21:28] 作業問答；舊作「亂改出好東西」：回答作業是否把 3-0 進化成 3-3；接著開自己的 OpenProcessing 舊作（Particle Div、Unsolvable Knot、Tangled、三階段、Nervous System），說明都是粒子加規則。
- [2:24:47] 作業說明、問卷、下堂預告：回應 p5 創辦人學歷，講作業（Fork 模板練完、錄影或截圖、取名、寫詩）、貼課後問卷、說明課程網站，預告第 4 堂音像與其後兩週期中作品。

## 作業：用今晚的規則延伸一個作品

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

## 課程筆記（預覽）

> 2026-10-13（二）19:01～21:31 線上直播（錄影 2:29:55）

## 這堂在做什麼

這堂的題目是自然的演算法。樹、鳥群、地層這些有機的形狀，如果一個點一個點寫，程式會寫到瘋掉。數學家的辦法是只寫規則：一根樹枝怎麼分岔，一隻鳥怎麼看鄰居，規則重複套用下去，形狀自己長出來。前一個半小時，哲宇先看大家的作業，再從白板上畫一棵樹開始，一路講到 L-System、碎形和 Boids，順手帶過鏈條、Perlin noise 的地形與年輪、Circle Packing。後一個小時連寫三個 Demo，全部從上一堂的粒子模板出發：粒子死掉時長出子代，海龜照字串畫圖、一代一代長成樹，最後貼上三條規則，把五百顆粒子變成鳥群。哲宇開場就先打過預防針：「今天的東西好玩，非常好玩但好難哦。」

> 這堂課帶走
>
> 1. 有機的形狀可以只寫規則。樹枝分三段，每一段再當成新的樹枝分三段，一層一層疊上去就是樹。
> 2. 海龜只會往前走和轉彎。L-System 再加上括號（存檔與還原）和「每個 F 換成一串規則」，字串一代一代變長，就長出植物。
> 3. 粒子也能長成樹。life 歸零時 new 出子代，繼承位置、速度和顏色，用 gen 記世代，到上限就停。
> 4. 鳥群只有三條規則：分離、對齊、聚合。每隻鳥只看周圍的鄰居，沒有誰帶隊。
> 5. 模板加 OPC 拉桿，邊跑邊調。亂改常常改出最好看的東西，作業要讓它「長得越怪越好」。

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

- 開場與近況
- 　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 與作業
- 作業與下一堂
- 　本週作業：用今晚的規則延伸一個作品
- 　下一堂：音像演出
- 卡住的時候
- 延伸資源

## 這堂課說過的話

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

> 「我現在都沒有推薦的 App 了，我真的都是以自己的網站做為主，我連那個畫畫板都自己做了，因為它可以跟我的系統完整對接起來。」
>
> ——哲宇，第 3 堂 [12:18]

> 「沿著格子放、沿著樹放，或是沿著地形放這些粒子，通常能夠去打造一種混亂跟有秩序之間的某種平衡。」
>
> ——哲宇，第 3 堂 [19:51]

## 本堂範例與案例

### 範例程式（OpenProcessing）

- [3-0 粒子模板](https://openprocessing.org/@cheyuwu/3033176)：Fork 這份開始，今晚的示範都從它改
- [3-1 粒子遞迴分裂](https://openprocessing.org/@cheyuwu/3033181)：Demo 1：粒子死掉時長出子代
- [3-2 海龜繪圖與 L-System](https://openprocessing.org/@cheyuwu/3033180)：Demo 2：照字串畫圖、點一下長一代
- [3-3 Boid](https://openprocessing.org/@cheyuwu/3033194)：Demo 3：分離、對齊、聚合三根拉桿
- [課堂現場版：OPC 拉桿](https://openprocessing.org/@cheyuwu/3033267)
- [課堂現場版：海龜與 L-System](https://openprocessing.org/@cheyuwu/3033307)
- [課堂現場版：Boid](https://openprocessing.org/@cheyuwu/3033342)

### 哲宇的案例

- [The Last Input《終局之前》](https://cheyuwu.com/zh/work/the-last-input/)：裡面的樹就是 3D 的 L-System
- [《未竟之花》](https://cheyuwu.com/zh/work/unfinished-bloom/)：白板上「規則一換就長出花」的作品
- [L-system dynamic tree](https://lab.cheyuwu.com/s/250223-l-system-dynamic-tree/)：會晃的樹
- [230124 Chain Drawing](https://openprocessing.org/@cheyuwu/1805472)：鏈條
- [201226 Nervous System](https://openprocessing.org/@cheyuwu/1050016)：遞迴
- [210811 Unsolvable Knot](https://openprocessing.org/@cheyuwu/1243356)
- [200802 Tangled](https://openprocessing.org/@cheyuwu/941007)
- [230520 Three Stages of Reconstruction](https://openprocessing.org/@cheyuwu/1934295)

### 其他人的案例與延伸閱讀

- [Paper Planes](https://www.awwwards.com/sites/paper-planes)
- [Craig Reynolds〈Boids〉（1986）](https://www.red3d.com/cwr/boids/)
- [The Nature of Code：自主行為](https://natureofcode.com/autonomous-agents/)
- [The Nature of Code：碎形](https://natureofcode.com/fractals/)
- [The Algorithmic Beauty of Plants](https://algorithmicbotany.org/papers/#abop)：L-System 的經典
- [Moodboard：自然與生命](https://www.pinterest.com/majerowob/hahow-w3-nature-life/)

### 工具

- [OPC（OP Configurator 3000）](https://github.com/msawired/OPC)：把數字變成拉桿
- [JavaScript replaceAll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll)：L-System 的字串取代
- [p5.Vector.random2D()](https://p5js.org/reference/p5.Vector/random2D/)
- [Coolors 配色](https://coolors.co/palettes/trending)
- [互動教學模組](https://newmediaart.course.monolab.world/tools)
- [常用指令（粒子模板、OPC、boid 規則）](https://newmediaart.course.monolab.world/snippets)

## 這堂的作品

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

[全部作品](https://newmediaart.course.monolab.world/works)

上一堂：[第 2 堂〈數學之美：向量與粒子〉](https://newmediaart.course.monolab.world/lesson/02)　下一堂：[第 4 堂〈聲音 × 視覺：音頻分析〉](https://newmediaart.course.monolab.world/lesson/04)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。