# 數學之美：向量與粒子

正式網址：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 頁面為準。