# 第一個生成藝術作品

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