第一個生成藝術作品

〈第一個生成藝術作品〉是吳哲宇新媒體藝術全景課的第 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。回放與完整筆記在學員登入後看（學員登入）。

• [0:00] 開場：互動以 Discord 為主、語速放慢
• [2:50] 課程網站導覽：作品、/live、上一堂筆記與互動模組
• [8:29] YouTube 插播廣告、AI 時代怎麼學
• [10:52] 作業賞析：鸚鵡螺變體、表情的比例與配色
• [15:05] 小示範：色票清單、random 與取餘數
• [19:42] 作業賞析（續）：蒲公英與指揮 AI、會跳的羊、極光
• [28:13] 作業改交 Hahow
• [29:46] 回答問題：新媒體藝術的公司與案子、參數時間軸
• [37:54] 今天要做什麼：Moodboard、迴圈與函數、手繪的有機感
• [45:54] 示範：if／else 與餘數決定顏色
• [51:05] 環狀的花：極座標、translate、rotate、for
• [1:04:01] 花的變化：色票輪替、AI 補 polygon、殘影
• [1:20:17] 作品觀摩：Archetype 與遞迴
• [1:27:24] 影像筆刷：Act of Emotion、上傳圖片、loadImage
• [1:37:55] 作品觀摩：Trossets 格線拼圖
• [1:40:42] 筆刷進階：跟著轉、imageMode、切換筆刷、按下才畫、速度決定大小
• [2:00:42] 作品觀摩：Fidenza 與向量場
• [2:04:29] 回顧、blendMode 與作業題目
• [2:11:30] beginShape／vertex：取座標小工具與花朵印章網格
• [2:26:52] 回家作業、下週預告、問答與問卷

1. 結合今天做幾何形狀的方法：圖騰般的配色、環狀構圖、筆刷系統，自由組合
2. 找一個喜歡的場景（生活風景、看過的畫、喜歡的角色），先用 moodboard 收集
3. 用 p5.js 做出來，像一幅馬賽克拼貼畫，每次打開都不一樣
4. 存 5 個左右的變體圖
5. 輸出成影片讓它動起來（留下軌跡或隨時間變化），或用筆刷畫完存圖
6. 交到 Hahow 作業區「作品一」，10/5（一）21:00 前；Discord #作業分享 貼一份

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

• 課程網站：筆記、互動模組與資源
• AI 時代，為什麼還要先手打
• 作業賞析：軌跡、比例、異材質與配色
• 小示範：把色票變成清單
• 作業賞析（續）：先畫構圖，再交給 AI
• 新媒體藝術在哪裡發生：團隊、案子與參數時間軸
• 這堂的主線：重複、迴圈與函數
• 示範：用餘數和 if／else 排顏色
• 示範：環狀的花
• 示範：讓花長出變化
• 作品觀摩：Archetype 與遞迴
• 示範：影像筆刷
• 作品觀摩：Trossets 的格線拼圖
• 示範：筆刷系統
• 作品觀摩：Fidenza 與向量場
• 回顧與 blendMode
• 示範：取座標小工具
• 示範：花朵印章網格
• 課堂問答
• 　程式觀念
• 　筆刷與介面操作
• 　AI 與職涯
• 　課程安排
• 作業與下一堂
• 　題目：作品一　動態幾何
• 　下一堂
• 卡住的時候
• 延伸資源

「如果說你覺得有點辛苦或是跟不上，這個是正常的，因為寫程式剛開始本來就會蠻卡的」

「大家要準備面對的是一個幾乎大家都不會手寫程式碼的時代，但是如果你會手寫程式碼…你就可以更快的去指揮你的工具去做出創作」

「你至少要讓自己參與在這個過程中」

範例程式（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 藝術與文化（找作業場景）
• 透明背景筆刷素材：下載前看授權

