# 新媒體藝術的全景地圖 正式網址：https://newmediaart.course.monolab.world/lesson/00 〈新媒體藝術的全景地圖〉是吳哲宇新媒體藝術全景課的第 0 堂（共 11 堂），2026/9/22（二） 19:00–21:30 在 Hahow 直播，工具是 OpenProcessing。 課綱：新媒體藝術的全景地圖、11 週怎麼走、用 AI 的態度，第一次在 OpenProcessing 寫出會動的畫，這堂做出第一幅生成藝術。 第一堂開給約 350 位學員，2 小時 43 分。前 68 分鐘講背景、11 週地圖、AI 立場與案例；後 76 分鐘在 OpenProcessing 上從零帶出「表情筆刷」與「鸚鵡螺軌跡」。收尾他把寫程式定位成「傳統手藝」：會了手藝，再用 AI 會更快。 錄影長度 2:43:03。回放與完整筆記在學員登入後看（[學員登入](https://newmediaart.course.monolab.world/learn)）。 ## 章節 - [0:00] 開場等待與直播確認：等待畫面（機器稿前兩句是等待音樂的幻聽）。 - [9:10] 自我介紹：作品、接案與教學：「我是一位新媒體藝術的創作者」，電機系出身；在墨雨接案做互動網頁（大學官網、捷運局、工研院綠能所「家庭用電家計簿」）。 - [26:21] 課程地圖、怎麼學與 AI：「抱歉背景講太久，就已經 7 點 26 了」；「今天我們不會放大家走，我們會上滿兩個小時」。 - [38:40] 近況分享：音流學、大地與川脈的編織：兩件都不是 p5 做的，「但它的底層的那些邏輯跟想法其實是相同的」。 - [46:52] 程式創作案例：請大家在聊天室說背景（回覆見留言紀錄）。 - [55:30] 媒材介紹：p5.js、Canvas、Processing：以前用 Canvas 畫一個方塊要寫 fillStyle、fillRect，「大概打完這幾行就已經過了 20 分鐘了」 - [59:40] 作品觀摩：Tyler Hobbs、Art Blocks 與白板拆解：示範把白板草圖送進 Claude，要它用 p5.js 做出來，結果留到最後看（見 [2:35:07]）。 - [1:08:02] 註冊 OpenProcessing 與各工具的限制：「我們不確定有沒有時間來休息。我就直接接下去講」，想休息的自行小休。 - [1:13:02] OpenProcessing 介面與 p5.js 基本概念：介面：版面切換、設定（p5、字級、深色模式）、版本紀錄可回溯、收藏、分享、Fork（把外星生物改成 200 隻腳）。 - [1:28:01] 實作一：滑鼠筆刷（表情筆刷 → 鸚鵡螺）：表情筆刷：frameRate(10)／(2) 讓它慢慢蓋；後畫的會疊上去；fill('white') 眼白、 - [1:58:51] 實作二：動態幾何與存圖：Fork 保留版本（1-1、1-2）；設定作品縮圖（Edit → Capture Image）； - [2:20:14] 存影片、花朵示範與迴圈：存影片（回答 Discord 上同學問的「可以 SAVE 影片嗎」）：p5 官方只存圖， - [2:29:01] 作業說明、AI 情境圖與 Claude 結果：「有人說大學數學課覺得很抽象，就上來 P5 畫畫」→「以前學的數學沒有那麼討厭了吧」。 - [2:36:50] 課程資源、問答與收尾：每週 /live 網址不變；約一週後影片上架 Hahow 可無限觀看， ## 作業：第一幅生成藝術 1. Pinterest 找題材（例：機器的齒輪當印章） 2. 先蒐集 10 張參考做靈感板（Pinterest、Apple 無邊記） 3. 用程式或數學畫出第一幅生成藝術 4. 存 10 種變體、挑最滿意一張 5. 用 AI 做情境圖 ## 課程筆記（預覽） > 2026-09-22（二）19:00–21:43 線上直播 ## 這堂在做什麼 第 0 堂是整門課的地圖。前一個多小時，哲宇從自己怎麼從電機系、網頁接案走到程式藝術講起，攤開 11 週要走的路，說清楚 AI 寫程式這麼快的時代，為什麼還要懂原理。接著看他最近在設計展的兩件作品和其他創作者的案例，練習把一件作品拆成可以執行的步驟。後半段打開 OpenProcessing，從一個空白的 sketch 開始，一路做出表情筆刷、會長大的鸚鵡螺、自己變色的線條和泡泡筆刷，最後把圖和影片存下來，帶回家當作業的起點。 > 這堂課帶走 > > 1. Creative Coding 是用固定的指令和規則畫出有美感的畫面，改參數，畫面就跟著變。 > 2. 看懂一件程式藝術作品，先把它拆成一個個可以執行的步驟。拆得出來，就能跟 AI 講清楚你要什麼。 > 3. 用 AI 學這門課像當導演：知道手邊有 sin、cos、Perlin noise 這些工具，才能把 AI 一直導向你要的結果。 > 4. p5.js 的第一批工具：setup 與 draw、座標系、fill 與 stroke、translate／rotate／scale、random、變數、frameCount、sin 與 map、if 與 for。 > 5. 會在 OpenProcessing 建立、Fork、設定縮圖，並把作品存成高解析的圖和影片。 ### 筆記目錄（其餘各節登入後看） - 開場：這門課怎麼一起上 - 從電機系走到程式藝術 - 　Creative Coding 是什麼 - 　從螢幕走到舞台 - 11 週的地圖 - 用 AI 學這門課：當導演 - 　怎麼讓這堂課發揮最大效果 - 近況：音流學與大地與川脈的編織 - 程式藝術還能做什麼 - p5.js 從哪裡來 - 看懂一件作品：拆成可以執行的步驟 - 　用白板拆 The Harvest - OpenProcessing：註冊、介面、追蹤創作者 - p5.js 第一課：setup、draw、顏色與座標 - 　setup 與 draw - 　先說顏色，再畫圈 - 　座標系 - 實作一：表情筆刷 - 從表情到弧線：鸚鵡螺軌跡 - 　map：把一個範圍換到另一個範圍 - 實作二：動態顏色與存圖 - 加碼：迴圈、泡泡筆刷與存影片 - 課堂問答 - 　上課方式與課程資源 - 　作品與工具 - 　OpenProcessing 操作 - 　器材 - 作業與下一堂 - 卡住的時候 - 延伸資源 ## 這堂課說過的話 > 「我希望能夠把我大概這十年來……所有的記憶都留存下來，幫助任何想要入門的人」 > > ——哲宇，第 0 堂 [04:02] > 「你要在這堂課玩得開心，然後不要有壓力」 > > ——哲宇，第 0 堂 [05:03] > 「大概只要這 28 行」 > > ——哲宇，第 0 堂 [16:17] ## 本堂範例與案例 ### 範例程式（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) ## 這堂的作品 - 作業：class1 作業。印章生成 https://openprocessing.org/sketch/3027049/embed/ 幾何圖案 https://openprocessing.org/sketch/3027080/embed 做成Mockup 水波紋…　[OpenProcessing](https://openprocessing.org/sketch/3027049/embed/) - 作業：螺旋Rasen。https://openprocessing.org/@chuntsai/3021101　[OpenProcessing](https://openprocessing.org/@chuntsai/3021101) - 作業：可愛花朵與可愛貓貓~ 喵~。原本是想要做星空、櫻花等，但是目前功力還不夠，無法做出理想的效果，在找參考圖時看到了花叢和貓咪，於是就先用這個做為主題啦~　[OpenProcessing](https://openprocessing.org/@ycs77/3023921) - 作業：磚頭與圓圈花紋。第一週與第二週課程直播的綜合練習，想像力還在培養中......參考資料：pin.it　[OpenProcessing](https://openprocessing.org/@noirklyn2fa7/3024479) - 作業：雜訊城市(?)。https://openprocessing.org/@hybert7004/3020927 原本想畫一些比較具象的物體ex：鳥，鼠標，但後來發現技術跟想像力不太夠，後來看到一些類似glitch的方格跟拖曳感之後就想說能簡單地將畫布一分為…　[OpenProcessing](https://openprocessing.org/@hybert7004/3020927) - 作業：泡沫筆刷 - 作業：rhythm #0。從 artblocks.io 作品獲取靈感，搭配隨機數創作鼓點跳動　[OpenProcessing](https://openprocessing.org/@u288673/3025703) - 作業：盲人拉胚 - 作業：《抽筆》 Draw a Brush。概念為常見的四種要素墨、霓、藤、絲，每次開啟時能隨機抽到其中一款筆刷自由創作，每一款筆刷有不同的特性待使用者發掘　[OpenProcessing](https://openprocessing.org/@Ruyuang/3024526) - 作業：AI art 動態圖。動態圖 - 作業：line pattern。https://openprocessing.org/@u76476/3022658　[OpenProcessing](https://openprocessing.org/@u76476/3022658) - 作業：Rasen - 作業：Moontrace。構想是因為中秋節，所以想要用月亮當作主題～　[OpenProcessing](https://openprocessing.org/@wujue/3015527?v=2) - 作業：作業。作業＿L0 - 作業：雖然數學不熟，但在 AI 輔助下將幾何公式轉化為極光花，體會到程式創作的無限可能　[OpenProcessing](https://openprocessing.org/@ohana/3022503) - 作業：點擊=加速。復古DVD畫面過程中，我學習到: - 3d色彩變化rejection sampling - class 和 list 運用- 微調用戶體驗初始參數　[OpenProcessing](https://openprocessing.org/@K18503/3022563) - 作業：花開花落。花朵會隨著鼠標進行花開與花落，隨著越來越多的花開與花落，在“地面”（畫布）上會逐漸呈現出類似 “凋零的花朵掉滿地” 的視覺感受。此為簡單運用第一週課程所學，輔以一點 AI 協助完成的小作品作業。　[OpenProcessing](https://openprocessing.org/sketch/3015708) - 作業：Abstract Chromatography。靈感來源（pin.it）　[OpenProcessing](https://openprocessing.org/@triviak/3021437) - 作業：Circles。Circles Inspired by artblocks.io　[OpenProcessing](https://openprocessing.org/@nickhu/3022454) - 作業：20 Windblown Lines　[OpenProcessing](https://openprocessing.org/@cyking/3022404) - 作業：蒲公英。https://openprocessing.org/@3RH/3019915 ▼Mood Board　[OpenProcessing](https://openprocessing.org/@3RH/3019915) - 作業：Aurora 極光繪製。找參考資料的時候覺得極光很適合練習第一堂課的內容，雖然應該很多人做過但新手就不求什麼突破性的創意了～拿來練基本功剛剛好　[OpenProcessing](https://openprocessing.org/@qwer565891/3021510) - 作業：Bouncing Sheep。是一個活在異次元的羊咩，跟著滑鼠的動作進行擺動、跳躍　[OpenProcessing](https://openprocessing.org/@u232194/3018182) - 作業：TeaBall。構想是使用者可以倒入不同顏色的茶品，然後可以透過搖晃混合出隨機的畫面，這裡嘗試使用Gemeni協助撰寫程式並加入互動功能，畫面繪製完成後存檔，再生成mockup，雖然跟腦海想要呈現的有差距，但結果還挺有趣的。　[OpenProcessing](https://openprocessing.org/@bh9986900bh/3020858) - 作業：作品一：動態幾何 - 課堂作品：彩虹條紋。方塊疊出的直條紋，左側一道斜帶 - 課堂作品：7 秒 WebM 錄影。圓角方塊繞圈旋轉 - 課堂作品：表情筆刷。粉色方臉，灰底 - 課堂作品：貓頭鷹。彩色貓頭鷹疊滿畫面 - 課堂作品：旋轉方塊。藍紫半透明圓角方塊繞一圈 - 課堂作品：弧線加旋轉。灰底上的黃色細線螺旋 - 課堂作品：弧線加旋轉。紅黃放射條紋的鸚鵡螺，黑底（1 個愛心） - 課堂作品：弧線加旋轉。青色細線螺旋 - 課堂作品：弧線加旋轉。白色線圈上下串成一列，黑底 - 課堂作品：弧線加旋轉。灰白細線繞成圓環 - 課堂作品：弧線加旋轉。白色細線在黑底捲成號角形 - 課堂作品：表情筆刷。紫藍小方臉，灰底 - 課堂作品：表情筆刷。橘、黃、綠的大方臉 - 課堂作品：表情筆刷。綠色與棕色小方臉，連程式一起截 - 課堂作品：表情筆刷。藍色方臉疊滿畫面，連程式一起截 [全部作品](https://newmediaart.course.monolab.world/works) 下一堂：[第 1 堂〈第一個生成藝術作品〉](https://newmediaart.course.monolab.world/lesson/01) [到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。