{"id":"lesson-01","number":1,"title":"第一個生成藝術作品","tool":"p5.js","date":"2026-09-29","time":"19:00–21:30","hasNotes":true,"notes":{"title":"第一個生成藝術作品","status":"課後版 v2（2026-10-08 依逐字稿重寫）","date":"2026-09-29","toc":[{"id":"s-1","text":"這堂在做什麼","level":2},{"id":"s-2","text":"課程網站：筆記、互動模組與資源","level":2},{"id":"s-3","text":"AI 時代，為什麼還要先手打","level":2},{"id":"s-4","text":"作業賞析：軌跡、比例、異材質與配色","level":2},{"id":"s-5","text":"小示範：把色票變成清單","level":2},{"id":"s-6","text":"作業賞析（續）：先畫構圖，再交給 AI","level":2},{"id":"s-7","text":"新媒體藝術在哪裡發生：團隊、案子與參數時間軸","level":2},{"id":"s-8","text":"這堂的主線：重複、迴圈與函數","level":2},{"id":"s-9","text":"示範：用餘數和 if／else 排顏色","level":2},{"id":"s-10","text":"示範：環狀的花","level":2},{"id":"s-11","text":"示範：讓花長出變化","level":2},{"id":"s-12","text":"作品觀摩：Archetype 與遞迴","level":2},{"id":"s-13","text":"示範：影像筆刷","level":2},{"id":"s-14","text":"作品觀摩：Trossets 的格線拼圖","level":2},{"id":"s-15","text":"示範：筆刷系統","level":2},{"id":"s-16","text":"作品觀摩：Fidenza 與向量場","level":2},{"id":"s-17","text":"回顧與 blendMode","level":2},{"id":"s-18","text":"示範：取座標小工具","level":2},{"id":"s-19","text":"示範：花朵印章網格","level":2},{"id":"s-20","text":"課堂問答","level":2},{"id":"s-20-1","text":"程式觀念","level":3},{"id":"s-20-2","text":"筆刷與介面操作","level":3},{"id":"s-20-3","text":"AI 與職涯","level":3},{"id":"s-20-4","text":"課程安排","level":3},{"id":"s-21","text":"作業與下一堂","level":2},{"id":"s-21-1","text":"題目：作品一　動態幾何","level":3},{"id":"s-21-2","text":"下一堂","level":3},{"id":"s-22","text":"卡住的時候","level":2},{"id":"s-23","text":"延伸資源","level":2}],"segments":[{"html":"<blockquote>\n<p>2026-09-29（二）19:00–21:32 線上直播（錄影 2:32:19）</p>\n</blockquote>\n<h2 id=\"s-1\">這堂在做什麼</h2>\n<p>上一堂用滑鼠做出了第一支筆刷，這一堂要回答的問題是：既然要用程式畫一幅畫，要從哪裡著手？哲宇先從大家的作業看起，再拿「重複」當主線往下走。磚牆一塊一塊換顏色，花瓣一片一片轉成一圈，一小塊圖片沿著滑鼠一直蓋下去，就是筆刷。整堂做了五個示範：色票與 if／else、環狀的花、影像筆刷、取座標小工具、花朵印章網格，中間穿插四件 Art Blocks 作品，看別人怎麼用同樣的重複做出圖騰感。最後的作業是「作品一：動態幾何」。</p>\n<aside class=\"callout callout-key\" aria-label=\"這堂課帶走\"><p class=\"callout-title\">這堂課帶走</p><ol class=\"steps\">\n<li><strong class=\"step-t\">色票是一個清單</strong>從 Coolors 複製成陣列，用 <code><span class=\"tok-f\">random</span>()</code>、<code>%</code> 和 if／else 決定顏色怎麼排，圖騰感就出來了。</li>\n<li><strong class=\"step-t\">環狀構圖是在轉畫紙</strong>原點移到中心，畫一片、轉 30 度，用 <code><span class=\"tok-k\">for</span></code> 重複 12 次就是一朵花。</li>\n<li><strong class=\"step-t\">缺零件就請 AI 寫一個函數</strong>自己決定貼在哪、怎麼叫它，等於在幫 p5.js 寫外掛。</li>\n<li><strong class=\"step-t\">圖片也能當筆刷</strong>載入、對準滑鼠、按鍵切換、按下才畫、速度決定大小，再用 blendMode 疊色。</li>\n<li><strong class=\"step-t\">手點座標，做自己的印章</strong>點出一串 vertex，包成 <code><span class=\"tok-f\">drawFlower</span>()</code>，兩層 <code><span class=\"tok-k\">for</span></code> 印成一整面。</li>\n</ol>\n</aside>"},{"locked":true,"id":"s-2","title":"課程網站：筆記、互動模組與資源"},{"locked":true,"id":"s-3","title":"AI 時代，為什麼還要先手打"},{"locked":true,"id":"s-4","title":"作業賞析：軌跡、比例、異材質與配色"},{"locked":true,"id":"s-5","title":"小示範：把色票變成清單"},{"locked":true,"id":"s-6","title":"作業賞析（續）：先畫構圖，再交給 AI"},{"locked":true,"id":"s-7","title":"新媒體藝術在哪裡發生：團隊、案子與參數時間軸"},{"locked":true,"id":"s-8","title":"這堂的主線：重複、迴圈與函數"},{"locked":true,"id":"s-9","title":"示範：用餘數和 if／else 排顏色"},{"locked":true,"id":"s-10","title":"示範：環狀的花"},{"locked":true,"id":"s-11","title":"示範：讓花長出變化"},{"locked":true,"id":"s-12","title":"作品觀摩：Archetype 與遞迴"},{"locked":true,"id":"s-13","title":"示範：影像筆刷"},{"locked":true,"id":"s-14","title":"作品觀摩：Trossets 的格線拼圖"},{"locked":true,"id":"s-15","title":"示範：筆刷系統"},{"locked":true,"id":"s-16","title":"作品觀摩：Fidenza 與向量場"},{"locked":true,"id":"s-17","title":"回顧與 blendMode"},{"locked":true,"id":"s-18","title":"示範：取座標小工具"},{"locked":true,"id":"s-19","title":"示範：花朵印章網格"},{"locked":true,"id":"s-20","title":"課堂問答"},{"locked":true,"id":"s-21","title":"作業與下一堂"},{"locked":true,"id":"s-22","title":"卡住的時候"},{"locked":true,"id":"s-23","title":"延伸資源"}],"widgets":["random","variable","transform","forloop","sincos","noise","vertex","func","grid","pushpop"],"links":[{"group":"延伸資源","text":"260929 colors demo","href":"https://openprocessing.org/@cheyuwu/3022625"},{"group":"延伸資源","text":"260929 angle demo","href":"https://openprocessing.org/@cheyuwu/3022662"},{"group":"延伸資源","text":"brush demo class 1-2","href":"https://openprocessing.org/@cheyuwu/3022716"},{"group":"延伸資源","text":"260929 shape demo","href":"https://openprocessing.org/@cheyuwu/3022822"},{"group":"延伸資源","text":"vertex flower","href":"https://openprocessing.org/@cheyuwu/3022843"},{"group":"延伸資源","text":"第一個生成藝術作品（Pinterest）","href":"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/"},{"group":"延伸資源","text":"Coolors","href":"https://coolors.co/"},{"group":"延伸資源","text":"W3Schools CSS 顏色名稱","href":"https://www.w3schools.com/cssref/css_colors.php"},{"group":"延伸資源","text":"Explanation of brush pen","href":"https://openprocessing.org/@bun/793375"},{"group":"延伸資源","text":"loadImage","href":"https://p5js.org/reference/p5/loadImage/"},{"group":"延伸資源","text":"image","href":"https://p5js.org/reference/p5/image/"},{"group":"延伸資源","text":"imageMode","href":"https://p5js.org/reference/p5/imageMode/"},{"group":"延伸資源","text":"blendMode","href":"https://p5js.org/reference/p5/blendMode/"},{"group":"延伸資源","text":"beginShape","href":"https://p5js.org/reference/p5/beginShape/"},{"group":"延伸資源","text":"vertex","href":"https://p5js.org/reference/p5/vertex/"},{"group":"延伸資源","text":"endShape","href":"https://p5js.org/reference/p5/endShape/"},{"group":"延伸資源","text":"dist","href":"https://p5js.org/reference/p5/dist/"},{"group":"延伸資源","text":"mouseIsPressed","href":"https://p5js.org/reference/p5/mouseIsPressed/"},{"group":"延伸資源","text":"keyPressed","href":"https://p5js.org/reference/p5/keyPressed/"},{"group":"延伸資源","text":"movedX","href":"https://p5js.org/reference/p5/movedX/"},{"group":"延伸資源","text":"pmouseX","href":"https://p5js.org/reference/p5/pmouseX/"},{"group":"延伸資源","text":"noLoop","href":"https://p5js.org/reference/p5/noLoop/"},{"group":"延伸資源","text":"push","href":"https://p5js.org/reference/p5/push/"},{"group":"延伸資源","text":"pop","href":"https://p5js.org/reference/p5/pop/"},{"group":"延伸資源","text":"Archetype","href":"https://www.artblocks.io/collection/archetype-by-kjetil-golid"},{"group":"延伸資源","text":"Act of Emotion","href":"https://www.artblocks.io/collection/act-of-emotion-by-kelly-milligan"},{"group":"延伸資源","text":"Trossets","href":"https://www.artblocks.io/collection/trossets-by-anna-carreras"},{"group":"延伸資源","text":"Fidenza","href":"https://www.artblocks.io/collection/fidenza-by-tyler-hobbs"},{"group":"延伸資源","text":"叁式 Ultra Combos","href":"https://ultracombos.com/"},{"group":"延伸資源","text":"豪華朗機工（ART PRESS Asia 專訪）","href":"https://theartpressasia.com/2020/01/14/artist-is-a-special-kind-of-people-with-smart-and-foolish-at-the-same-time-interveiw-with-luxurylogico/"},{"group":"延伸資源","text":"十三行互動","href":"http://13techart.com/"},{"group":"延伸資源","text":"黑川互動媒體藝術","href":"https://www.peppercorns.com.tw/"},{"group":"延伸資源","text":"Dimension Plus","href":"https://www.dimensionplus.co/"},{"group":"延伸資源","text":"Moment Factory","href":"https://www.momentfactory.com/"},{"group":"延伸資源","text":"Local Projects","href":"https://localprojects.com/"},{"group":"延伸資源","text":"Volvox Labs","href":"https://volvoxlabs.com/"},{"group":"延伸資源","text":"creativecoding.in","href":"https://creativecoding.in/"}]},"chapters":[{"t":"0:00","sec":0,"title":"開場：互動以 Discord 為主、語速放慢","note":"互動以 Discord 為主，那邊可以貼圖片；「這次時間我儘量收在兩個小時啦」，預告三個小 demo。","part":"開場與網站導覽"},{"t":"2:50","sec":170,"title":"課程網站導覽：作品、/live、上一堂筆記與互動模組","note":"首頁作品牆、/live 頁怎麼用；上一堂筆記的時間戳可以點，座標與 transform 的互動模組；「我會一邊打程式一邊打出它的註解」。","part":"開場與網站導覽"},{"t":"8:29","sec":509,"title":"YouTube 插播廣告、AI 時代怎麼學","note":"「大家要準備面對的是一個幾乎大家都不會手寫程式碼的時代，但是如果你會手寫程式碼…你就可以更快的去指揮」；作業先手打，再讓 AI 改造。","part":"開場與網站導覽"},{"t":"10:52","sec":652,"title":"作業賞析：鸚鵡螺變體、表情的比例與配色","note":"誇張的臉部比例、異材質交替、顏色的變體；配色工具 Coolors。","part":"作業賞析"},{"t":"15:05","sec":905,"title":"小示範：色票清單、random 與取餘數","note":"let colors 貼進 Coolors 的陣列，random(colors) 隨機抽、colors[frameCount % 10] 照順序取。","part":"作業賞析"},{"t":"19:42","sec":1182,"title":"作業賞析（續）：蒲公英與指揮 AI、會跳的羊、極光","note":"每次作業先做 moodboard、找出最重要的特徵；用構圖草稿指揮 AI；movedX 讓東西跟著滑鼠速度變。","part":"作業賞析"},{"t":"28:13","sec":1693,"title":"作業改交 Hahow","note":"Hahow 為主，像部落格一樣放靈感板、嘗試與變體；最漂亮的畫面貼 Discord。","part":"作業賞析"},{"t":"29:46","sec":1786,"title":"回答問題：新媒體藝術的公司與案子、參數時間軸","note":"台灣與國外的新媒體藝術團隊；把表演的參數排在時間軸上，就是一個迷你劇場。","part":"回答問題"},{"t":"37:54","sec":2274,"title":"今天要做什麼：Moodboard、迴圈與函數、手繪的有機感","note":"白板講迴圈與函數；「我希望大家做出來的那個程式藝術作品啊，它是有有機感的」。","part":"主要課程：迴圈、函數與環狀的花"},{"t":"45:54","sec":2754,"title":"示範：if／else 與餘數決定顏色","note":"frameCount % 2 奇偶換色，% 10 分三段；「一旦你就是要讓它出現這種圖騰型的東西，你都可以使用這個方式」。","part":"主要課程：迴圈、函數與環狀的花"},{"t":"51:05","sec":3065,"title":"環狀的花：極座標、translate、rotate、for","note":"原點移到中間，ellipse 往右偏移半個寬度，rotate 30 度會累加，for 重複 12 次畫成一朵花。","part":"主要課程：迴圈、函數與環狀的花"},{"t":"1:04:01","sec":3841,"title":"花的變化：色票輪替、AI 補 polygon、殘影","note":"colors[i % 5] 每片換色；請 AI 補 polygon 做六角花瓣；半透明背景留下殘影。","part":"主要課程：迴圈、函數與環狀的花"},{"t":"1:20:17","sec":4817,"title":"作品觀摩：Archetype 與遞迴","note":"空間切割與遞迴的概念，「今天我們不會寫到」。","part":"作品觀摩與影像筆刷"},{"t":"1:27:24","sec":5244,"title":"影像筆刷：Act of Emotion、上傳圖片、loadImage","note":"截一塊畫當筆刷、上傳到 Files、async setup 加 await loadImage；「就講個筆刷講得太久了」。","part":"作品觀摩與影像筆刷"},{"t":"1:37:55","sec":5875,"title":"作品觀摩：Trossets 格線拼圖","note":"每格四邊接點都有線的圖塊，隨機拼起來線條也接得上。","part":"作品觀摩與影像筆刷"},{"t":"1:40:42","sec":6042,"title":"筆刷進階：跟著轉、imageMode、切換筆刷、按下才畫、速度決定大小","note":"translate 到滑鼠再 rotate、imageMode(CENTER)、keyPressed 切換、mouseIsPressed、dist 算速度。","part":"作品觀摩與影像筆刷"},{"t":"2:00:42","sec":7242,"title":"作品觀摩：Fidenza 與向量場","note":"向量場扭曲線條，再沿線切段上色票。","part":"作品觀摩與影像筆刷"},{"t":"2:04:29","sec":7469,"title":"回顧、blendMode 與作業題目","note":"Photoshop 的圖層疊合模式：DARKEST、SCREEN；作業「作品一：動態幾何」。","part":"形狀：beginShape／vertex"},{"t":"2:11:30","sec":7890,"title":"beginShape／vertex：取座標小工具與花朵印章網格","note":"點一下印出 vertex，包成 drawFlower()，兩層 for 印成網格、random 二選一、noLoop。","part":"形狀：beginShape／vertex"},{"t":"2:26:52","sec":8812,"title":"回家作業、下週預告、問答與問卷","note":"找喜歡的場景做成每次打開都不一樣的拼貼畫，存 5 個變體與影片；下週向量與粒子；遞迴之後再講。","part":"作業與收尾"}],"summary":"2 小時 32 分。前 38 分鐘看作業、回答 AI 的定位與「去哪裡找新媒體藝術的工作」；接著從色票與 if／else 取色、環狀的花（請 AI 補 polygon），一路做到影像筆刷系統與 blendMode，最後用取座標小工具把手點的花形做成印章網格。作業是「作品一：動態幾何」，10/5（一）21:00 前交 Hahow。","duration":"2:32:19","plan":{"topic":"環境設定、畫布、動態圖形、隨機性","output":"動態幾何作品","stage":"友善入門","difficulty":2},"sections":23,"qaCount":22,"homework":{"title":"作品一　動態幾何","steps":["結合今天做幾何形狀的方法：圖騰般的配色、環狀構圖、筆刷系統，自由組合","找一個喜歡的場景（生活風景、看過的畫、喜歡的角色），先用 moodboard 收集","用 p5.js 做出來，像一幅馬賽克拼貼畫，每次打開都不一樣","存 5 個左右的變體圖","輸出成影片讓它動起來（留下軌跡或隨時間變化），或用筆刷畫完存圖","交到 Hahow 作業區「作品一」，10/5（一）21:00 前；Discord #作業分享 貼一份"],"source":"[2:10:37]、[2:26:52]"},"quotes":[{"t":"03:54","text":"「如果說你覺得有點辛苦或是跟不上，這個是正常的，因為寫程式剛開始本來就會蠻卡的」"},{"t":"10:00","text":"「大家要準備面對的是一個幾乎大家都不會手寫程式碼的時代，但是如果你會手寫程式碼…你就可以更快的去指揮你的工具去做出創作」"},{"t":"22:47","text":"「你至少要讓自己參與在這個過程中」"}],"quotesTotal":9,"resources":[{"group":"範例程式（OpenProcessing）","items":[{"title":"260929 colors demo","url":"https://openprocessing.org/@cheyuwu/3022625","note":"色票清單、random 與 if／else 取色"},{"title":"260929 angle demo","url":"https://openprocessing.org/@cheyuwu/3022662","note":"環狀的花：translate、rotate、for"},{"title":"brush demo class 1-2","url":"https://openprocessing.org/@cheyuwu/3022716","note":"影像筆刷：按下才畫、速度決定大小"},{"title":"260929 shape demo","url":"https://openprocessing.org/@cheyuwu/3022822","note":"取座標小工具：點畫布印出 vertex"},{"title":"vertex flower","url":"https://openprocessing.org/@cheyuwu/3022843","note":"花朵印章網格：beginShape／vertex、push／pop"},{"title":"Explanation of brush pen（@bun）","url":"https://openprocessing.org/@bun/793375","note":"點與點之間補間的筆刷"}]},{"group":"其他人的案例（Art Blocks）","items":[{"title":"Archetype by Kjetil Golid","url":"https://www.artblocks.io/collection/archetype-by-kjetil-golid","note":"空間切割、遞迴"},{"title":"Act of Emotion by Kelly Milligan","url":"https://www.artblocks.io/collection/act-of-emotion-by-kelly-milligan","note":"材質疊成筆刷"},{"title":"Trossets by Anna Carreras","url":"https://www.artblocks.io/collection/trossets-by-anna-carreras","note":"格線拼圖"},{"title":"Fidenza by Tyler Hobbs","url":"https://www.artblocks.io/collection/fidenza-by-tyler-hobbs","note":"向量場"},{"title":"Moodboard：第一個生成藝術作品","url":"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/"}]},{"group":"新媒體藝術團隊（回答〈關於工作〉）","items":[{"title":"Moment Factory","url":"https://momentfactory.com/"},{"title":"Local Projects","url":"https://localprojects.com/"},{"title":"Volvox Labs","url":"https://volvoxlabs.com/"},{"title":"叁式 Ultra Combos","url":"https://ultracombos.com/"},{"title":"Dimension Plus","url":"https://www.dimensionplus.co/"},{"title":"十三行互動","url":"https://www.13techart.com/"},{"title":"黑川互動媒體藝術","url":"https://www.peppercorns.com.tw/"},{"title":"豪華朗機工（專訪）","url":"https://theartpressasia.com/2020/01/14/artist-is-a-special-kind-of-people-with-smart-and-foolish-at-the-same-time-interveiw-with-luxurylogico/"},{"title":"creativecoding.in 入門資源","url":"https://creativecoding.in/resources/"}]},{"group":"工具","items":[{"title":"Coolors 配色","url":"https://coolors.co/","note":"Explore 挑現成的、Generator 按空白鍵換、Export → Copy as Array"},{"title":"課堂用的那組色票","url":"https://coolors.co/240115-de3c4b-87f5fb-2f131e-cec3c1"},{"title":"CSS 顏色名稱表","url":"https://www.w3schools.com/cssref/css_colors.php"},{"title":"p5.js Reference","url":"https://p5js.org/reference/"},{"title":"beginShape／vertex","url":"https://p5js.org/reference/p5/beginShape/","note":"外框線接回第一點寫 endShape(CLOSE)"},{"title":"Google 藝術與文化（找作業場景）","url":"https://artsandculture.google.com/"},{"title":"透明背景筆刷素材","url":"https://www.vecteezy.com/free-png/watercolor-brushes","note":"下載前看授權"}]}],"works":[{"lesson":"lesson-01","kind":"作業","who":"Wujue","title":"Rain","desc":"討厭下雨 但在網頁裡面下雨還不錯🤣","images":[],"link":"https://openprocessing.org/@wujue/3027945","posted_at":"2026-10-06T18:59:57+08:00"},{"lesson":"lesson-01","kind":"作業","who":"kay","title":"水","desc":"","images":["/media/lesson-01/hw01-16.jpg"],"link":"https://openprocessing.org/@K18503/3027942","posted_at":"2026-10-06T18:59:17+08:00"},{"lesson":"lesson-01","kind":"作業","who":"trivia","title":"嚴肅的臉","desc":"作品靈感：instagram.com","images":["/media/lesson-01/hw01-15.jpg"],"link":"https://openprocessing.org/@triviak/3027812","posted_at":"2026-10-06T18:35:00+08:00"},{"lesson":"lesson-01","kind":"作業","who":"BY H","title":"開花","desc":"作業連結:https://openprocessing.org/@Bing-Yu-Hsieh/3027863 利用ai幫忙做了一個可以隨機顏色、位置長大的花，跟預想的還是有差別。","images":["/media/lesson-01/hw01-14.jpg"],"link":"https://openprocessing.org/@Bing-Yu-Hsieh/3027863","posted_at":"2026-10-06T16:43+08:00"},{"lesson":"lesson-01","kind":"作業","who":"micah_chu","title":"稻田 Paddy Field","desc":"設計過程：hahow.in上次手刻程式，這次嘗試與 AI 協作實現更好的效果～（AI秒速寫完初版然後再花數小時當家教一行行慢慢教我慢慢一起改）","images":["/media/lesson-01/hw01-12.jpg","/media/lesson-01/hw01-13.jpg"],"link":"https://openprocessing.org/@qwer565891/3027739","posted_at":"2026-10-06T00:35:58+08:00"},{"lesson":"lesson-01","kind":"作業","who":"brian lai","title":"taiwan roof/roots","desc":"作品連結 https://openprocessing.org/@peal256/3025512 鳥瞰台灣的都市，常常你會發現一大片都是鐵皮屋。有人覺得鐵皮屋屋頂很醜，但我覺得鐵皮屋屋頂是因應台灣氣候與經濟背景下的產物，代表著台灣特定的一…","images":["/media/lesson-01/hw01-10.jpg"],"link":"https://openprocessing.org/@peal256/3025512","posted_at":"2026-10-05T23:24+08:00"},{"lesson":"lesson-01","kind":"作業","who":"Chaos","title":"abstract character #3","desc":"變裝魔法師，靈感來自： pin.it 。使用 vetex 畫出所有節點，然後連線，通過隨機顏色實現變裝，眼珠會看向滑鼠位置；手的前方是一顆大魔法球，點擊畫布隨機生成一組魔法球","images":["/media/lesson-01/hw01-09.jpg"],"link":"https://openprocessing.org/@u288673/3027081","posted_at":"2026-10-05T22:32:51+08:00"},{"lesson":"lesson-01","kind":"作業","who":"Tiff","title":"Petals in the Mist","desc":"作業_L1 Work with Claude AI “Petals in the Mist” by Tiff Wen License Creative Commons Attribution NonCommercial ShareAlik…","images":["/media/lesson-01/hw01-07.jpg","/media/lesson-01/hw01-08.jpg"],"link":"https://openprocessing.org/@u147453/3022826","posted_at":"2026-10-05T21:59:33+08:00"},{"lesson":"lesson-01","kind":"作業","who":"TiffWen","title":"Petals in the Mist","desc":"Petals in the Mist Find some ideas from pinterest and work with Claude AI.","images":["/media/lesson-01/hw01-06.jpg"],"link":null,"posted_at":"2026-10-05T21:54+08:00"},{"lesson":"lesson-01","kind":"作業","who":"童思思","title":"breathing city","desc":"作業連結https://openprocessing.org/@celinetung/3023913 窗戶燈光忽明忽暗，滑鼠滑到建築物上建築物也跟著移動","images":["/media/lesson-01/hw01-05.jpg"],"link":"https://openprocessing.org/@celinetung/3023913","posted_at":"2026-10-05T20:41+08:00"},{"lesson":"lesson-01","kind":"作業","who":"jshen0715","title":"記憶格子","desc":"記憶像是交錯的格子，有時清楚，有時模糊，時間的球繼續跑著作品互動性: 滑鼠點擊切換顏色參考資料: pinterest.com","images":["/media/lesson-01/hw01-04.jpg"],"link":"https://openprocessing.org/@u232194/3024622","posted_at":"2026-10-05T19:32:55+08:00"},{"lesson":"lesson-01","kind":"作業","who":"☿","title":"Dancing Cube","desc":"https://openprocessing.org/@3RH/3026665 ▼Mood Board 1.做基本型。之後要分三個部分上色,所以用三個平行四邊形拼湊。","images":["/media/lesson-01/hw01-03.jpg"],"link":"https://openprocessing.org/@3RH/3026665","posted_at":"2026-10-05T18:12+08:00"},{"lesson":"lesson-01","kind":"作業","who":"珮","title":"動態幾何:流動的波","desc":"靈感版:https://pin.it/5KqmnUp7Y 作品連結:https://openprocessing.org/@u492491/3026988 跟AI協作~","images":["/media/lesson-01/hw01-02.jpg"],"link":"https://openprocessing.org/@u492491/3026988","posted_at":"2026-10-05T13:11+08:00"},{"lesson":"lesson-01","kind":"作業","who":"Lynn","title":"L.H. #1","desc":"還在補做第一堂的練習...為什麼大家都那麼強🫠","images":["/media/lesson-01/hw01-18.jpg","/media/lesson-01/hw01-19.jpg"],"link":null,"posted_at":"2026-10-02T02:32:33+08:00"},{"lesson":"lesson-01","kind":"作業","who":"徐士閎","title":"AI Art動態圖","desc":"Art動態圖","images":["/media/lesson-01/hw01-01.jpg"],"link":null,"posted_at":"2026-10-01T15:58+08:00"},{"lesson":"lesson-01","kind":"課堂作品","who":"PollyonFish","title":"筆刷","desc":"7 秒動圖，黑色墨點筆刷，滑鼠拖出一串小點，停下來的地方長成大團墨圓，白底","images":["/media/lesson-01/w01-16.jpg"],"link":null,"posted_at":"2026-09-29T21:12:10+08:00","video":"/media/lesson-01/w01-16.mp4","t":"2:12:10","sec":7930,"colors":["black"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"wangbb","title":"筆刷","desc":"青色半透明的刷痕，中間夾著一串黃紅色的小圖片印章，黑底","images":["/media/lesson-01/w01-15.jpg"],"link":null,"posted_at":"2026-09-29T21:11:10+08:00","video":null,"t":"2:11:10","sec":7870,"colors":["cyan","yellow","red"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"Lucas Yang","title":"筆刷","desc":"深淺藍的印章疊成彎曲的帶子，疊越多顏色越深，用了 blendMode(MULTIPLY)，白底","images":["/media/lesson-01/w01-14.jpg"],"link":null,"posted_at":"2026-09-29T21:08:50+08:00","video":null,"t":"2:08:50","sec":7730,"colors":["blue"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"jshen0715","title":"筆刷","desc":"粉藍、綠褐的圖片碎片當長方形筆刷，拼貼成一團，白底","images":["/media/lesson-01/w01-13.jpg"],"link":null,"posted_at":"2026-09-29T21:06:18+08:00","video":null,"t":"2:06:18","sec":7578,"colors":["pink","blue","green"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"ivan1976","title":"筆刷","desc":"黃、淡紫、青綠三種筆刷的寬帶交錯鋪滿畫面，點滑鼠切換筆刷","images":["/media/lesson-01/w01-12.jpg"],"link":null,"posted_at":"2026-09-29T21:05:22+08:00","video":null,"t":"2:05:22","sec":7522,"colors":["yellow","purple","cyan","green"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"Lucas Yang","title":"筆刷","desc":"淺藍色的印章沿彎曲的路徑疊成一條立體的帶子，白底","images":["/media/lesson-01/w01-11.jpg"],"link":null,"posted_at":"2026-09-29T21:02:21+08:00","video":null,"t":"2:02:21","sec":7341,"colors":["blue"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"XuYan","title":"筆刷","desc":"3 秒錄影，橘色與青灰的細線放射狀刷出好幾圈圓弧，黑底","images":["/media/lesson-01/w01-10.jpg"],"link":null,"posted_at":"2026-09-29T20:54:50+08:00","video":"/media/lesson-01/w01-10.mp4","t":"1:54:50","sec":6890,"colors":["orange","cyan","grey"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"trivia","title":"筆刷","desc":"「失控的筆刷」，圖片印章沿弧線密密排成一圈圈黃綠色環帶，灰底","images":["/media/lesson-01/w01-09.jpg"],"link":null,"posted_at":"2026-09-29T20:45:59+08:00","video":null,"t":"1:45:59","sec":6359,"colors":["yellow","green"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"kay","title":"花","desc":"彩虹色八片半透明橢圓花瓣，背景是淡彩色塊","images":["/media/lesson-01/w01-08.jpg"],"link":null,"posted_at":"2026-09-29T20:27:57+08:00","video":null,"t":"1:27:57","sec":5277,"colors":["rainbow"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"lbk","title":"花","desc":"6.5 秒錄影，青綠、米黃的細長花瓣繞白色圓心轉，一排排往外放射，黑底","images":["/media/lesson-01/w01-07.jpg"],"link":null,"posted_at":"2026-09-29T20:27:28+08:00","video":"/media/lesson-01/w01-07.mp4","t":"1:27:28","sec":5248,"colors":["cyan","green","yellow","white"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"Ｈ.C.","title":"花","desc":"粉橘、紫、深藍的橢圓花瓣疊成厚片漩渦，黃色圓心，黑底","images":["/media/lesson-01/w01-06.jpg"],"link":null,"posted_at":"2026-09-29T20:26:48+08:00","video":null,"t":"1:26:48","sec":5208,"colors":["pink","orange","purple","blue","yellow"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"trivia","title":"花","desc":"藍綠六邊形和粉橘、紫色五邊形繞黃色圓心排成一圈，深色底","images":["/media/lesson-01/w01-05.jpg"],"link":null,"posted_at":"2026-09-29T20:25:46+08:00","video":null,"t":"1:25:46","sec":5146,"colors":["blue","green","pink","orange","purple","yellow"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"Tiff","title":"花","desc":"6 秒錄影，紅、白、淺藍、深藍的橢圓花瓣，轉起來甩出大片放射狀的殘影，黑底","images":["/media/lesson-01/w01-04.jpg"],"link":null,"posted_at":"2026-09-29T20:25:12+08:00","video":"/media/lesson-01/w01-04.mp4","t":"1:25:12","sec":5112,"colors":["red","white","blue"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"PollyonFish","title":"花","desc":"6 秒動圖，青綠、米黃的橢圓花瓣繞灰色圓心旋轉，一路疊出厚厚的殘影，黑底","images":["/media/lesson-01/w01-03.jpg"],"link":null,"posted_at":"2026-09-29T20:23:48+08:00","video":"/media/lesson-01/w01-03.mp4","t":"1:23:48","sec":5028,"colors":["cyan","green","yellow","grey"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"XuYan","title":"花","desc":"灰藍、紫紅的長六角形花瓣繞著米白圓心轉成漩渦，黑底","images":["/media/lesson-01/w01-02.jpg"],"link":null,"posted_at":"2026-09-29T20:23:42+08:00","video":null,"t":"1:23:42","sec":5022,"colors":["grey","blue","purple","red","white"],"reaction":null},{"lesson":"lesson-01","kind":"課堂作品","who":"Lucas Yang","title":"花","desc":"紅、粉、黃、米白的十二片橢圓花瓣，灰底上留著一圈圈旋轉的殘影","images":["/media/lesson-01/w01-01.jpg"],"link":null,"posted_at":"2026-09-29T20:20:43+08:00","video":null,"t":"1:20:43","sec":4843,"colors":["red","pink","yellow","white"],"reaction":null}],"live":null,"hasReplay":true,"startAt":"2026-09-29T19:00:00+08:00","endAt":"2026-09-29T21:30:00+08:00","state":"after","youtubeId":null,"memo":{"html":"<h3>00:00–00:03　直播與聊天室確認</h3><h3>00:03–00:20　作業賞析</h3><ul><li>作業改交 Hahow，歡迎設成同學也看得到</li><li>這週作業 recap</li></ul><h3>00:20–00:30　回答同學問題</h3><ul><li>怎麼讓學習更順：回放、課程筆記怎麼用、建議雙螢幕（一個看、一個練習）</li></ul><h3>00:30–01:10　主要課程：四個概念與案例</h3><ul><li>Moodboard <a href=\"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/\" target=\"_blank\" rel=\"noopener noreferrer\">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/</a></li><li>變數與資料</li><li>迴圈與互動</li><li>進階繪圖：畫布操作</li><li>函數：把程式包成模組</li></ul><h3>中場休息 10 分鐘</h3><h3>01:20–01:45　Demo 1：彩色的城市</h3><ul><li>beginShape／vertex／endShape：自己畫任意形狀</li><li>取座標小工具 → 歪七扭八的幾何花盆</li></ul><h3>01:45–02:10　Demo 2：把花包成函數</h3><h3>02:10–02:20　收尾</h3><ul><li>QA、作業（10/5 週一 21:00 前交 Hahow）、下週預告</li></ul>","segments":[{"start":0,"end":3,"label":"直播與聊天室確認","line":0,"must":[]},{"start":3,"end":20,"label":"作業賞析","line":1,"must":[]},{"start":20,"end":30,"label":"回答同學問題","line":4,"must":[]},{"start":30,"end":70,"label":"主要課程：四個概念與案例","line":6,"must":[]},{"start":80,"end":105,"label":"Demo 1：彩色的城市","line":13,"must":[]},{"start":105,"end":130,"label":"Demo 2：把花包成函數","line":16,"must":[]},{"start":130,"end":140,"label":"收尾","line":17,"must":[]}]},"prev":{"id":"lesson-00","number":0,"date":"2026-09-22","time":"19:00–21:30","title":"新媒體藝術的全景地圖","tool":"OpenProcessing"},"next":{"id":"lesson-02","number":2,"date":"2026-10-06","time":"19:00–21:30","title":"數學之美：向量與粒子","tool":"p5.js"}}