資源

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

範例程式（OpenProcessing）

• 表情筆刷 hahow new media #1：第一個筆刷：滑鼠畫出表情
• 鸚鵡螺與動態顏色 #1-2
• 泡泡筆刷（for 迴圈）#1-3
• 花朵示範
• 外星生物 Fern（28 行）

哲宇的案例

• 作品總覽
• 咖啡幻夢（星巴克）：目前最大的 p5.js 作品
• 《未竟之花》
• The Last Input《終局之前》
• 距離之歌 Song of Distances
• 台北聲音地景計畫
• 200614 Organic Circuit
• 200804 Superstring Theory
• 巴黎生態系（p5.js）
• 靈魂魚製作流程
• OpenProcessing 作品集

其他人的案例

• 筆刷參考：brush
• Rotary Brush
• Generative Brushes
• Takawo：OpenProcessing 值得追蹤
• aluan：OpenProcessing 值得追蹤
• newyellow（黃新）：OpenProcessing 值得追蹤
• Junichiro Horikawa：OpenProcessing 值得追蹤
• Zach Lieberman
• Tyler Hobbs
• Clinamen（Céleste Boursier-Mougenot）
• Art Blocks：生成藝術平台

工具

• p5.js Reference
• OpenProcessing
• MDN Canvas 教學
• ColorZilla（瀏覽器取色）
• p5.capture（存影片）

課程

• https://newmediaart.course.monolab.world/live

工具與文件

• p5.js
• Processing

藝術家與作品

• Fragments of an Infinite Field by Monica Rizzolli
• Clinamen 的報導

哲宇的作品與經歷

• 每一年的實驗（Lab）
• 墨雨設計作品

範例程式（OpenProcessing）

• 260929 colors demo：色票清單、random 與 if／else 取色
• 260929 angle demo：環狀的花：translate、rotate、for
• brush demo class 1-2：影像筆刷：按下才畫、速度決定大小
• 260929 shape demo：取座標小工具：點畫布印出 vertex
• vertex flower：花朵印章網格：beginShape／vertex、push／pop
• Explanation of brush pen（@bun）：點與點之間補間的筆刷

其他人的案例（Art Blocks）

• Archetype by Kjetil Golid：空間切割、遞迴
• Act of Emotion by Kelly Milligan：材質疊成筆刷
• Trossets by Anna Carreras：格線拼圖
• Fidenza by Tyler Hobbs：向量場
• Moodboard：第一個生成藝術作品

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

• Moment Factory
• Local Projects
• Volvox Labs
• 叁式 Ultra Combos
• Dimension Plus
• 十三行互動
• 黑川互動媒體藝術
• 豪華朗機工（專訪）
• creativecoding.in 入門資源

工具

• Coolors 配色：Explore 挑現成的、Generator 按空白鍵換、Export → Copy as Array
• 課堂用的那組色票
• CSS 顏色名稱表
• p5.js Reference
• beginShape／vertex：外框線接回第一點寫 endShape(CLOSE)
• Google 藝術與文化（找作業場景）
• 透明背景筆刷素材：下載前看授權

延伸資源

• loadImage
• image
• imageMode
• blendMode
• vertex
• endShape
• dist
• mouseIsPressed
• keyPressed
• movedX
• pmouseX
• noLoop
• push
• pop
• 十三行互動
• Moment Factory
• creativecoding.in

範例程式（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 控制器圖鑑
• 互動教學模組：粒子
• 常用指令

延伸資源

• Ball
• Particle Gun
• Particle Field
• Demo 1 Live
• Noise Field Live
• p5.Vector
• Coolors
• teamLab
• 靈魂海
• Crowded City
• 實驗室
• 作品頁
• 創作族譜
• 本堂互動模組
• 全部模組

範例程式（OpenProcessing）

• 3-0 粒子模板：Fork 這份開始，今晚的示範都從它改
• 3-1 粒子遞迴分裂：Demo 1：粒子死掉時長出子代
• 3-2 海龜繪圖與 L-System：Demo 2：照字串畫圖、點一下長一代
• 3-3 Boid：Demo 3：分離、對齊、聚合三根拉桿
• 課堂現場版：OPC 拉桿
• 課堂現場版：海龜與 L-System
• 課堂現場版：Boid

哲宇的案例

• The Last Input《終局之前》：裡面的樹就是 3D 的 L-System
• 《未竟之花》：白板上「規則一換就長出花」的作品
• L-system dynamic tree：會晃的樹
• 230124 Chain Drawing：鏈條
• 201226 Nervous System：遞迴
• 210811 Unsolvable Knot
• 200802 Tangled
• 230520 Three Stages of Reconstruction

其他人的案例與延伸閱讀

• Paper Planes
• Craig Reynolds〈Boids〉（1986）
• The Nature of Code：自主行為
• The Nature of Code：碎形
• The Algorithmic Beauty of Plants：L-System 的經典
• Moodboard：自然與生命

工具

• OPC（OP Configurator 3000）：把數字變成拉桿
• JavaScript replaceAll：L-System 的字串取代
• p5.Vector.random2D()
• Coolors 配色
• 互動教學模組
• 常用指令（粒子模板、OPC、boid 規則）

延伸資源

• Paper Planes
• 聲鬥陣：進駐計畫發表（索票）
• 2026 IRCAM 聲鬥陣（C-LAB）
• 本堂互動模組
• 常用指令

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