Lesson 00OpenProcessing2026.09.22

新媒體藝術的全景地圖

已上課 9/22（二） · 錄影 2:43:03 · 14 段章節 · 筆記 19 節 · 7 個互動工具 · 15 件課堂作品 · 25 件作業

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

章節

  • [0:00] 開場等待與直播確認
  • [9:10] 自我介紹：作品、接案與教學
  • [26:21] 課程地圖、怎麼學與 AI
  • [38:40] 近況分享：音流學、大地與川脈的編織
  • [46:52] 程式創作案例
  • [55:30] 媒材介紹：p5.js、Canvas、Processing
  • [59:40] 作品觀摩：Tyler Hobbs、Art Blocks 與白板拆解
  • [1:08:02] 註冊 OpenProcessing 與各工具的限制
  • [1:13:02] OpenProcessing 介面與 p5.js 基本概念
  • [1:28:01] 實作一：滑鼠筆刷（表情筆刷 → 鸚鵡螺）
  • [1:58:51] 實作二：動態幾何與存圖
  • [2:20:14] 存影片、花朵示範與迴圈
  • [2:29:01] 作業說明、AI 情境圖與 Claude 結果
  • [2:36:50] 課程資源、問答與收尾

作業：第一幅生成藝術

  1. Pinterest 找題材（例：機器的齒輪當印章）
  2. 先蒐集 10 張參考做靈感板（Pinterest、Apple 無邊記）
  3. 用程式或數學畫出第一幅生成藝術
  4. 存 10 種變體、挑最滿意一張
  5. 用 AI 做情境圖

課程筆記（預覽）

2026-09-22（二）19:00–21:43 線上直播

這堂在做什麼

第 0 堂是整門課的地圖。前一個多小時，哲宇從自己怎麼從電機系、網頁接案走到程式藝術講起，攤開 11 週要走的路，說清楚 AI 寫程式這麼快的時代，為什麼還要懂原理。接著看他最近在設計展的兩件作品和其他創作者的案例，練習把一件作品拆成可以執行的步驟。後半段打開 OpenProcessing，從一個空白的 sketch 開始，一路做出表情筆刷、會長大的鸚鵡螺、自己變色的線條和泡泡筆刷，最後把圖和影片存下來，帶回家當作業的起點。

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

  • 開場：這門課怎麼一起上
  • 從電機系走到程式藝術
  • 　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）

哲宇的案例

其他人的案例

工具

這堂的作品

  • 作業：class1 作業。印章生成 https://openprocessing.org/sketch/3027049/embed/ 幾何圖案 https://openprocessing.org/sketch/3027080/embed 做成Mockup 水波紋…　OpenProcessing
  • 作業：螺旋Rasen。https://openprocessing.org/@chuntsai/3021101　OpenProcessing
  • 作業：可愛花朵與可愛貓貓~ 喵~。原本是想要做星空、櫻花等，但是目前功力還不夠，無法做出理想的效果，在找參考圖時看到了花叢和貓咪，於是就先用這個做為主題啦~　OpenProcessing
  • 作業：磚頭與圓圈花紋。第一週與第二週課程直播的綜合練習，想像力還在培養中......參考資料：pin.it　OpenProcessing
  • 作業：雜訊城市(?)。https://openprocessing.org/@hybert7004/3020927 原本想畫一些比較具象的物體ex：鳥，鼠標，但後來發現技術跟想像力不太夠，後來看到一些類似glitch的方格跟拖曳感之後就想說能簡單地將畫布一分為…　OpenProcessing
  • 作業：泡沫筆刷
  • 作業：rhythm #0。從 artblocks.io 作品獲取靈感，搭配隨機數創作鼓點跳動　OpenProcessing
  • 作業：盲人拉胚
  • 作業：《抽筆》 Draw a Brush。概念為常見的四種要素墨、霓、藤、絲，每次開啟時能隨機抽到其中一款筆刷自由創作，每一款筆刷有不同的特性待使用者發掘　OpenProcessing
  • 作業：AI art 動態圖。動態圖
  • 作業：line pattern。https://openprocessing.org/@u76476/3022658　OpenProcessing
  • 作業：Rasen
  • 作業：Moontrace。構想是因為中秋節，所以想要用月亮當作主題～　OpenProcessing
  • 作業：作業。作業＿L0
  • 作業：雖然數學不熟，但在 AI 輔助下將幾何公式轉化為極光花，體會到程式創作的無限可能　OpenProcessing
  • 作業：點擊=加速。復古DVD畫面過程中，我學習到: - 3d色彩變化rejection sampling - class 和 list 運用- 微調用戶體驗初始參數　OpenProcessing
  • 作業：花開花落。花朵會隨著鼠標進行花開與花落，隨著越來越多的花開與花落，在“地面”（畫布）上會逐漸呈現出類似 “凋零的花朵掉滿地” 的視覺感受。此為簡單運用第一週課程所學，輔以一點 AI 協助完成的小作品作業。　OpenProcessing
  • 作業：Abstract Chromatography。靈感來源（pin.it）　OpenProcessing
  • 作業：Circles。Circles Inspired by artblocks.io　OpenProcessing
  • 作業：20 Windblown Lines　OpenProcessing
  • 作業：蒲公英。https://openprocessing.org/@3RH/3019915 ▼Mood Board　OpenProcessing
  • 作業：Aurora 極光繪製。找參考資料的時候覺得極光很適合練習第一堂課的內容，雖然應該很多人做過但新手就不求什麼突破性的創意了～拿來練基本功剛剛好　OpenProcessing
  • 作業：Bouncing Sheep。是一個活在異次元的羊咩，跟著滑鼠的動作進行擺動、跳躍　OpenProcessing
  • 作業：TeaBall。構想是使用者可以倒入不同顏色的茶品，然後可以透過搖晃混合出隨機的畫面，這裡嘗試使用Gemeni協助撰寫程式並加入互動功能，畫面繪製完成後存檔，再生成mockup，雖然跟腦海想要呈現的有差距，但結果還挺有趣的。　OpenProcessing
  • 作業：作品一：動態幾何
  • 課堂作品：彩虹條紋。方塊疊出的直條紋，左側一道斜帶
  • 課堂作品：7 秒 WebM 錄影。圓角方塊繞圈旋轉
  • 課堂作品：表情筆刷。粉色方臉，灰底
  • 課堂作品：貓頭鷹。彩色貓頭鷹疊滿畫面
  • 課堂作品：旋轉方塊。藍紫半透明圓角方塊繞一圈
  • 課堂作品：弧線加旋轉。灰底上的黃色細線螺旋
  • 課堂作品：弧線加旋轉。紅黃放射條紋的鸚鵡螺，黑底（1 個愛心）
  • 課堂作品：弧線加旋轉。青色細線螺旋
  • 課堂作品：弧線加旋轉。白色線圈上下串成一列，黑底
  • 課堂作品：弧線加旋轉。灰白細線繞成圓環
  • 課堂作品：弧線加旋轉。白色細線在黑底捲成號角形
  • 課堂作品：表情筆刷。紫藍小方臉，灰底
  • 課堂作品：表情筆刷。橘、黃、綠的大方臉
  • 課堂作品：表情筆刷。綠色與棕色小方臉，連程式一起截
  • 課堂作品：表情筆刷。藍色方臉疊滿畫面，連程式一起截

全部作品

下一堂：第 1 堂〈第一個生成藝術作品〉

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