• 作業：Rain。討厭下雨 但在網頁裡面下雨還不錯🤣　OpenProcessing
• 作業：水　OpenProcessing
• 作業：嚴肅的臉。作品靈感：instagram.com　OpenProcessing
• 作業：開花。作業連結:https://openprocessing.org/@Bing-Yu-Hsieh/3027863 利用ai幫忙做了一個可以隨機顏色、位置長大的花，跟預想的還是有差別。　OpenProcessing
• 作業：稻田 Paddy Field。設計過程：hahow.in上次手刻程式，這次嘗試與 AI 協作實現更好的效果～（AI秒速寫完初版然後再花數小時當家教一行行慢慢教我慢慢一起改）　OpenProcessing
• 作業：taiwan roof/roots。作品連結 https://openprocessing.org/@peal256/3025512 鳥瞰台灣的都市，常常你會發現一大片都是鐵皮屋。有人覺得鐵皮屋屋頂很醜，但我覺得鐵皮屋屋頂是因應台灣氣候與經濟背景下的產物，代表著台灣特定的一…　OpenProcessing
• 作業：abstract character #3。變裝魔法師，靈感來自： pin.it 。使用 vetex 畫出所有節點，然後連線，通過隨機顏色實現變裝，眼珠會看向滑鼠位置；手的前方是一顆大魔法球，點擊畫布隨機生成一組魔法球　OpenProcessing
• 作業：Petals in the Mist。作業_L1 Work with Claude AI “Petals in the Mist” by Tiff Wen License Creative Commons Attribution NonCommercial ShareAlik…　OpenProcessing
• 作業：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
• 作業：記憶格子。記憶像是交錯的格子，有時清楚，有時模糊，時間的球繼續跑著作品互動性: 滑鼠點擊切換顏色參考資料: pinterest.com　OpenProcessing
• 作業：Dancing Cube。https://openprocessing.org/@3RH/3026665 ▼Mood Board 1.做基本型。之後要分三個部分上色,所以用三個平行四邊形拼湊。　OpenProcessing
• 作業：動態幾何:流動的波。靈感版:https://pin.it/5KqmnUp7Y 作品連結:https://openprocessing.org/@u492491/3026988 跟AI協作~　OpenProcessing
• 作業：L.H. #1。還在補做第一堂的練習...為什麼大家都那麼強🫠
• 作業：AI Art動態圖。Art動態圖
• 課堂作品：筆刷。7 秒動圖，黑色墨點筆刷，滑鼠拖出一串小點，停下來的地方長成大團墨圓，白底
• 課堂作品：筆刷。青色半透明的刷痕，中間夾著一串黃紅色的小圖片印章，黑底
• 課堂作品：筆刷。深淺藍的印章疊成彎曲的帶子，疊越多顏色越深，用了 blendMode(MULTIPLY)，白底
• 課堂作品：筆刷。粉藍、綠褐的圖片碎片當長方形筆刷，拼貼成一團，白底
• 課堂作品：筆刷。黃、淡紫、青綠三種筆刷的寬帶交錯鋪滿畫面，點滑鼠切換筆刷
• 課堂作品：筆刷。淺藍色的印章沿彎曲的路徑疊成一條立體的帶子，白底
• 課堂作品：筆刷。3 秒錄影，橘色與青灰的細線放射狀刷出好幾圈圓弧，黑底
• 課堂作品：筆刷。「失控的筆刷」，圖片印章沿弧線密密排成一圈圈黃綠色環帶，灰底
• 課堂作品：花。彩虹色八片半透明橢圓花瓣，背景是淡彩色塊
• 課堂作品：花。6.5 秒錄影，青綠、米黃的細長花瓣繞白色圓心轉，一排排往外放射，黑底
• 課堂作品：花。粉橘、紫、深藍的橢圓花瓣疊成厚片漩渦，黃色圓心，黑底
• 課堂作品：花。藍綠六邊形和粉橘、紫色五邊形繞黃色圓心排成一圈，深色底
• 課堂作品：花。6 秒錄影，紅、白、淺藍、深藍的橢圓花瓣，轉起來甩出大片放射狀的殘影，黑底
• 課堂作品：花。6 秒動圖，青綠、米黃的橢圓花瓣繞灰色圓心旋轉，一路疊出厚厚的殘影，黑底
• 課堂作品：花。灰藍、紫紅的長六角形花瓣繞著米白圓心轉成漩渦，黑底
• 課堂作品：花。紅、粉、黃、米白的十二片橢圓花瓣，灰底上留著一圈圈旋轉的殘影

全部作品

上一堂：第 0 堂〈新媒體藝術的全景地圖〉　下一堂：第 2 堂〈數學之美：向量與粒子〉

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