數學之美：向量與粒子

〈數學之美：向量與粒子〉是吳哲宇新媒體藝術全景課的第 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。回放與完整筆記在學員登入後看（學員登入）。

• [0:28] 開場：調整上課路線
• [4:49] 回答課程資源與 MIDI 問題
• [6:58] Open Audio Visual：讓作品接上表演
• [11:34] MIDI 控制器推薦
• [13:53] 實驗室與 AI 共創
• [21:22] 第一堂作業賞析
• [30:00] 粒子藝術的基本結構
• [32:23] 粒子作為畫筆與 Circle Packing
• [36:21] 粒子作品案例：從花到神經系統
• [41:30] 國際案例：風場與資料藝術
• [44:40] 向量：位置與速度
• [48:56] 加速度、阻力與反彈
• [50:30] 力、座標系與粒子互動
• [54:44] 力場與 Perlin Noise
• [1:00:00] 粒子生命週期
• [1:02:41] 中場短休與 GPU／CPU
• [1:06:48] 一顆會彈的球
• [1:13:31] 續：顏色與向量改寫
• [1:24:27] 學員 Ball 程式除錯
• [1:25:44] Particle Gun 的結構
• [1:33:23] 陣列與 forEach
• [1:38:44] 生命與清理
• [1:46:39] 兩張 noise 切片推動粒子
• [1:54:30] 回顧、像素取值與作業
• [2:10:27] 收尾問答與下週預告

1. 把課堂上的三個 Demo（Ball、Particle Gun、Particle Field）各練過一遍
2. 每個 Demo 都改參數，調到自己喜歡、覺得好玩的狀態
3. 參考本單元的粒子 moodboard 或自己的 moodboard，往想要的藝術感覺調
4. 替作品命名、寫描述，從日常取材（每天的雨、飄過的灰塵…）
5. 進階：載入一張圖，用 get() 取像素顏色當粒子參數
6. 交到 Hahow 作業區「作品二」，10/12（一）21:00 前；Discord #作業分享 貼一份

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

• 開場：先講概念，再進程式
• 近況：讓作品可以被演奏
• 　Open Audio Visual
• 　入門 MIDI 控制器
• 　實驗室：用講話寫作品
• 作業賞析：玩到想把它留下來
• 粒子藝術：一大群會跑來跑去的東西
• 　三個通則
• 　粒子也可以是筆刷
• 　Circle Packing
• 粒子案例：從花到神經系統
• 　哲宇的作品
• 　國際案例
• 向量：把一組數字包成一支箭頭
• 加速度、空氣阻力與反彈
• 力：誰比較容易被推動
• 　吸引與排斥
• 　宇宙：粒子彼此拉扯
• 力場與 Perlin noise
• 　給空間裡每個位置一個方向
• 　Perlin noise：一坨連續的亂數
• 　把軌跡留下來
• 粒子的誕生與死亡
• Demo 1：一顆會彈的球
• Demo 2：粒子槍
• Demo 3：Noise Field
• 收尾：回顧，再多玩幾招
• 　回顧
• 　幾個可以直接加進作業的玩法
• 課堂問答
• 　近況與器材
• 　概念與運算
• 　寫程式
• 　上課與提問
• 作業與下一堂
• 　作品二：Flow Field
• 　下一堂：自然的演算法
• 卡住的時候
• 延伸資源

「我們先把概念講清楚，然後看參考的作品，看完參考的作品之後，我們再踏到程式裡面，不會讓大家猝不及防的就被程式攻擊這樣」

「那什麼東西是在 AI 時代沒有辦法馬上被做完的東西？」

「我的想法跟審美才是作品的本身這樣」

範例程式（OpenProcessing）

• w2-1 Ball：Demo 1：位置、速度、加速度、反彈
• w2-2 Particle Gun：Demo 2：class、陣列、按住滑鼠噴粒子
• w2-3 Particle Field：Demo 3：noise 兩張切片推動的粒子力場
• 課堂現場版：Particle Gun

哲宇的案例

• 咖啡幻夢
• 彼岸花
• LG 永恆花境
• 220913 Golden Evolution
• Electriz
• 混亂舞者 Chaos Dancer
• 神經系統 Nervous System
• 湮滅 Annihilation
• 〈261004 宇宙熵時〉（實驗室）
• Open Audio Visual：近況：讓作品接上表演

其他人的案例

• Wind Map：Fernanda Viégas、Martin Wattenberg
• earth.nullschool.net
• Tyler Hobbs〈Fidenza〉
• Tyler Hobbs〈Flow Fields〉：流場的經典文章
• Refik Anadol〈Wind of Boston〉
• The Coding Train：Perlin Noise Flow Field
• Moodboard：粒子

工具

• p5.js Reference
• p5.Vector heading
• p5.js get（取像素顏色）
• MIDI 控制器圖鑑
• 互動教學模組：粒子
• 常用指令

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

全部作品

上一堂：第 1 堂〈第一個生成藝術作品〉　下一堂：第 3 堂〈自然的演算法〉

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