# 吳哲宇新媒體藝術全景課：全部公開頁的文字

Revision: 992f00d1239dd546e2a90f4489dc7ef358655e9789d8bc4114cfc7d67ac4c87a
引用請用每一段的「正式網址」。


---

正式網址：https://newmediaart.course.monolab.world/
Kind: page

# 新媒體藝術全景課

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

每週二晚上直播，已開課也能加入，回放永久看。十年走過的路，11 週帶你走一次：從 p5.js 到 TouchDesigner、體感互動與音像表演，做出 8 件作品。吳哲宇 × MonoLab，Hahow 直播課。

Hahow 直播課・每週二 19:00・2026.09.22 – 12.22

11 週完成 8 件作品，打造你的個人創作流

從 p5.js 的第一行程式，走到 TouchDesigner、體感互動和音像表演。每週二晚上，哲宇在直播裡把程式一行一行寫給你看，寫錯了就當場一起修。

## 三十秒看懂這門課

- **程度**：沒寫過程式也能上。第 0 堂從註冊 OpenProcessing 開始。
- **工具**：p5.js → TouchDesigner。加上 MediaPipe 與 AI 工具，TD 用免費版。
- **時間**：每週二 19:00–21:30。11 堂直播，回放沒有觀看期限。
- **每週要花**：直播 2.5 小時＋作業。近一半同學每週留 1 到 3 小時寫作業。
- **做出來**：8 件作品。第 9 堂期末發表，哲宇逐一點評。
- **作業**：每堂一份。下一堂開場，一起看大家的作業。

### 這一期的同學（課前問卷 110 份）

- 64% 開課前自己寫不出完整的程式
- 23% 是專業工程師
- 35% 上過哲宇或 MonoLab 的課

### 適合你，如果

- 有美感、沒寫過程式，想讓作品動起來
- 學過 p5.js 或 TouchDesigner，作品一直停在「會動」
- 想把作品帶進展覽、演出或商業案
- 已經在用 AI 寫程式，想知道自己在指揮什麼

### 可能不適合，如果

- 只想把一個工具學到精通
- 希望直播的每一步都等全班打完才往下走（直播節奏偏快，細節靠回放補）

## 11 堂路徑

難度照課綱慢慢爬，換到 TouchDesigner 的那兩堂先放慢。第 9 堂是期末發表，哲宇線上逐一點評每個人的作品。

