{"id":"lesson-03","number":3,"title":"自然的演算法","tool":"p5.js","date":"2026-10-13","time":"19:00–21:30","hasNotes":true,"notes":{"title":"自然的演算法","status":"課後版 v2（2026-10-13 依逐字稿重寫）","date":"2026-10-13","toc":[{"id":"s-1","text":"這堂在做什麼","level":2},{"id":"s-2","text":"開場與近況","level":2},{"id":"s-2-1","text":"The Last Input：用手捏出一個世界","level":3},{"id":"s-2-2","text":"讓 AI 迭代出主視覺","level":3},{"id":"s-3","text":"作業賞析：粒子加上限制，細節才出來","level":2},{"id":"s-4","text":"自然的演算法：用規則畫出一棵樹","level":2},{"id":"s-5","text":"白板推導：主幹分三段，規則一換就長出花","level":2},{"id":"s-6","text":"海龜繪圖與粒子分裂：兩種長出樹的路","level":2},{"id":"s-7","text":"L-System：括號就是存檔與還原","level":2},{"id":"s-8","text":"灌木、雪花、生命之樹：原理不難","level":2},{"id":"s-9","text":"會晃的樹：每一層多一點角度","level":2},{"id":"s-10","text":"Boids：三條規則長出鳥群","level":2},{"id":"s-11","text":"無人機群與拆成步驟的公式","level":2},{"id":"s-12","text":"鏈條：用剛體骨節畫蛇與魚","level":2},{"id":"s-13","text":"Perlin Noise：地形與年輪","level":2},{"id":"s-14","text":"Circle Packing：放放看，不行再說","level":2},{"id":"s-15","text":"休息前：三個示範都從同一個模板出發","level":2},{"id":"s-16","text":"Demo 0：粒子模板與 OPC 拉桿","level":2},{"id":"s-16-1","text":"OPC：把數字變成拉桿","level":3},{"id":"s-17","text":"Demo 1：粒子死亡時長出子代","level":2},{"id":"s-17-1","text":"用 noise 風場彎枝條","level":3},{"id":"s-18","text":"Demo 2：海龜繪圖從零寫起","level":2},{"id":"s-19","text":"L-System：滑鼠點一下，長一代","level":2},{"id":"s-19-1","text":"會搖的樹","level":3},{"id":"s-19-2","text":"單字換成規則","level":3},{"id":"s-19-3","text":"中文版 L-System","level":3},{"id":"s-20","text":"Demo 3：Boid","level":2},{"id":"s-21","text":"舊作示範：亂改出好東西","level":2},{"id":"s-22","text":"課堂問答","level":2},{"id":"s-22-1","text":"近況與白板上的 L-System","level":3},{"id":"s-22-2","text":"休息時間：研究所、noise 切片與作品集","level":3},{"id":"s-22-3","text":"Demo 1：粒子與 noise 風場","level":3},{"id":"s-22-4","text":"Demo 2 與作業","level":3},{"id":"s-23","text":"作業與下一堂","level":2},{"id":"s-23-1","text":"本週作業：用今晚的規則延伸一個作品","level":3},{"id":"s-23-2","text":"下一堂：音像演出","level":3},{"id":"s-24","text":"卡住的時候","level":2},{"id":"s-25","text":"延伸資源","level":2}],"segments":[{"html":"
\n

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

\n
\n

這堂在做什麼

\n

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

\n"},{"locked":true,"id":"s-2","title":"開場與近況"},{"locked":true,"id":"s-3","title":"作業賞析：粒子加上限制，細節才出來"},{"locked":true,"id":"s-4","title":"自然的演算法：用規則畫出一棵樹"},{"locked":true,"id":"s-5","title":"白板推導：主幹分三段，規則一換就長出花"},{"locked":true,"id":"s-6","title":"海龜繪圖與粒子分裂：兩種長出樹的路"},{"locked":true,"id":"s-7","title":"L-System：括號就是存檔與還原"},{"locked":true,"id":"s-8","title":"灌木、雪花、生命之樹：原理不難"},{"locked":true,"id":"s-9","title":"會晃的樹：每一層多一點角度"},{"locked":true,"id":"s-10","title":"Boids：三條規則長出鳥群"},{"locked":true,"id":"s-11","title":"無人機群與拆成步驟的公式"},{"locked":true,"id":"s-12","title":"鏈條：用剛體骨節畫蛇與魚"},{"locked":true,"id":"s-13","title":"Perlin Noise：地形與年輪"},{"locked":true,"id":"s-14","title":"Circle Packing：放放看，不行再說"},{"locked":true,"id":"s-15","title":"休息前：三個示範都從同一個模板出發"},{"locked":true,"id":"s-16","title":"Demo 0：粒子模板與 OPC 拉桿"},{"locked":true,"id":"s-17","title":"Demo 1：粒子死亡時長出子代"},{"locked":true,"id":"s-18","title":"Demo 2：海龜繪圖從零寫起"},{"locked":true,"id":"s-19","title":"L-System：滑鼠點一下，長一代"},{"locked":true,"id":"s-20","title":"Demo 3：Boid"},{"locked":true,"id":"s-21","title":"舊作示範：亂改出好東西"},{"locked":true,"id":"s-22","title":"課堂問答"},{"locked":true,"id":"s-23","title":"作業與下一堂"},{"locked":true,"id":"s-24","title":"卡住的時候"},{"locked":true,"id":"s-25","title":"延伸資源"}],"widgets":["fractal","turtle","recursion","lsystem","boids","boidsvec","chain","terrain","rings","circlepack","noise","noiseslice"],"links":[{"group":"延伸資源","text":"3-0 粒子模板","href":"https://openprocessing.org/@cheyuwu/3033176"},{"group":"延伸資源","text":"3-1 遞迴分裂","href":"https://openprocessing.org/@cheyuwu/3033181"},{"group":"延伸資源","text":"3-2 海龜與 L-System","href":"https://openprocessing.org/@cheyuwu/3033180"},{"group":"延伸資源","text":"3-3 Boid","href":"https://openprocessing.org/@cheyuwu/3033194"},{"group":"延伸資源","text":"OPC demo","href":"https://openprocessing.org/@cheyuwu/3033267"},{"group":"延伸資源","text":"W3-2 live","href":"https://openprocessing.org/@cheyuwu/3033307"},{"group":"延伸資源","text":"3-3 Boid live","href":"https://openprocessing.org/@cheyuwu/3033342"},{"group":"延伸資源","text":"Hahow W3 Nature & Life","href":"https://www.pinterest.com/majerowob/hahow-w3-nature-life/"},{"group":"延伸資源","text":"OPC（OP Configurator 3000）","href":"https://github.com/msawired/OPC"},{"group":"延伸資源","text":"Coolors","href":"https://coolors.co/palettes/trending"},{"group":"延伸資源","text":"p5.Vector.random2D()","href":"https://p5js.org/reference/p5.Vector/random2D/"},{"group":"延伸資源","text":"String.replaceAll()（MDN）","href":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll"},{"group":"延伸資源","text":"Boids（Craig Reynolds）","href":"https://www.red3d.com/cwr/boids/"},{"group":"延伸資源","text":"The Nature of Code：Autonomous Agents","href":"https://natureofcode.com/autonomous-agents/"},{"group":"延伸資源","text":"The Nature of Code：Fractals","href":"https://natureofcode.com/fractals/"},{"group":"延伸資源","text":"The Algorithmic Beauty of Plants","href":"https://algorithmicbotany.org/papers/#abop"},{"group":"延伸資源","text":"Paper Planes","href":"https://paperplanes.world/"},{"group":"延伸資源","text":"The Last Input","href":"https://cheyuwu.com/zh/work/the-last-input/"},{"group":"延伸資源","text":"未竟之花","href":"https://cheyuwu.com/zh/work/unfinished-bloom/"},{"group":"延伸資源","text":"L-System Dynamic Tree","href":"https://lab.cheyuwu.com/s/250223-l-system-dynamic-tree/"},{"group":"延伸資源","text":"Chain Drawing","href":"https://openprocessing.org/@cheyuwu/1805472"},{"group":"延伸資源","text":"Unsolvable Knot","href":"https://openprocessing.org/@cheyuwu/1243356"},{"group":"延伸資源","text":"Tangled","href":"https://openprocessing.org/@cheyuwu/941007"},{"group":"延伸資源","text":"Three Stages of Reconstruction","href":"https://openprocessing.org/@cheyuwu/1934295"},{"group":"延伸資源","text":"Nervous System","href":"https://openprocessing.org/@cheyuwu/1050016"},{"group":"延伸資源","text":"聲鬥陣：進駐計畫發表（索票）","href":"https://www.accupass.com/event/2609290656149114872190"},{"group":"延伸資源","text":"2026 IRCAM 聲鬥陣（C-LAB）","href":"https://clab.org.tw/projects/soundoff-2026"},{"group":"延伸資源","text":"本堂互動模組","href":"https://newmediaart.course.monolab.world/lesson/03"},{"group":"延伸資源","text":"全部模組","href":"https://newmediaart.course.monolab.world/tools"},{"group":"延伸資源","text":"常用指令","href":"https://newmediaart.course.monolab.world/snippets?q=自然的演算法"}]},"chapters":[{"t":"0:20","sec":20,"title":"打招呼與今天的流程","note":"說今天一樣先講解、回答問題、看作業，內容「非常好玩但好難」；問大家覺得作業難不難，提醒有錄影可回放、有 AI 可以救。","part":"開場與近況"},{"t":"3:18","sec":198,"title":"The Last Input 改版、聲鬥陣、Leap Motion","note":"沒人提問就先講近況：參與 C-LAB 聲鬥陣與 IRCAM 工作坊（徵件已截止），10 月底把 The Last Input 做成第二版；用 Leap Motion 抓手部骨架（約 100fps、不佔 GPU）捏出世界，iPad 網頁當虛擬控台，10/24 演出約 20 分鐘。","part":"開場與近況"},{"t":"7:45","sec":465,"title":"NAS 盤點，讓 AI 迭代演出主視覺","note":"用 AI 盤點家裡四五台電腦與硬碟、建 NAS 備份系統並推第二大腦課；途中回答「空間建構會學到嗎」；再講把 The Last Input 的演出邏輯（0–20 分鐘）資料視覺化，讓 AI 當「超壞的設計師」迭代出海報主視覺。","part":"開場與近況"},{"t":"12:10","sec":730,"title":"回答 iPad 問題；花、流場、噴泉、drawBuffer、水母","note":"回答 iPad app 的問題後，在 Hahow 上逐件看作業：花瓣形狀當粒子初始點、Noise 流場改版、噴泉、drawBuffer 疊糊畫布、水母的遮罩與觸手物件。","part":"作業賞析"},{"t":"17:30","sec":1050,"title":"微光聖誕、迷彩、格子圈圈、石頭、小船海報","note":"續看微光聖誕、迷彩、沿格子畫圈的作品、Polygon Packing 石頭、半透明疊霧、火箭、傷心小棧、小船；建議把作品想成海報並做動態 mockup，並收在「沿著格子／樹／地形放粒子＝混亂與秩序的平衡」。","part":"作業賞析"},{"t":"24:13","sec":1453,"title":"用規則畫樹，碎形入門","note":"說明自然形狀很難逐點寫，數學家找到演算法描述；帶出 L-System（小朋友寫字板比喻）、Boid 對創意編程影響最深；打開 Pinterest mood board，以科赫曲線講碎形。","part":"主要課程：自然的演算法"},{"t":"27:48","sec":1668,"title":"白板：主幹分三段，規則一換長出花","note":"在白板畫主幹／小幹的遞迴分裂，第三層加紅圈當花，再換成四枝兩長兩短、加花瓣花蕊，連到《未竟之花》與粒子分裂（第幾代＝是莖、葉還是花）。","part":"主要課程：自然的演算法"},{"t":"31:21","sec":1881,"title":"海龜繪圖與粒子遞迴分裂","note":"用教學模組講海龜繪圖（前進、旋轉可畫星星、螺旋、花），再看粒子遞迴分裂的動態版，調分裂角度、擾動、壽命。","part":"主要課程：自然的演算法"},{"t":"34:24","sec":2064,"title":"L-System 白板：括號就是存檔與還原","note":"用白板一步步演算 F[+F][-F]F，把括號比成自動車的存檔點與 Ctrl-Z；再示範每個 F 取代成整串規則，一代代變長，括號一定要成對。","part":"主要課程：自然的演算法"},{"t":"40:00","sec":2400,"title":"灌木、雪花、生命之樹，到會晃的樹","note":"接著講第五代植物、U 型灌木、雪花與三角形、圓疊出生命之樹；收在「原理不難」，再秀 mood board 的蒲公英與 L-System Dynamic Tree，說樹要每層多加一點角度才會自然晃。","part":"主要課程：自然的演算法"},{"t":"46:49","sec":2809,"title":"The Last Input 的 3D 樹、Paper Planes、Boids","note":"說 The Last Input 裡的樹就是 3D 的 L-System；轉到生物，用 Paper Planes 引出 Craig Reynolds 1986 的 Boid，三條規則（分離、對齊、聚合），用教學模組看各規則單開與全開的樣子。","part":"主要課程：自然的演算法"},{"t":"50:51","sec":3051,"title":"無人機群、Nature of Code 與 ABOP","note":"把 Boid 連到無人機群與邊緣運算，說數學太難所以拆成步驟；介紹 Nature of Code 的自主個體與碎形（海岸線悖論）、《The Algorithmic Beauty of Plants》，並預告中間休息。","part":"主要課程：自然的演算法"},{"t":"55:23","sec":3323,"title":"鏈條：用剛體骨節畫蛇與魚","note":"用靈魂魚的旗子和蛇為例，講鏈條（每節長度固定、拉著尾巴跟上）與 Chain Drawing，留下軌跡就很漂亮。","part":"主要課程：自然的演算法"},{"t":"58:10","sec":3490,"title":"Perlin Noise 地形、年輪與 Circle Packing","note":"Noise 畫成彩色地圖／海平面／等高線，放在圓周上畫成年輪；再講 Circle Packing（放放看、長大到碰到為止，孔隙控制）。","part":"主要課程：自然的演算法"},{"t":"1:01:36","sec":3696,"title":"概念收尾：Demo 預告與模板","note":"預告 Demo：粒子遞迴分裂（根系）、海龜／L-System、第三個看時間；說明 3-0 模板可 Fork；宣布休息約三分鐘，8 點 07 回來。","part":"主要課程：自然的演算法"},{"t":"1:04:01","sec":3841,"title":"研究所申請、Noise 切片、作品集","note":"休息時間逐題回覆：申請 HCI 研究所的經驗（NYU 重作品集）與建議、Noise 三維切片是什麼（取一個點，只是切不同面）、作品集可畫日常與喜歡的主題；結論「技術不是一切」。","part":"休息與問答"},{"t":"1:10:44","sec":4244,"title":"粒子模板逐段講解","note":"Fork 3-0 模板，快速複習 Particle class：物件參數、life 倒數與 alive 布林、draw 裡的 push／pop，再示範註解背景、noStroke 變煙火。","part":"Demo 0：粒子模板與 OPC 拉桿"},{"t":"1:15:01","sec":4501,"title":"OPC 拉桿、顏色、接 MIDI、Coolors 色票","note":"介紹 OpenProcessing 的 OPC 套件：勾選設定、OPC.slider／color 一行就出拉桿，現場試接 MIDI 控制器，再列 toggle、palette、events 等控制項，貼 Coolors 色票。","part":"Demo 0：粒子模板與 OPC 拉桿"},{"t":"1:22:40","sec":4960,"title":"粒子死亡時長出子代","note":"把生成粒子搬進 setup、放畫面正中；講 p5.Vector.random2D，在 life 歸零時 new 子粒子並繼承位置（要 copy）、半徑、顏色。","part":"Demo 1：粒子遞迴分裂"},{"t":"1:28:39","sec":5319,"title":"for 迴圈、世代上限、依世代上色","note":"for 一次生五個、加 gen 世代欄位與 if gen<4 防無限分裂；位置改成母粒子速度旋轉一個角度；依世代上色（莖白、花紅）。","part":"Demo 1：粒子遞迴分裂"},{"t":"1:33:46","sec":5626,"title":"用 noise 風場彎枝條","note":"用 noise 取 x、y 與切片當加速度，示範除以 10／100、為何一直往右下、map 成 -1 到 1；中途回答「Particle 未定義」報錯，最後收 Demo 1。","part":"Demo 1：粒子遞迴分裂"},{"t":"1:40:31","sec":6031,"title":"海龜繪圖從零寫起","note":"先看完成品，再用 Create Sketch 從頭寫：sentence 字串、for 逐字讀 currentCode、F 前進、B 倒退、+／- 轉向，deltaLength／deltaAngle 變數；中途解釋 i++。","part":"Demo 2：海龜繪圖與 L-System"},{"t":"1:51:20","sec":6680,"title":"存檔還原、OPC 拉桿、Turtle Preset","note":"加 [ ] 的 push／pop，樹枝出現；把變數換成 OPC.slider，並貼 Turtle Preset（雪花、風車、五角星花、樹木）。","part":"Demo 2：海龜繪圖與 L-System"},{"t":"1:55:25","sec":6925,"title":"L-System：點一下 replaceAll 長一代","note":"用 mousePressed 對 sentence 做 replaceAll，每點一下長一代；把樹種在畫面下方並轉 -90 度；回答 replace 在 p5 查不到（JS 字串函式）與取代即遞迴。","part":"Demo 2：海龜繪圖與 L-System"},{"t":"2:01:54","sec":7314,"title":"會搖的樹、中文版 L-System","note":"加 rotate(sin(frameCount)) 讓樹晃，講單字換規則與 F 可以改成中文字（錢／進退順逆），鼓勵做中文版 L-System。","part":"Demo 2：海龜繪圖與 L-System"},{"t":"2:06:23","sec":7583,"title":"看完成品與公式","note":"看 3-3 完成品與滑桿；誤把 3-0 模板蓋成自己的 demo，用 history 還原；講 boid 的 forEach：距離、separation／alignment／cohesion 的累加與平均、乘比例。","part":"Demo 3：Boid"},{"t":"2:11:02","sec":7862,"title":"模板改成 500 隻鳥：速度、穿牆、heading","note":"把 life 設 1 萬、貼 OPC 與 boid 核心、隨機撒位置、500 隻；setMag 限速、取餘數讓鳥穿牆；改畫長方形並 rotate(v.heading())。中途模板的 life 被還原錯，當場修。","part":"Demo 3：Boid"},{"t":"2:21:28","sec":8488,"title":"作業問答；舊作「亂改出好東西」","note":"回答作業是否把 3-0 進化成 3-3；接著開自己的 OpenProcessing 舊作（Particle Div、Unsolvable Knot、Tangled、三階段、Nervous System），說明都是粒子加規則。","part":"課後問答與作業"},{"t":"2:24:47","sec":8687,"title":"作業說明、問卷、下堂預告","note":"回應 p5 創辦人學歷，講作業（Fork 模板練完、錄影或截圖、取名、寫詩）、貼課後問卷、說明課程網站，預告第 4 堂音像與其後兩週期中作品。","part":"課後問答與作業"}],"summary":"2 小時 30 分。先分享 The Last Input 在 C-LAB 的測試、NAS 整理與主視覺迭代，接著看 Flow Field 作業；主要課程從「用規則畫樹」講到碎形、L-System 的括號（存檔與還原）、Boids 的分離、對齊、聚合，再看鏈條、地形與 Circle Packing。示範從 OPC 拉桿與粒子模板開始，依序做出粒子死亡時分裂出子代的遞迴樹、照字串畫圖的海龜與點一下長一代的 L-System，最後把粒子模板改成鳥群。作業是用今晚的規則延伸一個自己的作品，交 Hahow 作業區、Discord 貼一份。","duration":"2:29:55","plan":{"topic":"Boids 群聚、L-system 生長、有機模擬","output":"群聚／生長動態","stage":"穩步爬升","difficulty":5},"sections":25,"qaCount":19,"homework":{"title":"用今晚的規則延伸一個作品","steps":["Fork 粒子模板（Hahow Week 3-0）或今晚任何一個示範（3-1 遞迴分裂、3-2 海龜與 L-System、3-3 Boid）","把規則練過一遍，改數字、做變體，改成自己喜歡的樣子","找自己的 moodboard（建議 Pinterest）和生活裡的靈感，往想要的感覺調","錄一段影片或截圖，替作品取名字、寫一首詩，試著讓它長得越怪越好","交到 Hahow 作業區，Discord #作業分享 貼一份；可以用 AI 輔助，但目標是理解結構"],"source":"[2:21:39]、[2:25:16]～[2:25:49]、[2:28:40]"},"quotes":[{"t":"11:27","text":"「我覺得現在是對創作者，或是對大家在學這些東西，很幸福的一段時光是，你可以很輕鬆的把你的東西推到表演等級，只要你知道你要往哪邊推，然後有哪些關鍵字，你要的品質是什麼。」"},{"t":"12:18","text":"「我現在都沒有推薦的 App 了，我真的都是以自己的網站做為主，我連那個畫畫板都自己做了，因為它可以跟我的系統完整對接起來。」"},{"t":"19:51","text":"「沿著格子放、沿著樹放，或是沿著地形放這些粒子，通常能夠去打造一種混亂跟有秩序之間的某種平衡。」"}],"quotesTotal":12,"resources":[{"group":"範例程式（OpenProcessing）","items":[{"title":"3-0 粒子模板","url":"https://openprocessing.org/@cheyuwu/3033176","note":"Fork 這份開始，今晚的示範都從它改"},{"title":"3-1 粒子遞迴分裂","url":"https://openprocessing.org/@cheyuwu/3033181","note":"Demo 1：粒子死掉時長出子代"},{"title":"3-2 海龜繪圖與 L-System","url":"https://openprocessing.org/@cheyuwu/3033180","note":"Demo 2：照字串畫圖、點一下長一代"},{"title":"3-3 Boid","url":"https://openprocessing.org/@cheyuwu/3033194","note":"Demo 3：分離、對齊、聚合三根拉桿"},{"title":"課堂現場版：OPC 拉桿","url":"https://openprocessing.org/@cheyuwu/3033267"},{"title":"課堂現場版：海龜與 L-System","url":"https://openprocessing.org/@cheyuwu/3033307"},{"title":"課堂現場版：Boid","url":"https://openprocessing.org/@cheyuwu/3033342"}]},{"group":"哲宇的案例","items":[{"title":"The Last Input《終局之前》","url":"https://cheyuwu.com/zh/work/the-last-input/","note":"裡面的樹就是 3D 的 L-System"},{"title":"《未竟之花》","url":"https://cheyuwu.com/zh/work/unfinished-bloom/","note":"白板上「規則一換就長出花」的作品"},{"title":"L-system dynamic tree","url":"https://lab.cheyuwu.com/s/250223-l-system-dynamic-tree/","note":"會晃的樹"},{"title":"230124 Chain Drawing","url":"https://openprocessing.org/@cheyuwu/1805472","note":"鏈條"},{"title":"201226 Nervous System","url":"https://openprocessing.org/@cheyuwu/1050016","note":"遞迴"},{"title":"210811 Unsolvable Knot","url":"https://openprocessing.org/@cheyuwu/1243356"},{"title":"200802 Tangled","url":"https://openprocessing.org/@cheyuwu/941007"},{"title":"230520 Three Stages of Reconstruction","url":"https://openprocessing.org/@cheyuwu/1934295"}]},{"group":"其他人的案例與延伸閱讀","items":[{"title":"Paper Planes","url":"https://www.awwwards.com/sites/paper-planes"},{"title":"Craig Reynolds〈Boids〉（1986）","url":"https://www.red3d.com/cwr/boids/"},{"title":"The Nature of Code：自主行為","url":"https://natureofcode.com/autonomous-agents/"},{"title":"The Nature of Code：碎形","url":"https://natureofcode.com/fractals/"},{"title":"The Algorithmic Beauty of Plants","url":"https://algorithmicbotany.org/papers/#abop","note":"L-System 的經典"},{"title":"Moodboard：自然與生命","url":"https://www.pinterest.com/majerowob/hahow-w3-nature-life/"}]},{"group":"工具","items":[{"title":"OPC（OP Configurator 3000）","url":"https://github.com/msawired/OPC","note":"把數字變成拉桿"},{"title":"JavaScript replaceAll","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll","note":"L-System 的字串取代"},{"title":"p5.Vector.random2D()","url":"https://p5js.org/reference/p5.Vector/random2D/"},{"title":"Coolors 配色","url":"https://coolors.co/palettes/trending"},{"title":"互動教學模組","url":"https://newmediaart.course.monolab.world/tools"},{"title":"常用指令（粒子模板、OPC、boid 規則）","url":"https://newmediaart.course.monolab.world/snippets"}]}],"works":[{"lesson":"lesson-03","kind":"課堂作品","who":"Lucas Yang","title":"中文版海龜規則","desc":"把 F、B、+、-、[、] 換成「進、退、順、逆、【、】」，句子「進【順進】進【逆進】進」點三下長成一棵白色的樹","images":["/media/lesson-03/w03-02.jpg"],"link":null,"posted_at":"2026-10-13T21:15:00+08:00","video":null,"t":"2:15:00","sec":8100,"colors":["white"],"reaction":null},{"lesson":"lesson-03","kind":"課堂作品","who":"Lucas Yang","title":"粒子遞迴分裂","desc":"灰底上紫粉色調的枝條從中心向外分裂成一圈放射狀的樹，用 OPC 色盤上色","images":["/media/lesson-03/w03-01.jpg"],"link":null,"posted_at":"2026-10-13T20:41:17+08:00","video":null,"t":"1:41:17","sec":6077,"colors":["purple","pink"],"reaction":null}],"live":null,"hasReplay":true,"startAt":"2026-10-13T19:00:00+08:00","endAt":"2026-10-13T21:30:00+08:00","state":"after","youtubeId":null,"memo":{"html":"

19:00–19:03　直播與聊天室確認

19:03–19:08　回答大家的問題

19:08–19:12　近況更新

19:12–19:22　作業賞析

19:22–19:50　主要課程：自然的演算法

19:50–19:55　Demo 0：粒子模板＋OPC 拉桿

19:55–20:05　Demo 1：粒子的遞迴分裂

20:05–20:25　Demo 2：海龜繪圖與 L-System 樹木

20:25–20:45　Demo 3：Boid 模擬

20:45–21:00　課後問答與作業說明

","segments":[{"start":1140,"end":1143,"label":"直播與聊天室確認","line":0,"must":[]},{"start":1143,"end":1148,"label":"回答大家的問題","line":1,"must":[]},{"start":1148,"end":1152,"label":"近況更新","line":2,"must":[]},{"start":1152,"end":1162,"label":"作業賞析","line":6,"must":[]},{"start":1162,"end":1190,"label":"主要課程：自然的演算法","line":8,"must":[]},{"start":1190,"end":1195,"label":"Demo 0：粒子模板＋OPC 拉桿","line":27,"must":[]},{"start":1195,"end":1205,"label":"Demo 1：粒子的遞迴分裂","line":29,"must":[]},{"start":1205,"end":1225,"label":"Demo 2：海龜繪圖與 L-System 樹木","line":31,"must":[]},{"start":1225,"end":1245,"label":"Demo 3：Boid 模擬","line":33,"must":[]},{"start":1245,"end":1260,"label":"課後問答與作業說明","line":35,"must":["作業「用粒子模板練熟今晚的規則，再自己延伸一個作品」，10/19（一）21:00 前交 Hahow 作業區，Discord #作業分享 貼一份"]}]},"prev":{"id":"lesson-02","number":2,"date":"2026-10-06","time":"19:00–21:30","title":"數學之美：向量與粒子","tool":"p5.js"},"next":{"id":"lesson-04","number":4,"date":"2026-10-20","time":"19:00–21:30","title":"聲音 × 視覺：音頻分析","tool":"p5.js + 麥克風"}}