# 資源

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