{"id":"lesson-00","number":0,"title":"新媒體藝術的全景地圖","tool":"OpenProcessing","date":"2026-09-22","time":"19:00–21:30","hasNotes":true,"notes":{"title":"新媒體藝術的全景地圖","status":"課後版 v2（2026-10-08 依逐字稿重寫）","date":"2026-09-22","toc":[{"id":"s-1","text":"這堂在做什麼","level":2},{"id":"s-2","text":"開場：這門課怎麼一起上","level":2},{"id":"s-3","text":"從電機系走到程式藝術","level":2},{"id":"s-3-1","text":"Creative Coding 是什麼","level":3},{"id":"s-3-2","text":"從螢幕走到舞台","level":3},{"id":"s-4","text":"11 週的地圖","level":2},{"id":"s-5","text":"用 AI 學這門課：當導演","level":2},{"id":"s-5-1","text":"怎麼讓這堂課發揮最大效果","level":3},{"id":"s-6","text":"近況：音流學與大地與川脈的編織","level":2},{"id":"s-7","text":"程式藝術還能做什麼","level":2},{"id":"s-8","text":"p5.js 從哪裡來","level":2},{"id":"s-9","text":"看懂一件作品：拆成可以執行的步驟","level":2},{"id":"s-9-1","text":"用白板拆 The Harvest","level":3},{"id":"s-10","text":"OpenProcessing：註冊、介面、追蹤創作者","level":2},{"id":"s-11","text":"p5.js 第一課：setup、draw、顏色與座標","level":2},{"id":"s-11-1","text":"setup 與 draw","level":3},{"id":"s-11-2","text":"先說顏色，再畫圈","level":3},{"id":"s-11-3","text":"座標系","level":3},{"id":"s-12","text":"實作一：表情筆刷","level":2},{"id":"s-13","text":"從表情到弧線：鸚鵡螺軌跡","level":2},{"id":"s-13-1","text":"map：把一個範圍換到另一個範圍","level":3},{"id":"s-14","text":"實作二：動態顏色與存圖","level":2},{"id":"s-15","text":"加碼：迴圈、泡泡筆刷與存影片","level":2},{"id":"s-16","text":"課堂問答","level":2},{"id":"s-16-1","text":"上課方式與課程資源","level":3},{"id":"s-16-2","text":"作品與工具","level":3},{"id":"s-16-3","text":"OpenProcessing 操作","level":3},{"id":"s-16-4","text":"器材","level":3},{"id":"s-17","text":"作業與下一堂","level":2},{"id":"s-18","text":"卡住的時候","level":2},{"id":"s-19","text":"延伸資源","level":2}],"segments":[{"html":"<blockquote>\n<p>2026-09-22（二）19:00–21:43 線上直播</p>\n</blockquote>\n<h2 id=\"s-1\">這堂在做什麼</h2>\n<p>第 0 堂是整門課的地圖。前一個多小時，哲宇從自己怎麼從電機系、網頁接案走到程式藝術講起，攤開 11 週要走的路，說清楚 AI 寫程式這麼快的時代，為什麼還要懂原理。接著看他最近在設計展的兩件作品和其他創作者的案例，練習把一件作品拆成可以執行的步驟。後半段打開 OpenProcessing，從一個空白的 sketch 開始，一路做出表情筆刷、會長大的鸚鵡螺、自己變色的線條和泡泡筆刷，最後把圖和影片存下來，帶回家當作業的起點。</p>\n<aside class=\"callout callout-key\" aria-label=\"這堂課帶走\"><p class=\"callout-title\">這堂課帶走</p><ol>\n<li>Creative Coding 是用固定的指令和規則畫出有美感的畫面，改參數，畫面就跟著變。</li>\n<li>看懂一件程式藝術作品，先把它拆成一個個可以執行的步驟。拆得出來，就能跟 AI 講清楚你要什麼。</li>\n<li>用 AI 學這門課像當導演：知道手邊有 sin、cos、Perlin noise 這些工具，才能把 AI 一直導向你要的結果。</li>\n<li>p5.js 的第一批工具：setup 與 draw、座標系、fill 與 stroke、translate／rotate／scale、random、變數、frameCount、sin 與 map、if 與 for。</li>\n<li>會在 OpenProcessing 建立、Fork、設定縮圖，並把作品存成高解析的圖和影片。</li>\n</ol>\n</aside>"},{"locked":true,"id":"s-2","title":"開場：這門課怎麼一起上"},{"locked":true,"id":"s-3","title":"從電機系走到程式藝術"},{"locked":true,"id":"s-4","title":"11 週的地圖"},{"locked":true,"id":"s-5","title":"用 AI 學這門課：當導演"},{"locked":true,"id":"s-6","title":"近況：音流學與大地與川脈的編織"},{"locked":true,"id":"s-7","title":"程式藝術還能做什麼"},{"locked":true,"id":"s-8","title":"p5.js 從哪裡來"},{"locked":true,"id":"s-9","title":"看懂一件作品：拆成可以執行的步驟"},{"locked":true,"id":"s-10","title":"OpenProcessing：註冊、介面、追蹤創作者"},{"locked":true,"id":"s-11","title":"p5.js 第一課：setup、draw、顏色與座標"},{"locked":true,"id":"s-12","title":"實作一：表情筆刷"},{"locked":true,"id":"s-13","title":"從表情到弧線：鸚鵡螺軌跡"},{"locked":true,"id":"s-14","title":"實作二：動態顏色與存圖"},{"locked":true,"id":"s-15","title":"加碼：迴圈、泡泡筆刷與存影片"},{"locked":true,"id":"s-16","title":"課堂問答"},{"locked":true,"id":"s-17","title":"作業與下一堂"},{"locked":true,"id":"s-18","title":"卡住的時候"},{"locked":true,"id":"s-19","title":"延伸資源"}],"widgets":["setupdraw","coords","transform","facebrush","arc","sinmap","forloop"],"links":[{"group":"今天的範例（OpenProcessing）","text":"#1 表情筆刷","href":"https://openprocessing.org/@cheyuwu/3015525"},{"group":"今天的範例（OpenProcessing）","text":"#1-2 鸚鵡螺與動態顏色","href":"https://openprocessing.org/@cheyuwu/3015615"},{"group":"今天的範例（OpenProcessing）","text":"#1-3 泡泡筆刷","href":"https://openprocessing.org/@cheyuwu/3015703"},{"group":"今天的範例（OpenProcessing）","text":"花朵範例","href":"https://openprocessing.org/@cheyuwu/2963448"},{"group":"今天的範例（OpenProcessing）","text":"外星生物 Fern","href":"https://openprocessing.org/@cheyuwu/700092"},{"group":"課程","text":"https://newmediaart.course.monolab.world/live","href":"https://newmediaart.course.monolab.world/live"},{"group":"工具與文件","text":"p5.js","href":"https://p5js.org/"},{"group":"工具與文件","text":"p5.js Reference","href":"https://p5js.org/reference/"},{"group":"工具與文件","text":"OpenProcessing","href":"https://openprocessing.org/"},{"group":"工具與文件","text":"Processing","href":"https://processing.org/"},{"group":"工具與文件","text":"MDN Canvas 教學","href":"https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial"},{"group":"OpenProcessing 值得追蹤的創作者","text":"Takawo","href":"https://openprocessing.org/@takawo"},{"group":"OpenProcessing 值得追蹤的創作者","text":"aluan","href":"https://openprocessing.org/@aluan"},{"group":"OpenProcessing 值得追蹤的創作者","text":"newyellow（黃新）","href":"https://openprocessing.org/@newyellow"},{"group":"OpenProcessing 值得追蹤的創作者","text":"Junichiro Horikawa","href":"https://openprocessing.org/@jhorikawa"},{"group":"藝術家與作品","text":"Zach Lieberman","href":"https://www.instagram.com/zach.lieberman/"},{"group":"藝術家與作品","text":"Art Blocks","href":"https://www.artblocks.io/"},{"group":"藝術家與作品","text":"Tyler Hobbs","href":"https://tylerxhobbs.com/"},{"group":"藝術家與作品","text":"Fragments of an Infinite Field by Monica Rizzolli","href":"https://www.artblocks.io/collection/fragments-of-an-infinite-field-by-monica-rizzolli"},{"group":"藝術家與作品","text":"Clinamen 的報導","href":"https://500times.udn.com/wtimes/story/120842/9568756"},{"group":"哲宇的作品與經歷","text":"作品總覽","href":"https://cheyuwu.com/zh/work"},{"group":"哲宇的作品與經歷","text":"每一年的實驗（Lab）","href":"https://cheyuwu.com/zh/lab"},{"group":"哲宇的作品與經歷","text":"墨雨設計作品","href":"https://monoame.com/works"},{"group":"哲宇的作品與經歷","text":"距離之歌 Song of Distances","href":"https://cheyuwu.com/zh/project/-M0nSR_ahyfV-9jC9po_/"}]},"chapters":[{"t":"0:00","sec":0,"title":"開場等待與直播確認","note":"等待畫面（機器稿前兩句是等待音樂的幻聽）。","part":"開場與自我介紹"},{"t":"9:10","sec":550,"title":"自我介紹：作品、接案與教學","note":"「我是一位新媒體藝術的創作者」，電機系出身；在墨雨接案做互動網頁（大學官網、捷運局、工研院綠能所「家庭用電家計簿」）。","part":"開場與自我介紹"},{"t":"26:21","sec":1581,"title":"課程地圖、怎麼學與 AI","note":"「抱歉背景講太久，就已經 7 點 26 了」；「今天我們不會放大家走，我們會上滿兩個小時」。","part":"課程地圖與近況"},{"t":"38:40","sec":2320,"title":"近況分享：音流學、大地與川脈的編織","note":"兩件都不是 p5 做的，「但它的底層的那些邏輯跟想法其實是相同的」。","part":"課程地圖與近況"},{"t":"46:52","sec":2812,"title":"程式創作案例","note":"請大家在聊天室說背景（回覆見留言紀錄）。","part":"案例、媒材與作品觀摩"},{"t":"55:30","sec":3330,"title":"媒材介紹：p5.js、Canvas、Processing","note":"以前用 Canvas 畫一個方塊要寫 fillStyle、fillRect，「大概打完這幾行就已經過了 20 分鐘了」","part":"案例、媒材與作品觀摩"},{"t":"59:40","sec":3580,"title":"作品觀摩：Tyler Hobbs、Art Blocks 與白板拆解","note":"示範把白板草圖送進 Claude，要它用 p5.js 做出來，結果留到最後看（見 [2:35:07]）。","part":"案例、媒材與作品觀摩"},{"t":"1:08:02","sec":4082,"title":"註冊 OpenProcessing 與各工具的限制","note":"「我們不確定有沒有時間來休息。我就直接接下去講」，想休息的自行小休。","part":"上手 OpenProcessing"},{"t":"1:13:02","sec":4382,"title":"OpenProcessing 介面與 p5.js 基本概念","note":"介面：版面切換、設定（p5、字級、深色模式）、版本紀錄可回溯、收藏、分享、Fork（把外星生物改成 200 隻腳）。","part":"上手 OpenProcessing"},{"t":"1:28:01","sec":5281,"title":"實作一：滑鼠筆刷（表情筆刷 → 鸚鵡螺）","note":"表情筆刷：frameRate(10)／(2) 讓它慢慢蓋；後畫的會疊上去；fill('white') 眼白、","part":"實作：滑鼠筆刷與動態幾何"},{"t":"1:58:51","sec":7131,"title":"實作二：動態幾何與存圖","note":"Fork 保留版本（1-1、1-2）；設定作品縮圖（Edit → Capture Image）；","part":"實作：滑鼠筆刷與動態幾何"},{"t":"2:20:14","sec":8414,"title":"存影片、花朵示範與迴圈","note":"存影片（回答 Discord 上同學問的「可以 SAVE 影片嗎」）：p5 官方只存圖，","part":"實作：滑鼠筆刷與動態幾何"},{"t":"2:29:01","sec":8941,"title":"作業說明、AI 情境圖與 Claude 結果","note":"「有人說大學數學課覺得很抽象，就上來 P5 畫畫」→「以前學的數學沒有那麼討厭了吧」。","part":"作業與收尾"},{"t":"2:36:50","sec":9410,"title":"課程資源、問答與收尾","note":"每週 /live 網址不變；約一週後影片上架 Hahow 可無限觀看，","part":"作業與收尾"}],"summary":"第一堂開給約 350 位學員，2 小時 43 分。前 68 分鐘講背景、11 週地圖、AI 立場與案例；後 76 分鐘在 OpenProcessing 上從零帶出「表情筆刷」與「鸚鵡螺軌跡」。收尾他把寫程式定位成「傳統手藝」：會了手藝，再用 AI 會更快。","duration":"2:43:03","plan":{"topic":"新媒體藝術的全景地圖、11 週怎麼走、用 AI 的態度，第一次在 OpenProcessing 寫出會動的畫","output":"第一幅生成藝術","stage":"啟發","difficulty":1},"sections":19,"qaCount":19,"homework":{"title":"第一幅生成藝術","steps":["Pinterest 找題材（例：機器的齒輪當印章）","先蒐集 10 張參考做靈感板（Pinterest、Apple 無邊記）","用程式或數學畫出第一幅生成藝術","存 10 種變體、挑最滿意一張","用 AI 做情境圖"],"source":"[2:29:01]"},"quotes":[{"t":"04:02","text":"「我希望能夠把我大概這十年來……所有的記憶都留存下來，幫助任何想要入門的人」"},{"t":"05:03","text":"「你要在這堂課玩得開心，然後不要有壓力」"},{"t":"16:17","text":"「大概只要這 28 行」"}],"quotesTotal":17,"resources":[{"group":"範例程式（OpenProcessing）","items":[{"title":"表情筆刷 hahow new media #1","url":"https://openprocessing.org/@cheyuwu/3015525","note":"第一個筆刷：滑鼠畫出表情"},{"title":"鸚鵡螺與動態顏色 #1-2","url":"https://openprocessing.org/@cheyuwu/3015615"},{"title":"泡泡筆刷（for 迴圈）#1-3","url":"https://openprocessing.org/@cheyuwu/3015703"},{"title":"花朵示範","url":"https://openprocessing.org/@cheyuwu/2963448"},{"title":"外星生物 Fern（28 行）","url":"https://openprocessing.org/@cheyuwu/700092"}]},{"group":"哲宇的案例","items":[{"title":"作品總覽","url":"https://cheyuwu.com/zh/work"},{"title":"咖啡幻夢（星巴克）","url":"https://cheyuwu.com/zh/work/coffee-dreamscape","note":"目前最大的 p5.js 作品"},{"title":"《未竟之花》","url":"https://cheyuwu.com/zh/work/unfinished-bloom"},{"title":"The Last Input《終局之前》","url":"https://cheyuwu.com/zh/exhibition/the-last-input"},{"title":"距離之歌 Song of Distances","url":"https://cheyuwu.com/zh/project/-M0nSR_ahyfV-9jC9po_/"},{"title":"台北聲音地景計畫","url":"https://taipeisoundscape.com/"},{"title":"200614 Organic Circuit","url":"https://cheyuwu.com/zh/sketch/918427/"},{"title":"200804 Superstring Theory","url":"https://cheyuwu.com/zh/sketch/941774/"},{"title":"巴黎生態系（p5.js）","url":"https://openprocessing.org/@cheyuwu/2470424"},{"title":"靈魂魚製作流程","url":"https://creativecoding.in/2023/03/02/soul-fish-process/"},{"title":"OpenProcessing 作品集","url":"https://openprocessing.org/@cheyuwu"}]},{"group":"其他人的案例","items":[{"title":"筆刷參考：brush","url":"https://openprocessing.org/sketch/704595"},{"title":"Rotary Brush","url":"https://openprocessing.org/sketch/595598"},{"title":"Generative Brushes","url":"https://openprocessing.org/sketch/107816"},{"title":"Takawo","url":"https://openprocessing.org/@takawo","note":"OpenProcessing 值得追蹤"},{"title":"aluan","url":"https://openprocessing.org/@aluan","note":"OpenProcessing 值得追蹤"},{"title":"newyellow（黃新）","url":"https://openprocessing.org/@newyellow","note":"OpenProcessing 值得追蹤"},{"title":"Junichiro Horikawa","url":"https://openprocessing.org/@jhorikawa","note":"OpenProcessing 值得追蹤"},{"title":"Zach Lieberman","url":"https://www.instagram.com/zach.lieberman/"},{"title":"Tyler Hobbs","url":"https://tylerxhobbs.com/"},{"title":"Clinamen（Céleste Boursier-Mougenot）","url":"https://www.youtube.com/shorts/g99TDzER3W0"},{"title":"Art Blocks","url":"https://www.artblocks.io/","note":"生成藝術平台"}]},{"group":"工具","items":[{"title":"p5.js Reference","url":"https://p5js.org/reference/"},{"title":"OpenProcessing","url":"https://openprocessing.org/"},{"title":"MDN Canvas 教學","url":"https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial"},{"title":"ColorZilla（瀏覽器取色）","url":"https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhed"},{"title":"p5.capture（存影片）","url":"https://github.com/tapioca24/p5.capture"}]}],"works":[{"lesson":"lesson-00","kind":"作業","who":"Shin Yi OU","title":"class1 作業","desc":"印章生成 https://openprocessing.org/sketch/3027049/embed/ 幾何圖案 https://openprocessing.org/sketch/3027080/embed 做成Mockup 水波紋…","images":["/media/lesson-00/hw00-50.jpg"],"link":"https://openprocessing.org/sketch/3027049/embed/","posted_at":"2026-10-12T15:04+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Chun","title":"螺旋Rasen","desc":"https://openprocessing.org/@chuntsai/3021101","images":["/media/lesson-00/hw00-51.jpg"],"link":"https://openprocessing.org/@chuntsai/3021101","posted_at":"2026-10-08T16:24:27+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Lucas Yang","title":"可愛花朵與可愛貓貓~ 喵~","desc":"原本是想要做星空、櫻花等，但是目前功力還不夠，無法做出理想的效果，在找參考圖時看到了花叢和貓咪，於是就先用這個做為主題啦~","images":["/media/lesson-00/hw00-45.jpg","/media/lesson-00/hw00-46.jpg","/media/lesson-00/hw00-47.jpg","/media/lesson-00/hw00-48.jpg","/media/lesson-00/hw00-49.jpg"],"link":"https://openprocessing.org/@ycs77/3023921","posted_at":"2026-10-06T00:15:45+08:00"},{"lesson":"lesson-00","kind":"作業","who":"weihsinlo_","title":"磚頭與圓圈花紋","desc":"第一週與第二週課程直播的綜合練習，想像力還在培養中......參考資料：pin.it","images":["/media/lesson-00/hw00-42.jpg","/media/lesson-00/hw00-43.jpg"],"link":"https://openprocessing.org/@noirklyn2fa7/3024479","posted_at":"2026-10-05T20:32:04+08:00"},{"lesson":"lesson-00","kind":"作業","who":"緯","title":"雜訊城市(?)","desc":"https://openprocessing.org/@hybert7004/3020927 原本想畫一些比較具象的物體ex：鳥，鼠標，但後來發現技術跟想像力不太夠，後來看到一些類似glitch的方格跟拖曳感之後就想說能簡單地將畫布一分為…","images":["/media/lesson-00/hw00-38.jpg"],"link":"https://openprocessing.org/@hybert7004/3020927","posted_at":"2026-10-05T13:13+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Taurus","title":"泡沫筆刷","desc":"","images":["/media/lesson-00/hw00-37.jpg"],"link":null,"posted_at":"2026-10-04T16:14+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Chaos","title":"rhythm #0","desc":"從 artblocks.io 作品獲取靈感，搭配隨機數創作鼓點跳動","images":["/media/lesson-00/hw00-35.jpg"],"link":"https://openprocessing.org/@u288673/3025703","posted_at":"2026-10-02T21:47:33+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Lynn Hu","title":"盲人拉胚","desc":"","images":["/media/lesson-00/hw00-34.jpg"],"link":null,"posted_at":"2026-10-02T02:24+08:00"},{"lesson":"lesson-00","kind":"作業","who":"台湾勢DD","title":"《抽筆》 Draw a Brush","desc":"概念為常見的四種要素墨、霓、藤、絲，每次開啟時能隨機抽到其中一款筆刷自由創作，每一款筆刷有不同的特性待使用者發掘","images":["/media/lesson-00/hw00-33.jpg"],"link":"https://openprocessing.org/@Ruyuang/3024526","posted_at":"2026-10-01T18:41:38+08:00"},{"lesson":"lesson-00","kind":"作業","who":"徐士閎","title":"AI art 動態圖","desc":"動態圖","images":["/media/lesson-00/hw00-31.jpg"],"link":null,"posted_at":"2026-09-30T11:02+08:00"},{"lesson":"lesson-00","kind":"作業","who":"王獻章","title":"line pattern","desc":"https://openprocessing.org/@u76476/3022658","images":["/media/lesson-00/hw00-30.jpg"],"link":"https://openprocessing.org/@u76476/3022658","posted_at":"2026-09-29T19:52+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Chun","title":"Rasen","desc":"","images":["/media/lesson-00/hw00-24.jpg","/media/lesson-00/hw00-25.jpg","/media/lesson-00/hw00-26.jpg","/media/lesson-00/hw00-27.jpg","/media/lesson-00/hw00-28.jpg"],"link":null,"posted_at":"2026-09-29T19:29:14+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Wujue","title":"Moontrace","desc":"構想是因為中秋節，所以想要用月亮當作主題～","images":[],"link":"https://openprocessing.org/@wujue/3015527?v=2","posted_at":"2026-09-29T18:56:16+08:00"},{"lesson":"lesson-00","kind":"作業","who":"fan0928","title":"作業","desc":"作業＿L0","images":["/media/lesson-00/hw00-22.jpg","/media/lesson-00/hw00-23.jpg"],"link":null,"posted_at":"2026-09-29T18:51:54+08:00"},{"lesson":"lesson-00","kind":"作業","who":"ohana","title":"雖然數學不熟，但在 AI 輔助下將幾何公式轉化為極光花，體會到程式創作的無限可能","desc":"","images":["/media/lesson-00/hw00-21.jpg"],"link":"https://openprocessing.org/@ohana/3022503","posted_at":"2026-09-29T18:33:26+08:00"},{"lesson":"lesson-00","kind":"作業","who":"kay","title":"點擊=加速","desc":"復古DVD畫面過程中，我學習到: - 3d色彩變化rejection sampling - class 和 list 運用- 微調用戶體驗初始參數","images":["/media/lesson-00/hw00-19.jpg","/media/lesson-00/hw00-20.jpg"],"link":"https://openprocessing.org/@K18503/3022563","posted_at":"2026-09-29T18:22:22+08:00"},{"lesson":"lesson-00","kind":"作業","who":"YaHsin","title":"花開花落","desc":"花朵會隨著鼠標進行花開與花落，隨著越來越多的花開與花落，在“地面”（畫布）上會逐漸呈現出類似 “凋零的花朵掉滿地” 的視覺感受。此為簡單運用第一週課程所學，輔以一點 AI 協助完成的小作品作業。","images":["/media/lesson-00/hw00-18.jpg"],"link":"https://openprocessing.org/sketch/3015708","posted_at":"2026-09-29T16:26:52+08:00"},{"lesson":"lesson-00","kind":"作業","who":"trivia","title":"Abstract Chromatography","desc":"靈感來源（pin.it）","images":["/media/lesson-00/hw00-17.jpg"],"link":"https://openprocessing.org/@triviak/3021437","posted_at":"2026-09-29T13:55:40+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Nick Hu","title":"Circles","desc":"Circles Inspired by artblocks.io","images":["/media/lesson-00/hw00-15.jpg","/media/lesson-00/hw00-16.jpg"],"link":"https://openprocessing.org/@nickhu/3022454","posted_at":"2026-09-29T13:21:42+08:00"},{"lesson":"lesson-00","kind":"作業","who":"YKChung","title":"20 Windblown Lines","desc":"","images":[],"link":"https://openprocessing.org/@cyking/3022404","posted_at":"2026-09-29T12:01:21+08:00"},{"lesson":"lesson-00","kind":"作業","who":"☿","title":"蒲公英","desc":"https://openprocessing.org/@3RH/3019915 ▼Mood Board","images":["/media/lesson-00/hw00-12.jpg","/media/lesson-00/hw00-13.jpg","/media/lesson-00/hw00-14.jpg"],"link":"https://openprocessing.org/@3RH/3019915","posted_at":"2026-09-29T08:21:39+08:00"},{"lesson":"lesson-00","kind":"作業","who":"micah_chu","title":"Aurora 極光繪製","desc":"找參考資料的時候覺得極光很適合練習第一堂課的內容，雖然應該很多人做過但新手就不求什麼突破性的創意了～拿來練基本功剛剛好","images":["/media/lesson-00/hw00-06.jpg","/media/lesson-00/hw00-07.jpg","/media/lesson-00/hw00-08.jpg","/media/lesson-00/hw00-09.jpg","/media/lesson-00/hw00-10.jpg","/media/lesson-00/hw00-11.jpg"],"link":"https://openprocessing.org/@qwer565891/3021510","posted_at":"2026-09-29T01:34:32+08:00"},{"lesson":"lesson-00","kind":"作業","who":"jshen0715","title":"Bouncing Sheep","desc":"是一個活在異次元的羊咩，跟著滑鼠的動作進行擺動、跳躍","images":["/media/lesson-00/hw00-03.jpg","/media/lesson-00/hw00-04.jpg","/media/lesson-00/hw00-05.jpg"],"link":"https://openprocessing.org/@u232194/3018182","posted_at":"2026-09-28T23:04:15+08:00"},{"lesson":"lesson-00","kind":"作業","who":"walking_passenger","title":"TeaBall","desc":"構想是使用者可以倒入不同顏色的茶品，然後可以透過搖晃混合出隨機的畫面，這裡嘗試使用Gemeni協助撰寫程式並加入互動功能，畫面繪製完成後存檔，再生成mockup，雖然跟腦海想要呈現的有差距，但結果還挺有趣的。","images":["/media/lesson-00/hw00-01.jpg","/media/lesson-00/hw00-02.jpg"],"link":"https://openprocessing.org/@bh9986900bh/3020858","posted_at":"2026-09-28T21:14:03+08:00"},{"lesson":"lesson-00","kind":"作業","who":"Reci  Wang","title":"作品一：動態幾何","desc":"","images":["/media/lesson-00/hw00-29.jpg"],"link":null,"posted_at":"2026-09-28T21:06+08:00"},{"lesson":"lesson-00","kind":"課堂作品","who":"Chaos","title":"彩虹條紋","desc":"方塊疊出的直條紋，左側一道斜帶","images":["/media/lesson-00/w00-15.jpg"],"link":null,"posted_at":"2026-09-22T21:25:25+08:00","video":null,"t":"2:25:25","sec":8725,"colors":["rainbow"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"Lucas Yang","title":"7 秒 WebM 錄影","desc":"圓角方塊繞圈旋轉","images":["/media/lesson-00/w00-14.jpg"],"link":null,"posted_at":"2026-09-22T21:23:05+08:00","video":"/media/lesson-00/w00-14.mp4","t":"2:23:05","sec":8585,"colors":[],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"weihsinlo_","title":"表情筆刷","desc":"粉色方臉，灰底","images":["/media/lesson-00/w00-13.jpg"],"link":null,"posted_at":"2026-09-22T21:22:18+08:00","video":null,"t":"2:22:18","sec":8538,"colors":["pink"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"XuYan","title":"貓頭鷹","desc":"彩色貓頭鷹疊滿畫面","images":["/media/lesson-00/w00-12.jpg"],"link":null,"posted_at":"2026-09-22T21:21:44+08:00","video":null,"t":"2:21:44","sec":8504,"colors":["rainbow"],"reaction":{"t":"2:21:44","text":"「有人做了貓頭鷹，好可愛」"}},{"lesson":"lesson-00","kind":"課堂作品","who":"Lucas Yang","title":"旋轉方塊","desc":"藍紫半透明圓角方塊繞一圈","images":["/media/lesson-00/w00-11.jpg"],"link":null,"posted_at":"2026-09-22T21:20:39+08:00","video":null,"t":"2:20:39","sec":8439,"colors":["blue","purple"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"trivia","title":"弧線加旋轉","desc":"灰底上的黃色細線螺旋","images":["/media/lesson-00/w00-10.jpg"],"link":null,"posted_at":"2026-09-22T21:17:53+08:00","video":null,"t":"2:17:53","sec":8273,"colors":["yellow"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"kay","title":"弧線加旋轉","desc":"紅黃放射條紋的鸚鵡螺，黑底（1 個愛心）","images":["/media/lesson-00/w00-09.jpg"],"link":null,"posted_at":"2026-09-22T21:10:18+08:00","video":null,"t":"2:10:18","sec":7818,"colors":["red","yellow"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"Lucas Yang","title":"弧線加旋轉","desc":"青色細線螺旋","images":["/media/lesson-00/w00-08.jpg"],"link":null,"posted_at":"2026-09-22T21:08:52+08:00","video":null,"t":"2:08:52","sec":7732,"colors":["cyan"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"YaHsin","title":"弧線加旋轉","desc":"白色線圈上下串成一列，黑底","images":["/media/lesson-00/w00-07.jpg"],"link":null,"posted_at":"2026-09-22T21:05:20+08:00","video":null,"t":"2:05:20","sec":7520,"colors":["white"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"台湾勢DD","title":"弧線加旋轉","desc":"灰白細線繞成圓環","images":["/media/lesson-00/w00-06.jpg"],"link":null,"posted_at":"2026-09-22T20:59:37+08:00","video":null,"t":"1:59:37","sec":7177,"colors":["grey","white"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"kay","title":"弧線加旋轉","desc":"白色細線在黑底捲成號角形","images":["/media/lesson-00/w00-05.jpg"],"link":null,"posted_at":"2026-09-22T20:55:11+08:00","video":null,"t":"1:55:11","sec":6911,"colors":["white"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"trivia","title":"表情筆刷","desc":"紫藍小方臉，灰底","images":["/media/lesson-00/w00-04.jpg"],"link":null,"posted_at":"2026-09-22T20:50:08+08:00","video":null,"t":"1:50:08","sec":6608,"colors":["purple","blue"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"function(null);","title":"表情筆刷","desc":"橘、黃、綠的大方臉","images":["/media/lesson-00/w00-03.jpg"],"link":null,"posted_at":"2026-09-22T20:48:23+08:00","video":null,"t":"1:48:23","sec":6503,"colors":["orange","yellow","green"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"kay","title":"表情筆刷","desc":"綠色與棕色小方臉，連程式一起截","images":["/media/lesson-00/w00-02.jpg"],"link":null,"posted_at":"2026-09-22T20:41:07+08:00","video":null,"t":"1:41:07","sec":6067,"colors":["green","brown"],"reaction":null},{"lesson":"lesson-00","kind":"課堂作品","who":"Lucas Yang","title":"表情筆刷","desc":"藍色方臉疊滿畫面，連程式一起截","images":["/media/lesson-00/w00-01.jpg"],"link":null,"posted_at":"2026-09-22T20:39:40+08:00","video":null,"t":"1:39:40","sec":5980,"colors":["blue"],"reaction":{"t":"1:39:43","text":"「欸 有耶 有人貼上來耶 好可愛喔」"}}],"live":null,"hasReplay":true,"startAt":"2026-09-22T19:00:00+08:00","endAt":"2026-09-22T21:30:00+08:00","state":"after","youtubeId":null,"memo":{"html":"<h3>00:00–00:02　直播與聊天室確認</h3><ul><li>請大家先留個言，確定有到</li></ul><h3>00:02–01:00　序章與全景</h3><ul><li>序章<ul><li>哲宇背景介紹</li><li>課程介紹：新媒體藝術的全景地圖（11 週、8 件作品）<a href=\"https://hahow.in/cr/creative-code\" target=\"_blank\" rel=\"noopener noreferrer\">hahow.in/cr/creative-code</a></li><li>Lab 版回顧創作的發展歷程 <a href=\"https://cheyuwu.com/lab\" target=\"_blank\" rel=\"noopener noreferrer\">cheyuwu.com/lab</a></li><li>怎麼讓這堂課帶來最大效果：了解概念＋練習延伸實作＋探索好奇領域</li><li>可以怎麼使用 AI：越方便，越要用導演與高階工程師的方式思考；懂原理、懂名詞、懂方法，同樣的 AI 才導得出複雜、能長遠建設的專案</li><li>課程資源：Discord／live 網頁／錄製影片之後上架 Hahow／問卷 <a href=\"https://forms.gle/aHjxyNKegcjr64Ky7\" target=\"_blank\" rel=\"noopener noreferrer\">forms.gle/aHjxyNKegcjr64Ky7</a></li></ul></li><li>近況分享：The Last Input、未竟之花、大地與川脈的編織、水裡學（音流學）</li><li>新媒體藝術的媒材：p5.js、TouchDesigner、硬體裝置</li><li>作品觀摩<ul><li>Artblocks 藝術家們</li><li>OpenProcessing：我追蹤的創作者、他們的作品與類型</li></ul></li></ul><h3>中場休息 10 分鐘</h3><h3>01:00–02:00　第一個生成藝術作品</h3><ul><li>註冊 OpenProcessing</li><li>介紹 p5.js</li><li>滑鼠筆刷：奇形怪狀的花朵</li><li>動態幾何：迴圈與陣列</li></ul><h3>02:00–02:20　收尾</h3><ul><li>QA 時間</li><li>作業、下週預告、回放在哪看</li></ul>","segments":[{"start":0,"end":2,"label":"直播與聊天室確認","line":0,"must":[]},{"start":2,"end":60,"label":"序章與全景","line":2,"must":[]},{"start":60,"end":120,"label":"第一個生成藝術作品","line":16,"must":[]},{"start":120,"end":140,"label":"收尾","line":21,"must":[]}]},"prev":null,"next":{"id":"lesson-01","number":1,"date":"2026-09-29","time":"19:00–21:30","title":"第一個生成藝術作品","tool":"p5.js"}}