1. [第 0 堂〈新媒體藝術的全景地圖〉](https://newmediaart.course.monolab.world/lesson/00)　9/22（二） 19:00–21:30・OpenProcessing。在 OpenProcessing 從零寫出滑鼠筆刷，再讓一段弧線每一格多轉一點，長成鸚鵡螺。
2. [第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01)　9/29（二） 19:00–21:30・p5.js。用色票、if／else 和 for 迴圈排出環狀的花，再把一塊畫截下來，做成自己的筆刷。
3. [第 2 堂〈數學之美：向量與粒子〉](https://newmediaart.course.monolab.world/lesson/02)　10/6（二） 19:00–21:30・p5.js。位置加上速度，就是下一刻的位置。從一顆會彈的球，做到按住滑鼠噴出來的粒子槍，再讓 noise 力場推著粒子流動。
4. [第 3 堂〈自然的演算法〉](https://newmediaart.course.monolab.world/lesson/03)　10/13（二） 19:00–21:30・p5.js。用規則長出自然：粒子死掉時分裂出下一代、照一串字畫出 L-System 的樹、三條規則讓 500 隻鳥自己成群。
5. [第 4 堂〈聲音 × 視覺：音頻分析〉](https://newmediaart.course.monolab.world/lesson/04)　10/20（二） 19:00–21:30・p5.js + 麥克風。麥克風輸入、音頻分析、音像共感（p5.js 畢業作）。
6. [第 5 堂〈TouchDesigner 入門〉](https://newmediaart.course.monolab.world/lesson/05)　11/10（二） 19:00–21:30・TD。節點式思維、TOP／CHOP／SOP 基礎、2D 視覺。
7. [第 6 堂〈TouchDesigner 進階〉](https://newmediaart.course.monolab.world/lesson/06)　11/17（二） 19:00–21:30・TD。3D 世界、材質、光影、影像處理。
8. [第 7 堂〈體感互動〉](https://newmediaart.course.monolab.world/lesson/07)　11/24（二） 19:00–21:30・TD + MediaPipe。MediaPipe 手勢與身體追蹤、即時影像互動。
9. [第 8 堂〈系統整合 × 音像表演〉](https://newmediaart.course.monolab.world/lesson/08)　12/1（二） 19:00–21:30・全工具。把所有工具串起來，做一場即時演出。
10. [第 9 堂〈學員作品發表講評會〉](https://newmediaart.course.monolab.world/lesson/09)　12/15（二） 19:00–21:30・自選。學員分享作品，哲宇線上點評。
11. [第 10 堂〈AI 協作 × 創作永續〉](https://newmediaart.course.monolab.world/lesson/10)　12/22（二） 19:00–21:30・AI 工具組合。AI 作為創作夥伴；讓創作持續發生的工作流。

[完整課程](https://newmediaart.course.monolab.world/course)

## 一週怎麼過

- **週二 19:00・直播**：先講概念、看作品，再進程式。2 小時教學加 30 分鐘問答，聊天室的問題當場回。
- **兩天內・回放**：直播後兩天內，回放上架 Hahow。
- **課後・筆記與模組**：課程網站上每一堂都有照上課順序整理的筆記、範例程式和互動模組，學員登入後也能在網站上看回放。
- **下一堂前一天 21:00・作業**：交到 Hahow 作業區，Discord 貼一份。下一堂開場，哲宇挑幾件作業出來講。

## 我們怎麼打造學習體驗

直播照顧不到每一個人，所以一堂課不只是一場直播，前後還有這些：

### 直播當下

- **問題當場回**：聊天室的問題當場回，Discord 提問區的問題也會念出來回答。
- **白板推導**：概念先在白板上手畫一次，看懂了再進程式。
- **直播頁**：本週講綱、開播倒數、麥克風測試，一鍵加到行事曆。網址每週都一樣。

### 課後兩天內

- **回放**：兩天內上架 Hahow；登入課程網站也看得到，點章節就跳到那一段。
- **筆記**：照上課順序整理，每一段標著回放裡的時間，最後一節是「卡住的時候」。
- **範例與案例**：每堂附 OpenProcessing 範例程式、哲宇的案例和延伸閱讀，Fork 就能接著改。

### 自己練的時候

- **互動模組**：每一堂的示範都做成互動模組，拉滑桿看程式怎麼變。
- **常用指令**：上課一直會用到的程式片段，搜尋、一鍵複製。
- **Discord**：卡住的程式貼上來問。Discord 和 Hahow 的提問每天彙整一次給哲宇。

### 整個 11 週

- **作業講評**：每堂開場花 10 到 20 分鐘看大家的作業，挑幾件出來講。
- **作品牆**：同學的作品每堂一組；課堂上貼出來的，標著它在直播裡出現的時間。
- **課後回饋**：每堂一份回饋表，大家的意見拿來改筆記和模組。

> 「上課通常是聽和理解，之後看回放才慢慢跟著打。」
>
> ——第 3 堂課後回饋

## 講師　吳哲宇（Che-Yu Wu）

新媒體藝術家，MonoLab 創辦人。陽明交通大學電機系畢業，紐約大學整合數位媒體碩士。

《靈魂魚》2024 年在威尼斯藝術雙年展期間，於 European Cultural Centre 主辦的 Personal Structures 展出。《花的靈魂》2023 年在 Art Basel Miami Beach × Tezos Foundation 展出。2023 年在台北 101 AMBI SPACE ONE 舉辦個展《萬物公式》。

2026 年，兩件委託新作在台灣設計展展出，七月到法國 IRCAM 駐地，創作《The Last Input》。

2024 年在陽明交通大學開了一學期的〈生成式演算互動藝術實作〉。

### 課堂上會拆的作品

- 《靈魂魚》Personal Structures，威尼斯，2024。第 3 堂拆過：魚身上的旗子，就是一條鏈條
- 《萬物公式》個展，台北 101 AMBI SPACE ONE，2023。第 6 堂（課綱）：TouchDesigner 的 3D 世界
- 《演算詩篇：夢境與孤寂的邊界》沉浸式演奏會，華山 1914，2025。第 4 堂（課綱）：聲音與視覺怎麼一起運算
- 《瓶中的永恆花園》臺法沉浸式內容駐地開發計畫，2024。第 7 堂（課綱）：體感互動

### 一封信

小學的時候，我在玩 Flash，幫班上架官網。國中開始用逐格動畫加攝影加 Flash 做作品，拿到宏碁數位創作獎首獎。高中迷上 After Effects 和 3D 渲染，大學讀了電機系，在寫 AutoCAD 的巨集。

但我一直不知道，我做的這些事情，加在一起叫什麼。

後來我去了紐約。NYU 的研究室裡，我第一次看到有人用程式碼畫畫、用數學公式讓花開出來。原來我從小做的事情，有名字。

如果當時有人給我一張地圖，告訴我「嘿，這個世界長這樣，有這些工具、這些社群、這些可能性」，也許不需要十年。這堂課就是那張地圖。我不打算教你成為專家，11 堂課做不到。但我可以在 11 週裡，帶你走過我花了十年才看見的風景，然後你可以自己選擇要往哪裡走。

> 與其把知識壁壘起來，不如把土壤變肥沃一點。
>
> ——吳哲宇

## 學員怎麼說

### 這一期同學在作業裡寫的

> 「這次嘗試與 AI 協作，AI 秒速寫完初版，然後再花數小時當家教，一行行慢慢教我、慢慢一起改。」
>
> ——第 1 堂〈稻田 Paddy Field〉

> 「願每個人都有自己的花期，終將綻放。這次玩得很開心～」
>
> ——第 2 堂〈花-盛開〉

> 「概念是常見的四種要素：墨、霓、藤、絲。每次開啟都能隨機抽到其中一款筆刷自由創作。」
>
> ——第 0 堂〈《抽筆》 Draw a Brush〉

### 這一期的同學（匿名）

> 「從蓋印章到粒子系統，感覺像是跨了一個世界 XDD」
>
> ——第 2 堂直播聊天室

> 「循序漸進地帶到各種觀念，深淺也很剛好……想要深入時可以自己課後再慢慢玩模組查資料。」
>
> ——第 2 堂，看回放

> 「面對程式小白，老師鼓勵我們，沒有打擊挫敗我們」
>
> ——第 2 堂課後回饋

> 「跟不上，不過可看回放，就沒什麼問題」
>
> ——第 0 堂課後回饋

> 「實際操作外，也有解說原理……不只是學會模板，更有想像空間」
>
> ——第 0 堂課後回饋

> 「確實瞭解這些演算法及實作的眉角」
>
> ——第 3 堂課後回饋

### 哲宇之前的 Hahow 課

> 「老師的節奏循序漸進，每個步驟都講解非常清楚，不管是想從０開始或是想精進技能，都是網頁工程師、網頁設計師的必修課！而且跟著作業做完已後，就有超高質量的作品集，找工作或實習都變得輕鬆很多！」
>
> ——Hahow〈動畫互動網頁程式入門〉

> 「在YT聽老師分享各種創作藝術的用途如互動櫥窗及建築光雕等，才了解到創作藝術的可能性，也因為上過哲宇老師開的網頁動畫特效入門，親自感受到內容有多豐富，所以當這門課程推出時立馬手刀報名，也感謝哲宇老師作為創作藝術者分享各種知識及貢獻。」
>
> ——Hahow〈互動藝術程式創作入門〉

> 「這是一堂對於完全零基礎的初學者來說相當友善的課。自己目前是以自學方式在學習網頁設計，在網路上看到許多人都推薦如果要踏入網頁設計這條路必定要看老師的教學影片，簡單易懂，適時地提出作業也能督促自己反覆地去練習。目前還在追進度，很期待自己的第一個網頁設計作品。」
>
> ——Hahow〈動畫互動網頁程式入門〉

> 「老師豐沛的視覺設計及程式知識，無私教授令我感受到想提昇學生專業技能的用心，此次課程講解很多在基礎上的觀念，需一再重複複習與思考，課程範例比上次更加精采絕倫，非常推薦想進入前端網頁程式自我提昇的人，必、有、收、穫。(好老師不多了，還好我們眼前有一個，真的很幸運。)」
>
> ——Hahow〈動畫互動網頁特效入門〉

> 「這是一堂由淺入深，相當扎實的網頁入門課程 老師的口條清晰，邏輯清楚。 非常適合什麼都不懂的初學者來入門 從頭開始慢慢聽，慢慢練習 收穫幫助非常多 我本來只是略懂ＣＳＳ 聽完這堂課，很多基礎觀念都理解了。 作品的成形也更加輕鬆 非常推薦這堂課！」
>
> ——Hahow〈動畫互動網頁程式入門〉

> 「我完全沒有程式基礎，但老師的課讓我不這麼害怕接觸程式，還有點期待自己可以怎麼應用，課程也是循序漸進，手把手的教學，但因為只能用下班時間學習，所以學習很龜速，但我還是很喜歡老師的課」
>
> ——Hahow〈互動藝術程式創作入門〉

## 常見問題

### 已經開課了，現在加入來得及嗎？

來得及。已經上完的堂，回放都在 Hahow，直播後兩天內上架，接下來的直播可以一起上。

### 完全沒寫過程式，跟得上嗎？

可以上，但前幾堂會吃力。第 0 堂從註冊 OpenProcessing 開始，一路寫到會動的畫。不少同學的做法是直播先聽懂概念，回放再跟著打，卡住的地方貼上 Discord 問。

### 每週要花多少時間？

直播 2.5 小時（週二 19:00 到 21:30），加上作業。課前問卷 110 份裡，47% 的同學每週留 1 到 3 小時，38% 留 3 小時以上。前 3 堂只看回放的同學填了 8 份回饋，8 份都說節奏剛好。

### 直播時間到不了，會錯過嗎？

不會。每一堂都錄下來，直播後兩天內上架 Hahow，沒有觀看期限。

### 人在國外、有時差，能上嗎？

可以。回放沒有觀看期限，作業交到 Hahow、問題貼 Discord，不用跟直播同一個時間。這一期也有同學在國外上。

### 我已經會 p5.js 或 TouchDesigner，會不會太基礎？

前幾堂可以當快速複習，重點放在第 5 到 10 堂的整合與應用。

### 需要買什麼設備？TouchDesigner 要錢嗎？

一台能跑 TouchDesigner 的電腦（建議 8GB 記憶體以上），Mac 和 Windows 都可以，TouchDesigner 用免費版就夠上完這門課。筆電內建的鏡頭和麥克風就夠。MIDI 控制器是選配，第 8 堂會用到。

### 作業怎麼交？誰會看？

每一堂上完有一份作業，下一堂直播前一天 21:00 前交到 Hahow 作業區。哲宇會在下一堂之前看過，開場挑幾件出來講。第 9 堂期末發表，每個人的作品哲宇都會線上點評。

### 上完可以接案嗎？

沒辦法保證。這門課給你一張地圖和 8 件作品。商業案怎麼做、作品怎麼走到現場，哲宇會講他自己走過的路。

### 上課要用 Discord 嗎？

要。報名後到 Hahow 的課程公告找 Discord 邀請，直播連結、問答和作業分享都在那裡。

### 跟《互動藝術程式創作入門》差在哪？

《互動藝術程式創作入門》是一堂工具課，帶你從零學會用 p5.js 做互動藝術。這堂課要帶你看清新媒體藝術的全貌：有哪些路徑、工具之間怎麼銜接、商業案怎麼做、AI 時代怎麼持續創作。工具從 p5.js、TouchDesigner、MediaPipe 到 AI 工具組，修過舊課的人會往前走一大步，新手可以把它當成進這個領域的第一張地圖。

### 跟 MonoLab 的 TouchDesigner 課差在哪？

這堂是入門全景，11 週看完整個領域。MonoLab 平台上的 TouchDesigner 課是進階深入，適合已經知道方向的人。一個是地圖，一個是持續專精。

## 11 週完成 8 件作品，打造你的個人創作流

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


---

正式網址：https://newmediaart.course.monolab.world/live
Kind: page

# 直播

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

每週二 19:00 的直播入口：本週講綱、開播倒數、上一堂的作業與課程筆記。

- **時間**：每週二 19:00–21:30。11 堂直播，回放沒有觀看期限。
- **作業**：每堂一份。下一堂開場，一起看大家的作業。

[加到行事曆（ics 檔）](https://newmediaart.course.monolab.world/calendar.ics)

## 11 堂直播時間

1. [第 0 堂〈新媒體藝術的全景地圖〉](https://newmediaart.course.monolab.world/lesson/00)　9/22（二） 19:00–21:30・OpenProcessing
2. [第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01)　9/29（二） 19:00–21:30・p5.js
3. [第 2 堂〈數學之美：向量與粒子〉](https://newmediaart.course.monolab.world/lesson/02)　10/6（二） 19:00–21:30・p5.js
4. [第 3 堂〈自然的演算法〉](https://newmediaart.course.monolab.world/lesson/03)　10/13（二） 19:00–21:30・p5.js
5. [第 4 堂〈聲音 × 視覺：音頻分析〉](https://newmediaart.course.monolab.world/lesson/04)　10/20（二） 19:00–21:30・p5.js + 麥克風
6. [第 5 堂〈TouchDesigner 入門〉](https://newmediaart.course.monolab.world/lesson/05)　11/10（二） 19:00–21:30・TD
7. [第 6 堂〈TouchDesigner 進階〉](https://newmediaart.course.monolab.world/lesson/06)　11/17（二） 19:00–21:30・TD
8. [第 7 堂〈體感互動〉](https://newmediaart.course.monolab.world/lesson/07)　11/24（二） 19:00–21:30・TD + MediaPipe
9. [第 8 堂〈系統整合 × 音像表演〉](https://newmediaart.course.monolab.world/lesson/08)　12/1（二） 19:00–21:30・全工具
10. [第 9 堂〈學員作品發表講評會〉](https://newmediaart.course.monolab.world/lesson/09)　12/15（二） 19:00–21:30・自選
11. [第 10 堂〈AI 協作 × 創作永續〉](https://newmediaart.course.monolab.world/lesson/10)　12/22（二） 19:00–21:30・AI 工具組合

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


---

正式網址：https://newmediaart.course.monolab.world/course
Kind: page

# 11 堂路徑

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

從 p5.js 的第一行程式、數學與自然的演算法，到聲音視覺、TouchDesigner、體感互動與音像表演：11 堂的主題、作品與難度曲線。

每週二 19:00–21:30 直播，一週一堂，網址每週都一樣：[直播頁](https://newmediaart.course.monolab.world/live)。[加到行事曆（ics 檔）](https://newmediaart.course.monolab.world/calendar.ics)

## p5.js：在瀏覽器裡畫畫

- [第 0 堂〈新媒體藝術的全景地圖〉](https://newmediaart.course.monolab.world/lesson/00)　9/22（二） 19:00–21:30・OpenProcessing　新媒體藝術的全景地圖、11 週怎麼走、用 AI 的態度，第一次在 OpenProcessing 寫出會動的畫，做出第一幅生成藝術（啟發）
- [第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01)　9/29（二） 19:00–21:30・p5.js　環境設定、畫布、動態圖形、隨機性，做出動態幾何作品（友善入門）
- [第 2 堂〈數學之美：向量與粒子〉](https://newmediaart.course.monolab.world/lesson/02)　10/6（二） 19:00–21:30・p5.js　向量、力場、粒子系統，做出Flow Field 作品（友善入門）
- [第 3 堂〈自然的演算法〉](https://newmediaart.course.monolab.world/lesson/03)　10/13（二） 19:00–21:30・p5.js　Boids 群聚、L-system 生長、有機模擬，做出群聚／生長動態（穩步爬升）
- [第 4 堂〈聲音 × 視覺：音頻分析〉](https://newmediaart.course.monolab.world/lesson/04)　10/20（二） 19:00–21:30・p5.js + 麥克風　麥克風輸入、音頻分析、音像共感（p5.js 畢業作），做出音像互動作品（穩步爬升）

## TouchDesigner：節點與空間

- [第 5 堂〈TouchDesigner 入門〉](https://newmediaart.course.monolab.world/lesson/05)　11/10（二） 19:00–21:30・TD　節點式思維、TOP／CHOP／SOP 基礎、2D 視覺，做出第一個 TouchDesigner 作品（換工具，放慢）
- [第 6 堂〈TouchDesigner 進階〉](https://newmediaart.course.monolab.world/lesson/06)　11/17（二） 19:00–21:30・TD　3D 世界、材質、光影、影像處理，做出3D 視覺作品（換工具，放慢）
- [第 7 堂〈體感互動〉](https://newmediaart.course.monolab.world/lesson/07)　11/24（二） 19:00–21:30・TD + MediaPipe　MediaPipe 手勢與身體追蹤、即時影像互動，做出體感互動作品（進階應用）

## 整合、發表與之後

- [第 8 堂〈系統整合 × 音像表演〉](https://newmediaart.course.monolab.world/lesson/08)　12/1（二） 19:00–21:30・全工具　把所有工具串起來，做一場即時演出，做出音像表演 demo（進階應用）
- [第 9 堂〈學員作品發表講評會〉](https://newmediaart.course.monolab.world/lesson/09)　12/15（二） 19:00–21:30・自選　學員分享作品，哲宇線上點評，做出個人完整作品（收尾）
- [第 10 堂〈AI 協作 × 創作永續〉](https://newmediaart.course.monolab.world/lesson/10)　12/22（二） 19:00–21:30・AI 工具組合　AI 作為創作夥伴；讓創作持續發生的工作流，做出你自己的創作系統（延伸）

## 沒有直播的週

- 10/27（二）：期中作品製作
- 11/3（二）：期中作品製作
- 12/8（二）：期末作品製作

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


---

正式網址：https://newmediaart.course.monolab.world/works
Kind: work

# 大家的作品

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

這一期同學在直播課堂與作業裡做出的 92 件生成藝術作品，附作者與 OpenProcessing 連結。

## 第 0 堂〈新媒體藝術的全景地圖〉

- 作業：class1 作業。印章生成 https://openprocessing.org/sketch/3027049/embed/ 幾何圖案 https://openprocessing.org/sketch/3027080/embed 做成Mockup 水波紋…　[OpenProcessing](https://openprocessing.org/sketch/3027049/embed/)
- 作業：螺旋Rasen。https://openprocessing.org/@chuntsai/3021101　[OpenProcessing](https://openprocessing.org/@chuntsai/3021101)
- 作業：可愛花朵與可愛貓貓~ 喵~。原本是想要做星空、櫻花等，但是目前功力還不夠，無法做出理想的效果，在找參考圖時看到了花叢和貓咪，於是就先用這個做為主題啦~　[OpenProcessing](https://openprocessing.org/@ycs77/3023921)
- 作業：磚頭與圓圈花紋。第一週與第二週課程直播的綜合練習，想像力還在培養中......參考資料：pin.it　[OpenProcessing](https://openprocessing.org/@noirklyn2fa7/3024479)
- 作業：雜訊城市(?)。https://openprocessing.org/@hybert7004/3020927 原本想畫一些比較具象的物體ex：鳥，鼠標，但後來發現技術跟想像力不太夠，後來看到一些類似glitch的方格跟拖曳感之後就想說能簡單地將畫布一分為…　[OpenProcessing](https://openprocessing.org/@hybert7004/3020927)
- 作業：泡沫筆刷
- 作業：rhythm #0。從 artblocks.io 作品獲取靈感，搭配隨機數創作鼓點跳動　[OpenProcessing](https://openprocessing.org/@u288673/3025703)
- 作業：盲人拉胚
- 作業：《抽筆》 Draw a Brush。概念為常見的四種要素墨、霓、藤、絲，每次開啟時能隨機抽到其中一款筆刷自由創作，每一款筆刷有不同的特性待使用者發掘　[OpenProcessing](https://openprocessing.org/@Ruyuang/3024526)
- 作業：AI art 動態圖。動態圖
- 作業：line pattern。https://openprocessing.org/@u76476/3022658　[OpenProcessing](https://openprocessing.org/@u76476/3022658)
- 作業：Rasen
- 作業：Moontrace。構想是因為中秋節，所以想要用月亮當作主題～　[OpenProcessing](https://openprocessing.org/@wujue/3015527?v=2)
- 作業：作業。作業＿L0
- 作業：雖然數學不熟，但在 AI 輔助下將幾何公式轉化為極光花，體會到程式創作的無限可能　[OpenProcessing](https://openprocessing.org/@ohana/3022503)
- 作業：點擊=加速。復古DVD畫面過程中，我學習到: - 3d色彩變化rejection sampling - class 和 list 運用- 微調用戶體驗初始參數　[OpenProcessing](https://openprocessing.org/@K18503/3022563)
- 作業：花開花落。花朵會隨著鼠標進行花開與花落，隨著越來越多的花開與花落，在“地面”（畫布）上會逐漸呈現出類似 “凋零的花朵掉滿地” 的視覺感受。此為簡單運用第一週課程所學，輔以一點 AI 協助完成的小作品作業。　[OpenProcessing](https://openprocessing.org/sketch/3015708)
- 作業：Abstract Chromatography。靈感來源（pin.it）　[OpenProcessing](https://openprocessing.org/@triviak/3021437)
- 作業：Circles。Circles Inspired by artblocks.io　[OpenProcessing](https://openprocessing.org/@nickhu/3022454)
- 作業：20 Windblown Lines　[OpenProcessing](https://openprocessing.org/@cyking/3022404)
- 作業：蒲公英。https://openprocessing.org/@3RH/3019915 ▼Mood Board　[OpenProcessing](https://openprocessing.org/@3RH/3019915)
- 作業：Aurora 極光繪製。找參考資料的時候覺得極光很適合練習第一堂課的內容，雖然應該很多人做過但新手就不求什麼突破性的創意了～拿來練基本功剛剛好　[OpenProcessing](https://openprocessing.org/@qwer565891/3021510)
- 作業：Bouncing Sheep。是一個活在異次元的羊咩，跟著滑鼠的動作進行擺動、跳躍　[OpenProcessing](https://openprocessing.org/@u232194/3018182)
- 作業：TeaBall。構想是使用者可以倒入不同顏色的茶品，然後可以透過搖晃混合出隨機的畫面，這裡嘗試使用Gemeni協助撰寫程式並加入互動功能，畫面繪製完成後存檔，再生成mockup，雖然跟腦海想要呈現的有差距，但結果還挺有趣的。　[OpenProcessing](https://openprocessing.org/@bh9986900bh/3020858)
- 作業：作品一：動態幾何
- 課堂作品：彩虹條紋。方塊疊出的直條紋，左側一道斜帶
- 課堂作品：7 秒 WebM 錄影。圓角方塊繞圈旋轉
- 課堂作品：表情筆刷。粉色方臉，灰底
- 課堂作品：貓頭鷹。彩色貓頭鷹疊滿畫面
- 課堂作品：旋轉方塊。藍紫半透明圓角方塊繞一圈
- 課堂作品：弧線加旋轉。灰底上的黃色細線螺旋
- 課堂作品：弧線加旋轉。紅黃放射條紋的鸚鵡螺，黑底（1 個愛心）
- 課堂作品：弧線加旋轉。青色細線螺旋
- 課堂作品：弧線加旋轉。白色線圈上下串成一列，黑底
- 課堂作品：弧線加旋轉。灰白細線繞成圓環
- 課堂作品：弧線加旋轉。白色細線在黑底捲成號角形
- 課堂作品：表情筆刷。紫藍小方臉，灰底
- 課堂作品：表情筆刷。橘、黃、綠的大方臉
- 課堂作品：表情筆刷。綠色與棕色小方臉，連程式一起截
- 課堂作品：表情筆刷。藍色方臉疊滿畫面，連程式一起截

[第 0 堂的頁面](https://newmediaart.course.monolab.world/lesson/00)

## 第 1 堂〈第一個生成藝術作品〉

- 作業：Rain。討厭下雨 但在網頁裡面下雨還不錯🤣　[OpenProcessing](https://openprocessing.org/@wujue/3027945)
- 作業：水　[OpenProcessing](https://openprocessing.org/@K18503/3027942)
- 作業：嚴肅的臉。作品靈感：instagram.com　[OpenProcessing](https://openprocessing.org/@triviak/3027812)
- 作業：開花。作業連結:https://openprocessing.org/@Bing-Yu-Hsieh/3027863 利用ai幫忙做了一個可以隨機顏色、位置長大的花，跟預想的還是有差別。　[OpenProcessing](https://openprocessing.org/@Bing-Yu-Hsieh/3027863)
- 作業：稻田 Paddy Field。設計過程：hahow.in上次手刻程式，這次嘗試與 AI 協作實現更好的效果～（AI秒速寫完初版然後再花數小時當家教一行行慢慢教我慢慢一起改）　[OpenProcessing](https://openprocessing.org/@qwer565891/3027739)
- 作業：taiwan roof/roots。作品連結 https://openprocessing.org/@peal256/3025512 鳥瞰台灣的都市，常常你會發現一大片都是鐵皮屋。有人覺得鐵皮屋屋頂很醜，但我覺得鐵皮屋屋頂是因應台灣氣候與經濟背景下的產物，代表著台灣特定的一…　[OpenProcessing](https://openprocessing.org/@peal256/3025512)
- 作業：abstract character #3。變裝魔法師，靈感來自： pin.it 。使用 vetex 畫出所有節點，然後連線，通過隨機顏色實現變裝，眼珠會看向滑鼠位置；手的前方是一顆大魔法球，點擊畫布隨機生成一組魔法球　[OpenProcessing](https://openprocessing.org/@u288673/3027081)
- 作業：Petals in the Mist。作業_L1 Work with Claude AI “Petals in the Mist” by Tiff Wen License Creative Commons Attribution NonCommercial ShareAlik…　[OpenProcessing](https://openprocessing.org/@u147453/3022826)
- 作業：Petals in the Mist。Petals in the Mist Find some ideas from pinterest and work with Claude AI.
- 作業：breathing city。作業連結https://openprocessing.org/@celinetung/3023913 窗戶燈光忽明忽暗，滑鼠滑到建築物上建築物也跟著移動　[OpenProcessing](https://openprocessing.org/@celinetung/3023913)
- 作業：記憶格子。記憶像是交錯的格子，有時清楚，有時模糊，時間的球繼續跑著作品互動性: 滑鼠點擊切換顏色參考資料: pinterest.com　[OpenProcessing](https://openprocessing.org/@u232194/3024622)
- 作業：Dancing Cube。https://openprocessing.org/@3RH/3026665 ▼Mood Board 1.做基本型。之後要分三個部分上色,所以用三個平行四邊形拼湊。　[OpenProcessing](https://openprocessing.org/@3RH/3026665)
- 作業：動態幾何:流動的波。靈感版:https://pin.it/5KqmnUp7Y 作品連結:https://openprocessing.org/@u492491/3026988 跟AI協作~　[OpenProcessing](https://openprocessing.org/@u492491/3026988)
- 作業：L.H. #1。還在補做第一堂的練習...為什麼大家都那麼強🫠
- 作業：AI Art動態圖。Art動態圖
- 課堂作品：筆刷。7 秒動圖，黑色墨點筆刷，滑鼠拖出一串小點，停下來的地方長成大團墨圓，白底
- 課堂作品：筆刷。青色半透明的刷痕，中間夾著一串黃紅色的小圖片印章，黑底
- 課堂作品：筆刷。深淺藍的印章疊成彎曲的帶子，疊越多顏色越深，用了 blendMode(MULTIPLY)，白底
- 課堂作品：筆刷。粉藍、綠褐的圖片碎片當長方形筆刷，拼貼成一團，白底
- 課堂作品：筆刷。黃、淡紫、青綠三種筆刷的寬帶交錯鋪滿畫面，點滑鼠切換筆刷
- 課堂作品：筆刷。淺藍色的印章沿彎曲的路徑疊成一條立體的帶子，白底
- 課堂作品：筆刷。3 秒錄影，橘色與青灰的細線放射狀刷出好幾圈圓弧，黑底
- 課堂作品：筆刷。「失控的筆刷」，圖片印章沿弧線密密排成一圈圈黃綠色環帶，灰底
- 課堂作品：花。彩虹色八片半透明橢圓花瓣，背景是淡彩色塊
- 課堂作品：花。6.5 秒錄影，青綠、米黃的細長花瓣繞白色圓心轉，一排排往外放射，黑底
- 課堂作品：花。粉橘、紫、深藍的橢圓花瓣疊成厚片漩渦，黃色圓心，黑底
- 課堂作品：花。藍綠六邊形和粉橘、紫色五邊形繞黃色圓心排成一圈，深色底
- 課堂作品：花。6 秒錄影，紅、白、淺藍、深藍的橢圓花瓣，轉起來甩出大片放射狀的殘影，黑底
- 課堂作品：花。6 秒動圖，青綠、米黃的橢圓花瓣繞灰色圓心旋轉，一路疊出厚厚的殘影，黑底
- 課堂作品：花。灰藍、紫紅的長六角形花瓣繞著米白圓心轉成漩渦，黑底
- 課堂作品：花。紅、粉、黃、米白的十二片橢圓花瓣，灰底上留著一圈圈旋轉的殘影

[第 1 堂的頁面](https://newmediaart.course.monolab.world/lesson/01)

## 第 2 堂〈數學之美：向量與粒子〉

- 作業：作業L2_Flowing Stones。嘗試老師上課中提到的幾個內容，與clade AI協作： 畫布肌理疊加 circle packing 連續亂數 希望可以陸續疊加成類似參考圖中層次更為豐富的效果！“Flowing Stones” by Tiff Wen https://op…　[OpenProcessing](https://openprocessing.org/@u147453/3031863)
- 作業：小船　[OpenProcessing](https://openprocessing.org/@K18503/3029530)
- 作業：.傷心小棧(hearts)。彈力球物理運動，練習經典 Windows 接龍獲勝時的卡牌連鎖彈跳　[OpenProcessing](https://openprocessing.org/@ohana/3028016)
- 作業：迷彩。所以就往迷彩發展透過調整參數增加路徑的複雜度以及改變粒子大小最後請ＡＩ幫忙加入雜點材質增加畫面質感（openprocessing.org）第二個練習也是透過同樣的方式發展選擇色票之後開始調整運動方式最後做出紙膠帶的感覺　[OpenProcessing](https://openprocessing.org/@peal256/3032584)
- 作業：A Million of Rockets / Crazy Circuit。A Million of Rockets Crazy Circuit（openprocessing.org）　[OpenProcessing](https://openprocessing.org/@nickhu/3032898)
- 作業：幻視粒子。粒子韻律感、動態延續以及有機的疊感加方式，令人想到日本動畫對於自然現象的動態筆觸　[OpenProcessing](https://openprocessing.org/@u232194/3029169)
- 作業：Glow Christmas(微光聖誕)。透過三角形限制小球生長，加上Noise 與三色色票，產出隨風搖曳的魔幻聖誕樹 https://openprocessing.org/@ohana/3032583　[OpenProcessing](https://openprocessing.org/@ohana/3032583)
- 作業：海中氣球。https://openprocessing.org/@3RH/3032564 ▼Mood Board　[OpenProcessing](https://openprocessing.org/@3RH/3032564)
- 作業：粒子變化。利用上次教的做了兩個練習。氣流下雨天（openprocessing.org）　[OpenProcessing](https://openprocessing.org/@poopoo199710/3031990)
- 作業：Flowing Stones。嘗試老師上課中提到的幾個內容，與clade AI協作：畫布肌理疊加circle packing連續亂數希望可以陸續疊加成類似參考圖中層次更為豐富的效果！
- 作業：粒子變化練習。（openprocessing.org）粒子變化渲染　[OpenProcessing](https://openprocessing.org/@Bing-Yu-Hsieh/3031855)
- 作業：splashmind/NO! worries。夏天快結束了，享受最後一次噴泉灑落的沁涼吧（openprocessing.org）那少年維持著煩惱，專心在他的煩惱；剪不斷，理還亂　[OpenProcessing](https://openprocessing.org/@sammm30/3028058)
- 作業：數學之美：自然生長。融合向量中的3個練習，將粒子動態利用noise 達到樹狀感的向上延伸，與將「彈跳的球」修改成花朵，利用life 將花朵消失～作品沒有很美請見諒，但主要想把關鍵字理解清楚。樹狀圖沒有很樹狀，目前比較像草，想知道怎麼修改達到樹狀感呢？　[OpenProcessing](https://openprocessing.org/@Shu-tasi/3032411)
- 作業：星空、蛇、重生。以梵谷的星空為概念做發想（openprocessing.org）以蛇作為發想（openprocessing.org）送給化療完的朋友，以重生做為概念，並參考老師的原始碼調整主要先練習其中一個部分。　[OpenProcessing](https://openprocessing.org/@chuntsai/3032366)
- 作業：花-盛開。願每個人都有自己的花期 終將綻放ps這次玩的很開心～　[OpenProcessing](https://openprocessing.org/@u492491/3031360)
- 課堂作品：粒子槍。10 秒錄影，粉彩色的圓從滑鼠的位置噴出、往下落
- 課堂作品：一顆球。黑底右下一顆深藍色的圓
- 課堂作品：流場。青藍、天藍、紫色的粒子軌跡在黑底上順著 noise 旋成一片片漩渦
- 課堂作品：粒子噴泉。6 秒錄影，黑底上彩色粒子往上噴、落下時拖出一串串珠子般的弧線

[第 2 堂的頁面](https://newmediaart.course.monolab.world/lesson/02)

## 第 3 堂〈自然的演算法〉

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

[第 3 堂的頁面](https://newmediaart.course.monolab.world/lesson/03)

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


---

正式網址：https://newmediaart.course.monolab.world/tools
Kind: tool

# 互動教學模組

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

48 個可以直接在瀏覽器裡玩的教學模組：座標、迴圈、向量、noise、粒子、遞迴、L-System、Boids，每一個都附 p5.js 程式碼。

## 基礎

- [座標探索：(0, 0) 在左上角](https://newmediaart.course.monolab.world/tools/coords)：畫布左上角是 (0, 0)，往右 x 變大、往下 y 變大；circle 的 x、y 是圓心，rect 是左上角。
- [setup 跑一次，draw 一直跑](https://newmediaart.course.monolab.world/tools/setupdraw)：setup() 按下 Play 時跑一次，draw() 每秒重複很多次；沒有 background() 就會留下軌跡。
- [取座標小工具：點一下，變成 vertex](https://newmediaart.course.monolab.world/tools/vertex)：beginShape() 開始、一個一個 vertex(x, y) 放點、endShape(CLOSE) 收尾，就能畫任意形狀；點一下畫布取座標，程式碼跟著多一行。

## 程式結構

- [變數是抽屜：x = x + 速度](https://newmediaart.course.monolab.world/tools/variable)：變數像一個抽屜，存起來、叫名字拿回來；x = x + 速度 放在 draw() 裡，保留上一格的狀態，球就會動。
- [for 迴圈：一圈一圈看它畫](https://newmediaart.course.monolab.world/tools/forloop)：for 迴圈把一件事重複很多次：i 從 1 開始，每圈加 1，小於 n 就繼續。
- [兩層 for 迴圈：排出一面格子](https://newmediaart.course.monolab.world/tools/grid)：for 裡面再包一層 for 就是格子；用 % 餘數決定哪一格換色，就能排出花磚那種規律。
- [函數：把一朵花打包成 drawFlower()](https://newmediaart.course.monolab.world/tools/func)：函數把重複的步驟打包、取名字，參數讓每次畫得不一樣；有名字的模組，也最好跟 AI 協作。

## 畫布操作

- [translate／rotate／scale：動的是那張紙](https://newmediaart.course.monolab.world/tools/transform)：translate、rotate、scale 動的是畫布（那張紙），不是圖形本身。
- [push／pop：畫完就把紙轉回來](https://newmediaart.course.monolab.world/tools/pushpop)：push() 保存畫布狀態、pop() 還原，每一圈都從同一張紙開始；先移再轉和先轉再移，結果不一樣。
- [表情筆刷：把一張臉變成筆刷](https://newmediaart.course.monolab.world/tools/facebrush)：translate 到滑鼠之後，五官只要算相對位置；共用同一個變數，兩隻眼睛才不會鬥雞眼。

## 數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)：arc() 畫一段沒畫完的橢圓；配上 rotate(frameCount) 讓它每一格多轉一點、順便長大。
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)：sin 在 −1 到 1 之間來回擺，map 把它換算成 0 到 255，就能當成會呼吸的顏色。
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)：點在圓上轉，左右是 cos、上下是 sin；把 sin 隨時間畫下來就是波浪，(r·cos, r·sin) 能排成一圈。
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)：random(a, b) 每次在 a 到 b 之間抽一個數；randomSeed() 把籤筒順序固定，同一個種子永遠同一組結果。
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)：random() 每次都是全新的籤、會跳；noise() 相鄰的輸入得到相近的值、會流動，像山脈和水流。「裡面除・外面除」模式：noise(x / 10) 的 10 管取樣多平順，外面再除管力量多大。
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)：向量＝往哪個方向、走多遠；可以相加（頭接尾）、旋轉、放大縮小，一直累加就是在畫一條路徑。
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)：每一格：速度加到位置上、加速度加到速度上；拖曳把球丟出去，撞到邊就反彈。
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)：把 noise 的值換成角度，畫面上每一格都有一支箭頭；粒子走到哪一格，就被那一格的箭頭推著走。
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)：幾百顆粒子跟著力場走，不清畫面、只蓋一層很淡的底色，軌跡就留下來變成畫。
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)：每一個力都是一支向量，applyForce 把它們加進加速度；質量越大越難推動，每一格最後要把加速度歸零。
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)：目標減掉自己的位置，就是「往那裡去」的向量；調成固定長度當成力，粒子就會被滑鼠吸過去或推開。
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)：發射器每一格生出新粒子，粒子帶著壽命慢慢變淡，死掉就從陣列移除；陣列長度會穩定在一個數字。
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)：每一顆星都拉著其他所有的星：力跟質量成正比、跟距離平方成反比。拖曳丟出一顆星，看它繞行、被吞掉或被甩出去。
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)：noise(x, y, z) 是在一片連續的地形上取值：除得越大、步子越小，相鄰兩點越接近，所以越連續；z 換一個數字就是換一張切片，v.x 和 v.y 用不同切片才不會都往同一個方向。

## 自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)：海龜只懂 F（前進畫線）和 + − （轉彎）；translate 走到線尾、rotate 轉向，就是 p5 的海龜，也是 L-System 與遞迴樹的地基。
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)：遞迴就是函式呼叫自己：branch 畫一段、走到尾端、左右各分一枝，每多一層數量翻倍（2 的 n 次方）；也可以看成粒子壽命到了就分裂成兩顆，走過的路就是樹枝。
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)：L-System 分兩步：先把字串一代一代替換、越換越長，再交給海龜畫（F 畫線、+ − 轉向、[ 記住位置、] 回到記住的位置）。
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)：碎形是放大看細節還是跟整體一樣；每層把形狀拆成幾個縮小的自己，數量隨深度成倍成長（Koch 雪花、Sierpinski 三角形、圓中圓、H 樹）。
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)：Craig Reynolds 的 Boids：每隻鳥只看感知半徑內的鄰居，守分離、對齊、聚合三條規則，沒有領頭的鳥，鳥群自己長出來。
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)：一串點，頭追滑鼠，每一點用「距離固定」和「夾角限制」兩條規則跟著前一點；再沿脊椎的法線依寬度畫出蛇或魚的身體。
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)：noise(x / scl, y / scl) 給每個點一個 0–1 的高度：按高度分段上色是地圖，畫高度相同的線是等高線，一排排往下畫是山脈剪影。
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)：半徑加上 noise 就是不規則的圈；noise 要用 (cos(a)*k, sin(a)*k) 取值，走回起點值一樣，圈才接得起來，用 noise(a) 取值接縫會斷；每圈換第三個座標就長成年輪。
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)：每格在隨機位置試著放新圓，被別的圓蓋住就放棄；圓一直長大，dist() 小於兩半徑相加加間隙就停，慢慢塞滿，縫隙被小圓填掉（Circle Packing）。
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)：把 Boids 一隻鳥的一步拆成七個向量操作：找鄰居、分離、對齊、聚合、轉向（力＝想要的速度－現在的速度）、合力、更新；畫面一步一步畫箭頭，程式碼放在旁邊，亮起來的行就是現在這一步。

## 聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)：麥克風、鼓機、鍵盤都會叫同一組回呼（kickDetected、notePressed…），畫面的程式不用改；開場先看整堂的地圖。
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)：聲音是空氣的振動：波有多高是多大聲（振幅），一秒振動幾次是多高（頻率，赫茲）；可以聽、可以用麥克風看自己的聲音。
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)：一小段波形算 RMS、換成分貝，再把一段分貝夾成 0..1，就是 oav-p5 的 micLevel；為什麼要用分貝：耳朵聽的是比例；底線會跟著房間的底噪走。
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)：一個聲音裡同時有很多頻率，FFT 把它拆開；oav-p5 把它分成低、中、高三段（20–250、250–2000、2000–8000 Hz）。
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)：比最近的平均大一截、而且離上一下超過 100 毫秒，就算一下；拍手容易算、講話不容易。
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)：map() 把 0..1 換成大小、顏色、速度、數量；constrain 夾住範圍；換一條曲線，小聲也看得到。
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)：照秒數追上去：上升、下降各一個秒數（跟 TouchDesigner 的 Lag CHOP 同一件事）；lerp 會因為電腦快慢手感不同。
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)：一下事件跳到 1 再慢慢回到 0（TouchDesigner 的 Trigger CHOP）；attack、decay 兩個秒數；連打會重新觸發。
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)：一小節切成 16 格，播放頭每格往前一步；BPM 決定一格多長；這就是 Demo 2 那張鼓機卡。
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)：空白等分、* 加快、~ 休息、[ ] 擠進一拍、逗號疊層、(3,8)、< >：每個字都對得到時間軸上的一下，正在響的字會亮；打錯會標出第幾個字；下面同時看放進 16 格的樣子。
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)：把 k 下盡量平均地放進 n 格；很多傳統節奏就是它（(3,8)、(5,8)）；第三個數字是晚幾格開始；大鼓、小鼓、鈸三圈疊起來就是 bd(3,8), sd(2,8,2), hh(5,8)。
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)：60 ÷ BPM 是一拍幾秒；一小節 4 拍 16 步；drumPhase、beatPhase 連續地走；cue() 在第幾小節觸發。
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)：note 0–127（60 是中央 C）、velocity 是按多用力、旋鈕 0–127 變成 0..1；底下傳的是三個位元組。
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)：MIDI 號碼換成頻率；一個八度繞一圈就是色相環；音高也可以變成 x 位置；和弦是一個幾何形狀。

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


---

正式網址：https://newmediaart.course.monolab.world/tools/coords
Kind: tool

# 座標探索：(0, 0) 在左上角

正式網址：https://newmediaart.course.monolab.world/tools/coords

畫布左上角是 (0, 0)，往右 x 變大、往下 y 變大；circle 的 x、y 是圓心，rect 是左上角。

- **分類**：基礎
- **概念**：座標、座標系、滑鼠位置、圓心
- **p5.js**：circle()、rect()、mouseX、mouseY
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・基礎

- [setup 跑一次，draw 一直跑](https://newmediaart.course.monolab.world/tools/setupdraw)
- [取座標小工具：點一下，變成 vertex](https://newmediaart.course.monolab.world/tools/vertex)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/setupdraw
Kind: tool

# setup 跑一次，draw 一直跑

正式網址：https://newmediaart.course.monolab.world/tools/setupdraw

setup() 按下 Play 時跑一次，draw() 每秒重複很多次；沒有 background() 就會留下軌跡。

- **分類**：基礎
- **概念**：程式結構、動畫、軌跡、影格
- **p5.js**：setup()、draw()、frameRate()、background()
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・基礎

- [座標探索：(0, 0) 在左上角](https://newmediaart.course.monolab.world/tools/coords)
- [取座標小工具：點一下，變成 vertex](https://newmediaart.course.monolab.world/tools/vertex)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/vertex
Kind: tool

# 取座標小工具：點一下，變成 vertex

正式網址：https://newmediaart.course.monolab.world/tools/vertex

beginShape() 開始、一個一個 vertex(x, y) 放點、endShape(CLOSE) 收尾，就能畫任意形狀；點一下畫布取座標，程式碼跟著多一行。

- **分類**：基礎
- **概念**：形狀、頂點、座標、多邊形、取座標
- **p5.js**：beginShape()、vertex()、endShape()、mouseX、mouseY、print()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・基礎

- [座標探索：(0, 0) 在左上角](https://newmediaart.course.monolab.world/tools/coords)
- [setup 跑一次，draw 一直跑](https://newmediaart.course.monolab.world/tools/setupdraw)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/variable
Kind: tool

# 變數是抽屜：x = x + 速度

正式網址：https://newmediaart.course.monolab.world/tools/variable

變數像一個抽屜，存起來、叫名字拿回來；x = x + 速度 放在 draw() 裡，保留上一格的狀態，球就會動。

- **分類**：程式結構
- **概念**：變數、資料、狀態、累加、條件、反彈
- **p5.js**：let、if、width
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・程式結構

- [for 迴圈：一圈一圈看它畫](https://newmediaart.course.monolab.world/tools/forloop)
- [兩層 for 迴圈：排出一面格子](https://newmediaart.course.monolab.world/tools/grid)
- [函數：把一朵花打包成 drawFlower()](https://newmediaart.course.monolab.world/tools/func)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/forloop
Kind: tool

# for 迴圈：一圈一圈看它畫

正式網址：https://newmediaart.course.monolab.world/tools/forloop

for 迴圈把一件事重複很多次：i 從 1 開始，每圈加 1，小於 n 就繼續。

- **分類**：程式結構
- **概念**：迴圈、重複
- **p5.js**：for、circle()
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・程式結構

- [變數是抽屜：x = x + 速度](https://newmediaart.course.monolab.world/tools/variable)
- [兩層 for 迴圈：排出一面格子](https://newmediaart.course.monolab.world/tools/grid)
- [函數：把一朵花打包成 drawFlower()](https://newmediaart.course.monolab.world/tools/func)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/grid
Kind: tool

# 兩層 for 迴圈：排出一面格子

正式網址：https://newmediaart.course.monolab.world/tools/grid

for 裡面再包一層 for 就是格子；用 % 餘數決定哪一格換色，就能排出花磚那種規律。

- **分類**：程式結構
- **概念**：迴圈、巢狀迴圈、格子、餘數、花磚、規律、重複
- **p5.js**：for、%、rect()、fill()、random()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・程式結構

- [變數是抽屜：x = x + 速度](https://newmediaart.course.monolab.world/tools/variable)
- [for 迴圈：一圈一圈看它畫](https://newmediaart.course.monolab.world/tools/forloop)
- [函數：把一朵花打包成 drawFlower()](https://newmediaart.course.monolab.world/tools/func)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/func
Kind: tool

# 函數：把一朵花打包成 drawFlower()

正式網址：https://newmediaart.course.monolab.world/tools/func

函數把重複的步驟打包、取名字，參數讓每次畫得不一樣；有名字的模組，也最好跟 AI 協作。

- **分類**：程式結構
- **概念**：函數、參數、模組化、打包、重複、AI 協作
- **p5.js**：function、push()、pop()、translate()、rotate()、ellipse()、TWO_PI
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・程式結構

- [變數是抽屜：x = x + 速度](https://newmediaart.course.monolab.world/tools/variable)
- [for 迴圈：一圈一圈看它畫](https://newmediaart.course.monolab.world/tools/forloop)
- [兩層 for 迴圈：排出一面格子](https://newmediaart.course.monolab.world/tools/grid)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/transform
Kind: tool

# translate／rotate／scale：動的是那張紙

正式網址：https://newmediaart.course.monolab.world/tools/transform

translate、rotate、scale 動的是畫布（那張紙），不是圖形本身。

- **分類**：畫布操作
- **概念**：畫布、移動、旋轉、縮放、座標
- **p5.js**：translate()、rotate()、scale()
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・畫布操作

- [push／pop：畫完就把紙轉回來](https://newmediaart.course.monolab.world/tools/pushpop)
- [表情筆刷：把一張臉變成筆刷](https://newmediaart.course.monolab.world/tools/facebrush)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/pushpop
Kind: tool

# push／pop：畫完就把紙轉回來

正式網址：https://newmediaart.course.monolab.world/tools/pushpop

push() 保存畫布狀態、pop() 還原，每一圈都從同一張紙開始；先移再轉和先轉再移，結果不一樣。

- **分類**：畫布操作
- **概念**：畫布、狀態、保存、還原、順序、旋轉
- **p5.js**：push()、pop()、translate()、rotate()、radians()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・畫布操作

- [translate／rotate／scale：動的是那張紙](https://newmediaart.course.monolab.world/tools/transform)
- [表情筆刷：把一張臉變成筆刷](https://newmediaart.course.monolab.world/tools/facebrush)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/facebrush
Kind: tool

# 表情筆刷：把一張臉變成筆刷

正式網址：https://newmediaart.course.monolab.world/tools/facebrush

translate 到滑鼠之後，五官只要算相對位置；共用同一個變數，兩隻眼睛才不會鬥雞眼。

- **分類**：畫布操作
- **概念**：筆刷、相對位置、變數、畫布
- **p5.js**：translate()、scale()、rotate()、mouseX、mouseY
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・畫布操作

- [translate／rotate／scale：動的是那張紙](https://newmediaart.course.monolab.world/tools/transform)
- [push／pop：畫完就把紙轉回來](https://newmediaart.course.monolab.world/tools/pushpop)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/arc
Kind: tool

# 弧線遊樂場：一段弧線怎麼長成鸚鵡螺

正式網址：https://newmediaart.course.monolab.world/tools/arc

arc() 畫一段沒畫完的橢圓；配上 rotate(frameCount) 讓它每一格多轉一點、順便長大。

- **分類**：數學
- **概念**：角度、弧度、弧線、鸚鵡螺、動畫
- **p5.js**：arc()、radians()、rotate()、frameCount
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/sinmap
Kind: tool

# sin → map → 顏色

正式網址：https://newmediaart.course.monolab.world/tools/sinmap

sin 在 −1 到 1 之間來回擺，map 把它換算成 0 到 255，就能當成會呼吸的顏色。

- **分類**：數學
- **概念**：三角函數、擺盪、換算、顏色
- **p5.js**：sin()、map()、fill()、frameCount
- **誕生**：[第 0 堂](https://newmediaart.course.monolab.world/lesson/00)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/sincos
Kind: tool

# sin 與 cos：一個點繞圓，影子在上下與左右擺

正式網址：https://newmediaart.course.monolab.world/tools/sincos

點在圓上轉，左右是 cos、上下是 sin；把 sin 隨時間畫下來就是波浪，(r·cos, r·sin) 能排成一圈。

- **分類**：數學
- **概念**：三角函數、圓、波浪、角度、週期
- **p5.js**：sin()、cos()、radians()、translate()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/random
Kind: tool

# random()：每一次都抽一支新的籤

正式網址：https://newmediaart.course.monolab.world/tools/random

random(a, b) 每次在 a 到 b 之間抽一個數；randomSeed() 把籤筒順序固定，同一個種子永遠同一組結果。

- **分類**：數學
- **概念**：隨機、亂數、範圍、種子、分布
- **p5.js**：random()、randomSeed()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/noise
Kind: tool

# noise() vs random()：會跳的亂數和會流動的亂數

正式網址：https://newmediaart.course.monolab.world/tools/noise

random() 每次都是全新的籤、會跳；noise() 相鄰的輸入得到相近的值、會流動，像山脈和水流。「裡面除・外面除」模式：noise(x / 10) 的 10 管取樣多平順，外面再除管力量多大。

- **分類**：數學
- **概念**：雜訊、Perlin noise、隨機、自然、地形、流動、除數、取樣間距
- **p5.js**：noise()、random()
- **誕生**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/vector
Kind: tool

# 向量：一支有方向、有長度的箭頭

正式網址：https://newmediaart.course.monolab.world/tools/vector

向量＝往哪個方向、走多遠；可以相加（頭接尾）、旋轉、放大縮小，一直累加就是在畫一條路徑。

- **分類**：數學
- **概念**：向量、方向、長度、向量相加、旋轉、累加
- **p5.js**：createVector()、add()、rotate()、mult()、mag()、heading()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/particle
Kind: tool

# 一顆粒子：位置、速度、加速度

正式網址：https://newmediaart.course.monolab.world/tools/particle

每一格：速度加到位置上、加速度加到速度上；拖曳把球丟出去，撞到邊就反彈。

- **分類**：數學
- **概念**：粒子、位置、速度、加速度、重力、反彈
- **p5.js**：createVector()、add()、limit()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/flowfield
Kind: tool

# 力場：用 noise 給每一格一個方向

正式網址：https://newmediaart.course.monolab.world/tools/flowfield

把 noise 的值換成角度，畫面上每一格都有一支箭頭；粒子走到哪一格，就被那一格的箭頭推著走。

- **分類**：數學
- **概念**：力場、Flow Field、向量場、Perlin noise、粒子
- **p5.js**：noise()、p5.Vector.fromAngle()、add()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/trails
Kind: tool

# 粒子系統：很多顆粒子，留下軌跡

正式網址：https://newmediaart.course.monolab.world/tools/trails

幾百顆粒子跟著力場走，不清畫面、只蓋一層很淡的底色，軌跡就留下來變成畫。

- **分類**：數學
- **概念**：粒子系統、軌跡、Flow Field、陣列、class
- **p5.js**：noise()、background()、stroke()、line()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/forces
Kind: tool

# 很多力加在一起：重力、風、阻力

正式網址：https://newmediaart.course.monolab.world/tools/forces

每一個力都是一支向量，applyForce 把它們加進加速度；質量越大越難推動，每一格最後要把加速度歸零。

- **分類**：數學
- **概念**：力、合力、重力、風、阻力、質量、牛頓第二定律
- **p5.js**：applyForce()、add()、div()、mult()、createVector()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/attractor
Kind: tool

# 吸引與排斥：往滑鼠走的粒子

正式網址：https://newmediaart.course.monolab.world/tools/attractor

目標減掉自己的位置，就是「往那裡去」的向量；調成固定長度當成力，粒子就會被滑鼠吸過去或推開。

- **分類**：數學
- **概念**：向量相減、方向、吸引、排斥、距離、粒子
- **p5.js**：p5.Vector.sub()、setMag()、normalize()、dist()、limit()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/emitter
Kind: tool

# 粒子的生與死：發射器與壽命

正式網址：https://newmediaart.course.monolab.world/tools/emitter

發射器每一格生出新粒子，粒子帶著壽命慢慢變淡，死掉就從陣列移除；陣列長度會穩定在一個數字。

- **分類**：數學
- **概念**：粒子系統、發射器、壽命、陣列、class、splice
- **p5.js**：class、push()、splice()、random()、fill()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/cosmos
Kind: tool

# 宇宙模擬器：萬有引力

正式網址：https://newmediaart.course.monolab.world/tools/cosmos

每一顆星都拉著其他所有的星：力跟質量成正比、跟距離平方成反比。拖曳丟出一顆星，看它繞行、被吞掉或被甩出去。

- **分類**：數學
- **概念**：萬有引力、重力、軌道、N 體模擬、向量、粒子系統、宇宙
- **p5.js**：p5.Vector.sub()、magSq()、setMag()、constrain()、createVector()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [noise 怎麼取值：步長與切片](https://newmediaart.course.monolab.world/tools/noiseslice)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/noiseslice
Kind: tool

# noise 怎麼取值：步長與切片

正式網址：https://newmediaart.course.monolab.world/tools/noiseslice

noise(x, y, z) 是在一片連續的地形上取值：除得越大、步子越小，相鄰兩點越接近，所以越連續；z 換一個數字就是換一張切片，v.x 和 v.y 用不同切片才不會都往同一個方向。

- **分類**：數學
- **概念**：noise、Perlin noise、步長、連續、切片、三維、力場
- **p5.js**：noise()、map()、createVector()
- **誕生**：[第 2 堂](https://newmediaart.course.monolab.world/lesson/02)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・數學

- [弧線遊樂場：一段弧線怎麼長成鸚鵡螺](https://newmediaart.course.monolab.world/tools/arc)
- [sin → map → 顏色](https://newmediaart.course.monolab.world/tools/sinmap)
- [sin 與 cos：一個點繞圓，影子在上下與左右擺](https://newmediaart.course.monolab.world/tools/sincos)
- [random()：每一次都抽一支新的籤](https://newmediaart.course.monolab.world/tools/random)
- [noise() vs random()：會跳的亂數和會流動的亂數](https://newmediaart.course.monolab.world/tools/noise)
- [向量：一支有方向、有長度的箭頭](https://newmediaart.course.monolab.world/tools/vector)
- [一顆粒子：位置、速度、加速度](https://newmediaart.course.monolab.world/tools/particle)
- [力場：用 noise 給每一格一個方向](https://newmediaart.course.monolab.world/tools/flowfield)
- [粒子系統：很多顆粒子，留下軌跡](https://newmediaart.course.monolab.world/tools/trails)
- [很多力加在一起：重力、風、阻力](https://newmediaart.course.monolab.world/tools/forces)
- [吸引與排斥：往滑鼠走的粒子](https://newmediaart.course.monolab.world/tools/attractor)
- [粒子的生與死：發射器與壽命](https://newmediaart.course.monolab.world/tools/emitter)
- [宇宙模擬器：萬有引力](https://newmediaart.course.monolab.world/tools/cosmos)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/turtle
Kind: tool

# 海龜繪圖：往前走、轉彎

正式網址：https://newmediaart.course.monolab.world/tools/turtle

海龜只懂 F（前進畫線）和 + − （轉彎）；translate 走到線尾、rotate 轉向，就是 p5 的海龜，也是 L-System 與遞迴樹的地基。

- **分類**：自然的演算法
- **概念**：海龜繪圖、Turtle Graphics、指令字串、translate、rotate、L-System 地基
- **p5.js**：translate()、rotate()、line()、angleMode()、triangle()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/recursion
Kind: tool

# 遞迴分裂：一個變兩個

正式網址：https://newmediaart.course.monolab.world/tools/recursion

遞迴就是函式呼叫自己：branch 畫一段、走到尾端、左右各分一枝，每多一層數量翻倍（2 的 n 次方）；也可以看成粒子壽命到了就分裂成兩顆，走過的路就是樹枝。

- **分類**：自然的演算法
- **概念**：遞迴、函式呼叫自己、分裂、2 的 n 次方、粒子壽命、植物分枝
- **p5.js**：push()、pop()、translate()、rotate()、line()、randomSeed()、createVector()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/lsystem
Kind: tool

# L-System：用一條字串長出植物

正式網址：https://newmediaart.course.monolab.world/tools/lsystem

L-System 分兩步：先把字串一代一代替換、越換越長，再交給海龜畫（F 畫線、+ − 轉向、[ 記住位置、] 回到記住的位置）。

- **分類**：自然的演算法
- **概念**：L-System、公理、替換規則、遞迴、海龜繪圖、自相似、植物
- **p5.js**：line()、cos()、sin()、radians()、randomSeed()、random()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/fractal
Kind: tool

# 碎形：自己裡面還有自己

正式網址：https://newmediaart.course.monolab.world/tools/fractal

碎形是放大看細節還是跟整體一樣；每層把形狀拆成幾個縮小的自己，數量隨深度成倍成長（Koch 雪花、Sierpinski 三角形、圓中圓、H 樹）。

- **分類**：自然的演算法
- **概念**：碎形、Fractal、自相似、遞迴、指數成長、Koch 雪花、Sierpinski
- **p5.js**：triangle()、circle()、line()、lerpColor()、createVector()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/boids
Kind: tool

# Boids 群聚：三條規則，沒有領頭

正式網址：https://newmediaart.course.monolab.world/tools/boids

Craig Reynolds 的 Boids：每隻鳥只看感知半徑內的鄰居，守分離、對齊、聚合三條規則，沒有領頭的鳥，鳥群自己長出來。

- **分類**：自然的演算法
- **概念**：群聚、Boids、分離、對齊、聚合、轉向力、感知半徑、鳥群
- **p5.js**：createVector()、p5.Vector.sub()、dist()、setMag()、limit()、heading()、triangle()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/chain
Kind: tool

# 鏈條：兩條限制，長出會游的身體

正式網址：https://newmediaart.course.monolab.world/tools/chain

一串點，頭追滑鼠，每一點用「距離固定」和「夾角限制」兩條規則跟著前一點；再沿脊椎的法線依寬度畫出蛇或魚的身體。

- **分類**：自然的演算法
- **概念**：鏈條、距離限制、角度限制、脊椎、法線、反向運動學、生物
- **p5.js**：p5.Vector.sub()、p5.Vector.add()、setMag()、heading()、constrain()、beginShape()、vertex()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/terrain
Kind: tool

# 地形：noise 就是一張高度圖

正式網址：https://newmediaart.course.monolab.world/tools/terrain

noise(x / scl, y / scl) 給每個點一個 0–1 的高度：按高度分段上色是地圖，畫高度相同的線是等高線，一排排往下畫是山脈剪影。

- **分類**：自然的演算法
- **概念**：地形、高度圖、Perlin noise、等高線、山脈線、海平面、noiseDetail
- **p5.js**：noise()、noiseDetail()、noiseSeed()、rect()、beginShape()、vertex()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/rings
Kind: tool

# 年輪：用 noise 繞一個圈

正式網址：https://newmediaart.course.monolab.world/tools/rings

半徑加上 noise 就是不規則的圈；noise 要用 (cos(a)*k, sin(a)*k) 取值，走回起點值一樣，圈才接得起來，用 noise(a) 取值接縫會斷；每圈換第三個座標就長成年輪。

- **分類**：自然的演算法
- **概念**：年輪、cos 與 sin、半徑加 noise、接縫、第三座標、生長動畫
- **p5.js**：noise()、cos()、sin()、beginShape()、vertex()、endShape()、lerpColor()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/circlepack
Kind: tool

# 圓填滿：一個一個長大，互不重疊

正式網址：https://newmediaart.course.monolab.world/tools/circlepack

每格在隨機位置試著放新圓，被別的圓蓋住就放棄；圓一直長大，dist() 小於兩半徑相加加間隙就停，慢慢塞滿，縫隙被小圓填掉（Circle Packing）。

- **分類**：自然的演算法
- **概念**：Circle Packing、圓填滿、碰撞偵測、距離判斷、隨機試放、細胞
- **p5.js**：dist()、circle()、random()、lerpColor()、class
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [Boids 向量解剖：一隻鳥怎麼算出下一步](https://newmediaart.course.monolab.world/tools/boidsvec)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/boidsvec
Kind: tool

# Boids 向量解剖：一隻鳥怎麼算出下一步

正式網址：https://newmediaart.course.monolab.world/tools/boidsvec

把 Boids 一隻鳥的一步拆成七個向量操作：找鄰居、分離、對齊、聚合、轉向（力＝想要的速度－現在的速度）、合力、更新；畫面一步一步畫箭頭，程式碼放在旁邊，亮起來的行就是現在這一步。

- **分類**：自然的演算法
- **概念**：向量相減、向量相加、頭接尾、平均、轉向力、權重、Boids
- **p5.js**：createVector()、setMag()、limit()、sub()、add()、mult()、div()、dist()、filter()
- **誕生**：[第 3 堂](https://newmediaart.course.monolab.world/lesson/03)

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・自然的演算法

- [海龜繪圖：往前走、轉彎](https://newmediaart.course.monolab.world/tools/turtle)
- [遞迴分裂：一個變兩個](https://newmediaart.course.monolab.world/tools/recursion)
- [L-System：用一條字串長出植物](https://newmediaart.course.monolab.world/tools/lsystem)
- [碎形：自己裡面還有自己](https://newmediaart.course.monolab.world/tools/fractal)
- [Boids 群聚：三條規則，沒有領頭](https://newmediaart.course.monolab.world/tools/boids)
- [鏈條：兩條限制，長出會游的身體](https://newmediaart.course.monolab.world/tools/chain)
- [地形：noise 就是一張高度圖](https://newmediaart.course.monolab.world/tools/terrain)
- [年輪：用 noise 繞一個圈](https://newmediaart.course.monolab.world/tools/rings)
- [圓填滿：一個一個長大，互不重疊](https://newmediaart.course.monolab.world/tools/circlepack)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/threeinputs
Kind: tool

# 喊、敲、彈：同一個畫面，三種聲音進來

正式網址：https://newmediaart.course.monolab.world/tools/threeinputs

麥克風、鼓機、鍵盤都會叫同一組回呼（kickDetected、notePressed…），畫面的程式不用改；開場先看整堂的地圖。

- **分類**：聲音 × 視覺
- **概念**：回呼、回呼函式、輸入、麥克風、鼓機、鍵盤、oav-p5
- **p5.js**：kickDetected()、snareDetected()、hatDetected()、notePressed()、startMic()、startDrums()、startSound()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/wave
Kind: tool

# 聲音是一條波：多大聲、多高

正式網址：https://newmediaart.course.monolab.world/tools/wave

聲音是空氣的振動：波有多高是多大聲（振幅），一秒振動幾次是多高（頻率，赫茲）；可以聽、可以用麥克風看自己的聲音。

- **分類**：聲音 × 視覺
- **概念**：振幅、頻率、赫茲、sin、波形、聲音
- **p5.js**：sin()、map()、TWO_PI、beginShape()、vertex()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/miclevel
Kind: tool

# 音量 micLevel：從波形到 0..1

正式網址：https://newmediaart.course.monolab.world/tools/miclevel

一小段波形算 RMS、換成分貝，再把一段分貝夾成 0..1，就是 oav-p5 的 micLevel；為什麼要用分貝：耳朵聽的是比例；底線會跟著房間的底噪走。

- **分類**：聲音 × 視覺
- **概念**：RMS、分貝、micLevel、靈敏度、0..1、音量
- **p5.js**：micLevel、micSensitivity()、circle()、constrain()、map()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/spectrum
Kind: tool

# 頻譜：bass、mid、treble

正式網址：https://newmediaart.course.monolab.world/tools/spectrum

一個聲音裡同時有很多頻率，FFT 把它拆開；oav-p5 把它分成低、中、高三段（20–250、250–2000、2000–8000 Hz）。

- **分類**：聲音 × 視覺
- **概念**：頻譜、FFT、低音、中音、高音、頻段
- **p5.js**：bass、mid、treble

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/beat
Kind: tool

# 節拍偵測：什麼時候算「一下」

正式網址：https://newmediaart.course.monolab.world/tools/beat

比最近的平均大一截、而且離上一下超過 100 毫秒，就算一下；拍手容易算、講話不容易。

- **分類**：聲音 × 視覺
- **概念**：節拍、起音、門檻、beat、RMS
- **p5.js**：beat、beatDetected()、kickDetected()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/mapping
Kind: tool

# 對應：把聲音的數字變成畫面

正式網址：https://newmediaart.course.monolab.world/tools/mapping

map() 把 0..1 換成大小、顏色、速度、數量；constrain 夾住範圍；換一條曲線，小聲也看得到。

- **分類**：聲音 × 視覺
- **概念**：對應、範圍、曲線、map、constrain、pow、sqrt
- **p5.js**：map()、constrain()、pow()、sqrt()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/lag
Kind: tool

# lag：數字用追的，不要用跳的

正式網址：https://newmediaart.course.monolab.world/tools/lag

照秒數追上去：上升、下降各一個秒數（跟 TouchDesigner 的 Lag CHOP 同一件事）；lerp 會因為電腦快慢手感不同。

- **分類**：聲音 × 視覺
- **概念**：平滑、lag、Lag CHOP、TouchDesigner、秒數、時間常數、lerp
- **p5.js**：lag()、lerp()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/envelope
Kind: tool

# env：打一下就是一個包絡

正式網址：https://newmediaart.course.monolab.world/tools/envelope

一下事件跳到 1 再慢慢回到 0（TouchDesigner 的 Trigger CHOP）；attack、decay 兩個秒數；連打會重新觸發。

- **分類**：聲音 × 視覺
- **概念**：包絡、觸發、attack、decay、Trigger CHOP、重新觸發
- **p5.js**：env()、trigger()、startDrums()、scale()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/sequencer
Kind: tool

# 16 步音序器：時間一格一格走

正式網址：https://newmediaart.course.monolab.world/tools/sequencer

一小節切成 16 格，播放頭每格往前一步；BPM 決定一格多長；這就是 Demo 2 那張鼓機卡。

- **分類**：聲音 × 視覺
- **概念**：音序器、鼓機、格子、BPM、小節
- **p5.js**：startDrums()、drumStep、drumBar、kickDetected()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/rhythmline
Kind: tool

# 一行字寫節奏

正式網址：https://newmediaart.course.monolab.world/tools/rhythmline

空白等分、* 加快、~ 休息、[ ] 擠進一拍、逗號疊層、(3,8)、< >：每個字都對得到時間軸上的一下，正在響的字會亮；打錯會標出第幾個字；下面同時看放進 16 格的樣子。

- **分類**：聲音 × 視覺
- **概念**：節奏、mini-notation、Strudel、TidalCycles、時間軸、三連音、量化
- **p5.js**：startDrums()、drawRhythm()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/euclid
Kind: tool

# 歐幾里得節奏：k 下平均分在 n 格

正式網址：https://newmediaart.course.monolab.world/tools/euclid

把 k 下盡量平均地放進 n 格；很多傳統節奏就是它（(3,8)、(5,8)）；第三個數字是晚幾格開始；大鼓、小鼓、鈸三圈疊起來就是 bd(3,8), sd(2,8,2), hh(5,8)。

- **分類**：聲音 × 視覺
- **概念**：歐幾里得節奏、節奏、圓、旋轉、Toussaint、tresillo
- **p5.js**：startDrums()、drawRhythm()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/timeclock
Kind: tool

# 小節、拍、步：BPM 換成秒

正式網址：https://newmediaart.course.monolab.world/tools/timeclock

60 ÷ BPM 是一拍幾秒；一小節 4 拍 16 步；drumPhase、beatPhase 連續地走；cue() 在第幾小節觸發。

- **分類**：聲音 × 視覺
- **概念**：BPM、小節、拍、相位、時間軸、cue
- **p5.js**：drumPhase、beatPhase、cue()、cueFired()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/midikeys
Kind: tool

# MIDI：一個音是一個號碼加一個力度

正式網址：https://newmediaart.course.monolab.world/tools/midikeys

note 0–127（60 是中央 C）、velocity 是按多用力、旋鈕 0–127 變成 0..1；底下傳的是三個位元組。

- **分類**：聲音 × 視覺
- **概念**：MIDI、note、velocity、CC、0..127、鍵盤、旋鈕
- **p5.js**：notePressed()、noteReleased()、knob1、map()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [音高變顏色、變位置](https://newmediaart.course.monolab.world/tools/pitchcolor)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/tools/pitchcolor
Kind: tool

# 音高變顏色、變位置

正式網址：https://newmediaart.course.monolab.world/tools/pitchcolor

MIDI 號碼換成頻率；一個八度繞一圈就是色相環；音高也可以變成 x 位置；和弦是一個幾何形狀。

- **分類**：聲音 × 視覺
- **概念**：音高、頻率、八度、色相、色相環、和弦
- **p5.js**：map()、notePressed()、colorMode()

拉滑桿、看畫面，旁邊的程式碼會跟著變，整段複製到 OpenProcessing 就能跑。

## 同類模組・聲音 × 視覺

- [喊、敲、彈：同一個畫面，三種聲音進來](https://newmediaart.course.monolab.world/tools/threeinputs)
- [聲音是一條波：多大聲、多高](https://newmediaart.course.monolab.world/tools/wave)
- [音量 micLevel：從波形到 0..1](https://newmediaart.course.monolab.world/tools/miclevel)
- [頻譜：bass、mid、treble](https://newmediaart.course.monolab.world/tools/spectrum)
- [節拍偵測：什麼時候算「一下」](https://newmediaart.course.monolab.world/tools/beat)
- [對應：把聲音的數字變成畫面](https://newmediaart.course.monolab.world/tools/mapping)
- [lag：數字用追的，不要用跳的](https://newmediaart.course.monolab.world/tools/lag)
- [env：打一下就是一個包絡](https://newmediaart.course.monolab.world/tools/envelope)
- [16 步音序器：時間一格一格走](https://newmediaart.course.monolab.world/tools/sequencer)
- [一行字寫節奏](https://newmediaart.course.monolab.world/tools/rhythmline)
- [歐幾里得節奏：k 下平均分在 n 格](https://newmediaart.course.monolab.world/tools/euclid)
- [小節、拍、步：BPM 換成秒](https://newmediaart.course.monolab.world/tools/timeclock)
- [MIDI：一個音是一個號碼加一個力度](https://newmediaart.course.monolab.world/tools/midikeys)

[回到全部模組](https://newmediaart.course.monolab.world/tools)

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


---

正式網址：https://newmediaart.course.monolab.world/snippets
Kind: snippet

# 常用指令

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

上課一直會用到的 p5.js 小段程式：存圖、重來、全螢幕、粒子模板、麥克風測試，複製就能貼進 OpenProcessing。

## 起手模板

### 粒子起手模板：Hahow Week 3-0 Particle Template

講師的粒子模板（OpenProcessing 上直接 Fork）：Particle 的 update() 寫規則、draw() 寫長相；開頭三行 OPC 是拉桿、顏色、色盤，邊跑邊調。這份多補了四條常用規則（重力、noise 力場、追滑鼠、分裂），先註解掉，一次打開一條。之後有粒子的示範都從這裡開始。

最快：到 OpenProcessing 打開 https://openprocessing.org/@cheyuwu/3033176 按 Fork（OPC 函式庫已經開好）。自己貼進空白草圖的話，要到草圖設定的 Libraries 打開 OP Configurator 3000，不然會報 OPC is not defined。先跑起來，拉拉桿；再到 update() 打開一條規則、改數字看它變成什麼；想換長相就改 draw()。

```js
// Hahow Week 3-0 Particle Template（講師的 OpenProcessing 版：https://openprocessing.org/@cheyuwu/3033176 ，直接 Fork 最快）
// 用到 OPC 拉桿：OpenProcessing 草圖設定的 Libraries 要打開「OP Configurator 3000」（Fork 就有）
let particles = [];
OPC.slider('radius', 50, 10, 100); // 拉桿：名字、預設、最小、最大
OPC.color('ballColor', '#fff'); // 顏色
OPC.palette('currentPalette', [ // 色盤：點一下換下一組
  ['#eabfcb', '#c191a1', '#a4508b', '#5f0a87', '#2f004f'],
  ['#c3dfe0', '#bcd979', '#9dad6f', '#7d6d61', '#5e574d'],
  ['#4464ad', '#a4b0f5', '#f58f29', '#7d4600', '#466995'],
]);

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}

function draw() {
  background(100);
  // 新增粒子
  for (let i = 0; i < 10; i++) {
    // 用物件格式傳遞參數
    let newP = new Particle({
      p: createVector(mouseX, mouseY),
      v: p5.Vector.random2D(),
      // color: ballColor,
      color: random(currentPalette),
      r: radius,
    });
    particles.push(newP);
  }
  // 更新與繪製所有粒子
  particles.forEach((p) => {
    p.update();
    p.draw();
  });
  // 保留存活的粒子
  particles = particles.filter((p) => p.alive);
}

// ── 以下是 ParticleClass 分頁 ──
class Particle {
  // 用物件格式接收引數 obj {a:1} -> obj.a
  constructor(args) {
    let def = {
      p: createVector(0, 0), // 位置
      v: createVector(0, 0), // 速度
      a: createVector(0, 0), // 加速度
      r: 50, // 半徑
      color: color(255),
      life: 100, // 還能活幾格
      alive: true, // 是否活著
    };
    // 覆蓋預設值（如果有引數）
    Object.assign(def, args);
    Object.assign(this, def);
  }
  // 每次更新的邏輯
  update() {
    this.life--; // 生命 -1
    this.r *= 0.99; // 半徑逐漸變小
    if (this.life < 0) {
      this.alive = false;
    }
    // ── 常用規則（這份多補的，OpenProcessing 模板上沒有）：複製一行、拿掉 // 就打開 ──
    // 重力：this.a = createVector(0, 0.1);
    // noise 力場：this.a = p5.Vector.fromAngle(noise(this.p.x * 0.005, this.p.y * 0.005) * TWO_PI * 2).mult(0.1);
    // 追滑鼠：this.a = p5.Vector.sub(createVector(mouseX, mouseY), this.p).setMag(0.1);
    // 分裂：if (this.life === 0 && particles.length < 3000) for (let k = 0; k < 2; k++) particles.push(new Particle({ p: this.p.copy(), v: p5.Vector.random2D(), r: this.r, color: this.color }));
    // 位置/速度/加速度更新
    this.p.add(this.v);
    this.v.add(this.a);
  }
  // 繪製
  draw() {
    push();
    fill(this.color);
    translate(this.p.x, this.p.y);
    circle(0, 0, this.r);
    pop();
  }
}
```

### OPC 拉桿：把數字變成邊跑邊調的控制項

OpenProcessing 的函式庫 OP Configurator 3000（OPC）：把 let radius = 10 換成 OPC.slider(...)，畫面旁邊就多一根拉桿，不用改程式、不用重跑就能試數字。拉桿、開關、顏色、下拉選單都有。

在 OpenProcessing 的草圖設定打開 Libraries 的 OP Configurator 3000（沒打開會報 OPC is not defined）。把想試的數字從 let 改成 OPC.slider，畫面旁邊出現拉桿就可以邊跑邊調；調到喜歡的數字記下來。分享時網址加 ?sketch_radius=30 可以換預設值。

```js
// OPC（OP Configurator 3000）：把數字變成拉桿，邊跑邊調。說明：https://github.com/msawired/OPC
// OpenProcessing：草圖設定的 Libraries 打開「OP Configurator 3000」（Fork 講師的粒子模板就已經開好）
// 原本寫 let radius = 10; 的地方換成下面這行；radius 是我取的名字，OPC.slider 是函式庫的指令。不要再 let 一次 radius
OPC.slider('radius', 10, 10, 100); // 名字、預設、最小、最大
OPC.slider('count', 10, 1, 50, 1); // 第五個數字：每格跳多少
OPC.toggle('trail', false); // 開關：true／false
OPC.color('bg', '#646464'); // 顏色

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(bg);
}

function draw() {
  if (!trail) background(bg); // trail 關掉才清畫面
  for (let i = 0; i < count; i++) {
    circle(mouseX + random(-radius, radius), mouseY + random(-radius, radius), radius * 0.3);
  }
}

// 拉桿一動就會叫這個函式（名字是 OPC 規定的）
function parameterChanged(name, value) {
  if (name === 'bg') background(value);
}
```

## 自然的演算法

### 海龜繪圖：照字串畫線

一個 turtle(cmds, len, angle) 函式，讀一串指令照著走：F 前進畫線、+ 和 - 轉向、[ 記住位置、] 回到位置，改字串就改圖形。

只把最底下的 turtle() 整個複製進自己的 sketch，在 draw() 裡先 translate() 到出發點，再呼叫 turtle(字串, 步長, 角度)；字串裡的 [ ] 一定要成對。

```js
// 海龜繪圖：照字串畫。F 前進畫線，+ 右轉，- 左轉，[ 記住位置，] 回到位置
function setup() {
  createCanvas(640, 420);
}

function draw() {
  background(18, 25, 40);
  stroke(135, 218, 160);
  strokeWeight(2);
  push();
  translate(110, 150); // 海龜從這裡出發，預設朝右
  turtle('F+F+F+F+F', 110, 144); // 五角星：走一邊轉 144 度，共五次
  pop();
  push();
  translate(470, 400);
  rotate(-HALF_PI); // 先轉成朝上
  turtle('FF[+F[+F]-F][-F[-F]+F]', 40, 25); // 小樹：括號裡是分枝，畫完回到分岔點
  pop();
}

// 海龜：cmds 是指令字串，len 是每步長度，angle 是每次轉幾度
function turtle(cmds, len, angle) {
  for (let c of cmds) {
    if (c === 'F') {
      line(0, 0, len, 0);
      translate(len, 0); // 往前走一步：座標原點跟著海龜移動
    } else if (c === '+') rotate(radians(angle));
    else if (c === '-') rotate(-radians(angle));
    else if (c === '[') push(); // 記住現在的位置和方向
    else if (c === ']') pop(); // 回到上一次記住的地方
  }
}
```

### L-System：規則換字長出一棵樹

一個 grow(axiom, rules, n) 函式，把起始字串照規則改寫 n 代（F 換成 F[+F]F[-F]F）再交給畫字串函式，字串越長樹越茂密，點一下多長一代。

把 grow() 和 drawString() 複製進自己的 sketch，在 setup() 用 grow(起始字, 規則, 代數) 算好字串，draw() 裡 translate() 到出發點再 drawString()；改 RULES 就是改樹的長相。

```js
// L-System：每一代把字串裡的 F 換成規則，再用海龜畫出來。點一下多長一代
const RULES = { F: 'F[+F]F[-F]F' };
let gen = 3;
let sentence;

function setup() {
  createCanvas(640, 420);
  sentence = grow('F', RULES, gen);
}

function draw() {
  background(18, 25, 40);
  stroke(135, 218, 160);
  strokeWeight(1.5);
  translate(width / 2, height - 20); // 從畫面底部中間長出來
  rotate(-HALF_PI); // 朝上
  drawString(sentence, 60 / pow(2, gen), 25); // 每多一代，步長減半
}

function mousePressed() {
  gen = gen % 4 + 1; // 1 到 4 代輪流
  sentence = grow('F', RULES, gen);
}

// 長 n 代：每一代都讀舊字串、寫進新字串（不能邊讀邊改自己）
function grow(axiom, rules, n) {
  let s = axiom;
  for (let i = 0; i < n; i++) {
    let next = '';
    for (let c of s) next += rules[c] || c; // 有規則就換，沒有就原樣留下
    s = next;
  }
  return s;
}

// 照字串畫（跟 turtle-draw 的 turtle 是同一套，兩段一起用只要留一份）
function drawString(cmds, len, angle) {
  for (let c of cmds) {
    if (c === 'F') {
      line(0, 0, len, 0);
      translate(len, 0);
    } else if (c === '+') rotate(radians(angle));
    else if (c === '-') rotate(-radians(angle));
    else if (c === '[') push();
    else if (c === ']') pop();
  }
}
```

### 遞迴樹：branch 自己呼叫自己

一個 branch(len, depth, angle) 函式，畫一段樹枝再往左右各長兩根短一點的，depth 減到 0 就停；範例從畫面底部長一棵，滑鼠左右移動改分枝角度。

複製 branch() 進自己的 sketch，在 draw() 裡先 translate() 到樹根，再呼叫 branch(長度, 層數, 角度)；層數每加 1，枝條數量翻倍，電腦跑不動就調小。

```js
// 遞迴樹：一根樹枝畫完，在尖端分出左右兩根更短的，一直分到 depth 歸零
function setup() {
  createCanvas(640, 420);
}

function draw() {
  background(18, 25, 40);
  let angle = map(mouseX, 0, width, 0, HALF_PI); // 滑鼠 x 控制分枝張開多大
  translate(width / 2, height); // 原點移到畫面底部中間
  branch(90, 9, angle);
}

// len 這根枝的長度，depth 還要再分幾層，angle 左右各轉多少（弧度）
function branch(len, depth, angle) {
  if (depth === 0) return; // 停止條件：沒有它會無限呼叫下去
  stroke(190, 150, 100);
  strokeWeight(depth * 0.9);
  line(0, 0, 0, -len);
  translate(0, -len); // 走到枝尖
  if (depth === 1) {
    noStroke();
    fill(255, 150, 190);
    circle(0, 0, 8); // 最末端開一朵小花
  }
  push();
  rotate(angle);
  branch(len * 0.7, depth - 1, angle); // 右邊那根
  pop();
  push();
  rotate(-angle);
  branch(len * 0.7, depth - 1, angle); // 左邊那根
  pop();
}
```

### Noise 年輪：接得起來的不規則圈

一個 noiseRing(x, y, r, amp, k, z) 函式，用 noise 讓圓的半徑忽大忽小，起點跟終點接得起來；範例疊 30 圈變年輪，按 R 換一棵樹。

複製 noiseRing() 進自己的 sketch，先 noFill() 再呼叫；想畫年輪就用迴圈，每圈的 r 加大、z 加一點；k 越大越碎，amp 越大起伏越誇張。

```js
// Noise 年輪：每圈用 noise 擾動半徑，一圈一圈往外疊。按 R 換一組形狀
function setup() {
  createCanvas(640, 420);
  noiseSeed(1);
}

function draw() {
  background(30, 22, 18);
  noFill();
  strokeWeight(1.5);
  for (let i = 0; i < 30; i++) {
    stroke(lerpColor(color(240, 215, 170), color(105, 62, 32), i / 30)); // 淺到深
    // 半徑隨圈數變大；越外圈越不規則；z 用 i * 0.05：相鄰兩圈像、但不一樣
    noiseRing(width / 2, height / 2, 10 + i * 4.5, 6 + i * 0.9, 0.8, i * 0.05);
  }
}

function keyPressed() {
  if (key === 'r' || key === 'R') {
    noiseSeed(floor(random(99999)));
  }
}

// 畫一圈不規則的圈。x y 圓心，r 基本半徑，amp 起伏多大，k 起伏多碎，z 第三軸（換圈就換它）
function noiseRing(x, y, r, amp, k, z) {
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.05) {
    // 用 cos 和 sin 當 noise 的座標：走完一圈剛好回到起點，圈才接得起來
    let n = noise(cos(a) * k + 1, sin(a) * k + 1, z);
    let rr = r + n * amp;
    vertex(x + cos(a) * rr, y + sin(a) * rr);
  }
  endShape(CLOSE);
}
```

### Boid 三條規則：分離、對齊、聚合

一個 flock(me, others, radius) 函式，回傳分離、對齊、聚合三條規則合成的力；粒子模板的 p／v 或 Boid 的 pos／vel 都認得，在粒子模板的 update() 加一行就變鳥群，範例用最小的 class 跑 60 隻。

把最底下的 flock() 複製進自己的 sketch；粒子模板（Hahow Week 3-0）在 update() 的規則區加一行 this.a = flock(this, particles, 60); 就變鳥群，不用另外寫 class。

```js
// Boid：60 隻，每一格先算好所有人的力、再一起更新
let boids = [];

function setup() {
  createCanvas(640, 420);
  for (let i = 0; i < 60; i++) boids.push(new Boid(random(width), random(height)));
}

function draw() {
  background(18, 25, 40);
  // 先讓每一隻算完力，全部算完再更新位置，順序才不會讓前面的人佔便宜
  for (let b of boids) b.steerWith(boids);
  for (let b of boids) { b.update(); b.draw(); }
}

class Boid {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(2);
    this.acc = createVector(0, 0);
  }
  steerWith(all) {
    this.acc = flock(this, all, 60); // 呼叫底下那個 flock() 函式
  }
  update() {
    this.vel.add(this.acc).limit(2.3);
    this.pos.add(this.vel);
    this.pos.x = (this.pos.x + width) % width; // 穿過邊界從另一邊出來
    this.pos.y = (this.pos.y + height) % height;
  }
  draw() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    noStroke();
    fill(100, 205, 245);
    triangle(8, 0, -5, -4, -5, 4);
    pop();
  }
}

// 三條規則合成的力。me 要有 p、v（粒子模板）或 pos、vel；others 是大家；radius 看得到多遠的鄰居
function flock(me, others, radius) {
  const maxSpeed = 2.3, maxForce = 0.08;
  const P = (b) => b.p || b.pos, V = (b) => b.v || b.vel; // 粒子模板用 p／v，這裡的 Boid 用 pos／vel，兩種都認得
  let sep = createVector(0, 0), ali = createVector(0, 0), coh = createVector(0, 0);
  let near = 0, close = 0;
  for (let o of others) {
    if (o === me) continue;
    let d = p5.Vector.dist(P(me), P(o));
    if (d > 0 && d < radius) {
      ali.add(V(o)); // 對齊：加總鄰居的速度
      coh.add(P(o)); // 聚合：加總鄰居的位置
      near++;
      if (d < radius * 0.4) { sep.add(p5.Vector.sub(P(me), P(o)).div(d * d)); close++; } // 分離：太近的推開
    }
  }
  // 想去的方向 → 轉向的力：想要的速度減掉現在的速度，再限制力道
  function steer(want) {
    if (want.magSq() === 0) return createVector(0, 0);
    return want.setMag(maxSpeed).sub(V(me)).limit(maxForce);
  }
  let force = createVector(0, 0);
  if (close > 0) force.add(steer(sep.div(close)).mult(1.5));
  if (near > 0) {
    force.add(steer(ali.div(near))); // 往鄰居平均的方向走
    force.add(steer(coh.div(near).sub(P(me)))); // 往鄰居的中心靠
  }
  return force.limit(maxForce * 2.5);
}
```

## 存檔與輸出

### 按 S 存 JPG（檔名帶日期時間）

按一下 S 就把畫面存成 JPG，檔名像 sketch-2026-09-29-1905-12.jpg，存再多張也不會互相蓋掉，還會照時間排好。

把 keyPressed、pad、timestamp 三段貼到自己的 sketch 最下面；已經有 keyPressed 就把 if 那段併進去。在 OpenProcessing 要先點一下畫布，按鍵才會送進作品。

```js
// 按 S 存一張 JPG，檔名帶日期時間：sketch-2026-09-29-1905-12.jpg
function setup() {
  createCanvas(600, 600);
  background(20); // JPG 沒有透明：沒塗到的地方會變黑，先鋪一層底色
}

function draw() {
  // 你的作品畫在這裡（示範：跟著滑鼠畫半透明的圓）
  noStroke();
  fill(255, random(120, 220), 80, 90);
  circle(mouseX, mouseY, 40);
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('sketch-' + timestamp(), 'jpg');
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

### 按 S 存 PNG（透明背景）

draw() 裡用 clear() 取代 background()，存成 PNG 背景就是透明的，可以直接疊到海報、簡報或影片上。

把自己 draw() 第一行的 background() 換成 clear()，再貼上 keyPressed、pad、timestamp。只是要存 PNG、不需要透明的話，background() 留著、把 jpg 改成 png 就好。

```js
// 按 S 存 PNG：背景是透明的，可以直接疊到海報、簡報、影片上
// 畫面上看到的底色是網頁的顏色，存出來的檔案才是透明
function setup() {
  createCanvas(600, 600);
}

function draw() {
  clear(); // 用 clear() 取代 background()：每一格擦成透明，而不是塗滿顏色
  noFill();
  stroke(255, 120, 80);
  strokeWeight(10);
  for (let i = 0; i < 6; i++) {
    circle(width / 2, height / 2, 80 + i * 80);
  }
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    // 只有 PNG 留得住透明；存成 JPG 的話，透明的地方會變成黑色
    saveCanvas('sketch-' + timestamp(), 'png');
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

### 存高解析度圖（pixelDensity）

pixelDensity(2) 讓 600×600 的畫布存出 1200×1200 的圖；要印刷就調到 3、4，存出來的尺寸＝寬高 × 密度。

在自己的 setup() 裡、createCanvas 的下一行加上 pixelDensity(2)。動態作品密度太高會變慢：平常用 1，要存圖前再改成 3 或 4。

```js
// 高解析度存圖：畫布 600×600，pixelDensity(2) 存出來是 1200×1200
function setup() {
  createCanvas(600, 600);
  // 放在 createCanvas 之後。要印海報就改 3 或 4（存出 1800、2400 像素），
  // 數字越大越吃效能
  // Retina 螢幕預設就是 2；寫死一個數字，換哪台電腦存出來都一樣大
  pixelDensity(2);
  noLoop(); // 靜態作品畫一次就好，密度調高也不會卡
}

function draw() {
  background(245, 240, 230);
  noFill();
  stroke(30);
  for (let r = 20; r < 580; r += 14) {
    circle(width / 2, height / 2, r);
  }
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    // 存出來的尺寸＝寬 × 密度、高 × 密度；檔名順便記下尺寸
    const w = width * pixelDensity();
    const h = height * pixelDensity();
    saveCanvas('sketch-' + timestamp() + '-' + w + 'x' + h, 'png');
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

### 按 G 存 3 秒 GIF（saveGif）

saveGif() 把動畫一格一格重畫、錄成 GIF；p5.js 1.5 以上與 2.x 都有，存好之前畫面會停一下是正常的。

把 keyPressed 裡的 if、pad、timestamp 貼進自己的 sketch。saveGif 會把 frameCount 從 0 重新算起（1.x、2.x 都是），用 frameCount 做的動畫錄出來最準。

```js
// 按 G 把 3 秒動畫存成 GIF（p5.js 1.5 以上、2.x 都有 saveGif）
function setup() {
  createCanvas(400, 400); // GIF 很吃記憶體：畫布小一點、秒數短一點
}

function draw() {
  background(20);
  // 動畫用 frameCount 算：saveGif 是一格一格重畫再存，
  // 用 millis() 做的動畫錄出來速度會不對
  const r = 120 + sin(frameCount * 0.05) * 80;
  noFill();
  stroke(255, 200, 80);
  strokeWeight(6);
  circle(width / 2, height / 2, r);
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    // 3 秒；左上角會出現進度，存好之前畫面停住是正常的
    saveGif('sketch-' + timestamp(), 3);
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

### 按 V 錄 5 秒影片（WebM）

用瀏覽器內建的 MediaRecorder 把畫布錄成影片，不用裝函式庫；檔案比 GIF 小很多，錄影時畫面照常跑、滑鼠互動也會錄進去。

把 SECONDS、recorder 兩行放在最上面，keyPressed 裡的 if、startRecording、pad、timestamp 貼到下面。要上 IG 可以再用剪輯軟體把 WebM 轉成 MP4。

```js
// 按 V 把畫布錄成 5 秒影片（瀏覽器內建 MediaRecorder，不用裝函式庫）
// Chrome、Firefox 存成 .webm；Safari 存成 .mp4
const SECONDS = 5;
let recorder = null;

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(15);
  noStroke();
  for (let i = 0; i < 12; i++) {
    const a = frameCount * 0.02 + (i * TWO_PI) / 12;
    fill(255, 150 + i * 8, 80);
    circle(width / 2 + cos(a) * 180, height / 2 + sin(a) * 180, 40);
  }
}

function keyPressed() {
  if ((key === 'v' || key === 'V') && !recorder) {
    startRecording();
  }
}

function startRecording() {
  const stream = drawingContext.canvas.captureStream(60); // 每秒 60 格
  const chunks = [];
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    const type = recorder.mimeType || 'video/webm';
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob(chunks, { type: type }));
    const ext = type.includes('mp4') ? '.mp4' : '.webm';
    a.download = 'sketch-' + timestamp() + ext;
    a.click(); // 跟 saveCanvas 一樣，交給瀏覽器下載
    recorder = null;
  };
  recorder.start();
  setTimeout(() => recorder.stop(), SECONDS * 1000);
  print('開始錄影 ' + SECONDS + ' 秒');
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

## 鍵盤滑鼠

### 按 R 換一組隨機

把 random 的種子存在變數裡，按 R 抽一個新種子、重畫一次；同一個種子永遠畫出同一張。

動態作品把 noLoop() 和 redraw() 拿掉，只留 randomSeed(seed) 在 draw() 第一行：每一格抽到同一組隨機，畫面就不會閃。有用 noise() 的話再加一行 noiseSeed(seed)。

```js
// 按 R 換一組隨機：記住種子，同一個種子永遠畫出同一張
let seed;

function setup() {
  createCanvas(600, 600);
  seed = floor(random(1000000));
  noLoop(); // 靜態構圖：畫一次就停，按 R 才重畫
}

function draw() {
  randomSeed(seed); // 每次重畫都從同一個種子開始抽籤
  background(245);
  noStroke();
  for (let i = 0; i < 60; i++) {
    fill(random(255), random(255), random(255), 180);
    circle(random(width), random(height), random(20, 120));
  }
  fill(0);
  textSize(14);
  text('seed ' + seed + '　按 R 換一組', 16, height - 16);
}

function keyPressed() {
  if (key === 'r' || key === 'R') {
    seed = floor(random(1000000)); // 抽一個新種子
    redraw(); // noLoop() 的時候，要叫 redraw() 才會再跑一次 draw()
  }
}
```

### 按空白鍵暫停／繼續

noLoop() 讓 draw() 停下、loop() 讓它繼續，isLooping() 知道現在是哪一種；想截某一格或停下來慢慢看時最好用。

把 keyPressed 裡的 if 貼進自己的 sketch。暫停時再按 S（配上存圖那段），存到的就是停住的這一格。

```js
// 按空白鍵暫停／繼續：想截某一格、或停下來慢慢看的時候用
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(20);
  const x = (frameCount * 3) % width;
  noStroke();
  fill(255, 200, 80);
  circle(x, height / 2, 60);
}

function keyPressed() {
  if (key === ' ') {
    if (isLooping()) {
      noLoop(); // 停：draw() 不再重複
    } else {
      loop(); // 繼續
    }
    return false; // 不讓空白鍵把網頁往下捲
  }
}
```

### 按 C 清空畫布（筆刷作品）

不畫 background() 的筆刷作品會一直疊上去；按 C 用同一個底色蓋掉整張，就是清空重來。

把 keyPressed 裡的 if 貼進自己的筆刷作品，background() 的顏色改成跟 setup() 裡一樣。

```js
// 筆刷：按住滑鼠畫線；按 C 清空重來
function setup() {
  createCanvas(600, 600);
  background(250); // 底色只在 setup 畫一次，畫過的線才會留下來
}

function draw() {
  if (mouseIsPressed) {
    stroke(30);
    strokeWeight(6);
    // 上一格的滑鼠位置連到這一格，線才不會斷
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

function keyPressed() {
  if (key === 'c' || key === 'C') {
    background(250); // 用同一個底色蓋掉整張，就是清空
  }
}
```

### 取座標小工具：點一下印出 vertex

在畫布上點一下，console 就印出一行 vertex(x, y);；點出形狀的頂點，整串貼回 beginShape() 和 endShape(CLOSE) 之間，就是自己的形狀。

整段貼進一個新的 sketch 當工具用：點出想要的形狀頂點，從 console 複製那幾行 vertex 貼回自己作品的 beginShape() 與 endShape(CLOSE) 之間；按 C 清掉重點。

```js
// 取座標小工具：在畫布上點一下，console 就印出一行 vertex(x, y);
// 點出想要的形狀頂點，把那幾行複製貼回 beginShape() 和 endShape(CLOSE) 之間
let points = []; // 點過的位置，畫在畫面上當參考

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(245);

  // 示範：用 vertex 一點一點圍出來的花盆（歪七扭八也沒關係）
  fill(200, 110, 70);
  stroke(60);
  strokeWeight(2);
  beginShape();
  vertex(163, 297);
  vertex(441, 289);
  vertex(429, 347);
  vertex(396, 347);
  vertex(371, 527);
  vertex(222, 533);
  vertex(197, 352);
  vertex(170, 350);
  endShape(CLOSE); // CLOSE：最後一點自動連回第一點

  // 點過的位置：紅線連起來，看得出形狀
  noFill();
  stroke(230, 40, 40);
  strokeWeight(1.5);
  beginShape();
  for (const p of points) {
    vertex(p.x, p.y);
  }
  endShape();
  noStroke();
  fill(230, 40, 40);
  for (const p of points) {
    circle(p.x, p.y, 7);
  }

  // 滑鼠旁邊顯示座標
  fill(0);
  textSize(14);
  text(round(mouseX) + ', ' + round(mouseY), mouseX + 10, mouseY - 10);
}

function mousePressed() {
  const x = round(mouseX);
  const y = round(mouseY);
  points.push({ x: x, y: y });
  print('vertex(' + x + ', ' + y + ');'); // 到 console 複製這一行
}

// 按 C 清掉點過的點，重新點一組
function keyPressed() {
  if (key === 'c' || key === 'C') {
    points = [];
    print('// ---- 重新開始 ----');
  }
}
```

### MIDI 一行接上：鍵盤、螢幕上的控制器、手機都能彈

在草圖最上面貼一行 Open Audio Visual，就能用 MIDI 鍵盤（MiniLab 3、LPD8）演奏作品：knob1～knob8 像 mouseX 一樣直接讀，notePressed() 像 keyPressed() 一樣按了就叫。沒有鍵盤就按畫面角落的 🎹 用螢幕上的控制器，或 📱 用手機。草圖裡有 OPC.slider（像 3-0 粒子模板）的話，旋鈕會照順序自動接上那些拉桿。

把第一行貼在自己草圖的最上面，之後 knob1～knob8、fader1～fader4、pad1～pad8、notePressed(note, velocity)、noteIsDown(60) 都能用。草圖裡已經有 OPC.slider 的話（像 3-0 粒子模板），旋鈕 1 會接第一根拉桿、旋鈕 2 接第二根，不用改程式。

```js
// 第一行：Open Audio Visual 一行接上 MIDI。說明：https://openaudiovisual.com/zh/docs/#p5
// 接上 MIDI 鍵盤（Chrome 會問一次要不要允許），或按畫面角落的 🎹 用螢幕上的控制器、📱 用手機
document.head.prepend(Object.assign(document.createElement('script'), { src: 'https://openaudiovisual.com/p5/oav-p5.js' }));

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(20);
  noStroke();
}

function draw() {
  // 旋鈕 1、2 跟 mouseX 一樣直接讀，數值 0 到 1
  background(20, 10 + knob1 * 60);
  fill(255, 60);
  circle(width / 2, height / 2, 40 + knob2 * 400);
}

// 跟 keyPressed() 一樣：按下任何一個鍵（或打擊墊）就會叫它
// note 是哪個鍵（MIDI 編號，中央 C＝60），velocity 是多用力（0 到 1）
function notePressed(note, velocity) {
  fill(random(255), random(255), 255);
  circle(map(note, 36, 84, 0, width, true), random(height), 20 + velocity * 160);
}
```

## 畫布與視窗

### 按 F 全螢幕＋畫布跟著視窗

fullscreen() 切換全螢幕；視窗大小一變 p5 會呼叫 windowResized()，在裡面 resizeCanvas() 畫布就永遠填滿視窗。

把 createCanvas 改成 windowWidth、windowHeight，再貼上 keyPressed 和 windowResized；按 Esc 也能離開全螢幕。沒畫 background() 的筆刷作品，換尺寸時畫過的東西會被清掉。

```js
// 按 F 切換全螢幕；視窗大小一變，畫布跟著變
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(15);
  // 位置和大小用 width、height 算，不要寫死數字：畫布怎麼變都會置中
  noFill();
  stroke(255);
  strokeWeight(3);
  circle(width / 2, height / 2, min(width, height) * 0.6);
}

function keyPressed() {
  if (key === 'f' || key === 'F') {
    fullscreen(!fullscreen()); // 現在不是全螢幕就打開，是就關掉
  }
}

// 視窗大小改變（包含進出全螢幕）時，p5 會自動呼叫這個函式
function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // 注意：resizeCanvas 會把畫布清空
}
```

## 時間與隨機

### 用時間當參數：秒數與 sin 呼吸

millis() ÷ 1000 就是開始到現在幾秒，丟進 sin() 再用 map() 換算成大小和亮度，圓就會像呼吸一樣一脹一縮。

在自己 draw() 的開頭加 const t = millis() / 1000;，想要會動的數值就寫成 sin(t * TWO_PI / 週期秒數)，再用 map() 換算到要的範圍。

```js
// 用時間當參數：millis() 是開始到現在的毫秒，除以 1000 就是秒
function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(20);
  const t = millis() / 1000; // 秒：電腦快慢都一樣
  // const t = frameCount / 60; // 另一種：用第幾格換算，電腦卡的時候會跟著變慢

  // 4 秒呼吸一次：sin 在 -1 到 1 之間來回
  // （有寫 angleMode(DEGREES) 的話，TWO_PI 改成 360）
  const breath = sin((t * TWO_PI) / 4);
  const d = map(breath, -1, 1, 120, 360); // 直徑
  const bright = map(breath, -1, 1, 90, 255);

  noStroke();
  fill(bright, 180, 120);
  circle(width / 2, height / 2, d);

  fill(255);
  textSize(16);
  text('t = ' + t.toFixed(1) + ' 秒', 16, 30);
}
```

### 在畫面上印出日期時間

year()、month()、day()、hour()、minute()、second() 拿到現在的時間，用跟存檔檔名同一個 pad() 補零，印成時鐘。

貼上 pad、timestamp 兩個函式，在 draw() 裡用 text() 印出來；已經貼過存檔那段就不用再貼一次。

```js
// 在畫面上印出現在的日期時間（跟存檔檔名同一組補零函式）
function setup() {
  createCanvas(600, 300);
}

function draw() {
  background(15);
  fill(255);
  textAlign(CENTER, CENTER);
  const date = year() + ' / ' + pad(month()) + ' / ' + pad(day());
  const clock = pad(hour()) + ':' + pad(minute()) + ':' + pad(second());
  textSize(36);
  text(date, width / 2, height / 2 - 50);
  textSize(72);
  text(clock, width / 2, height / 2 + 30);
  textSize(14);
  fill(150);
  text('存檔檔名會是 sketch-' + timestamp() + '.jpg', width / 2, height - 24);
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

### 存檔名帶種子：喜歡的那張找得回來

按 R 換一組隨機、按 S 存 PNG，檔名記下種子；之後把 seed 設回那個數字，就能畫回同一張、再存一次高解析度。

draw() 第一行放 randomSeed(seed) 和 noiseSeed(seed)，存檔名加上 seed。找到喜歡的就把 seed 固定成檔名裡的數字，再配合 pixelDensity 存一張大圖。

```js
// 按 R 換一組、按 S 存檔：檔名記下種子，喜歡的那張永遠找得回來
let seed;

function setup() {
  createCanvas(600, 600);
  seed = floor(random(1000000));
  // seed = 123456; // 想畫回某一張：把檔名裡的數字填進來
  noLoop();
}

function draw() {
  randomSeed(seed);
  noiseSeed(seed); // 有用 noise() 也要固定
  background(250);
  noFill();
  stroke(20, 90);
  strokeWeight(1.5);
  for (let i = 0; i < 120; i++) {
    let x = random(width);
    let y = random(height);
    beginShape();
    for (let j = 0; j < 80; j++) {
      vertex(x, y);
      const a = noise(x * 0.005, y * 0.005) * TWO_PI * 2;
      x += cos(a) * 6;
      y += sin(a) * 6;
    }
    endShape();
  }
}

function keyPressed() {
  if (key === 'r' || key === 'R') {
    seed = floor(random(1000000));
    redraw();
  }
  if (key === 's' || key === 'S') {
    // 檔名像 sketch-seed48213-2026-09-29-1905-12.png
    saveCanvas('sketch-seed' + seed + '-' + timestamp(), 'png');
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

## 顏色

### 色票陣列＋random(palette)

先挑好幾個顏色放進陣列，random(palette) 每次抽一個；整張作品只用這幾色，配色馬上就統一。

把 palette 那一行放在最上面，原本寫 fill(random(255), …) 的地方改成 fill(random(palette))。配色可以到 coolors.co 挑好，把色碼整串貼進陣列。

```js
// 色票：先挑好 5 個顏色放進陣列，random(palette) 每次抽一個
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];

function setup() {
  createCanvas(600, 600);
  noLoop();
}

function draw() {
  background('#fdf6e3');
  noStroke();
  for (let i = 0; i < 80; i++) {
    fill(random(palette)); // 從陣列裡隨機抽一個顏色
    circle(random(width), random(height), random(20, 90));
  }
}

// 點一下畫布換一張
function mousePressed() {
  redraw();
}
```

### HSB 彩虹：色相跟著時間轉

colorMode(HSB) 之後第一個數字是色相，0 到 360 繞一圈就是彩虹；飽和度、亮度分開調，比 RGB 直覺。

在 setup() 裡加 colorMode(HSB, 360, 100, 100, 1)；之後所有 fill、stroke、background 的數字都照 HSB 解讀，原本的 RGB 顏色要跟著改。

```js
// HSB 色彩：色相 0–360 繞一圈就是彩虹
function setup() {
  createCanvas(600, 600);
  // 色相 0–360、飽和 0–100、亮度 0–100、透明 0–1
  colorMode(HSB, 360, 100, 100, 1);
  noStroke();
}

function draw() {
  background(0, 0, 10); // HSB 模式下的深灰
  for (let i = 0; i < 12; i++) {
    // 色相：每一格往前轉一點，% 360 讓它繞回 0
    const h = (frameCount + i * 30) % 360;
    fill(h, 80, 100);
    const a = (TWO_PI * i) / 12;
    circle(width / 2 + cos(a) * 200, height / 2 + sin(a) * 200, 70);
  }
}
```

## 除錯

### 左上角顯示 fps 與 frameCount

作品卡不卡看數字最準：frameRate() 是現在每秒幾格、frameCount 是第幾格，畫在 draw() 最後才會蓋在作品上面。

把 drawDebug() 貼進自己的 sketch，在 draw() 最後一行呼叫它；作品完成、要展示時把那一行刪掉就好。

```js
// 左上角顯示 fps 與 frameCount：動畫卡不卡，看數字最準
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(30);
  // 你的作品畫在這裡（示範：很多個會動的圓）
  noStroke();
  fill(120, 200, 255, 120);
  for (let i = 0; i < 300; i++) {
    circle((i * 37 + frameCount) % width, (i * 53) % height, 20);
  }
  drawDebug(); // 放在 draw() 的最後，才會蓋在作品上面
}

function drawDebug() {
  push(); // 用 push／pop 包起來，不會改到作品的顏色、位置設定
  resetMatrix(); // 前面有 translate、rotate 也一樣畫在左上角
  noStroke();
  fill(0, 180);
  rect(0, 0, 150, 48);
  fill(255);
  textFont('monospace');
  textSize(13);
  textAlign(LEFT, TOP);
  text('fps   ' + round(frameRate()), 10, 8);
  text('frame ' + frameCount, 10, 26);
  pop();
}
```

### 滑鼠十字線＋座標

跟著滑鼠畫一條直線、一條橫線，旁邊寫出 (mouseX, mouseY)；想知道某個點的座標，移過去看一眼就知道。

把 drawCrosshair() 貼進自己的 sketch，在 draw() 最後一行呼叫它；對好位置、把數字抄進程式之後，刪掉那一行。

```js
// 滑鼠十字線：(mouseX, mouseY) 在畫布的哪裡，一眼看出來
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(240);
  // 你的作品畫在這裡
  fill(255, 180, 0);
  noStroke();
  circle(300, 200, 120);
  drawCrosshair(); // 放在 draw() 的最後
}

function drawCrosshair() {
  push();
  resetMatrix();
  stroke(255, 0, 0, 160);
  strokeWeight(1);
  line(mouseX, 0, mouseX, height); // 直線：這條線上每一點的 x 都一樣
  line(0, mouseY, width, mouseY); // 橫線：這條線上每一點的 y 都一樣
  noStroke();
  fill(255, 0, 0);
  textSize(14);
  // 靠近右邊或上面時，字換到另一邊，才不會跑出畫布
  const right = mouseX > width - 110;
  const top = mouseY < 30;
  textAlign(right ? RIGHT : LEFT, top ? TOP : BOTTOM);
  const label = '(' + round(mouseX) + ', ' + round(mouseY) + ')';
  text(label, mouseX + (right ? -8 : 8), mouseY + (top ? 8 : -8));
  pop();
}
```

### 每秒在 console 印一次變數

print() 放在 draw() 裡一秒會洗掉 60 行；用 frameCount % 60 === 0 只在每 60 格印一次，看得清楚數值怎麼變。

把 if (frameCount % 60 === 0) { print(…); } 放進自己的 draw()，括號裡換成想看的變數；OpenProcessing 的 console 在畫布下方。

```js
// 每秒在 console 印一次：print() 直接放在 draw() 裡，一秒會洗掉 60 行
let x = 0;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(30);
  x = (x + 2.5) % width;
  fill(255);
  circle(x, height / 2, 40);

  if (frameCount % 60 === 0) {
    // 每 60 格（大約一秒）才印一次
    // print() 一次放一個值：要印好幾個，用 + 接成一串（p5 2.x 放兩個以上會跳警告）
    print('第 ' + frameCount + ' 格　x = ' + x.toFixed(1));
  }
}
```

### 麥克風測試

點一下畫面開始，畫一條跟著聲音跳的音量條；沒聲音時畫面上直接寫三個檢查點（瀏覽器權限、系統麥克風、OpenProcessing 要點進作品頁放大看，或改用 p5 網頁編輯器）。第 4 堂開播前先點開來測一次。

貼進 OpenProcessing 或 p5 網頁編輯器，點一下畫面開始；看到條跟著聲音跳就 OK。條不跳時，畫面上的三個檢查點照著查。這支只測瀏覽器拿不拿得到麥克風，第 4 堂的示範是同一個權限。

```js
// 麥克風測試：點一下畫面開始（瀏覽器規定要使用者點一下，才會問你能不能用麥克風）
// 看到下面的條跟著聲音跳，麥克風就 OK。沒用 p5.sound，只用瀏覽器內建的 Web Audio，所以 p5 1.x、2.x 都能跑。
let audioCtx;
let analyser;
let samples;
let state = 'idle'; // idle 還沒點｜asking 等你按「允許」｜ok 拿到麥克風｜fail 沒拿到
let reason = ''; // 沒拿到的原因（瀏覽器回報的名字）
let level = 0; // 現在的音量（0 到 1，已平滑）
let peak = 0; // 最近的最大音量，會慢慢往下掉
let heardAt = 0; // 最後一次聽到聲音的時間（毫秒）

function setup() {
  createCanvas(600, 400);
  textWrap(CHAR); // 中文沒有空白，要用「逐字換行」text() 的寬度才會生效
  textSize(18);
}

function draw() {
  background(20);
  noStroke();
  fill(240);
  textAlign(CENTER, CENTER);

  if (state === 'idle') {
    textSize(24);
    text('點一下畫面開始測試麥克風', width / 2, height / 2);
    return;
  }
  if (state === 'asking') {
    text('請在瀏覽器跳出的視窗按「允許」', width / 2, height / 2);
    return;
  }
  if (state === 'fail') {
    textSize(24);
    text('沒有拿到麥克風', width / 2, 50);
    textSize(14);
    fill(160);
    text('原因：' + reason + '　（點一下畫面再試一次）', width / 2, 84);
    drawChecklist(120);
    return;
  }

  // state === 'ok'：量音量（RMS），畫成一條橫的條
  analyser.getFloatTimeDomainData(samples);
  let sum = 0;
  for (let i = 0; i < samples.length; i++) {
    sum += samples[i] * samples[i];
  }
  level = lerp(level, sqrt(sum / samples.length), 0.3);
  peak = max(peak * 0.985, level);
  if (level > 0.02) {
    heardAt = millis();
  }

  const barW = map(constrain(level, 0, 0.3), 0, 0.3, 0, 500);
  const peakX = 50 + map(constrain(peak, 0, 0.3), 0, 0.3, 0, 500);
  textSize(20);
  text('對著麥克風說話　看到條在跳就 OK', width / 2, 70);
  noFill();
  stroke(90);
  rect(50, 110, 500, 44);
  noStroke();
  fill(110, 220, 140);
  rect(50, 110, barW, 44);
  fill(255, 210, 90);
  rect(peakX - 2, 104, 4, 56);

  // 麥克風開了，但連續 3 秒都沒聽到聲音：條不會跳，把檢查點列出來
  if (millis() - heardAt > 3000) {
    fill(255, 210, 90);
    textSize(18);
    text('條沒有跳？照下面三點查', width / 2, 200);
    drawChecklist(225);
  }
}

// 三個檢查點（一格一行，textWrap 會自己折行）
function drawChecklist(y) {
  textAlign(LEFT, TOP);
  textSize(15);
  fill(230);
  text('1. 瀏覽器權限：網址列左邊的鎖頭或麥克風圖示，把麥克風改成「允許」，重新整理再點一次。', 40, y, 520);
  text('2. 系統麥克風：電腦的系統設定、隱私權、麥克風，這個瀏覽器要打開；輸入裝置選對（筆電內建或你的麥克風）。', 40, y + 46, 520);
  text('3. OpenProcessing：作品要點進全螢幕（或開新分頁）才會給麥克風；還是不行，就把程式貼到 p5 網頁編輯器（editor.p5js.org）。', 40, y + 92, 520);
}

function mousePressed() {
  if (state === 'idle' || state === 'fail') {
    startMic();
  }
}

function startMic() {
  state = 'asking';
  reason = '';
  const AC = window.AudioContext || window.webkitAudioContext;
  if (!AC || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    state = 'fail';
    reason = '這個瀏覽器或這個頁面不能用麥克風';
    return;
  }
  // AudioContext 要在「點一下」這一刻就建（Safari、手機規定），拿到麥克風之後才接上去
  audioCtx = audioCtx || new AC();
  audioCtx.resume();
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(function (stream) {
      analyser = audioCtx.createAnalyser();
      analyser.fftSize = 1024;
      samples = new Float32Array(analyser.fftSize);
      audioCtx.createMediaStreamSource(stream).connect(analyser);
      heardAt = millis();
      state = 'ok';
    })
    .catch(function (err) {
      state = 'fail';
      reason = err && err.name ? err.name : '不明';
    });
}
```

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


---

正式網址：https://newmediaart.course.monolab.world/resources
Kind: page

# 資源

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

每一堂課用到的範例程式、作品案例、團隊與工具連結。

## 第 0 堂〈新媒體藝術的全景地圖〉

### 範例程式（OpenProcessing）

- [表情筆刷 hahow new media #1](https://openprocessing.org/@cheyuwu/3015525)：第一個筆刷：滑鼠畫出表情
- [鸚鵡螺與動態顏色 #1-2](https://openprocessing.org/@cheyuwu/3015615)
- [泡泡筆刷（for 迴圈）#1-3](https://openprocessing.org/@cheyuwu/3015703)
- [花朵示範](https://openprocessing.org/@cheyuwu/2963448)
- [外星生物 Fern（28 行）](https://openprocessing.org/@cheyuwu/700092)

### 哲宇的案例

- [作品總覽](https://cheyuwu.com/zh/work)
- [咖啡幻夢（星巴克）](https://cheyuwu.com/zh/work/coffee-dreamscape)：目前最大的 p5.js 作品
- [《未竟之花》](https://cheyuwu.com/zh/work/unfinished-bloom)
- [The Last Input《終局之前》](https://cheyuwu.com/zh/exhibition/the-last-input)
- [距離之歌 Song of Distances](https://cheyuwu.com/zh/project/-M0nSR_ahyfV-9jC9po_/)
- [台北聲音地景計畫](https://taipeisoundscape.com/)
- [200614 Organic Circuit](https://cheyuwu.com/zh/sketch/918427/)
- [200804 Superstring Theory](https://cheyuwu.com/zh/sketch/941774/)
- [巴黎生態系（p5.js）](https://openprocessing.org/@cheyuwu/2470424)
- [靈魂魚製作流程](https://creativecoding.in/2023/03/02/soul-fish-process/)
- [OpenProcessing 作品集](https://openprocessing.org/@cheyuwu)

### 其他人的案例

- [筆刷參考：brush](https://openprocessing.org/sketch/704595)
- [Rotary Brush](https://openprocessing.org/sketch/595598)
- [Generative Brushes](https://openprocessing.org/sketch/107816)
- [Takawo](https://openprocessing.org/@takawo)：OpenProcessing 值得追蹤
- [aluan](https://openprocessing.org/@aluan)：OpenProcessing 值得追蹤
- [newyellow（黃新）](https://openprocessing.org/@newyellow)：OpenProcessing 值得追蹤
- [Junichiro Horikawa](https://openprocessing.org/@jhorikawa)：OpenProcessing 值得追蹤
- [Zach Lieberman](https://www.instagram.com/zach.lieberman/)
- [Tyler Hobbs](https://tylerxhobbs.com/)
- [Clinamen（Céleste Boursier-Mougenot）](https://www.youtube.com/shorts/g99TDzER3W0)
- [Art Blocks](https://www.artblocks.io/)：生成藝術平台

### 工具

- [p5.js Reference](https://p5js.org/reference/)
- [OpenProcessing](https://openprocessing.org/)
- [MDN Canvas 教學](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial)
- [ColorZilla（瀏覽器取色）](https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhed)
- [p5.capture（存影片）](https://github.com/tapioca24/p5.capture)

### 課程

- [https://newmediaart.course.monolab.world/live](https://newmediaart.course.monolab.world/live)

### 工具與文件

- [p5.js](https://p5js.org/)
- [Processing](https://processing.org/)

### 藝術家與作品

- [Fragments of an Infinite Field by Monica Rizzolli](https://www.artblocks.io/collection/fragments-of-an-infinite-field-by-monica-rizzolli)
- [Clinamen 的報導](https://500times.udn.com/wtimes/story/120842/9568756)

### 哲宇的作品與經歷

- [每一年的實驗（Lab）](https://cheyuwu.com/zh/lab)
- [墨雨設計作品](https://monoame.com/works)

## 第 1 堂〈第一個生成藝術作品〉

### 範例程式（OpenProcessing）

- [260929 colors demo](https://openprocessing.org/@cheyuwu/3022625)：色票清單、random 與 if／else 取色
- [260929 angle demo](https://openprocessing.org/@cheyuwu/3022662)：環狀的花：translate、rotate、for
- [brush demo class 1-2](https://openprocessing.org/@cheyuwu/3022716)：影像筆刷：按下才畫、速度決定大小
- [260929 shape demo](https://openprocessing.org/@cheyuwu/3022822)：取座標小工具：點畫布印出 vertex
- [vertex flower](https://openprocessing.org/@cheyuwu/3022843)：花朵印章網格：beginShape／vertex、push／pop
- [Explanation of brush pen（@bun）](https://openprocessing.org/@bun/793375)：點與點之間補間的筆刷

### 其他人的案例（Art Blocks）

- [Archetype by Kjetil Golid](https://www.artblocks.io/collection/archetype-by-kjetil-golid)：空間切割、遞迴
- [Act of Emotion by Kelly Milligan](https://www.artblocks.io/collection/act-of-emotion-by-kelly-milligan)：材質疊成筆刷
- [Trossets by Anna Carreras](https://www.artblocks.io/collection/trossets-by-anna-carreras)：格線拼圖
- [Fidenza by Tyler Hobbs](https://www.artblocks.io/collection/fidenza-by-tyler-hobbs)：向量場
- [Moodboard：第一個生成藝術作品](https://www.pinterest.com/majerowob/hahow-%E7%AC%AC%E4%B8%80%E5%80%8B%E7%94%9F%E6%88%90%E8%97%9D%E8%A1%93%E4%BD%9C%E5%93%81-moodboard/)

### 新媒體藝術團隊（回答〈關於工作〉）

- [Moment Factory](https://momentfactory.com/)
- [Local Projects](https://localprojects.com/)
- [Volvox Labs](https://volvoxlabs.com/)
- [叁式 Ultra Combos](https://ultracombos.com/)
- [Dimension Plus](https://www.dimensionplus.co/)
- [十三行互動](https://www.13techart.com/)
- [黑川互動媒體藝術](https://www.peppercorns.com.tw/)
- [豪華朗機工（專訪）](https://theartpressasia.com/2020/01/14/artist-is-a-special-kind-of-people-with-smart-and-foolish-at-the-same-time-interveiw-with-luxurylogico/)
- [creativecoding.in 入門資源](https://creativecoding.in/resources/)

### 工具

- [Coolors 配色](https://coolors.co/)：Explore 挑現成的、Generator 按空白鍵換、Export → Copy as Array
- [課堂用的那組色票](https://coolors.co/240115-de3c4b-87f5fb-2f131e-cec3c1)
- [CSS 顏色名稱表](https://www.w3schools.com/cssref/css_colors.php)
- [p5.js Reference](https://p5js.org/reference/)
- [beginShape／vertex](https://p5js.org/reference/p5/beginShape/)：外框線接回第一點寫 endShape(CLOSE)
- [Google 藝術與文化（找作業場景）](https://artsandculture.google.com/)
- [透明背景筆刷素材](https://www.vecteezy.com/free-png/watercolor-brushes)：下載前看授權

### 延伸資源

- [loadImage](https://p5js.org/reference/p5/loadImage/)
- [image](https://p5js.org/reference/p5/image/)
- [imageMode](https://p5js.org/reference/p5/imageMode/)
- [blendMode](https://p5js.org/reference/p5/blendMode/)
- [vertex](https://p5js.org/reference/p5/vertex/)
- [endShape](https://p5js.org/reference/p5/endShape/)
- [dist](https://p5js.org/reference/p5/dist/)
- [mouseIsPressed](https://p5js.org/reference/p5/mouseIsPressed/)
- [keyPressed](https://p5js.org/reference/p5/keyPressed/)
- [movedX](https://p5js.org/reference/p5/movedX/)
- [pmouseX](https://p5js.org/reference/p5/pmouseX/)
- [noLoop](https://p5js.org/reference/p5/noLoop/)
- [push](https://p5js.org/reference/p5/push/)
- [pop](https://p5js.org/reference/p5/pop/)
- [十三行互動](http://13techart.com/)
- [Moment Factory](https://www.momentfactory.com/)
- [creativecoding.in](https://creativecoding.in/)

## 第 2 堂〈數學之美：向量與粒子〉

### 範例程式（OpenProcessing）

- [w2-1 Ball](https://openprocessing.org/@cheyuwu/3027925)：Demo 1：位置、速度、加速度、反彈
- [w2-2 Particle Gun](https://openprocessing.org/@cheyuwu/3027928)：Demo 2：class、陣列、按住滑鼠噴粒子
- [w2-3 Particle Field](https://openprocessing.org/@cheyuwu/3027936)：Demo 3：noise 兩張切片推動的粒子力場
- [課堂現場版：Particle Gun](https://openprocessing.org/@cheyuwu/3028033)

### 哲宇的案例

- [咖啡幻夢](https://cheyuwu.com/zh/work/coffee-dreamscape/)
- [彼岸花](https://cheyuwu.com/zh/work/flower-of-the-other-shore/)
- [LG 永恆花境](https://cheyuwu.com/zh/exhibitions/lg-eternal-floral-realm/)
- [220913 Golden Evolution](https://cheyuwu.com/zh/sketch/1645015/)
- [Electriz](https://cheyuwu.com/zh/work/electriz/)
- [混亂舞者 Chaos Dancer](https://cheyuwu.com/zh/sketch/1217113/)
- [神經系統 Nervous System](https://cheyuwu.com/zh/sketch/1050016/)
- [湮滅 Annihilation](https://cheyuwu.com/zh/sketch/1935727/)
- [〈261004 宇宙熵時〉（實驗室）](https://lab.cheyuwu.com/s/261004-idea-01/)
- [Open Audio Visual](https://openaudiovisual.com/zh/)：近況：讓作品接上表演

### 其他人的案例

- [Wind Map](http://hint.fm/wind/)：Fernanda Viégas、Martin Wattenberg
- [earth.nullschool.net](https://earth.nullschool.net/)
- [Tyler Hobbs〈Fidenza〉](https://www.tylerxhobbs.com/works/fidenza)
- [Tyler Hobbs〈Flow Fields〉](https://www.tylerxhobbs.com/words/flow-fields)：流場的經典文章
- [Refik Anadol〈Wind of Boston〉](https://refikanadol.com/works/wind-of-boston-data-paintings/)
- [The Coding Train：Perlin Noise Flow Field](https://thecodingtrain.com/challenges/24-perlin-noise-flow-field)
- [Moodboard：粒子](https://www.pinterest.com/majerowob/hahow-w2-%E7%B2%92%E5%AD%90/)

### 工具

- [p5.js Reference](https://p5js.org/reference/)
- [p5.Vector heading](https://p5js.org/reference/p5.Vector/heading/)
- [p5.js get（取像素顏色）](https://p5js.org/reference/p5/get/)
- [MIDI 控制器圖鑑](https://openaudiovisual.com/zh/controllers/)
- [互動教學模組：粒子](https://newmediaart.course.monolab.world/tools?l=2&w=particle)
- [常用指令](https://newmediaart.course.monolab.world/snippets)

### 延伸資源

- [Ball](https://openprocessing.org/sketch/3027925)
- [Particle Gun](https://openprocessing.org/sketch/3027928)
- [Particle Field](https://openprocessing.org/sketch/3027936)
- [Demo 1 Live](https://openprocessing.org/sketch/3027997)
- [Noise Field Live](https://openprocessing.org/sketch/3028052)
- [p5.Vector](https://p5js.org/reference/p5.Vector/)
- [Coolors](https://coolors.co/palettes/trending)
- [teamLab](https://www.teamlab.art/zh-hant/)
- [靈魂海](https://cheyuwu.com/zh/work/soulsea/)
- [Crowded City](https://cheyuwu.com/zh/sketch/1649524/)
- [實驗室](https://lab.cheyuwu.com/)
- [作品頁](https://cheyuwu.com/zh/work/)
- [創作族譜](https://cheyuwu.com/zh/lineage/)
- [本堂互動模組](https://newmediaart.course.monolab.world/lesson/02)
- [全部模組](https://newmediaart.course.monolab.world/tools)

## 第 3 堂〈自然的演算法〉

### 範例程式（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)

### 延伸資源

- [Paper Planes](https://paperplanes.world/)
- [聲鬥陣：進駐計畫發表（索票）](https://www.accupass.com/event/2609290656149114872190)
- [2026 IRCAM 聲鬥陣（C-LAB）](https://clab.org.tw/projects/soundoff-2026)
- [本堂互動模組](https://newmediaart.course.monolab.world/lesson/03)
- [常用指令](https://newmediaart.course.monolab.world/snippets?q=自然的演算法)

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


---

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

# 新媒體藝術的全景地圖

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

〈新媒體藝術的全景地圖〉是吳哲宇新媒體藝術全景課的第 0 堂（共 11 堂），2026/9/22（二） 19:00–21:30 在 Hahow 直播，工具是 OpenProcessing。

課綱：新媒體藝術的全景地圖、11 週怎麼走、用 AI 的態度，第一次在 OpenProcessing 寫出會動的畫，這堂做出第一幅生成藝術。

第一堂開給約 350 位學員，2 小時 43 分。前 68 分鐘講背景、11 週地圖、AI 立場與案例；後 76 分鐘在 OpenProcessing 上從零帶出「表情筆刷」與「鸚鵡螺軌跡」。收尾他把寫程式定位成「傳統手藝」：會了手藝，再用 AI 會更快。

錄影長度 2:43:03。回放與完整筆記在學員登入後看（[學員登入](https://newmediaart.course.monolab.world/learn)）。

## 章節

- [0:00] 開場等待與直播確認：等待畫面（機器稿前兩句是等待音樂的幻聽）。
- [9:10] 自我介紹：作品、接案與教學：「我是一位新媒體藝術的創作者」，電機系出身；在墨雨接案做互動網頁（大學官網、捷運局、工研院綠能所「家庭用電家計簿」）。
- [26:21] 課程地圖、怎麼學與 AI：「抱歉背景講太久，就已經 7 點 26 了」；「今天我們不會放大家走，我們會上滿兩個小時」。
- [38:40] 近況分享：音流學、大地與川脈的編織：兩件都不是 p5 做的，「但它的底層的那些邏輯跟想法其實是相同的」。
- [46:52] 程式創作案例：請大家在聊天室說背景（回覆見留言紀錄）。
- [55:30] 媒材介紹：p5.js、Canvas、Processing：以前用 Canvas 畫一個方塊要寫 fillStyle、fillRect，「大概打完這幾行就已經過了 20 分鐘了」
- [59:40] 作品觀摩：Tyler Hobbs、Art Blocks 與白板拆解：示範把白板草圖送進 Claude，要它用 p5.js 做出來，結果留到最後看（見 [2:35:07]）。
- [1:08:02] 註冊 OpenProcessing 與各工具的限制：「我們不確定有沒有時間來休息。我就直接接下去講」，想休息的自行小休。
- [1:13:02] OpenProcessing 介面與 p5.js 基本概念：介面：版面切換、設定（p5、字級、深色模式）、版本紀錄可回溯、收藏、分享、Fork（把外星生物改成 200 隻腳）。
- [1:28:01] 實作一：滑鼠筆刷（表情筆刷 → 鸚鵡螺）：表情筆刷：frameRate(10)／(2) 讓它慢慢蓋；後畫的會疊上去；fill('white') 眼白、
- [1:58:51] 實作二：動態幾何與存圖：Fork 保留版本（1-1、1-2）；設定作品縮圖（Edit → Capture Image）；
- [2:20:14] 存影片、花朵示範與迴圈：存影片（回答 Discord 上同學問的「可以 SAVE 影片嗎」）：p5 官方只存圖，
- [2:29:01] 作業說明、AI 情境圖與 Claude 結果：「有人說大學數學課覺得很抽象，就上來 P5 畫畫」→「以前學的數學沒有那麼討厭了吧」。
- [2:36:50] 課程資源、問答與收尾：每週 /live 網址不變；約一週後影片上架 Hahow 可無限觀看，

## 作業：第一幅生成藝術

1. Pinterest 找題材（例：機器的齒輪當印章）
2. 先蒐集 10 張參考做靈感板（Pinterest、Apple 無邊記）
3. 用程式或數學畫出第一幅生成藝術
4. 存 10 種變體、挑最滿意一張
5. 用 AI 做情境圖

## 課程筆記（預覽）

> 2026-09-22（二）19:00–21:43 線上直播

## 這堂在做什麼

第 0 堂是整門課的地圖。前一個多小時，哲宇從自己怎麼從電機系、網頁接案走到程式藝術講起，攤開 11 週要走的路，說清楚 AI 寫程式這麼快的時代，為什麼還要懂原理。接著看他最近在設計展的兩件作品和其他創作者的案例，練習把一件作品拆成可以執行的步驟。後半段打開 OpenProcessing，從一個空白的 sketch 開始，一路做出表情筆刷、會長大的鸚鵡螺、自己變色的線條和泡泡筆刷，最後把圖和影片存下來，帶回家當作業的起點。

> 這堂課帶走
>
> 1. Creative Coding 是用固定的指令和規則畫出有美感的畫面，改參數，畫面就跟著變。
> 2. 看懂一件程式藝術作品，先把它拆成一個個可以執行的步驟。拆得出來，就能跟 AI 講清楚你要什麼。
> 3. 用 AI 學這門課像當導演：知道手邊有 sin、cos、Perlin noise 這些工具，才能把 AI 一直導向你要的結果。
> 4. p5.js 的第一批工具：setup 與 draw、座標系、fill 與 stroke、translate／rotate／scale、random、變數、frameCount、sin 與 map、if 與 for。
> 5. 會在 OpenProcessing 建立、Fork、設定縮圖，並把作品存成高解析的圖和影片。

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

- 開場：這門課怎麼一起上
- 從電機系走到程式藝術
- 　Creative Coding 是什麼
- 　從螢幕走到舞台
- 11 週的地圖
- 用 AI 學這門課：當導演
- 　怎麼讓這堂課發揮最大效果
- 近況：音流學與大地與川脈的編織
- 程式藝術還能做什麼
- p5.js 從哪裡來
- 看懂一件作品：拆成可以執行的步驟
- 　用白板拆 The Harvest
- OpenProcessing：註冊、介面、追蹤創作者
- p5.js 第一課：setup、draw、顏色與座標
- 　setup 與 draw
- 　先說顏色，再畫圈
- 　座標系
- 實作一：表情筆刷
- 從表情到弧線：鸚鵡螺軌跡
- 　map：把一個範圍換到另一個範圍
- 實作二：動態顏色與存圖
- 加碼：迴圈、泡泡筆刷與存影片
- 課堂問答
- 　上課方式與課程資源
- 　作品與工具
- 　OpenProcessing 操作
- 　器材
- 作業與下一堂
- 卡住的時候
- 延伸資源

## 這堂課說過的話

> 「我希望能夠把我大概這十年來……所有的記憶都留存下來，幫助任何想要入門的人」
>
> ——哲宇，第 0 堂 [04:02]

> 「你要在這堂課玩得開心，然後不要有壓力」
>
> ——哲宇，第 0 堂 [05:03]

> 「大概只要這 28 行」
>
> ——哲宇，第 0 堂 [16:17]

## 本堂範例與案例

### 範例程式（OpenProcessing）

- [表情筆刷 hahow new media #1](https://openprocessing.org/@cheyuwu/3015525)：第一個筆刷：滑鼠畫出表情
- [鸚鵡螺與動態顏色 #1-2](https://openprocessing.org/@cheyuwu/3015615)
- [泡泡筆刷（for 迴圈）#1-3](https://openprocessing.org/@cheyuwu/3015703)
- [花朵示範](https://openprocessing.org/@cheyuwu/2963448)
- [外星生物 Fern（28 行）](https://openprocessing.org/@cheyuwu/700092)

### 哲宇的案例

- [作品總覽](https://cheyuwu.com/zh/work)
- [咖啡幻夢（星巴克）](https://cheyuwu.com/zh/work/coffee-dreamscape)：目前最大的 p5.js 作品
- [《未竟之花》](https://cheyuwu.com/zh/work/unfinished-bloom)
- [The Last Input《終局之前》](https://cheyuwu.com/zh/exhibition/the-last-input)
- [距離之歌 Song of Distances](https://cheyuwu.com/zh/project/-M0nSR_ahyfV-9jC9po_/)
- [台北聲音地景計畫](https://taipeisoundscape.com/)
- [200614 Organic Circuit](https://cheyuwu.com/zh/sketch/918427/)
- [200804 Superstring Theory](https://cheyuwu.com/zh/sketch/941774/)
- [巴黎生態系（p5.js）](https://openprocessing.org/@cheyuwu/2470424)
- [靈魂魚製作流程](https://creativecoding.in/2023/03/02/soul-fish-process/)
- [OpenProcessing 作品集](https://openprocessing.org/@cheyuwu)

### 其他人的案例

- [筆刷參考：brush](https://openprocessing.org/sketch/704595)
- [Rotary Brush](https://openprocessing.org/sketch/595598)
- [Generative Brushes](https://openprocessing.org/sketch/107816)
- [Takawo](https://openprocessing.org/@takawo)：OpenProcessing 值得追蹤
- [aluan](https://openprocessing.org/@aluan)：OpenProcessing 值得追蹤
- [newyellow（黃新）](https://openprocessing.org/@newyellow)：OpenProcessing 值得追蹤
- [Junichiro Horikawa](https://openprocessing.org/@jhorikawa)：OpenProcessing 值得追蹤
- [Zach Lieberman](https://www.instagram.com/zach.lieberman/)
- [Tyler Hobbs](https://tylerxhobbs.com/)
- [Clinamen（Céleste Boursier-Mougenot）](https://www.youtube.com/shorts/g99TDzER3W0)
- [Art Blocks](https://www.artblocks.io/)：生成藝術平台

### 工具

- [p5.js Reference](https://p5js.org/reference/)
- [OpenProcessing](https://openprocessing.org/)
- [MDN Canvas 教學](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial)
- [ColorZilla（瀏覽器取色）](https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhed)
- [p5.capture（存影片）](https://github.com/tapioca24/p5.capture)

## 這堂的作品

- 作業：class1 作業。印章生成 https://openprocessing.org/sketch/3027049/embed/ 幾何圖案 https://openprocessing.org/sketch/3027080/embed 做成Mockup 水波紋…　[OpenProcessing](https://openprocessing.org/sketch/3027049/embed/)
- 作業：螺旋Rasen。https://openprocessing.org/@chuntsai/3021101　[OpenProcessing](https://openprocessing.org/@chuntsai/3021101)
- 作業：可愛花朵與可愛貓貓~ 喵~。原本是想要做星空、櫻花等，但是目前功力還不夠，無法做出理想的效果，在找參考圖時看到了花叢和貓咪，於是就先用這個做為主題啦~　[OpenProcessing](https://openprocessing.org/@ycs77/3023921)
- 作業：磚頭與圓圈花紋。第一週與第二週課程直播的綜合練習，想像力還在培養中......參考資料：pin.it　[OpenProcessing](https://openprocessing.org/@noirklyn2fa7/3024479)
- 作業：雜訊城市(?)。https://openprocessing.org/@hybert7004/3020927 原本想畫一些比較具象的物體ex：鳥，鼠標，但後來發現技術跟想像力不太夠，後來看到一些類似glitch的方格跟拖曳感之後就想說能簡單地將畫布一分為…　[OpenProcessing](https://openprocessing.org/@hybert7004/3020927)
- 作業：泡沫筆刷
- 作業：rhythm #0。從 artblocks.io 作品獲取靈感，搭配隨機數創作鼓點跳動　[OpenProcessing](https://openprocessing.org/@u288673/3025703)
- 作業：盲人拉胚
- 作業：《抽筆》 Draw a Brush。概念為常見的四種要素墨、霓、藤、絲，每次開啟時能隨機抽到其中一款筆刷自由創作，每一款筆刷有不同的特性待使用者發掘　[OpenProcessing](https://openprocessing.org/@Ruyuang/3024526)
- 作業：AI art 動態圖。動態圖
- 作業：line pattern。https://openprocessing.org/@u76476/3022658　[OpenProcessing](https://openprocessing.org/@u76476/3022658)
- 作業：Rasen
- 作業：Moontrace。構想是因為中秋節，所以想要用月亮當作主題～　[OpenProcessing](https://openprocessing.org/@wujue/3015527?v=2)
- 作業：作業。作業＿L0
- 作業：雖然數學不熟，但在 AI 輔助下將幾何公式轉化為極光花，體會到程式創作的無限可能　[OpenProcessing](https://openprocessing.org/@ohana/3022503)
- 作業：點擊=加速。復古DVD畫面過程中，我學習到: - 3d色彩變化rejection sampling - class 和 list 運用- 微調用戶體驗初始參數　[OpenProcessing](https://openprocessing.org/@K18503/3022563)
- 作業：花開花落。花朵會隨著鼠標進行花開與花落，隨著越來越多的花開與花落，在“地面”（畫布）上會逐漸呈現出類似 “凋零的花朵掉滿地” 的視覺感受。此為簡單運用第一週課程所學，輔以一點 AI 協助完成的小作品作業。　[OpenProcessing](https://openprocessing.org/sketch/3015708)
- 作業：Abstract Chromatography。靈感來源（pin.it）　[OpenProcessing](https://openprocessing.org/@triviak/3021437)
- 作業：Circles。Circles Inspired by artblocks.io　[OpenProcessing](https://openprocessing.org/@nickhu/3022454)
- 作業：20 Windblown Lines　[OpenProcessing](https://openprocessing.org/@cyking/3022404)
- 作業：蒲公英。https://openprocessing.org/@3RH/3019915 ▼Mood Board　[OpenProcessing](https://openprocessing.org/@3RH/3019915)
- 作業：Aurora 極光繪製。找參考資料的時候覺得極光很適合練習第一堂課的內容，雖然應該很多人做過但新手就不求什麼突破性的創意了～拿來練基本功剛剛好　[OpenProcessing](https://openprocessing.org/@qwer565891/3021510)
- 作業：Bouncing Sheep。是一個活在異次元的羊咩，跟著滑鼠的動作進行擺動、跳躍　[OpenProcessing](https://openprocessing.org/@u232194/3018182)
- 作業：TeaBall。構想是使用者可以倒入不同顏色的茶品，然後可以透過搖晃混合出隨機的畫面，這裡嘗試使用Gemeni協助撰寫程式並加入互動功能，畫面繪製完成後存檔，再生成mockup，雖然跟腦海想要呈現的有差距，但結果還挺有趣的。　[OpenProcessing](https://openprocessing.org/@bh9986900bh/3020858)
- 作業：作品一：動態幾何
- 課堂作品：彩虹條紋。方塊疊出的直條紋，左側一道斜帶
- 課堂作品：7 秒 WebM 錄影。圓角方塊繞圈旋轉
- 課堂作品：表情筆刷。粉色方臉，灰底
- 課堂作品：貓頭鷹。彩色貓頭鷹疊滿畫面
- 課堂作品：旋轉方塊。藍紫半透明圓角方塊繞一圈
- 課堂作品：弧線加旋轉。灰底上的黃色細線螺旋
- 課堂作品：弧線加旋轉。紅黃放射條紋的鸚鵡螺，黑底（1 個愛心）
- 課堂作品：弧線加旋轉。青色細線螺旋
- 課堂作品：弧線加旋轉。白色線圈上下串成一列，黑底
- 課堂作品：弧線加旋轉。灰白細線繞成圓環
- 課堂作品：弧線加旋轉。白色細線在黑底捲成號角形
- 課堂作品：表情筆刷。紫藍小方臉，灰底
- 課堂作品：表情筆刷。橘、黃、綠的大方臉
- 課堂作品：表情筆刷。綠色與棕色小方臉，連程式一起截
- 課堂作品：表情筆刷。藍色方臉疊滿畫面，連程式一起截

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

下一堂：[第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01)

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


---

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

# 第一個生成藝術作品

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

〈第一個生成藝術作品〉是吳哲宇新媒體藝術全景課的第 1 堂（共 11 堂），2026/9/29（二） 19:00–21:30 在 Hahow 直播，工具是 p5.js。

課綱：環境設定、畫布、動態圖形、隨機性，這堂做出動態幾何作品。

2 小時 32 分。前 38 分鐘看作業、回答 AI 的定位與「去哪裡找新媒體藝術的工作」；接著從色票與 if／else 取色、環狀的花（請 AI 補 polygon），一路做到影像筆刷系統與 blendMode，最後用取座標小工具把手點的花形做成印章網格。作業是「作品一：動態幾何」，10/5（一）21:00 前交 Hahow。

錄影長度 2:32:19。回放與完整筆記在學員登入後看（[學員登入](https://newmediaart.course.monolab.world/learn)）。

## 章節

- [0:00] 開場：互動以 Discord 為主、語速放慢：互動以 Discord 為主，那邊可以貼圖片；「這次時間我儘量收在兩個小時啦」，預告三個小 demo。
- [2:50] 課程網站導覽：作品、/live、上一堂筆記與互動模組：首頁作品牆、/live 頁怎麼用；上一堂筆記的時間戳可以點，座標與 transform 的互動模組；「我會一邊打程式一邊打出它的註解」。
- [8:29] YouTube 插播廣告、AI 時代怎麼學：「大家要準備面對的是一個幾乎大家都不會手寫程式碼的時代，但是如果你會手寫程式碼…你就可以更快的去指揮」；作業先手打，再讓 AI 改造。
- [10:52] 作業賞析：鸚鵡螺變體、表情的比例與配色：誇張的臉部比例、異材質交替、顏色的變體；配色工具 Coolors。
- [15:05] 小示範：色票清單、random 與取餘數：let colors 貼進 Coolors 的陣列，random(colors) 隨機抽、colors[frameCount % 10] 照順序取。
- [19:42] 作業賞析（續）：蒲公英與指揮 AI、會跳的羊、極光：每次作業先做 moodboard、找出最重要的特徵；用構圖草稿指揮 AI；movedX 讓東西跟著滑鼠速度變。
- [28:13] 作業改交 Hahow：Hahow 為主，像部落格一樣放靈感板、嘗試與變體；最漂亮的畫面貼 Discord。
- [29:46] 回答問題：新媒體藝術的公司與案子、參數時間軸：台灣與國外的新媒體藝術團隊；把表演的參數排在時間軸上，就是一個迷你劇場。
- [37:54] 今天要做什麼：Moodboard、迴圈與函數、手繪的有機感：白板講迴圈與函數；「我希望大家做出來的那個程式藝術作品啊，它是有有機感的」。
- [45:54] 示範：if／else 與餘數決定顏色：frameCount % 2 奇偶換色，% 10 分三段；「一旦你就是要讓它出現這種圖騰型的東西，你都可以使用這個方式」。
- [51:05] 環狀的花：極座標、translate、rotate、for：原點移到中間，ellipse 往右偏移半個寬度，rotate 30 度會累加，for 重複 12 次畫成一朵花。
- [1:04:01] 花的變化：色票輪替、AI 補 polygon、殘影：colors[i % 5] 每片換色；請 AI 補 polygon 做六角花瓣；半透明背景留下殘影。
- [1:20:17] 作品觀摩：Archetype 與遞迴：空間切割與遞迴的概念，「今天我們不會寫到」。
- [1:27:24] 影像筆刷：Act of Emotion、上傳圖片、loadImage：截一塊畫當筆刷、上傳到 Files、async setup 加 await loadImage；「就講個筆刷講得太久了」。
- [1:37:55] 作品觀摩：Trossets 格線拼圖：每格四邊接點都有線的圖塊，隨機拼起來線條也接得上。
- [1:40:42] 筆刷進階：跟著轉、imageMode、切換筆刷、按下才畫、速度決定大小：translate 到滑鼠再 rotate、imageMode(CENTER)、keyPressed 切換、mouseIsPressed、dist 算速度。
- [2:00:42] 作品觀摩：Fidenza 與向量場：向量場扭曲線條，再沿線切段上色票。
- [2:04:29] 回顧、blendMode 與作業題目：Photoshop 的圖層疊合模式：DARKEST、SCREEN；作業「作品一：動態幾何」。
- [2:11:30] beginShape／vertex：取座標小工具與花朵印章網格：點一下印出 vertex，包成 drawFlower()，兩層 for 印成網格、random 二選一、noLoop。
- [2:26:52] 回家作業、下週預告、問答與問卷：找喜歡的場景做成每次打開都不一樣的拼貼畫，存 5 個變體與影片；下週向量與粒子；遞迴之後再講。

## 作業：作品一　動態幾何

1. 結合今天做幾何形狀的方法：圖騰般的配色、環狀構圖、筆刷系統，自由組合
2. 找一個喜歡的場景（生活風景、看過的畫、喜歡的角色），先用 moodboard 收集
3. 用 p5.js 做出來，像一幅馬賽克拼貼畫，每次打開都不一樣
4. 存 5 個左右的變體圖
5. 輸出成影片讓它動起來（留下軌跡或隨時間變化），或用筆刷畫完存圖
6. 交到 Hahow 作業區「作品一」，10/5（一）21:00 前；Discord #作業分享 貼一份

## 課程筆記（預覽）

> 2026-09-29（二）19:00–21:32 線上直播（錄影 2:32:19）

## 這堂在做什麼

上一堂用滑鼠做出了第一支筆刷，這一堂要回答的問題是：既然要用程式畫一幅畫，要從哪裡著手？哲宇先從大家的作業看起，再拿「重複」當主線往下走。磚牆一塊一塊換顏色，花瓣一片一片轉成一圈，一小塊圖片沿著滑鼠一直蓋下去，就是筆刷。整堂做了五個示範：色票與 if／else、環狀的花、影像筆刷、取座標小工具、花朵印章網格，中間穿插四件 Art Blocks 作品，看別人怎麼用同樣的重複做出圖騰感。最後的作業是「作品一：動態幾何」。

> 這堂課帶走
>
> 1. **色票是一個清單**從 Coolors 複製成陣列，用 `random()`、`%` 和 if／else 決定顏色怎麼排，圖騰感就出來了。
> 2. **環狀構圖是在轉畫紙**原點移到中心，畫一片、轉 30 度，用 `for` 重複 12 次就是一朵花。
> 3. **缺零件就請 AI 寫一個函數**自己決定貼在哪、怎麼叫它，等於在幫 p5.js 寫外掛。
> 4. **圖片也能當筆刷**載入、對準滑鼠、按鍵切換、按下才畫、速度決定大小，再用 blendMode 疊色。
> 5. **手點座標，做自己的印章**點出一串 vertex，包成 `drawFlower()`，兩層 `for` 印成一整面。

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

- 課程網站：筆記、互動模組與資源
- AI 時代，為什麼還要先手打
- 作業賞析：軌跡、比例、異材質與配色
- 小示範：把色票變成清單
- 作業賞析（續）：先畫構圖，再交給 AI
- 新媒體藝術在哪裡發生：團隊、案子與參數時間軸
- 這堂的主線：重複、迴圈與函數
- 示範：用餘數和 if／else 排顏色
- 示範：環狀的花
- 示範：讓花長出變化
- 作品觀摩：Archetype 與遞迴
- 示範：影像筆刷
- 作品觀摩：Trossets 的格線拼圖
- 示範：筆刷系統
- 作品觀摩：Fidenza 與向量場
- 回顧與 blendMode
- 示範：取座標小工具
- 示範：花朵印章網格
- 課堂問答
- 　程式觀念
- 　筆刷與介面操作
- 　AI 與職涯
- 　課程安排
- 作業與下一堂
- 　題目：作品一　動態幾何
- 　下一堂
- 卡住的時候
- 延伸資源

## 這堂課說過的話

> 「如果說你覺得有點辛苦或是跟不上，這個是正常的，因為寫程式剛開始本來就會蠻卡的」
>
> ——哲宇，第 1 堂 [03:54]

> 「大家要準備面對的是一個幾乎大家都不會手寫程式碼的時代，但是如果你會手寫程式碼…你就可以更快的去指揮你的工具去做出創作」
>
> ——哲宇，第 1 堂 [10:00]

> 「你至少要讓自己參與在這個過程中」
>
> ——哲宇，第 1 堂 [22:47]

## 本堂範例與案例

### 範例程式（OpenProcessing）

- [260929 colors demo](https://openprocessing.org/@cheyuwu/3022625)：色票清單、random 與 if／else 取色
- [260929 angle demo](https://openprocessing.org/@cheyuwu/3022662)：環狀的花：translate、rotate、for
- [brush demo class 1-2](https://openprocessing.org/@cheyuwu/3022716)：影像筆刷：按下才畫、速度決定大小
- [260929 shape demo](https://openprocessing.org/@cheyuwu/3022822)：取座標小工具：點畫布印出 vertex
- [vertex flower](https://openprocessing.org/@cheyuwu/3022843)：花朵印章網格：beginShape／vertex、push／pop
- [Explanation of brush pen（@bun）](https://openprocessing.org/@bun/793375)：點與點之間補間的筆刷

### 其他人的案例（Art Blocks）

- [Archetype by Kjetil Golid](https://www.artblocks.io/collection/archetype-by-kjetil-golid)：空間切割、遞迴
- [Act of Emotion by Kelly Milligan](https://www.artblocks.io/collection/act-of-emotion-by-kelly-milligan)：材質疊成筆刷
- [Trossets by Anna Carreras](https://www.artblocks.io/collection/trossets-by-anna-carreras)：格線拼圖
- [Fidenza by Tyler Hobbs](https://www.artblocks.io/collection/fidenza-by-tyler-hobbs)：向量場
- [Moodboard：第一個生成藝術作品](https://www.pinterest.com/majerowob/hahow-%E7%AC%AC%E4%B8%80%E5%80%8B%E7%94%9F%E6%88%90%E8%97%9D%E8%A1%93%E4%BD%9C%E5%93%81-moodboard/)

### 新媒體藝術團隊（回答〈關於工作〉）

- [Moment Factory](https://momentfactory.com/)
- [Local Projects](https://localprojects.com/)
- [Volvox Labs](https://volvoxlabs.com/)
- [叁式 Ultra Combos](https://ultracombos.com/)
- [Dimension Plus](https://www.dimensionplus.co/)
- [十三行互動](https://www.13techart.com/)
- [黑川互動媒體藝術](https://www.peppercorns.com.tw/)
- [豪華朗機工（專訪）](https://theartpressasia.com/2020/01/14/artist-is-a-special-kind-of-people-with-smart-and-foolish-at-the-same-time-interveiw-with-luxurylogico/)
- [creativecoding.in 入門資源](https://creativecoding.in/resources/)

### 工具

- [Coolors 配色](https://coolors.co/)：Explore 挑現成的、Generator 按空白鍵換、Export → Copy as Array
- [課堂用的那組色票](https://coolors.co/240115-de3c4b-87f5fb-2f131e-cec3c1)
- [CSS 顏色名稱表](https://www.w3schools.com/cssref/css_colors.php)
- [p5.js Reference](https://p5js.org/reference/)
- [beginShape／vertex](https://p5js.org/reference/p5/beginShape/)：外框線接回第一點寫 endShape(CLOSE)
- [Google 藝術與文化（找作業場景）](https://artsandculture.google.com/)
- [透明背景筆刷素材](https://www.vecteezy.com/free-png/watercolor-brushes)：下載前看授權

## 這堂的作品

- 作業：Rain。討厭下雨 但在網頁裡面下雨還不錯🤣　[OpenProcessing](https://openprocessing.org/@wujue/3027945)
- 作業：水　[OpenProcessing](https://openprocessing.org/@K18503/3027942)
- 作業：嚴肅的臉。作品靈感：instagram.com　[OpenProcessing](https://openprocessing.org/@triviak/3027812)
- 作業：開花。作業連結:https://openprocessing.org/@Bing-Yu-Hsieh/3027863 利用ai幫忙做了一個可以隨機顏色、位置長大的花，跟預想的還是有差別。　[OpenProcessing](https://openprocessing.org/@Bing-Yu-Hsieh/3027863)
- 作業：稻田 Paddy Field。設計過程：hahow.in上次手刻程式，這次嘗試與 AI 協作實現更好的效果～（AI秒速寫完初版然後再花數小時當家教一行行慢慢教我慢慢一起改）　[OpenProcessing](https://openprocessing.org/@qwer565891/3027739)
- 作業：taiwan roof/roots。作品連結 https://openprocessing.org/@peal256/3025512 鳥瞰台灣的都市，常常你會發現一大片都是鐵皮屋。有人覺得鐵皮屋屋頂很醜，但我覺得鐵皮屋屋頂是因應台灣氣候與經濟背景下的產物，代表著台灣特定的一…　[OpenProcessing](https://openprocessing.org/@peal256/3025512)
- 作業：abstract character #3。變裝魔法師，靈感來自： pin.it 。使用 vetex 畫出所有節點，然後連線，通過隨機顏色實現變裝，眼珠會看向滑鼠位置；手的前方是一顆大魔法球，點擊畫布隨機生成一組魔法球　[OpenProcessing](https://openprocessing.org/@u288673/3027081)
- 作業：Petals in the Mist。作業_L1 Work with Claude AI “Petals in the Mist” by Tiff Wen License Creative Commons Attribution NonCommercial ShareAlik…　[OpenProcessing](https://openprocessing.org/@u147453/3022826)
- 作業：Petals in the Mist。Petals in the Mist Find some ideas from pinterest and work with Claude AI.
- 作業：breathing city。作業連結https://openprocessing.org/@celinetung/3023913 窗戶燈光忽明忽暗，滑鼠滑到建築物上建築物也跟著移動　[OpenProcessing](https://openprocessing.org/@celinetung/3023913)
- 作業：記憶格子。記憶像是交錯的格子，有時清楚，有時模糊，時間的球繼續跑著作品互動性: 滑鼠點擊切換顏色參考資料: pinterest.com　[OpenProcessing](https://openprocessing.org/@u232194/3024622)
- 作業：Dancing Cube。https://openprocessing.org/@3RH/3026665 ▼Mood Board 1.做基本型。之後要分三個部分上色,所以用三個平行四邊形拼湊。　[OpenProcessing](https://openprocessing.org/@3RH/3026665)
- 作業：動態幾何:流動的波。靈感版:https://pin.it/5KqmnUp7Y 作品連結:https://openprocessing.org/@u492491/3026988 跟AI協作~　[OpenProcessing](https://openprocessing.org/@u492491/3026988)
- 作業：L.H. #1。還在補做第一堂的練習...為什麼大家都那麼強🫠
- 作業：AI Art動態圖。Art動態圖
- 課堂作品：筆刷。7 秒動圖，黑色墨點筆刷，滑鼠拖出一串小點，停下來的地方長成大團墨圓，白底
- 課堂作品：筆刷。青色半透明的刷痕，中間夾著一串黃紅色的小圖片印章，黑底
- 課堂作品：筆刷。深淺藍的印章疊成彎曲的帶子，疊越多顏色越深，用了 blendMode(MULTIPLY)，白底
- 課堂作品：筆刷。粉藍、綠褐的圖片碎片當長方形筆刷，拼貼成一團，白底
- 課堂作品：筆刷。黃、淡紫、青綠三種筆刷的寬帶交錯鋪滿畫面，點滑鼠切換筆刷
- 課堂作品：筆刷。淺藍色的印章沿彎曲的路徑疊成一條立體的帶子，白底
- 課堂作品：筆刷。3 秒錄影，橘色與青灰的細線放射狀刷出好幾圈圓弧，黑底
- 課堂作品：筆刷。「失控的筆刷」，圖片印章沿弧線密密排成一圈圈黃綠色環帶，灰底
- 課堂作品：花。彩虹色八片半透明橢圓花瓣，背景是淡彩色塊
- 課堂作品：花。6.5 秒錄影，青綠、米黃的細長花瓣繞白色圓心轉，一排排往外放射，黑底
- 課堂作品：花。粉橘、紫、深藍的橢圓花瓣疊成厚片漩渦，黃色圓心，黑底
- 課堂作品：花。藍綠六邊形和粉橘、紫色五邊形繞黃色圓心排成一圈，深色底
- 課堂作品：花。6 秒錄影，紅、白、淺藍、深藍的橢圓花瓣，轉起來甩出大片放射狀的殘影，黑底
- 課堂作品：花。6 秒動圖，青綠、米黃的橢圓花瓣繞灰色圓心旋轉，一路疊出厚厚的殘影，黑底
- 課堂作品：花。灰藍、紫紅的長六角形花瓣繞著米白圓心轉成漩渦，黑底
- 課堂作品：花。紅、粉、黃、米白的十二片橢圓花瓣，灰底上留著一圈圈旋轉的殘影

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

上一堂：[第 0 堂〈新媒體藝術的全景地圖〉](https://newmediaart.course.monolab.world/lesson/00)　下一堂：[第 2 堂〈數學之美：向量與粒子〉](https://newmediaart.course.monolab.world/lesson/02)

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


---

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

# 數學之美：向量與粒子

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

〈數學之美：向量與粒子〉是吳哲宇新媒體藝術全景課的第 2 堂（共 11 堂），2026/10/6（二） 19:00–21:30 在 Hahow 直播，工具是 p5.js。

課綱：向量、力場、粒子系統，這堂做出Flow Field 作品。

2 小時 16 分。先回答 Discord 的問題、分享 Open Audio Visual 改版與實驗室系統，接著看第一堂的作業；主要課程從粒子藝術的作品案例講到向量、加速度、力場與 noise 的取值，再用三個 Demo 依序做出會彈的球、按住滑鼠噴出粒子的粒子槍，以及用 noise 兩張切片推動的粒子力場。作業是「作品二：Flow Field」，10/12（一）21:00 前交 Hahow。

錄影長度 2:16:34。回放與完整筆記在學員登入後看（[學員登入](https://newmediaart.course.monolab.world/learn)）。

## 章節

- [0:28] 開場：調整上課路線：說明低延遲直播、今天的課程順序與三個 Demo，這次會先講概念、看作品，再進入實作。
- [4:49] 回答課程資源與 MIDI 問題：回覆上堂課沒做完的 Crowded City、課程筆記解鎖方式與 MIDI 鍵盤會在哪裡用到。
- [6:58] Open Audio Visual：讓作品接上表演：介紹 Open Audio Visual 的輸入、輸出、映射與世界，示範手部樂器、聲音和 MIDI 控制器。
- [11:34] MIDI 控制器推薦：展示控制器圖鑑，推薦 Akai LPD8（mk2）與 Arturia MiniLab 3，中間曾因按到鍵盤造成畫面跳掉。
- [13:53] 實驗室與 AI 共創：介紹作品族譜、實驗室系統與《宇宙熵時》，談用對話、決策、MIDI 錄製與 AI 迭代作品。
- [21:22] 第一堂作業賞析：看動態幾何、格子、花瓣、稻田、碎片與下雨等作品，談材質、景深、AI 協作與粒子物件。
- [30:00] 粒子藝術的基本結構：把粒子說成可動、可大量重複、受物理法則影響的物件，從 Blue Particle Rain 進入力場與軌跡。
- [32:23] 粒子作為畫筆與 Circle Packing：說明粒子不一定是圓形，也可以是方形、紙片或筆刷，並介紹不重疊排列的 Circle Packing。
- [36:21] 粒子作品案例：從花到神經系統：以《咖啡幻夢》、《彼岸花》、Golden Evolution、Electriz、《混亂舞者》 與 Nervous System 說明粒子演化。
- [41:30] 國際案例：風場與資料藝術：看 Wind Map、Wind of Boston、Fidenza、Perlin Noise Flow Field 與 teamLab，連結向量場、粒子與空間。
- [44:40] 向量：位置與速度：把位置和速度包成向量，示範向量相加、位置加速度，以及連續軌跡如何形成。
- [48:56] 加速度、阻力與反彈：補充加速度、空氣阻力與反彈係數，說明用位置、速度、加速度和阻力描述物件運動。
- [50:30] 力、座標系與粒子互動：談不同質量受力的差異、滑鼠吸引與排斥、電腦座標的 Y 軸方向，以及星體彼此的引力。
- [54:44] 力場與 Perlin Noise：用格點、Sine/Cos 與 Perlin Noise 建立連續的地形和向量場，說明一維、二維、三維切片。
- [1:00:00] 粒子生命週期：以煙火說明粒子的誕生、受力、縮小與死亡，指出生命週期是避免粒子無限增加的方式。
- [1:02:41] 中場短休與 GPU／CPU：因學員提問安排約兩到三分鐘休息，回來後回答粒子運算的 CPU、GPU 與 GPGPU。
- [1:06:48] 一顆會彈的球：從 x、y 位置開始，加上速度、重力加速度、邊界判斷與反彈，最後把變數改寫成向量。
- [1:13:31] 續：顏色與向量改寫：用 clr 和 colors 管理球的當下顏色與色票清單，示範殘影、createVector、p/v/a 和摩擦。
- [1:24:27] 學員 Ball 程式除錯：處理球彈不起來與飛出去的程式，修正 Vy 反向寫法以及位置沒有加上速度的問題。
- [1:25:44] Particle Gun 的結構：介紹 Class、constructor、this、Particle 的位置速度加速度，以及每顆粒子的 update 和 draw。
- [1:33:23] 陣列與 forEach：用 particles 陣列和 forEach 管理多顆粒子，控制滑鼠按下才生成，並逐顆更新與繪製。
- [1:38:44] 生命與清理：處理粒子太多的問題，加上半徑、顏色、life 倒數與 filter，只留下 life 大於零的粒子。
- [1:46:39] 兩張 noise 切片推動粒子：從 Particle Gun Fork 出格點粒子，用 Noise 的不同切片給加速度、map 到負一至一，再用摩擦做出流動力場。
- [1:54:30] 回顧、像素取值與作業：回顧向量、力場、Noise 和生命週期，示範用 get() 取影像像素，說明三個 Demo 的練習與參數延伸。
- [2:10:27] 收尾問答與下週預告：回答 Pinterest、MIDI、私訊和演算法課程問題，預告自然演算法與 flocking，最後請大家填問卷。

## 作業：作品二　Flow Field

1. 把課堂上的三個 Demo（Ball、Particle Gun、Particle Field）各練過一遍
2. 每個 Demo 都改參數，調到自己喜歡、覺得好玩的狀態
3. 參考本單元的粒子 moodboard 或自己的 moodboard，往想要的藝術感覺調
4. 替作品命名、寫描述，從日常取材（每天的雨、飄過的灰塵…）
5. 進階：載入一張圖，用 get() 取像素顏色當粒子參數
6. 交到 Hahow 作業區「作品二」，10/12（一）21:00 前；Discord #作業分享 貼一份

## 課程筆記（預覽）

> 2026-10-06（二）19:00～21:16 線上直播（錄影 2:16:34）

## 這堂在做什麼

前兩堂常常講到一半就突然跳進程式，這堂換了一個走法：先把概念講清楚，看完參考作品，再踏進程式。所以前一個小時幾乎沒有寫程式，從粒子藝術的作品看起，看大家怎麼用一大群會動的小東西畫出河流、花和風，再用互動模組把向量、速度、加速度、力場和 Perlin noise 一個一個拆開。後一個小時連寫三個 Demo，一個長成下一個：先是一顆會彈的球，再把球包成工廠、按著滑鼠噴出一整串彩色粒子，最後讓粒子撒滿畫面，順著 noise 排出來的地形流成河。

> 這堂課帶走
>
> 1. 粒子就是一個能單獨移動、有自己邏輯的物件。讓它大量重複，再一起被同一套物理影響，就是粒子藝術。
> 2. 向量把一組數字包成一支箭頭。每一格：位置加上速度，速度加上加速度。
> 3. Perlin noise 是一坨連續的亂數。用粒子自己的位置去取它，就得到一張力場，粒子會順著它流動。
> 4. class 像一座工廠，每 new 一次就做出一顆粒子。用陣列裝起來、forEach 一顆一顆更新，再用 life 和 filter 讓它們死掉。
> 5. 參數要多玩，奇怪的數字常常畫出最好看的軌跡。

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

- 開場：先講概念，再進程式
- 近況：讓作品可以被演奏
- 　Open Audio Visual
- 　入門 MIDI 控制器
- 　實驗室：用講話寫作品
- 作業賞析：玩到想把它留下來
- 粒子藝術：一大群會跑來跑去的東西
- 　三個通則
- 　粒子也可以是筆刷
- 　Circle Packing
- 粒子案例：從花到神經系統
- 　哲宇的作品
- 　國際案例
- 向量：把一組數字包成一支箭頭
- 加速度、空氣阻力與反彈
- 力：誰比較容易被推動
- 　吸引與排斥
- 　宇宙：粒子彼此拉扯
- 力場與 Perlin noise
- 　給空間裡每個位置一個方向
- 　Perlin noise：一坨連續的亂數
- 　把軌跡留下來
- 粒子的誕生與死亡
- Demo 1：一顆會彈的球
- Demo 2：粒子槍
- Demo 3：Noise Field
- 收尾：回顧，再多玩幾招
- 　回顧
- 　幾個可以直接加進作業的玩法
- 課堂問答
- 　近況與器材
- 　概念與運算
- 　寫程式
- 　上課與提問
- 作業與下一堂
- 　作品二：Flow Field
- 　下一堂：自然的演算法
- 卡住的時候
- 延伸資源

## 這堂課說過的話

> 「我們先把概念講清楚，然後看參考的作品，看完參考的作品之後，我們再踏到程式裡面，不會讓大家猝不及防的就被程式攻擊這樣」
>
> ——哲宇，第 2 堂 [1:55]

> 「那什麼東西是在 AI 時代沒有辦法馬上被做完的東西？」
>
> ——哲宇，第 2 堂 [16:47]

> 「我的想法跟審美才是作品的本身這樣」
>
> ——哲宇，第 2 堂 [17:03]

## 本堂範例與案例

### 範例程式（OpenProcessing）

- [w2-1 Ball](https://openprocessing.org/@cheyuwu/3027925)：Demo 1：位置、速度、加速度、反彈
- [w2-2 Particle Gun](https://openprocessing.org/@cheyuwu/3027928)：Demo 2：class、陣列、按住滑鼠噴粒子
- [w2-3 Particle Field](https://openprocessing.org/@cheyuwu/3027936)：Demo 3：noise 兩張切片推動的粒子力場
- [課堂現場版：Particle Gun](https://openprocessing.org/@cheyuwu/3028033)

### 哲宇的案例

- [咖啡幻夢](https://cheyuwu.com/zh/work/coffee-dreamscape/)
- [彼岸花](https://cheyuwu.com/zh/work/flower-of-the-other-shore/)
- [LG 永恆花境](https://cheyuwu.com/zh/exhibitions/lg-eternal-floral-realm/)
- [220913 Golden Evolution](https://cheyuwu.com/zh/sketch/1645015/)
- [Electriz](https://cheyuwu.com/zh/work/electriz/)
- [混亂舞者 Chaos Dancer](https://cheyuwu.com/zh/sketch/1217113/)
- [神經系統 Nervous System](https://cheyuwu.com/zh/sketch/1050016/)
- [湮滅 Annihilation](https://cheyuwu.com/zh/sketch/1935727/)
- [〈261004 宇宙熵時〉（實驗室）](https://lab.cheyuwu.com/s/261004-idea-01/)
- [Open Audio Visual](https://openaudiovisual.com/zh/)：近況：讓作品接上表演

### 其他人的案例

- [Wind Map](http://hint.fm/wind/)：Fernanda Viégas、Martin Wattenberg
- [earth.nullschool.net](https://earth.nullschool.net/)
- [Tyler Hobbs〈Fidenza〉](https://www.tylerxhobbs.com/works/fidenza)
- [Tyler Hobbs〈Flow Fields〉](https://www.tylerxhobbs.com/words/flow-fields)：流場的經典文章
- [Refik Anadol〈Wind of Boston〉](https://refikanadol.com/works/wind-of-boston-data-paintings/)
- [The Coding Train：Perlin Noise Flow Field](https://thecodingtrain.com/challenges/24-perlin-noise-flow-field)
- [Moodboard：粒子](https://www.pinterest.com/majerowob/hahow-w2-%E7%B2%92%E5%AD%90/)

### 工具

- [p5.js Reference](https://p5js.org/reference/)
- [p5.Vector heading](https://p5js.org/reference/p5.Vector/heading/)
- [p5.js get（取像素顏色）](https://p5js.org/reference/p5/get/)
- [MIDI 控制器圖鑑](https://openaudiovisual.com/zh/controllers/)
- [互動教學模組：粒子](https://newmediaart.course.monolab.world/tools?l=2&w=particle)
- [常用指令](https://newmediaart.course.monolab.world/snippets)

## 這堂的作品

- 作業：作業L2_Flowing Stones。嘗試老師上課中提到的幾個內容，與clade AI協作： 畫布肌理疊加 circle packing 連續亂數 希望可以陸續疊加成類似參考圖中層次更為豐富的效果！“Flowing Stones” by Tiff Wen https://op…　[OpenProcessing](https://openprocessing.org/@u147453/3031863)
- 作業：小船　[OpenProcessing](https://openprocessing.org/@K18503/3029530)
- 作業：.傷心小棧(hearts)。彈力球物理運動，練習經典 Windows 接龍獲勝時的卡牌連鎖彈跳　[OpenProcessing](https://openprocessing.org/@ohana/3028016)
- 作業：迷彩。所以就往迷彩發展透過調整參數增加路徑的複雜度以及改變粒子大小最後請ＡＩ幫忙加入雜點材質增加畫面質感（openprocessing.org）第二個練習也是透過同樣的方式發展選擇色票之後開始調整運動方式最後做出紙膠帶的感覺　[OpenProcessing](https://openprocessing.org/@peal256/3032584)
- 作業：A Million of Rockets / Crazy Circuit。A Million of Rockets Crazy Circuit（openprocessing.org）　[OpenProcessing](https://openprocessing.org/@nickhu/3032898)
- 作業：幻視粒子。粒子韻律感、動態延續以及有機的疊感加方式，令人想到日本動畫對於自然現象的動態筆觸　[OpenProcessing](https://openprocessing.org/@u232194/3029169)
- 作業：Glow Christmas(微光聖誕)。透過三角形限制小球生長，加上Noise 與三色色票，產出隨風搖曳的魔幻聖誕樹 https://openprocessing.org/@ohana/3032583　[OpenProcessing](https://openprocessing.org/@ohana/3032583)
- 作業：海中氣球。https://openprocessing.org/@3RH/3032564 ▼Mood Board　[OpenProcessing](https://openprocessing.org/@3RH/3032564)
- 作業：粒子變化。利用上次教的做了兩個練習。氣流下雨天（openprocessing.org）　[OpenProcessing](https://openprocessing.org/@poopoo199710/3031990)
- 作業：Flowing Stones。嘗試老師上課中提到的幾個內容，與clade AI協作：畫布肌理疊加circle packing連續亂數希望可以陸續疊加成類似參考圖中層次更為豐富的效果！
- 作業：粒子變化練習。（openprocessing.org）粒子變化渲染　[OpenProcessing](https://openprocessing.org/@Bing-Yu-Hsieh/3031855)
- 作業：splashmind/NO! worries。夏天快結束了，享受最後一次噴泉灑落的沁涼吧（openprocessing.org）那少年維持著煩惱，專心在他的煩惱；剪不斷，理還亂　[OpenProcessing](https://openprocessing.org/@sammm30/3028058)
- 作業：數學之美：自然生長。融合向量中的3個練習，將粒子動態利用noise 達到樹狀感的向上延伸，與將「彈跳的球」修改成花朵，利用life 將花朵消失～作品沒有很美請見諒，但主要想把關鍵字理解清楚。樹狀圖沒有很樹狀，目前比較像草，想知道怎麼修改達到樹狀感呢？　[OpenProcessing](https://openprocessing.org/@Shu-tasi/3032411)
- 作業：星空、蛇、重生。以梵谷的星空為概念做發想（openprocessing.org）以蛇作為發想（openprocessing.org）送給化療完的朋友，以重生做為概念，並參考老師的原始碼調整主要先練習其中一個部分。　[OpenProcessing](https://openprocessing.org/@chuntsai/3032366)
- 作業：花-盛開。願每個人都有自己的花期 終將綻放ps這次玩的很開心～　[OpenProcessing](https://openprocessing.org/@u492491/3031360)
- 課堂作品：粒子槍。10 秒錄影，粉彩色的圓從滑鼠的位置噴出、往下落
- 課堂作品：一顆球。黑底右下一顆深藍色的圓
- 課堂作品：流場。青藍、天藍、紫色的粒子軌跡在黑底上順著 noise 旋成一片片漩渦
- 課堂作品：粒子噴泉。6 秒錄影，黑底上彩色粒子往上噴、落下時拖出一串串珠子般的弧線

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

上一堂：[第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01)　下一堂：[第 3 堂〈自然的演算法〉](https://newmediaart.course.monolab.world/lesson/03)

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


---

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

# 自然的演算法

正式網址：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 頁面為準。


---

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

# 聲音 × 視覺：音頻分析

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

〈聲音 × 視覺：音頻分析〉是吳哲宇新媒體藝術全景課的第 4 堂（共 11 堂），2026/10/20（二） 19:00–21:30 在 Hahow 直播，工具是 p5.js + 麥克風。

課綱：麥克風輸入、音頻分析、音像共感（p5.js 畢業作），這堂做出音像互動作品。

上一堂：[第 3 堂〈自然的演算法〉](https://newmediaart.course.monolab.world/lesson/03)　下一堂：[第 5 堂〈TouchDesigner 入門〉](https://newmediaart.course.monolab.world/lesson/05)

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


---

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

# TouchDesigner 入門

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

〈TouchDesigner 入門〉是吳哲宇新媒體藝術全景課的第 5 堂（共 11 堂），2026/11/10（二） 19:00–21:30 在 Hahow 直播，工具是 TD。

課綱：節點式思維、TOP／CHOP／SOP 基礎、2D 視覺，這堂做出第一個 TouchDesigner 作品。

上一堂：[第 4 堂〈聲音 × 視覺：音頻分析〉](https://newmediaart.course.monolab.world/lesson/04)　下一堂：[第 6 堂〈TouchDesigner 進階〉](https://newmediaart.course.monolab.world/lesson/06)

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


---

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

# TouchDesigner 進階

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

〈TouchDesigner 進階〉是吳哲宇新媒體藝術全景課的第 6 堂（共 11 堂），2026/11/17（二） 19:00–21:30 在 Hahow 直播，工具是 TD。

課綱：3D 世界、材質、光影、影像處理，這堂做出3D 視覺作品。

上一堂：[第 5 堂〈TouchDesigner 入門〉](https://newmediaart.course.monolab.world/lesson/05)　下一堂：[第 7 堂〈體感互動〉](https://newmediaart.course.monolab.world/lesson/07)

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


---

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

# 體感互動

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

〈體感互動〉是吳哲宇新媒體藝術全景課的第 7 堂（共 11 堂），2026/11/24（二） 19:00–21:30 在 Hahow 直播，工具是 TD + MediaPipe。

課綱：MediaPipe 手勢與身體追蹤、即時影像互動，這堂做出體感互動作品。

上一堂：[第 6 堂〈TouchDesigner 進階〉](https://newmediaart.course.monolab.world/lesson/06)　下一堂：[第 8 堂〈系統整合 × 音像表演〉](https://newmediaart.course.monolab.world/lesson/08)

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


---

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

# 系統整合 × 音像表演

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

〈系統整合 × 音像表演〉是吳哲宇新媒體藝術全景課的第 8 堂（共 11 堂），2026/12/1（二） 19:00–21:30 在 Hahow 直播，工具是 全工具。

課綱：把所有工具串起來，做一場即時演出，這堂做出音像表演 demo。

上一堂：[第 7 堂〈體感互動〉](https://newmediaart.course.monolab.world/lesson/07)　下一堂：[第 9 堂〈學員作品發表講評會〉](https://newmediaart.course.monolab.world/lesson/09)

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


---

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

# 學員作品發表講評會

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

〈學員作品發表講評會〉是吳哲宇新媒體藝術全景課的第 9 堂（共 11 堂），2026/12/15（二） 19:00–21:30 在 Hahow 直播，工具是 自選。

課綱：學員分享作品，哲宇線上點評，這堂做出個人完整作品。

上一堂：[第 8 堂〈系統整合 × 音像表演〉](https://newmediaart.course.monolab.world/lesson/08)　下一堂：[第 10 堂〈AI 協作 × 創作永續〉](https://newmediaart.course.monolab.world/lesson/10)

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


---

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

# AI 協作 × 創作永續

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

〈AI 協作 × 創作永續〉是吳哲宇新媒體藝術全景課的第 10 堂（共 11 堂），2026/12/22（二） 19:00–21:30 在 Hahow 直播，工具是 AI 工具組合。

課綱：AI 作為創作夥伴；讓創作持續發生的工作流，這堂做出你自己的創作系統。

上一堂：[第 9 堂〈學員作品發表講評會〉](https://newmediaart.course.monolab.world/lesson/09)

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