這一集將深入探討互動設計產業目前的趨勢，也聊聊老闆創立工作室的契機和創業過程的大小故事。節目中還談到了公司在草創初期面臨的困難，以及大學時期的創業酷點子，也進一步聊到目前台灣互動設計的厲害團隊和有趣精彩的作品專案。最後，老闆還分享了他在藝術史中發現的秘辛！快來一起收聽第二集，探索互動設計的精彩世界吧！

至以下平台收聽： FirstStory / Spotify / KKBOX / Pocket Casts / Apple / Google / SoundOn

⬢ 老闆小檔案 ⬢

老闆哲宇是互動設計師、墨雨互動設計創辦人、數位藝術家、講師、全端工程師。先前在紐約大學進修整合數位媒體碩士，在 Creative Coding 領域有相當厲害的創作專業，知名 NFT 作品包含 Pochi 、 Hamily 家族等。

哲宇在教學推廣上也不遺餘力，引領超過 20,000 位學生進入互動網頁與生成藝術開發的大坑。在文化推廣上，他成立了 FAB DAO ，希望能提攜台灣數位藝術家，被世界看見，期望可以帶著更多人，在數位世界中創造驚喜的體驗與生命。

⬢ 精選片段 ⬢

老闆回憶大學時青澀的創業想法：做很快才不是重點！真正重要的是…

⬢ 本集重點 ⬢

02:08 互動設計產業的人才與求職趨勢

02:59 AR/VR/MR/XR小教室 👨‍🏫

05:18 老闆創立工作室的契機

07:16 公司草創初期的困難點

10:16 大學時期的創業酷點子和驚人發言

11:35 「墨雨」的由來 🌧️ 和願景

18:56 台灣の互動設計團隊 👥

25:28 互動設計的商業運用 💰

30:21 老闆在藝術史發現的秘辛… ㊙️

如果有任何的意見回饋或建議，歡迎來信讓我們知道，各位的參與是我們進步的動力。讓我們一起朝向更好的 Podcast 節目邁進吧！

⌔ 寫信給我們：creativecoding@monoame.com

這篇文章 CC！我跟你說！S1EP2｜深入互動設計世界：趨勢、多元應用與創業挑戰 最早出現於 Creative Coding TW - 互動程式創作台灣站。

在今年迎來第四屆的2023臺灣國際光影藝術節，就以「數據光景」為主題，由在國內最早推廣「科技藝術」的單位，國立臺灣美術館所舉辦，融合國內外多組藝術家作品並部份在外展出，讓展品不受空間與時間的限制，使民眾能從展覽中更了解到科技藝術的重要性。

藝術作品介紹

由策展人葉廷皓、邱誌勇共同策劃，以「數據光景」為命題，並分為「數據運算介入」、「感官資訊轉換」、「5G 即時交流」三大子題，交由六組臺灣藝術創作及三組國外藝術作品進行演繹。策展人邱誌勇提到，這次的呈現與過往三屆最大的不同在於藝術家透過收集一般人日常生活中的數位足跡，將資訊轉譯成藝術，產生光影變化、即時生成感知互動與更多不一樣的藝術展示可能。

〈反射研究〉

來自美國的參展藝術家，查克・利伯曼的作品〈反射研究〉，就使用了即時互動的這項特點，透過觀者在光桌上的參與，應用手的動作、字母的排列或是模擬光的折射去創造不同的實驗應用，並將其擷取後，投放在廣場的大螢幕上，完整了由藝術家與觀眾一起產生的作品。

〈碎形〉

日本藝術家笠原俊一、神田竜、比嘉了以多部投影機組成的投影牆，讓觀眾經過時，影子產生各種變化，並且將產生變化的影子再以另一台投影機投放在相同投影牆上。透過影子的外觀形狀與顏色變化，觀眾更能身歷其境的體會自己與作品間的溝通，更深入在體驗作品的光影變化。

〈非歐幾何延伸公設〉

臺北美術獎首獎得主王連晟也藉由三大子題之一「數據運算介入」，創作出與國美館建築的互動藝術〈非歐幾何延伸公設〉，作品範圍從國美館外牆延伸到草皮上，由七條 LED 燈管所組成的大型燈光裝置，近似於曲線所組成的地形樣貌。當觀眾走近作品時，其燈光圖案與流動性也會隨之改變，提出在訊息世界裡，人們觀看世界的方式是完全不同的概念。

〈植光・花〉

再來介紹到「感官資訊轉換」的創作，由臺灣藝術家蔡宜婷帶來的數據仿生花海，光流以物聯網的網絡執行方式，將每支花朵串聯起來。藉由網路控制盒所接收到的資訊，將植物的呼吸與韻律等動態生物型態展示出來。

〈耳語〉

404 N. F 以〈青台〉的模擬有機體，擷取城市中的交通流量變化當作資訊素材，去驅動作品的充氣與洩氣以及光線的流動變化；藝術家張欣語偵測平常細微，甚至人無法直接感知到的樹的聲音，反映在仿蕈狀菇呈現〈樹的噪訊〉；藝術家蔡寧的〈耳語〉將觀眾的身體資訊做及時輸入，並經由 AI 在藝術品上生成不同的面貌，達到資訊與人體感官之間的傳遞與變化。

〈福朗提爾壹號〉

最後來到「5G 即時交流」， 貳進 2ENTER 的〈福朗提爾壹號〉以虛擬網路太空站的概念，與觀眾的行動裝置進行網路上的互動，透過資料庫的不斷堆疊讓觀眾參與成為作品的一部分。此外也針對5G技術的演進，進行了論壇的討論，希望可以藉由技術的不斷演進，也增加更多藝術家的創作可能性。

〈光的時間量子〉

而來自烏克蘭 ∕ 西班牙的藝術家尤里・勒赫與臺灣藝術家吳秉聖，打破地域和時間的限制，利用連線5G 達成跨國共製〈光的時間量子〉。與其名稱相符，主要解釋光在宇宙間的狀態，嘗試使用視覺甚至是聽覺的方式，帶領觀眾體驗時間的流動性。

科技與藝術發展的融合

2023臺灣國際光影藝術節的展品中，透過進階的科技手段，藝術家們打破了傳統藝術形式的界限，呈現出當代藝術的無限可能性。例如，透過虛擬現實技術呈現的作品，觀眾可以身臨其境地體驗作品所要傳達的感覺，更可以透過互動裝置的應用，與作品進行互動，深入體驗作品所呈現的思想和情感。

除此之外，透過現代科技的應用和創新，許多作品的呈現方式也更加出色和精準，例如，透過投影裝置呈現的作品，可以呈現出極具表現力和豐富性的光影效果，帶來令人驚嘆的視覺享受。而另外一些作品，則利用先進的編寫程式技術和投影技術，豐富了圖像和聲音效果。以上都說明了科技與藝術的發展完美融合，是不是也想開始嘗試數位化創作了呢？加入互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道隨時補充新媒體藝術的養份！

此篇直播筆記由幫手熊柑協助整理

這篇文章 在光影藝術間竄動的科技足跡 — 2023臺灣國際光影藝術節「數據光景」 最早出現於 Creative Coding TW - 互動程式創作台灣站。

Eyeo Festival 是一場集結藝術家、設計師和開發者的研討會，每年固定在美國 Minneapolis 舉辦，第一次是 2011 年，除了 2020、2021 因為疫情取消之外，每年都有舉辦。內容相當廣泛，包含 Creative Coding、資料視覺化、裝置藝術、體驗設計、人工智慧、VR/AR 等等，基本上只要跟藝術或創作沾得上邊都包含在內。Eyeo Festival 透過演講、工作坊和自由交流的形式進行，因此實際上不如「研討會」這麼嚴肅，接下來用 conference 代替。

我是透過 OpenProcessing 得知這個活動，本來因為地點、時間跟錢，沒有考慮要參加。直到活動前的一個多月，OpenProcessing 在平台上發起了創作比賽，只要在 5/5-21 把作品提交至比賽的 curation －「Buildings, Cities, and Minneapolis」，並且獲得最多的愛心就可以獲得 Eyeo Festival 門票一張。

一開始其實沒特別積極要參加，覺得要能在眾多作品中勝出應該相當困難，但也覺得這個主題蠻有趣的。所以一邊關注其他人提交的作品，一邊想如果是自己做的話，作品的內容和呈現會是什麼樣子？過了幾天發現作品量不多，愛心數似乎也不是遙不可及，也對這個主題有一點創作想法了。於是就花了幾天零碎時間，完成了大概的雛形。最原先想法是做出台灣鐵皮屋頂俯視角度印象，過程中為了讓線條有點隨機、不整齊，意外做出一點素描的風格。本來還想把不規則的馬路排列做出來，但發現難度遠超過目前能力所及，硬著頭皮還是把半成品 “city on the rooftop” 提交出去了。

接下來的幾天我用盡全力在 Twitter、IG、Discord 和 FB 社團推廣我的作品，求大家如果喜歡的話幫按個愛心，終於在截止當天超越了最多愛心的作品。看了一下按了愛心的人有：還沒開始分享就先按的、開始推廣後打開自己 OpenProcessing 帳號支持的、沒在寫程式但特別去註冊投票的朋友們（還好沒被認定是灌票），到現在還是覺得很奇妙，好像臉皮夠厚、願意踏出主動分享創作的那一步，就會得到來自全宇宙的大力幫助。

Are you caaatisgood?

比賽截止兩天後，OpenProcessing 在 Twitter 上宣布了結果，我拿到 Eyeo 門票了！有趣的是，當時 OpenProcessing 創辦人 Sinan 也在倫敦，我們就約了隔天在 Camden Market 見面喝個咖啡。記得當時他晚了一點點到，我一度懷疑一切會不會是太過美好的一場夢？或是如姜太公釣魚般的一場騙局？怎麼會贏了網路上的創作比賽，隔幾天就約連名字都還不知道的網友出來喝咖啡？（當時是用 OpenProcessing Twitter 溝通，所以還不知道他是誰）不一會兒從我身後傳來的一句 Are you caaatisgood?（我網路上的暱稱），那些想法才頓時煙消雲散。

雖然時間不長，但我們聊了 Creative Coding、生成式藝術 NFT 平台、OpenProcessing 未來的經營方向、倫敦和他待了一陣子的紐約之間差異、一些 side project 等等。拿了票，約好到時候 Minneapolis 再見。

Code + Care Summit

時間快轉到 Eyeo Festival 前一天，是一場被官方稱為 un-conference 的一日活動「Code + Care Summit」，對我而言最大的特色是，討論的內容和方式全部由參加者來決定。當天除了幾間會議室、交流空間和一些茶點，就只有一面寫著空白時程的白版，依照會議室的數量，同時間最多有四個不同主題，參加者可以按自己興趣選擇，也可以拿起白板筆寫上想討論的主題，就自己成為討論的主導人，有二十分鐘或一個小時不同長度的時間安排。雖然官方的主題是 Code + Care，但最終的討論內容可說是五花八門，有 Accessibility in Web3、Caring for open source、Mentorship、教 p5.js 的老師為了教學方便做的 p5 party 工具、如何創造更友善（避免歧視、霸凌）的線上沈浸式體驗、Data Storytelling、把音樂作為教育內容等等。

每場討論都相當開放，沒有一個明確的結論。大家的背景和專業不同，也讓整個討論非常多元，有許多議題或想法是自己從來沒了解過的。其中一個相當印象深刻的討論是「我們怎麼紀念因為 COVID-19 失去的生命」，所有人分成五六個小組，發想出各種「紀念」的方式，實體、虛擬、大方向的概念等等。更有人提到這件事其實還是進行式，應該要納入紀念的形式的考量之中。

當然也有一些討論沒有如預期中的「順利」，有些時候隨著主題的延伸和聯想，最後引發共鳴的反而離本來主題有點遠，也有的大概自我介紹完就差不多沒時間了。但無論如何都不影響大家提出自己想法和意見的熱情。

以前從沒參加過這樣密集的開放式討論，一整天下來覺得自己的好奇心有被提升了一些，也體會到要把「自己」縮小或擺在一旁，才更容易了解每個不同背景的人的獨特想法。另一方面是理解到關懷（caring）的重要性，它似乎是在產品、軟體、體驗和週遭環境，容易被忽視或欠缺資源的一部分。如果在生活或專業上可以多一點關懷，我們會有更高機會打造出能包容各種不同背景的人和需要的環境。

Eyeo Festival

來到晚上的 Eyeo Festival 開幕之夜，只見大家人手一杯飲料交談、聊天，現場甚至有爵士配樂，整體是種輕鬆以對卻又迫不及待要揭開序幕的氛圍。現在回想起來，可以理解為什麼主辦方時不時會提到這是節慶（festival）不是 conference。自己對當晚的主題演講比較沒有共鳴，倒是主辦方的 Dave 開場時給大家的心態矯正覺得很不錯。他提到的其中幾點：

• 每個人都感覺自己有冒牌者症候群，不必覺得害羞或沒有能力分享、發問和交流。
• 投入活動越多，獲得的就越多。

這類型的活動能否辦得成功，有一部分會取決於與會者的表現。雖然多數人都是來交流和吸收新知的，在開始前提醒大家要帶著開放的心態、凝聚參與者們的共識，讓對的人之外還有對的心態。這部分的細節處理對活動整體大大加分。

當晚還有多位參加者的五分鐘分享，其中有位 DeepMind 工程師 Michael 分享學習射箭的心得，他有一陣子在分數上一直無法進步，後來他發現當他停止在意分數時，準度反而明顯提升。他接著說到生活中很多其他的「計分工具」，例如社群媒體。這些計分工具能做到相對客觀的成效衡量，但太在意分數也有可能造成反效果，限制了自己的能力。下次卡關時，不仿試試忘掉「計分工具」，也許能得到更好的結果。

接下來是連三天滿滿的議程和活動，白天時段是 4~5 場雙軌並行的演講，中午休息時間有參加者自由報名的閃電秀，晚上則是形式較輕鬆的交流活動。以往參加的 conference 幾乎都是網頁相關技術領域為主，不管內容再怎麼廣，基本上都還在自己的守備範圍內。因此以設計、藝術、創作者等領域為主的 Eyeo Festival 對我來說是很新鮮的，沒接觸過的創作類型或手法不說，有些甚至連想都沒想過。即便如此，在參加前仍很肯定的知道自己多少都能從不同的人和創作中獲得啟發，而實際上確實是如此。聽著每位藝術家對你分享自己投入、開創已久的宇宙，是很難不被他們的熱情所感染的。

我特別對 Design I/O 的 Emily Gobeille 和 Theodore Watson 開發 The Pack 這款策略遊戲的分享感到印象深刻，遊戲包含很多程式和運算邏輯的元素，他們將不同的指令和邏輯個性化，設計成不同的角色，玩家可以自由組合，做出能重複執行的指令和演算法。Daniel Brown 分享他的 Neuromancer and the Sprawl 作品也非常讓人驚艷，這系列受到 cyberpunk 小說家 William Gibson 的啟發，後來也被 William 邀請為他的小說製作封面。這位曾經意外重傷導致下半身麻痺，卻執意回歸創作且做得有聲有色的藝術家，對創作的熱情與執念實在讓人佩服。

活動中也遇到很多有趣的人，有幾位甚至是聊了許久才知道原來是早就在 Twitter 或 IG 上 follow 已久的神級人物，像是生成式藝術家 Chris Ried 和 Simon。最特別的是一位活動志工 Blair，就讀人因工程與設計博士的他對 OpenProcessing 平台上使用者複製（fork）別人的作品（sketch）加以修改創作很有興趣，他針對這個再創作行為寫了一篇報告，還用了送我來 Eyeo Festival 的作品當封面，他也打算投入更多時間深入研究。

首次嘗試 pen plotter 繪圖機

Eyeo Festival 結束前一天，一時興起想把 “city on the rooftop” 用繪圖機畫出來做成明信片寄給自己，很幸運的是真的有人有繪圖機並且願意帶來借給我，當天趕在附近的用品店關門前找到適合的卡紙跟黑筆，隔天一早把作品調整成適合輸出的大小和格式，利用中午的空擋開始試印。雖然最後因為時間的關係只輸出一張，還因為比例沒抓好有點落漆。自己的數位作品透過實體介質繪製出來，可以拿在手上看，感覺非常不一樣，似乎也多了點紀念價值。

密西西比河畔的最後一晚

很喜歡 Eyeo Festival 的場地安排，開幕夜在一個表演場地 Aria，白天的活動在 Walker Art Center 的會議廳，其中一晚的自由交流和工作坊舉辦在另一個表演場地 Machine Shop，最後一晚則是在密西西比河上 Nicollet Island 的表演空間。望著流速強勁卻又看似平靜的河與夜景，回想當初看到 OpenProcessing 比賽徵件直到此刻站密西西比河畔回想著這一切，試著讓自己相信這不是夢一場。

一位有許多以鳥類為主題的研究和創作的藝術家 Kitundu，在閉幕夜分享過往的創作和為氣候變遷組織 C40 製作獎盃 Ancient Air 的過程。有句非常打動我的一句話「Take your imagination seriously」，認真看待你的想像力。每個人的都有獨特的想像力和創造力，這完全無關你的背景，如果能夠去探索、理解、善用，甚至回應它，一定會有意想不到的收穫。也許是對本業產生新想法、找到新的興趣或開展出新的一條路也說不定。在 Eyeo Festival 遇到非藝術或技術背景的人，有位是在五角大廈做一些國際情勢分析，有人是在學校教書，也有在其他公家機關工作的人，但他們都以「尋找靈感」為由來到這裡。探索想像力和找尋靈感，真的不是藝術家才可以（或應該）做的事。希望自己可以一直記得並實踐這句話。

離開前，我把繪圖機畫出來的唯一一張 “city on the roof top” 送給 Sinan，特別謝謝他做了 OpenProcessing 平台讓我有這個機會出現在這裡，祝他接下來從紐約搬去阿姆斯特丹一切順利。

關於我

本業是一位前端工程師，2021 年出海到倫敦生活，在更早之前因為吳哲宇而接觸到生成式藝術（感謝哲宇！），2021 年底開始比較認真的創作，也慢慢接觸到 Web3 領域，希望能在 Creative Coding 和 Web3 世界裡留下一些足跡。感謝你讀到這邊，任何想法或回饋歡迎到 Twitter 和 IG 上告訴我。

相關連結

• city on the rooftop, OpenProcessing sketch
• Eyeo Festival 歷年影片
• http://danielbrowns.com/

這篇文章 【徵文賞-互動藝術】佳作｜Eyeo Festival 2022 心得 – 王浩平 最早出現於 Creative Coding TW - 互動程式創作台灣站。

「重複」──在藝術表現或日常中很常見的概念，或存在於大自然的晶體結構中、或存在於阿嬤家的廁所廚房內。以音樂而言，在同一首曲子中常可聽到反覆出現的旋律；以文學而言，詩歌中也常出現反覆的句子或單字等；以視覺而言，經由單一的圖案或形體，上下左右不斷的重複予人單純、規律的感受。

在Creative Coding的領域內重複更是大量被使用的表現手法，像是改變物件大小、方向、時間、頻率，或是重複粒子、文字、符號、紋理、以及動作等，善用重複可以讓畫面看起來有整體感。今天就要跟大家分享如何在程式創作內加入重複的概念，以及如何用利用「迴圈」快速製造相同的物件。

目標介紹

1. 瞭解程式中達成重複的「for 迴圈」概念與常見的應用方式
2. 瞭解如何在重複中套用規則與創造變化
3. 嘗試不同的重複概念應用與變化
4. 結合變數、使用者操作創作重複的作品

迴圈可以重複執行同一組程式碼，幫我們處理不斷重複的事情。 for 迴圈 – 需要以程式碼執行次數作為迴圈的條件。

// for 的基本語法結構
for(計數變數的起始狀態; 結束條件; 每次結束後變數如何變化)
  {
    概念相同，需要重複執行的事件
  }

// 舉例
for(var i=0 ; i < 3 ; i++){
  console.log(i)
}

根據上面的概念，如果我們要在畫布上每 100px水平間隔畫一個圓且重複三次，可以有下面兩種寫法：

// 寫法一：手動複製貼上＝人工迴圈
ellipse(0,100,30,30)
  ellipse(100,100,30,30) // 相較於上面，右移動了 100 px
  ellipse(200,100,30,30) // 相較於上面，又右移動了 100 px

// 寫法二：使用程式語言的 for 迴圈
for(var i=0; i<3 ; i++){
  ellipse(100*i, 100, 30, 30)  // 計數變數 i 只要小於 3 時都會做這件事，直到不滿足條件則停下並跳出該程式區塊
}

俗話說的好，能交給別人做的事就不要自己做，善用迴圈可以幫助我們快速處理類似的事件。除了單層的for迴圈以外還有巢狀個for迴圈結構：

for(var i=0; i<2; i++){
  for(var j=0; j<2; j++){    // 在每一個 i 中，都會這層迴圈完再跳往下一個 i
    ellipse(50*i, 50*j, 40)  // 分別於 (50*i, 0) 和 (50*i, 50) 畫圓，畫完之後再往下一個 i 繼續重複
  }
}

在上述的例子中，可以把巢狀迴圈想像成時鐘的分針跟秒針，秒針要跑完一圈，分針才會前進一格。同樣地，外層迴圈i要等內層迴圈j全部跑完才會再+1，所以當j是0和1的時候，分別在(50i, 0) 和 (50i, 50) 的地方畫圓，接著j又會從0開始印，直到外層迴圈結束。（延伸閱讀：[JS] 迴圈筆記）

以上了解迴圈的概念後，我們試著用迴圈來創作屬於自己的作品吧。由於Ju編最近去了一個有趣的音樂表演活動Rangeselector，由台灣另類電子搖滾樂團眠腦主演，串連影像、空間動態感測技術所編製的新型態live session，除了隨著節奏跳動的幾何粒子等動態畫面外，觀眾也可以透過移動位置來和展場的視覺產生互動。聽完這場很不一樣的live現場後，覺得或許也可以將自己喜歡的音樂當成主題，來進行Creative Coding的創作。

這次的靈感來源為台灣樂團The Fur. – Friday Love，復古的曲風配上輕快活潑的歌詞，行版的節奏讓人忍不住想跳起舞來，就像一顆又一顆的彩球。藉著這首甜蜜的歌曲，來個類專輯封面的創作吧！

首先我們挑選一組具有復古感的色票，這邊選用的以粉色、紅色系為主，配上米白和橘咖等輔色。既然是專輯封面，那歌名是一大重點，為了凸顯歌名我們試試看在Illustrator製作標準字並輸出，所以在規劃作品草稿時可分為靜態的標準字圖片和動態生成的彩球兩個部分。

如何在OpenProcessing導入圖片呢？我們可以把圖片上傳到第三方平台Imgur，然後把圖片當作背景來使用。

接著來準備下方空白處的彩球，定義一個陣列colors把挑選好的色票放進去，再準備一個circles的空陣列。我們要做一組4*4共16顆的彩球，這邊定義5個變數x, y, d, num, col，分別代表彩球在x軸和y軸的產生位置、彩球的大小、個數和顏色，利用巢狀迴圈的結構產生共16顆：

function setup() {
  createCanvas(600,600);
    let seg = 4;
    let w = width / seg;
    for (let i = 0; i < seg; i++) {
      for (let j = 0; j < seg; j++) {
        let x = i * w + w / 2; //x軸產生位置
        let y = j * w + w / 2; //y軸產生位置
        let d = random(0.5, 1) * w; //彩球大小
        let num = int(random(1, 4)); //彩球個數
        let col = random(colors); //彩球顏色
        for (let k = 0; k < num; k++) {
          circles.push({
          x: x,
          y: y,
          d: d * 0.7,
          c: col
        });
        movers.push(new Mover(x, y, d * 0.5));
      }
    }
  }
}

把準備好的彩球畫出來，注意圖層的順序必須畫在background上方，為了避免跟畫面上的其他元素重疊，位置和大小也要稍微調整一下。

function draw() {
  background(img);
  translate(width / 2, height / 2); // 定位在畫布中間
  scale(0.5); //範圍大小
  translate(-width / 2, -height / 4); // 定位在畫布偏下

  for (let c of circles) {
    fill(c.c); // 用變數c的顏色來填充
    circle(c.x, c.y, c.d); // 畫在變數x,y的位置、變數d的大小
  }
  noStroke();
}

現在我們有一顆又一顆的基本彩球了，看起來是不是很像糖果呢？為了替畫面增加一些動態性，我們在彩球旁邊增加幾顆移動的小彩球，這邊需要分為三種function：定義小彩球參數的constructor、畫小彩球的show、移動小彩球的move。在OpenProcessing的語法庫中，有一些常見的數學常數可以做使用，比如下方用到的PI，可以很快速地引入使用。

let movers = [];

class Mover {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.cs = this.r * 0.4; //第一種大小 
    this.cs0 = this.r * 0.4; //第二種大小
    this.t = random(100);
    this.off = 0;
    this.tStep = random(0.01, 0.05);
    this.ang = random(PI); 
    this.aStep = random(-1, 1) * 0.01;
    this.col1 = random(colors); //第一種顏色
    this.col2 = random(colors); //第二種顏色
    while (this.col1 == this.col2) {
      this.col1 = random(colors);
    }
  }

  show() {
    push();
    translate(this.x, this.y);
    rotate(this.ang); //旋轉的角度
    stroke(255); //加上白色邊框以凸顯小球
    fill(this.col1); //
    if (this.cs0 * 0.15 < this.cs) {
      fill(this.col2); 
      circle(this.off, 0, this.cs);
    } //錯開大球和小球的顏色
    pop();
  }

  move() {
    this.off = map(sin(this.t), -1, 1, -1, 1) * this.r; //彩球正面的角度
    this.cs = map(cos(this.t), -1, 1, this.cs0, 0); //彩球背面的角度
    this.t += this.tStep; //彩球的速度 
    this.ang += this.aStep; //彩球的圓周速率
  }
}

記得在 setup 的地方把 movers 推入 Mover，這樣我們就有移動的小彩球囉！

movers.push(new Mover(x, y, d * 0.5));

這樣就完成啦，希望大家喜歡這次的分享唷，一起試試看如何利用迴圈創作吧！

成品請往這邊走 👉🏻 https://openprocessing.org/sketch/1560267

歡迎加入互動藝術程式創作入門(Creative Coding)線上課程，課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

此篇文章由 Jeudi Kuo 撰寫

這篇文章 圓圓圈圈：利用迴圈呈現重覆的美 最早出現於 Creative Coding TW - 互動程式創作台灣站。

Project Electriz

概念來自於模擬粒子在不同空間中的各種行為模式，並記錄電子移動所留下的軌跡。早期物理學家在偵測最小粒子時，會利用加速器撞擊兩顆不同的原子，試著擊破看看裡面還有無更小粒子的存在。在實驗進行的過程中為了看見這些迷你的粒子，科學家會利用一種叫雲室（Cloud Chamber）的儀器，當粒子經過雲霧時會凝結霧滴變成軌跡。

作品的主要架構可以分為兩個部分—空間的切割與粒子的移動和軌跡保存。空間分佈可以分為兩種—長型與圓形，當粒子經過每個不同帶電的空間（正電或負電）或者干擾力場，便會出現左右或旋轉偏移等不同行為模式。

上架&測試作品

Artblocks 分為 staging environment 跟 official environment，staging 為測試的網站，藝術家可以先把作品上架到這裡看看渲染後的效果。跟一般上架的概念類似，在 Artblocks 的後台有很多的欄位需要填寫（作品名稱、介紹描述等），值得注意的是每更改一個欄位都需要付相對應的手續費，所以下好離手、想清楚再寫唷。

在後台有一個區域稱為「Script」，在這裡需要引用 Artblocks 認證過的函式庫，並上傳自己的程式碼到區塊鏈。程式碼會依照長度切分成不同的 chunck 來上傳，一個 chunck 差不多是1個 ETH，這樣的好處是比起只有靜態的圖片，包含程式碼的做法會讓作品的附加價值更高。

以上為介面介紹，而就程式面來說要從 p5.js 走到 Artblocks chuncks 最重要的就是—亂數的固定化。假設我們今天創作完了一個作品，想藉由這個架構產生 100 個 NFT，這時候很常用到 random 這個語法來亂數生成，但又希望確保每一次的 random 所得到的東西會是相同的。這邊提供由多個藝術家共同開發的演算法（參考 code RandomHash 的分頁），主要概念為透過 keccak 這個 function 取得hash，再複寫掉原先的 random，你就會得到全部的亂數都是固定數的作品囉，同時也可以確保作品和預覽圖的一致性與獨一性。

以前在測試作品時都要手動一個一個貼上 hash，這邊介紹一個簡單又好用的工具 Token Art Tools，他可以透過左邊的 scale 調整 hash 的組成並自動餵給 script，這樣就可以快速地看到作品在不同 hash 時的不同樣貌囉。Token Art Tools 有一個功能是回到上一動，這也就代表在隨機的過程中有機會記錄到偏好的作品的亂數，對於生程式藝術來說過往可能在挑選作品時是幾百張圖片挑一張、重製的可能性不高，透過這樣的方法我們有機會保留自己最喜歡的樣貌，至於「隨機」的原則與否，這點便見仁見智了。

NFT之於創作者

正如同所有快速爆紅的東西，NFT 勢必也會面對泡沫化的可能性，而在茫茫的 NFT 海中，藝術家們又該何去何從？或許這是所有類型的創作者都會面臨到的窘境，不論是實體或是數位，這些都是傳達理念的一種「手法」。特別是在手法多元化爆炸的時代，如何好好掌握「品牌」和「理念」就是一件很重要的事。老闆這邊分享了自己除了在 NFT 平台（如：Artblocks、Opensea）上的經營外，同時也有經營個人的 Discord Channel，不定時推播新作品上線等相關資訊，也針對支持新作品的老朋友，給予相對應的回饋，進而增加社群的黏著度。

這邊介紹一個藝術家 Tyler Hobbs ＠ Feral File，除了線上的作品以外，藝術家也會將自己的作品實體展出，近一步結合虛擬和實體的概念。類似的還有先前在 Oursong 平台推出自家 NFT 的師園鹹酥雞，透過購買香菇、四季豆等 NFT，可以在店面兌換相對應的實體物品。近期老闆也在策劃關於台灣藝術家的育成合作（Artist Incubator），主要會輔導藝術家進行作品的上架、協助媒合合適的NPO，有興趣的讀者歡迎關注粉專以獲取最新的第一手消息唷！ （相關閱讀：首家 NFT 炸雞店！師園鹹酥雞 NFT 上架 OurSong 一天內漲幅超過 100 倍）

Feral File – Exhibiting, Curating, and Collecting Digital Media

在直播中老闆也分享說其實在NFT的領域成名與否和作品的品質不見得有正相關，很多時候是需要一個被看到的機運，衍伸而來後續的曝光。雖然有一些運氣的成份存在，但身為創作者可以盡量完整自己在平台、網站上的作品，以建立「個人品牌」的方向去努力，等待成熟發酵的那一天。

以上是這次老闆週六來聊聊的內容，希望大家看完後也可以對於航行在NFT這塊汪洋藝術之海可以更有方向，直播影片請往這裡走，我們下次再見啦！👉🏻 https://www.youtube.com/watch?v=9kUJirQsS7M

歡迎加入互動藝術程式創作入門(Creative Coding)線上課程，課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

此篇直播筆記由幫手 Jeudi Kuo 協助整理

這篇文章 【老闆週六來聊聊】吳哲宇 Artblocks Project – Electriz 製作分享 最早出現於 Creative Coding TW - 互動程式創作台灣站。

本篇文章則是由叁式互動新媒體的技術美術Hoba帶來演算視覺的應用，不藏私揭露叁式近年來精彩的作品幕後祕辛（影片從這裡開始看），以及另一位與會的創作者張文瀚帶來作品 <Wormhole>分享（看看作者的詮釋及解析）。

叁式互動新媒體　Hoba <演算視覺的應用>

這次邀請到叁式互動新媒體的技術美術Hoba，以個人角度、發展歷程，觀看叁式近年來的作品。技術美術的工作內容從視覺到程式，包含 Photoshop、Illustrator、After Effects、Unity…等。

最早接觸 p5.js 是大二的時候，畢製時也用 p5.js 做了一個互動的吧檯桌，桌上酒杯利用桌下的投影產生互動影像。原本以為畢業之後不會再寫程式了，因為第一份工作是在展場設計公司做空間設計，主要就是不停設計及畫 3D 示意圖。 後來在獨自接案及因緣際會之下，來到叁式，才真正又開始寫程式。 在叁式的最早期是用 openFrameworks，去繪製各種東西。那時候學了各種不同的 shader　(fragment、geometry、compute)，來控制粒子（particle）的點、形狀及運動方式，也做出一些測試用的作品，像是一些比較混亂的形狀或水墨的效果。

叁式其實用了很多不同的感應器（sensor）及各式各樣的演算法去結合視覺來創作。以此作品為例， openFrameworks 加上 NVIDIA 的 Flex 物理引擎（現已停止維護），就可以模擬出水的波紋或煙的視覺（參考影片），像這樣可以讓粒子像水一樣在空間中流動，甚至可以改變空間中的重力，讓這些粒子朝不同方向去運動。

叁式也做了一些藝術案，常見的是跟安娜琪的合作，像是 Seventh Sense 跟 Second Body等舞蹈表演，結合叁式擅長的視覺動態特效技術。

以 Seventh Sense 來說，把舞台當成一個盒子，除了觀眾這面外，其他全部都打投影，在某一些特定的觀眾視角，會是一個完美透視的狀態。也包括舞者在裡面移動表演，裡面的粒子和線條都是用程式即時去畫的。

而Second Body，是用四面台，各四台 Kinect 及投影機的組合，利用 Kinect 感應器捕捉現場舞者的身體樣態，將這些捕捉到的點雲（point cloud）資料即時建成一個360度完整的 3D mesh，再將動畫準確地投影在舞者身上及地面上，完成現場表演的即時動態投影。

其他還有一些商業案，如海尼根的時空旅人是用 leap motion 感測手部動作，去擾動牆上的麥田或撥動水流；陳綺貞的展覽，使用她手寫的字體組合成她的臉，且會根據遠近變化做出顏色及大小的改變。像這樣要同時運算很多字元件是非常耗費效能的，所以必須透過 shader 的方式，在這些 geometry 裡面畫出正確的 UV 及大小。

為 NYX 這個彩妝品牌創造的互動作品，是利用客人發布在 IG 上的 hashtag 找出當天活動的照片，利用程式分析粗糙及平滑的地方，再疊加 NYX 的彩妝，最後用動態的方式將大小不一的多層彩妝疊合起來。

網頁形式的話，是跟SONY合作，主要是做轉場的特效。 另外如果想學習 Shader 的話，有個很好的參考學習網站叫 Shadertoy，裡面有非常多人單純用 fragment shader 去創造出各式各樣，不管是常見的濾鏡或具體的像蝸牛之類的。

蔡健雅　列穆尼亞演唱會合作，叁式製作了開場前三首電子風格的歌曲〈異類的同類〉、〈失語者〉、〈菲林〉的影像視覺，以及〈空白格〉中LED矩陣的即時影像，主要是用粒子去做，運用點雲做為視覺主軸，可模擬煙、風、碎形等特效，再擷取表演者的即時動作，疊加在配合當時滿流行的攝影測量法 photogrammetry 後，經過粒子化處理的地景影像之上。

為台中花博製作的作品＜0-3886＞將地板打造為一個具即時互動性的演算視覺，觀眾的位置與動態成為了畫面中的一部分，走在地板上可以和粒子和線條有互動。視覺動態請見這部影片

以上較前期的作品都是用 OpenFramworks 做，後來我們較常用的轉換工具是 Unity。要如何判斷什麼時候使用哪種工具呢？叁式的切分依據大概是看得到的東西用 Unity，較看不到的東西用 OpenFramworks 做。有在用 Unity 的人應該知道，後來有出像 Visual Graph 這樣的工具，所以我們現在也會用 Visual Graph 或 Shader Graph 來做類似的創作。像剛剛提到的 Second Body，就是用 kinect 的點雲把它們建成 mesh。同樣的作品在 Unity，也可以透過 geometry shader，建成 Unity 裡面的 mesh，就可以跟環境做反射。

長榮飛安影片合作，利用 OpenCV 中的光流（optical flow）技術，一般來說是偵測 2D 影像中像素 (pixel) 的流動，像是人往前移動或揮手的向量。如何將 2D 結合到 3D 呢？例如將 kinect 偵測出來的深度圖畫面轉譯成 3D 的 position，再對他做 optical flow 技術後，便會成為 3D optical flow 檔案，就能在空間中結合煙霧的模擬，讓粒子隨著舞者的動作產生變化。這些包括像模擬都會透過一連串 fragment shader 去做運算，粒子的話就是用 compute 或 geometry 來做。

光流（optical flow）：陌生的名詞，但其實每天都能看到。光流指的是我們在這個不停運轉著的世界裡，感覺到的明顯視覺運動，像是在移動的交通工具上看著樹、建築等景物呼嘯而過，我們能通過不同物件的運動速度判斷它們與我們的距離。

除了視覺之外，我們也時常把unity拿來做模擬器，因為時常有一些展演活動，需要在進場前預測、模擬活動現場該長什麼樣子，才最符合我們的想像和設計。像鄧紫棋 GMA30 的舞台 LED 是由很多小波浪組成的。就視覺來說這樣做是很困難的，必須要出很多很破碎的影像。叁式利用 Unity 模擬器，讓視覺可以在 After Effects 裡面去呈現一整大片的影像，再透過 UV 轉換在 Unity 裡面做即時的預覽。

Gogoro VIVA MIX新車發表會合作，會場裡有非常多 AGB 的台車移動，一樣是用模擬器先知道到時候的陣型會怎麼變化。現場表演也是用一模一樣的程式同時間去跑，也就是說模擬器呈現的樣子跟現場的樣子幾乎同步。

很多案子的細節礙於時間關係無法一一介紹，這個notion可以分享給大家，如果有興趣可以點進連結來看。每個案例都有 hashtag 一些關鍵字，想知道這些視覺效果是用什麼方式做出來的，都可以點連結（有些案例直接放官網案例連結）及影片，或是透過關鍵字去搜尋。

接著就來實際放一些 demo，都先以 OpenFrameworks 來做示範：

1. 分子流動，這個是 OpenFrameworks 加上 flex 的物理引擎，讓這些粒子在空間中隨著物體的重力流動，中間有一個球會吸附這些粒子，讓這些液體經過這些球時被吸附到這上面去，有些水花流動的感覺。

2. 測試超越粒子的極限，當時想測試電腦的極限可以跑幾顆粒子，這件作品大概有一百還是兩百萬顆。現在電腦效能更好，Unity 的話就可以跑個七八百萬甚至到一千萬顆。

3. 墨汁暈染效果，這個是想做不同的嘗試，想說能不能把粒子做出像墨汁或顏料在紙張上暈開的感覺。像這個效果不錯，但可惜一直沒辦法用在商案中。

4. SONY互動網站，跟SONY合作網站轉場的效果，因為 OpenFlow 的 GLSL (OpenGL Shader Language) 跟網頁用的是一模一樣，所以其實我都是在 OpenFrameworks 寫完後無痛轉移到 GLSL，雖然網頁的 webGL 版本需要更低，但大概可以做到接近的模擬，網站從一頁進到下一頁時透過 shader 讓畫面做流動、背景再做一些轉場效果後到下一頁的畫面。

Q：GLSL轉換的過程 A：當時的分工，因為客戶公司有很多自己的前端工程師，所以前端輪不到我寫，我記得他們前端是用JS (canvas) 寫的，將 canvas 傳進來的每一個像素，在轉換的同時過一個由我撰寫的 Shader，達成最後的效果。這支 Shader 的程式，最基礎的演算法是從 Shadertoy 來的，這邊也直接附上當初參考的連結。當然因為業主需求會有不一樣，所以需要自己完全理解這些程式碼在寫什麼，才能更進一步將程式碼修改成想要的樣子。但 Shadertoy 確實是非常好參考、拿素材的地方。

Lightning talk 2 – 張文瀚

每一次的 Creative Coding Taiwan 聚會都會事先提供一個主題，邀請大家趁著這個機會創作出一件互動藝術作品並與大家分享。在一次又一次的共創過程中，激盪出更多更有趣的火花。

<Wormhole>

作品連結：https://openprocessing.org/sketch/1540160

本來就常在做數位藝術的創作，尤以 Shader 為主，本業在做 2D 遊戲，因緣際會回來使用 Processing 創作。這件作品<Wormhole>是無限的圓延伸至盡頭，每一個圓都是前一個瞬間，把前一針的整個畫面複製、縮小再放進這一針畫面裡，如果我們將 frameRate 改為 1 （一秒一針）就可以立即了解。其他在 Shader裡面，像是圓的半徑等變數都可以玩玩看，會有完全不一樣的效果。

<Out of bounds>

作品連結：https://openprocessing.org/sketch/1540595

這是一件無互動的作品，想要做出銀河系之外的飄浮感覺。最後呈現的這個效果也是在創作的過程中一個美麗的意外，主要是加上了 uv.y /= uv.x * 2.; 這行數學運算的程式碼，少了他，只是一個同心圓的圖案；加上他，把整個畫布增添了詭異的扭曲，造就出這有趣的空間感，感覺就像在銀河系以外能夠看到的景象。

追蹤創作者：https://openprocessing.org/user/322254?view=sketches

若你還沒有看過上篇，必不能錯過：
初次見面請多指教！Creative Coding第一次社群聚（上）吳哲宇的生成式藝術宇宙

想知道你的 NFT 究竟有沒有市場？下篇讓黃豆泥為你解惑：
初次見面請多指教！Creative Coding第一次社群聚（下）黃豆泥：沒有市場的靈魂綁定NFT

五月的社群聚也已經開放報名囉，有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

歡迎加入互動藝術程式創作入門(Creative Coding)線上課程，課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

整理編輯：Chia 編

這篇文章 初次見面請多指教！Creative Coding第一次社群聚（中）Hoba與叁式的演算視覺邁進之路 最早出現於 Creative Coding TW - 互動程式創作台灣站。

Creative Coding Taiwan 是由墨雨互動設計所發起與支持的社群，旨在台灣推廣互動程式設計以及任何由程式創作衍生出來的藝術作品及行為。之前一直都是在線上直播、線上課程，接下來我們希望藉由每個月的固定聚會，舉辦各種不同類型的活動，讓喜歡寇汀的大家互相交流，分享自己的創作與想法，技術上有任何不懂的，現場說不定也會有很多大神出沒可以討教哦！

什麼是 Creative Coding?

Creative Coding 顧名思義是結合程式加創意，狹義上是用程式寫一些看起來很有藝術感的圖形，廣義上是可以用程式，將世界上的各種事物賦予互動跟連結起來，創造出新的現象、關聯與有趣的呈現。用程式偵測走在路上的人群，轉換成五線譜之後播放成音樂，或是比較商業的演唱會背景，擷取歌手的影像做後製，結合動態設計，變成即時的互動背景，跟著聲音的大小、人的位置、時間等做變化，這些都是程式創作能應用的範疇。近期由於 NFT 生成藝術平台 Art Blocks 的興起，也讓更多人注意到了生成藝術與 Creative Coding 的魅力與各種可能性！

因為篇幅關係，此次的內容將這次將近兩小時的直播影片拆成上、中、下三篇，首先由吳哲宇破題開講 Creative Coding 以及生成式藝術的相關應用，最後也帶來他為這次的共創主題＜宇宙＞的新作（影片同時服用）；中篇由叁式互動新媒體的技術美術Hoba帶來演算視覺的應用，不藏私揭露叁式近年來精彩的作品幕後祕辛（影片從這裡開始看），以及另一位與會的創作者張文瀚帶來作品 <Wormhole>分享（看看作者的詮釋及解析）；下篇則是由 FAB DAO 的黃豆泥讓大家一窺＜沒有市場的靈魂綁定NFT＞又是怎麼一回事（影片從這裡開始看），以及第三位創作者 Mizok 帶來他的<Universe-alpha>及<Universe-beta>（作者展示）。

延伸閱讀：
初次見面請多指教！Creative Coding第一次社群聚（中）Hoba與叁式的演算視覺邁進之路
初次見面請多指教！Creative Coding第一次社群聚（下）黃豆泥：沒有市場的靈魂綁定NFT

墨雨設計創辦人　吳哲宇 <Creative Coding 是甚麼？Shader與Generative Art 應用>

對藝術家吳哲宇，也是我們口中的老闆來說， Creative Coding 程式創作是結合設計、工程、數學、動態、程式邏輯甚至是硬體的一種藝術創作形式，把程式當作畫筆，搜尋喜歡的主題，利用一行行的程式碼將世界上的各種事物連結起來、賦予互動，以邏輯思維創造出新的現象、關聯，編織成有趣互動的成果呈現。例如下方這一個神祕的生物，僅僅是用不到二十行的程式碼寫成。

很多人都會說你視覺要看起來有藝術感才能算是藝術。但哲宇覺得， Creative Coding 本身程式的運作以及邏輯概念是藝術的展現，Creative Coding 的魅力也正在此。

進入程式創作的世界，常使用的軟體包括 Unreal 以及 Unity 兩套3D遊戲開發軟體及引擎，MaxMSP 是一款圖形化編程語言的軟體工具，還有主流創作的 Open Frameworks 和 Touch Designer，有興趣的都可以玩玩看。

想必有許多人都是透過 p5.js 生成式藝術創作認識哲宇以及 Creative Coding 的，2020年因為疫情，哲宇而開啟了一天一 p5.js 創作的計畫，最初的起點其實都很簡單，利用三角形、圓形、線條、色彩等不同的主題，從生活中取材，隨意實驗，慢慢發展出有趣的圖像以及互動小品。包括用物理模擬做成軟軟的生物、魚鉤釣魚，或是童趣的蝸牛、用 shader 寫 DNA 等。

常使用的平台是 Open Processing 這個線上編輯器，修改程式碼能即時看到成果。 p5.js 是個入門好上手的程式語言，只要花個一週左右的時間就可以做出有趣的作品，尤其是即時視覺回饋的有趣，足以沖淡一些學習或是撰寫程式的痛苦。

p5.js 生成式藝術創作的過程其實跟一般藝術創作的過程相似，從最初始的動機，也許是個視覺想法（波浪？）或是某個靈感開始，想像不同的可能性（大小、顏色、樣態、互動等等）將草圖逐步建置成形，中途來回不停修改，像調配藥水一樣嘗試各種排列組合、疊加變形，甚至有時會有一些意料之外的驚喜，最後完成作品。

生成式藝術的核心

常看哲宇直播的人，或是 Creative Coding 台灣站的忠實讀者大概可以發現，其實生成式藝術，或說用程式創作藝術，重要的概念可大致分為以下：

• 規則：大自然中有法則，透過探索、模仿，建立規則而非框架。
• 限制：有限制才能激發更多的創意以及自由。
• 核心概念及故事：也是創作的動機，賦予作品更多意義。
• 視覺呈現：加上材質、小動態，用心雕琢細節是畫龍點睛的關鍵。
• 變化：一成不變讓人無趣，無論是透過時間、
• 隨機性：加入一點 random 一點 noise，讓人摸不透規則更好奇。
• 輸入／輸出：輸入包含了影像、音像，滑鼠點擊或移動，其他外部資料或是時間；輸出則是以視覺、聲音及動態（也可能是硬體）為三個主要的方向。

像是哲宇之前利用骰子骰出來的數字控制檯燈的作品；或是將 Unreal 結合動態捕捉系統，即時接收舞者（也就是哲宇本人）的動作並顯示在四周的投影牆上，再加上物理引擎模擬，碰撞、擾動虛擬世界中的圖像，所完成的現場即時表演，這些都算是互動藝術。無論是在 p5.js 或是 Unreal 等平台，程式創作和互動的邏輯都是可以互通的。

NFT作品分享：SoulSea 以及 CryptoPochi

如果對於哲宇在 NFT 的心路歷程有興趣，歡迎右轉閱讀【老闆週六來聊聊】我開始賣NFT作品啦！生成式藝術在NFT的價值，這邊就不再多述，僅挑出兩件特別喜歡的作品跟大家分享。

第一件是發布在 fxhash 的 SoulSea 系列作品，其實是在做商業案子的時候，哲宇發現太漂亮到捨不得給別人，所以就自己上架。作品使用 p5.js 製作出噪聲和波形，模擬海洋的質感，從一條波浪，在多個地方疊加上 noise 產生連續且自然的波紋，加上材質等小元素，其中牽涉到了對數學、形狀的掌握度，製造出接近生活體驗、有機體的東西。

第二件是發布在 OpenSea 的 CryptoPochi ，也是一個互動型的 NFT，結合區塊鏈以及網頁的技術，以網頁的形式呈現，並使用物理模擬引擎與 Artblocks 製作互動，隨時都可以透過滑鼠去玩他，甚至製作了 On Chain Event 觸發同步事件，可以讓不同作品內的 Pochi 互相互動。

如果你是工程師，鼓勵你多看一些作品，會有一些想法和創意開始踏出利用程式碼創作的第一步；如果你是設計師，便可以從熟悉 p5.js 語法開始，慢慢地往生成式藝術的方向邁進。

在這裡也要推薦一下在HaHow好學校的〈互動藝術程式創作入門〉課程。大約兩年前開這堂線上課程時，還沒有很多人知道 Creative Coding 這個領域，如今隨著元宇宙、NFT成為夯字，也越來越多人投入。

哲宇不藏私，分享他在創作的同時，也持續思考作品商業的潛力，除了持續創作、賣 NFT 之外，另外跟很多品牌合作，從品牌的角度出發，例如跟漢堡店合作，將漢堡層層拆分，以程式藝術手法詮釋。未來硬體也會越來越強大、跑得動複雜的程式碼，之後許多公司品牌可能都會開始發展動態或是 3D 的視覺以及衍伸行銷，大家也可以想想看新媒體藝術有哪些商業應用。哲宇也趁機苦口婆心地以過來人身分勸大家不要賣自己作品的授權，因為哲宇之前曾遇過，授權給對方使用他的畫作，對方還反寄律師函回來告的情形。

Shader 與 Generative Art 的應用

Shader 就是執行在GPU上的電腦程式，控制著GPU渲染管線，處理開發者給他的各種繪圖相關的資料，即使是畫一個點、一個顏色、一個向量，也要透過 Shader 渲染。 Shader 就像是 Creative Coding 的進階版，將原本在 3D 軟體內才能看到的材質，運用 Shader 做出來。

GLSL（OpenGL Shading Language） 全稱 OpenGL 著色語言，是一個以C語言為基礎的高階著色語言，用來在OpenGL 中著色編程，這個語言的好處是因在 shader 裡面全部的東西以像素為單位做運算，若你的 GPU 越強，就能渲染出越精細漂亮的畫面，而且效能也很好。如果有興趣的話，也可以參考一些哲宇之前使用相關語言做的作品：

• Ambiguous Mindflow https://openprocessing.org/sketch/1443036
• Intersactions https://openprocessing.org/sketch/1442497
• Subjective Mirror https://openprocessing.org/sketch/1438295
• Molten Metal https://openprocessing.org/sketch/1438173
• Event Horizon https://openprocessing.org/sketch/1431864
• Eternal Flame https://openprocessing.org/sketch/1424812
• Hypnosis https://openprocessing.org/sketch/1423156
• The soul https://openprocessing.org/sketch/1347582
• DNA Mutation https://openprocessing.org/sketch/931034
• Frozen bird brush https://openprocessing.org/sketch/928943
• Chemical Flame https://openprocessing.org/sketch/927190
• Plasma Planet https://openprocessing.org/sketch/927044
• Time Swirl https://openprocessing.org/sketch/926166
• Organic Grid https://openprocessing.org/sketch/925445
• Drawing Ranbow https://openprocessing.org/sketch/923989
• Oil https://openprocessing.org/sketch/923598
• Miroscope https://openprocessing.org/sketch/923287
• Wave https://openprocessing.org/sketch/1476839

舉一件自己的作品當例子，看起來像瞳孔的這幅作品 The Soul，程式碼就非常單純，計算離中心的角度，算出像是類似山脈的偏移效果，再把顏色畫出來，從內到外，紅色是離中心距離的兩倍、綠色是離中心距離的三倍，就可以呈現這種類似極光、光譜分散的效果。

大家有興趣都可以去 fork 哲宇的 shader template （連結這裡走，不可商用、需標記來源），裡面已經準備好 shader 裡基礎的東西，從這個環境開始，可以快速完成你自己的 shader 作品．或是你可以從改一些範本中的不同參數，看會製造出甚麼樣的效果開始。

另外也想跟大家介紹一個很酷的學/寫程式的好用工具 VSCode，你可以去申請 Copilot 的功能，他可以解釋程式碼在做些甚麼，假設我這邊有一串 shader 或是任何其他語言的程式碼，選取後點選 Ask Copilot 就會出現解釋，他甚至會去猜你的變數在幹嘛，譬如說這個 p 可能是位置等。在撰寫程式碼的時候也會有一個自動輸入功能，你只要起頭，他就會幫忙填完 function 和 name 甚至是後面的程式碼，也可以把寫好的程式碼轉換成各式各樣的語言。

若想了解更多有關 shader 的知識，可以參考 TheBook of Shaders https://thebookofshaders.com/，一步步帶你了解如何使用 Fragment Shaders 開始做幾何圖形，從像素開始建構圖像、 3D 等。

Ｑ：整包 HTML 如何上傳變成 NFT？

Ａ：可以用 fxhash 這個平台，將你的程式碼打包成一個 zip 檔案丟上去就可以了，需要注意的是要使用官方提供的 fxhash-snippet 把每個 NFT 獨立的序號生成一個 random object（fxrand），這個 random 就能夠自行產生你在作品中所需要用到的亂數，只要作品序號相同，亂數就是一樣的。把這個部分丟進去、順利跟 fxrand 對接之後，就可以產生很多獨一無二的 NFT 了。

參考：Guide to mint a token

Lightning talk 2 – 吳哲宇

社群聚當天，最後的一個小環節是 Lightning Talk，每一次的 Creative Coding Taiwan 聚會都會事先提供一個主題，邀請大家趁著這個機會創作出一件互動藝術作品並與大家分享。在一次又一次的共創過程中，激盪出更多更有趣的火花。

作品連結：https://openprocessing.org/sketch/1543928

用 Shader 寫的作品，移動鼠標不只有星雲飄動，還有星星閃爍。將粒子的資料輸入進 Shader 裡使用，透過 p5.js 使用多層 perlin noise 與一般的 noise 兩種不同的躁聲做扭曲，呈現出線條流動之感，另外也須計算點跟星星的距離，完成不同明暗程度的閃爍以及穿透霧氣的感覺，將 RGB 分層處理，因為光譜頻率偏差，便會有如色散的效果呈現。

由哲宇創辦的墨雨設計也持續地經營 Creative Coding Taiwan 互動程式藝術創作台灣站，無論是 p5.js 的實作教學，或是你該怎麼入門、去哪裡找資源，都可以從這邊看起。歡迎各方好手加入，一齊充實內容！

最後小小工商時間，我們第一次的社群聚會現場也請到了 AWS Activate Taiwan 的 Alex Cheng 帶著最正宗的韓式炸雞來到現場，以及分享給新創公司的好康，無論你是剛起步的小團隊，或是已經加入育成中心、新創加速器的新創公司，使用 AWS 升級服務可以獲得 US$1,000 的免費積分！有興趣的人歡迎掃瞄下方 QR Code 了解更多。

這次 Creative Coding Taiwan 四月社群聚，每位講者都帶著滿滿的知識和熱忱分享，若是你對哲宇的生成式藝術感到意猶未盡，那你一定要繼續看下去：
初次見面請多指教！Creative Coding第一次社群聚（中）Hoba與叁式的演算視覺邁進之路
初次見面請多指教！Creative Coding第一次社群聚（下）黃豆泥：沒有市場的靈魂綁定NFT

五月的社群已經開放報名囉，有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

整理編輯：Chia 編

這篇文章 初次見面請多指教！Creative Coding第一次社群聚（上）吳哲宇的生成式藝術宇宙 最早出現於 Creative Coding TW - 互動程式創作台灣站。

本文翻自【Coding Vlog | p5.js】200514 Dreamy Bird 夢幻鳥 – 來做彩色又毛毛不知道是魚還是鳥的生物吧！若是想要老闆手把手帶你飛，可以跟著影片進行，這邊也附上成品歡迎大家一起動手做。

這一次分享的內容比較特別，是紀錄老闆創作的過程，起初只是想做金屬色的練習，調整不同屬性以及數值後，慢慢產生了生物的形體，而有了夢幻鳥的誕生。這個作品會利用線上的工具 openprocessing 來進行 p5.js 的創作。完成作品後會發現，其實使用到的 api 就只有那幾個，卻能創作出獨特又有趣的作品，大家了解 api 後，也能勇敢去嘗試調整，說不定會有更意想不到的作品產生。如果想要了解更詳細的製作流程和其他創作內容，可以去支持老闆的互動藝術程式創作課程哦！

這次直播筆記會帶大家學會以下內容：

• 利用 p5.js 進行創作互動作品
• 使用 noise 產生自然有序的隨機數
• 在作品中加入滑鼠互動，讓作品與觀賞者產生連結

事前準備

開發環境

開發會使用 openprocessing 線上撰寫程式碼，如果想知道較詳細的設定，可以到成品看老闆的開發環境設定。

• openprocessing：提供大家在網頁中直接使用 p5.js 進行開發，只要利用所提供的 api ，就能製作出有趣的效果。想要了解更多相關效果的開發，除了參考網站中其他的p5.js創作教學之外，也歡迎看看老闆的線上課程，跟老闆跟一起進入 processing 的世界。

會使用到的 API：

這次專案會使用以下的 api，先重點整理給大家，不清楚的地方，可以透過後面跟著老闆操作，了解每個 api 使用時機。

• createCanvas(width, height): 創建畫布，參數中分別傳入寬跟高。
• background(colorCode): 加上背景色，可依照文件傳入色碼參數。
• noStroke(): 取消繪製圖形的邊框。
• colorMode(): 定義顏色的方式，預設為 RGB 顏色，HSB 模式依序要填入的值則為(色相, 飽和度, 明度)。
• fill(): 選擇填入的顏色，依照 colorMode 選擇的填色模式填入對應的參數。
• ellipse(posX, posY, width, height): 在 (posX, posY) 上繪製一個寬高(width, height)的橢圓形。
• rect(x, y, width, height): 以 (x, y) 的位置為左上角的點，畫一個寬度 width 高度 height 的方形（如果要畫正方形的話，即寬度＝高度）。
• random(): 沒有傳參數時，會返回一個隨機浮點數。
• noise(): 產生自然有序的隨機值，與 random 的概念不一樣。在範例中會使用到 noise，所以建議先稍微理解 noise 的概念，有興趣的同學也可以延伸閱讀相關資訊：2D Noise – Perlin Noise and p5.js Tutorial
• rotate(angle): 依照傳入的參數進行旋轉。
• translate(x, y): 將畫筆移到(x,y) 上。
• push(): 紀錄目前畫筆狀態。
• pop(): 恢復畫筆狀態。
• sin(): 正弦，將傳入的數值做為角度值，換算成 1~-1 的值。
• cos(): 餘弦，將傳入的數值做為角度值，換算成 1~-1 的值。
• atan2(y, x): 計算從指定點(y,x)到座標原點的角度。

跟著老闆開始動手做

1. 起手式

開啟新的 openprocessing > Create a Sketch，可以看到程式碼頁面已經有一段預設的程式碼，隨著滑鼠的移動，會沿路產生小球，理解這段程式碼後，接著只留下我們需要的部份。

• setup()： 可以視為環境初始化，只在開始執行的當下會呼叫一次，以下的程式碼使用了兩個 api
  • createCanvas(width, height)：創建畫布，參數中分別傳入寬跟高，如果直接寫螢幕的寬高(windowWidth, windowHeight)，就會成為滿版的互動區塊。
  • background(colorCode)：加上背景色，可依照文件傳入色碼參數。
• draw()： 會依照時間不停地重跑裡面的程式碼，要製作互動的內容可以在這個 function 中呼叫。
  • ellipse(posX, posY, width, height)：在 (posX, posY) 上繪製一個寬高(width, height)的橢圓形。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(100);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

2. 繪製基礎噪聲

在 draw 中，我們先調整顏色模式改成 HSB，後續與填色有關的 api 就會改成依序填入(色相, 飽和度, 明度)，

• noStroke() 將每次繪製圖形的邊框取消掉，每個方塊間就不會有 stroke。
• colorMode()：定義顏色的方式，預設為 RGB 顏色，HSB 模式依序要填入的值為(色相, 飽和度, 明度)。

接下來我們可以看到有兩個 for 迴圈，第一個 for 迴圈會每隔高度 20 ，再進行一次第二個 for 迴圈的內容，重新從左至右繪製一長串的方形。

• rotate(angle): 依照傳入的參數進行旋轉。
• fill()：選擇填入的顏色，由於前面選擇了 HSB ，所以這邊要改使用 HSB 的方式填色。
• sin()：將傳入的數值做為角度值，換算成 1~-1 的值。
• noise()：躁聲，隨機序列生成器。跟 random 相比，可以利用多維的座標產生自然有序的序列，產出的值介於 0~1之間。
• rect(x, y, width)：在 (x, y) 的位置畫一個寬度 width 的方形。

經過調整後，讓呈現的顏色有時偏白，有時飽和度不會那麼高。在 sin 或 noise 中代入的值，老闆會多除上一些數字，目的是為了讓呈現的顏色變化不要太快，但這沒有正確答案，同學可以在了解每個 api 的操作方式後，依照自己的經歷或感受，去嘗試自己喜歡的氛圍。

最後一步驟，老闆希望能讓每一個橫條看起來都不同進度，所以在每一條橫條繪製前，都旋轉一下，就完成繪製基礎噪聲階段了，產生類似彩虹的畫面。

function setup() {
  createCanvas(800, 800);
  background(100);
}

function draw() {
  colorMode(HSB)
  noStroke()
  for(var o = 0; o<height; o+=20) {
    rotate(PI/1000)
    for(var i = 0; i<width; i++) {
      fill(sin(i/100)*300, noise(i/50, o/1000)*100, sin(i/40,o/1000)*30+80)
      rect(i, o, 30)
    }
  }
}

3. 依據噪聲橫列的影響色彩分佈跟變化

這個階段，老闆對每一行的波進行尺寸與填色的微調，也進行了波型的嘗試：

• 讓每一橫列產生偏移：填色位置加入 o ，隨著每一行 o 的值逐漸增加，使得每一橫列的波產生偏移。
• 讓波跟著時間動起來：填色位置加入時間因子 frameCount，讓整幅跟著時間的前進而動起來。
• 更豐富的顏色：希望每一行波使用了 o 之後，不是只有偏移效果，所以在 noise 中又加入了 noise。
• 降低波顏色變化速度：希望顏色變化的速度能更慢一點，針對 fill 內色相位置的值，除上更小的數字。
• 加上插畫材質：為了讓作品更有質感，所以我們為作品加上插畫材質，材質製作方式這邊不詳細介紹，同學可以將程式碼貼到對應的地方直接使用。

let overAllTexture
function setup() {
  createCanvas(800, 800);
  background(0);
	
  // 插畫材質
  overAllTexture=createGraphics(width,height)
  overAllTexture.loadPixels()
  for(var i=0;i<width+50;i++){
    for(var o=0;o<height+50;o++){
      overAllTexture.set(i,o,color(100,noise(i/3,o/3,i*o/50)*random([0,40,80])))
    }
  }
  overAllTexture.updatePixels()
}
function draw() {
  colorMode(HSB)
  noStroke()
  for(var o = 0; o<height; o+=100) {
    for(var i = 0; i<width; i++) {
      fill(
        noise(i/400, o/400, noise(frameCount/150) + frameCount/50)*600%360,
        noise(i/50, o/1000, frameCount/100)*100,
        noise(i/40, o/1000, frameCount/100)*30+80
      )
      rect(i, o, 80)
    }
  }

  // 加上插畫材質
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

4. 修飾幾何形狀與加入隨機大小

接下來，我們只會動到 draw 裡面的內容，老闆在這個階段做了以下嘗試：

• 貓毛效果：畫方塊的時候，利用變數 glitchAmount ，在 x, y 座標加上隨機偏移值。
• 隨著滑鼠位置改變的貓毛：將隨機偏移的值加上滑鼠的值，使作品與滑鼠產生了互動。
• 微調樣式，將外層的 for 迴圈 o 從 10 開始，讓作品與上下邊界的距離一樣

老闆也有嘗試加入隨機的黑線在波形中，產生類似現代藝術的感覺，但實際做出來的效果不好(下圖左)，大家想要嘗試，可以將以下程式碼斜線的部分恢復。

let glitchAmount = 20
function draw() {
  colorMode(HSB)
  noStroke()
  glitchAmount = mouseX/10 // 隨著滑鼠變更數字的貓毛
  for(var o = 10; o<height; o+=100) {
    for(var i = 0; i<width; i++) {
      fill(
        noise(i/400, o/400, noise(frameCount/150) + frameCount/50)*600%360,
        noise(i/90, o/1000, frameCount/100)*100,
        noise(i/80, o/1000, frameCount/100)*30+80
      )
      rect(// 繪製方塊時，繪製的座標結合隨機的值
        i + random(-glitchAmount, glitchAmount), 
        o + random(-glitchAmount, glitchAmount),
        80
      )
      // if(noise(i, o, frameCount/100) < 0.1){
      //   push()
      //     stroke(0)
      //     strokeWeight(20)
      //     rect(i, o, 80)
      //   pop()
      // }
    }
  }
	
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

5. 使用三角函數繪製波型

接下來老闆想做出類似極光的效果，一系列的調整與操作後，慢慢地變成一塊一塊的物體往前移動中，過程中做了以下嘗試，大家也能跟著老闆一起嘗試：

• 由上到下、粗到細：極光從上到下粗到細，改變 rect 的第三個參數來實現改變波的大小
• 結合 sin 產生波形：使用 sin 來繪製方形所產生波形，比較像極光或海浪，
• 將波形結合時間因子 frameCount，讓波動起來
• 改變 rectMode 為 CENTER，讓波上下同時變大

let glitchAmount = 5
function draw() {
  colorMode(HSB)
  noStroke()
  glitchAmount = mouseX/10
  rectMode(CENTER) // 調整繪製方形的模式
  for(var o = 50; o<height; o+=100) {
    for(var i = 0; i<width; i++) {
      fill(
        noise(i/400, o/400, noise(frameCount/150) + frameCount/50)*600%360,
        noise(i/90, o/1000, frameCount/100)*100,
        noise(i/80, o/1000, frameCount/100)*30+80
      )
      rect(
        i + random(0, glitchAmount),
        o + random(-glitchAmount, glitchAmount),
        (sin(i/40 + frameCount/20+o*50)+1)*30+20 // 結合 sin 繪製波形，加上 frameCount 讓波能跟著時間動起來
      )
    }
  }
	
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

6. 加上眼睛與調整生物外觀

老闆認為一塊一塊向前的波形很像生物的身體，雖然還沒確定是魚還是鳥，但是老闆決定賦予每一個區塊眼睛。這階段老闆將一些值整理成變數，大家可以來回參照上一階段與這個階段的程式碼比較，在加上眼睛與生物外觀的調整過程做了以下嘗試：

• push 與 pop：因為老闆將眼睛位置統一記錄在 eyes 中，所以程式碼會先將所有生物的身體繪製完畢後，再繪製所有生物的眼睛，這邊就會需要把畫筆位置移到對的地方，所以使用了 translate。要注意的是，做畫筆的移動或是旋轉畫布時，我們會使用 push 將原本的狀態記錄著，當完成位置時再搭配 pop 去恢復原本畫筆的狀態。
  • translate(x,y)：將畫筆移動到 x, y 的位置
• 以波形的進度 (progAng) 作為眼球的位置：將每個完整波形的長度百分之 3 的位置存進陣列中，同學要記得使用餘數，因為隨著時間增加，frameCount 是一直增加的，利用 PI * 2 去處理餘數，就能取得每個波形進度。
• 生物的位置與滑鼠關聯：除了讓方塊的位置隨著時間去改變，這邊也做了滑鼠的互動，讓波形進度的值結合滑鼠位置。
• 繪製生物的方塊：生物的身體，是依不同時間點來決定出不同大小的方塊所組成，老闆將原本的方大小作為 progAng 變數的值，再由 hh 變數來組合使用 progAng。
• 區塊的大小更加生動：原本的區塊大小只是隨著滑鼠位置去變化，在 hh 的值中，除了利用 sin 之外，也加入 cos ，讓這個生物的外觀更有趣，產生毛邊金魚的感覺。
• 繪製眼睛：眼睛陣列(eyes)裡的物件，是所有符合條件的眼睛 x 座標，結合 ellipse，繪製眼白與眼珠。

let glitchAmount = 5
function draw() {
  colorMode(HSB)
  noStroke()
  glitchAmount = mouseX/100
  rectMode(CENTER)
  for(var o = 50; o<height; o+=100) {
    let eyes = []
    push() // 記錄當下初始畫筆的狀態
      translate(0, o) // 移動畫筆到 (0, o) 的位置
      for(var i = 0; i<width; i++) {
        push() // 再次紀錄當下畫筆狀態
          translate(i,0) // 移動畫筆到(i, 0) 的位置
          fill(
            noise(i/500, o/400, noise(frameCount/150) + frameCount/50)*600%360,
            noise(i/90, o/1000, frameCount/100)*100,
            noise(i/80, o/1000, frameCount/100)*30+80
          )
          let progAng = (i/40 + frameCount/20+o*50 + mouseY/100 + mouseX*noise(o)/100) % (PI*2) // 結合餘數計算，讓值介於 0~100 之間
          let hh = (sin(progAng) + 1 + cos(progAng/2))*30 +20  // 結合波的進度作為每次繪製方塊的大小
          rotate(sin(i/10))
          rect(
            random(0, glitchAmount),
            random(-glitchAmount, glitchAmount),
            hh
          )
          if( int(progAng/PI/2*100 ) == 2) { // 符合進度條件則儲存 x 座標
            eyes.push(i)
          }
        pop() // 釋放畫筆位置
      }
      eyes.forEach( eyeX => { // 將陣列內的物件全部拿出來繪製眼睛
        fill('white')
        ellipse(eyeX, 0, 25)
        fill('#333')
        ellipse(eyeX, 0, 10)
      })
    pop() // 釋放畫筆位置
  }
	
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

7. 眼睛看向滑鼠、細調樣式

大致的生物形體告一段落後，除了細調樣式外，老闆也開始在作品中嘗試加入更多的互動性，例如讓眼睛看向滑鼠的位置，做了以下的操作：

• 讓眼球看向滑鼠位置：這邊需要先取得滑鼠與眼球的角度，再利用 cos, sin 讓眼球能擺放到對的位置。使用到了新的 api – atan2
  • atan2(y2-y1, x2-x1)：以弧度為單位，計算從指定的點 (y2,x2) 到 (y1,x1) 的角度，要注意這邊的 api 參數，第一個是 y 座標的計算，第二個才是 x 座標的計算。(https://p5js.org/reference/#/p5/atan2)
• 清掉雜訊：因為 p5 是不停的地繪製新的畫面，畫面出現了許多雜點，是因為沒有在每次繪製前，先將畫面清空，這邊只要在繪製前，在畫布上蓋上一個滿版的方形就能達成。需要注意的是，利用覆蓋滿版方塊來清除雜點時，由於我們前面使用的 rectMode(CENTER)，除了調整繪製的座標外，也可以先改回使用 rectMode(CORNER)，等清除畫面完成後，再繼續原本的程式碼。
• 微調生物的身體大小：微調的數值可以參考以下的程式碼，大家也可以嘗試看看不同的數值，看看會有什麼有趣的效果。
• 取消毛邊與滑鼠的互動：固定生物毛邊的程度。
• 調整背景色：老闆試著改變背景色，希望不要每個作品背景都是黑色。因為生物的顏色比較鮮豔，所以最後老闆挑了較深的顏色，來對比出作品的主角。

let glitchAmount = 5
function draw() {
  noStroke()
  // glitchAmount = mouseX/100 // 取消毛邊與滑鼠的互動
  rectMode(CORNER) // 改變繪製方塊的模式
  colorMode(RGB) // 使用 RGB 作為填色模式
  fill(156, 104, 104, 200) // 每次重新繪製時加上底色
  rect(0, 0, width, height)

  rectMode(CENTER)
  colorMode(HSB)
	
  for(var o = 50; o<height; o+=100) {
    let eyes = []
    push()
      translate(0, o)
      for(var i = 0; i<width; i++) {
        push()
          translate(i,0)
          fill(
            noise(i/500, o/400, noise(frameCount/150) + frameCount/50)*600%360,
            noise(i/90, o/1000, frameCount/100)*100,
            noise(i/80, o/1000, frameCount/100)*30+80
          )
          let progAng = (i/40 + frameCount/20+o*50 + mouseY/100 + mouseX*noise(o)/100) % (PI*2)
          let hh = (sin(progAng) + cos(progAng/2) + cos(progAng/5)/3 +1)*30 // 微調毛邊樣式
          rotate(sin(i/10))
          rect(
            random(0, glitchAmount),
            random(-glitchAmount, glitchAmount),
            +hh
          )
          if( int(progAng/PI/2*100 ) == 2) {
            eyes.push(i)
          }
        pop()
      }
      eyes.forEach( eyeX => {
        let mAng = atan2(mouseY - o, mouseX - eyeX) // 取得滑鼠與眼珠的相對位置
        fill('white')
        ellipse(eyeX, 0, 25)
        fill('#333')
        ellipse(eyeX + cos(mAng)*5, sin(mAng)*5, 10) // 利用 cos, sin 將眼珠放置在對的位置
      })
    pop()
  }
	
  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

8. 加入魚鰭與最後修飾

創作到尾聲，其實老闆還沒決定他是什麼樣的生物，看起來類似尖嘴巴的魚，為了讓作品更完整，在這裡我們賦予生物們魚鰭，並做最後的微調：

• 加上魚鰭：前面我們有記錄所有眼睛的位置，利用這個 for 迴圈，去繪製旋轉的三角形，讓它成為生物的鰭。這邊要記得使用 push 及 pop，不然會導致你下一次在繪製眼睛時出錯。
• 調整背景色：最後老闆選擇了深藍色的背景作為定調。
• 扭動的身體：繪製身體前的畫筆移動，在 y 參數的位置加上 sin ，可以繪製出魚移動時身體扭動的感覺。

let glitchAmount = 5
function draw() {
  noStroke()
  rectMode(CORNER)
  colorMode(RGB)
  fill(0, 0, 80, 180)
  rect(0, 0, width, height)
  rectMode(CENTER)
  colorMode(HSB)

  for(var o = 50; o<height; o+=100) {
    let eyes = []
    push()
      translate(0, o)
      for(var i = 0; i<width; i++) {
        push()
          translate(i, sin(i/30)*20) // 利用畫筆的位移，讓鳥在往前時，身體也有了變化
          fill(
            noise(i/500, o/400, noise(frameCount/150) + frameCount/50)*600%360,
            noise(i/90, o/1000, frameCount/100)*100,
            noise(i/80, o/1000, frameCount/100)*30+80
          )
          let progAng = (i/40 + frameCount/20+o*50 + mouseY/100 + mouseX*noise(o)/100) % (PI*2)
          let hh = (sin(progAng) + cos(progAng/2) + cos(progAng/5)/3 +1)*30
          rotate(sin(i/10))
          rect(
            random(0, glitchAmount),
            random(-glitchAmount, glitchAmount),
            +hh
          )
          if( int(progAng/PI/2*100 ) == 2) {
            eyes.push(i)
          }
        pop()
      }
      eyes.forEach( eyeX => {
        let mAng = atan2(mouseY - o, mouseX - eyeX)
        fill('white')
        ellipse(eyeX, 0, 25)
        fill('#333')
        ellipse(eyeX + cos(mAng)*5, sin(mAng)*5, 10)

        push() // 繪製魚鰭時，記得使用 push, pop 來記錄與釋放畫筆狀態
          stroke(0)
          noFill()
          translate(eyeX+50, 0)
          rotate(sin(eyeX/2+o/10)/2) // 畫筆進行旋轉，畫面會呈現魚鰭擺動的效果
          triangle(
            0, 0,
            50, -20,
            50, 20
          )
            pop()
        })
    pop()
  }

  push()
    blendMode(MULTIPLY)
    image(overAllTexture,0,0)
  pop()
}

老闆來結語

這次的創作一開始是老闆想要練習金屬色，一系列的調整與操作，最後才產出夢幻鳥這個作品，讓我們快速回顧一下夢幻鳥的創作過程：

1. 了解 openprocessing 創作的起手式 – setup 與 draw
2. 利用噪聲 noise 決定方塊的顏色
3. 利用 for 迴圈的變數、噪聲與時間變數 frameCount，影響每一橫列的色彩分佈與變化
4. 調整繪製方塊的形狀與大小
5. 結合三角函數繪製出波形
6. 為生物加上眼睛，並微調生物外觀
7. 讓眼睛與滑鼠產生互動
8. 加上魚鰭與最後修飾

萬事起頭難，一個作品不可能一步到位，將最終目標拆分成不同階段任務，從一開始的雛型慢慢開發出每個區塊，最後組裝在一起，也可以加上個人的創意去實現其他功能，讓作品更豐富。

由於這部影片比較特別，是紀錄老闆在練習與發想後，老闆回頭解說製作過程，所以中間會不停地去微調數值。創作的過程一定會有這種狀況發生，在創作時沒有所謂的正確答案，大家在了解工具之後，就勇敢地去嘗試吧！再附上這次範例的成品＜夢幻鳥＞，讓大家在開發時參考。

如果你喜歡老闆的教學，歡迎支持老闆，讓老闆在《互動藝術程式創作入門》課程中帶你一起學習。課程裡會帶你看看不一樣的作品，並引導大家一步步完成作品，透過每次的賞析、實作到修正作品，讓寫 code 不再是這麼困難的一件事情，將這個過程想像成，拿一隻比較難的畫筆在進行創作，如果有機會使用它，便能夠在網頁上做出與眾不同的創作。

此篇直播筆記由幫手 H 協助整理

這篇文章 【p5.js創作教學】Dreamy Bird 夢幻鳥 最早出現於 Creative Coding TW - 互動程式創作台灣站。

讓我們抓住夏天的尾巴，一起用粒子系統與漸變顏色創作煙火吧 🎆

今天要使用的是OpenProcessing搭配p5.js函式庫的大禮包組合，如果對這兩個工具還不太熟悉在這篇文章可以看到更多介紹 👉🏻 p5.js 快速上手

讓我們用草稿規劃一下煙火的概念，如果要做以粒子為基礎、從中心炸開的煙火，應該是一顆粒子從畫面水平線的底部往上移動特定距離，在上方炸開很多不同的粒子、且粒子各自擁有不同的運動方向。

根據以上的概念，我們今天會切分為以下步驟來進行：

1. 粒子系統
2. 動態延伸（移動、爆炸分裂）
3. 顏色變換

製作粒子系統

首先第一個步驟我們先完成煙火的核心——粒子系統，以單顆粒子的物理模型來說會有位置（P）、速度（V）、加速度（a）和顏色（Color）、大小（r）等變數。在OpenProcessing先把畫布設成1000×1000、黑色的夜空之後，另外新增一個Tab，用來放置我的們的Class particle，在初始化時我們希望引入一些變數args裡面帶入一些固定的參數做使用，如果使用者有特別設定，把使用者引入的參數args蓋到預設值def上，再把客製化後的設定值蓋到這個物件本體this上。

//Tab2
class Particle {
  constructor(args){
    let def = {
      p: createVector(0,0), //位置
      v: createVector(0,0), //速度
      a: createVector(0,0), //加速度
      color: color('red'), //顏色
      r: 10, //大小、半徑
    }
    Object.assign(def,args)
    Object.assign(this,def)
  }
}

接下來介紹兩個關鍵的method分別是draw()和update()，分別負責顯示和更新，切分成兩個部分是為了在更新的時後不動到最初始的顯示，把邏輯層區分出來，這樣對模組化的製作與管理也比較容易。

在同一個 tab2，先來處理draw()，push()會保留目前的drawing style、而pop()則會回復這些設定，兩個必須搭配使用。假設粒子移動到this.p位置、顏色this.color、尺寸是this.r。

class Particle{
  ...
  draw(){
    //顯示
    push()
      noStroke()
      translate(this.p) //processing可以只給向量，不一定要x,y
      fill(this.color)
      circle(0,0,this.r)
    pop()
  }
  update(){
    //資料更新
  }
}

在主要的程式定義一個陣列particles把粒子都裝進去，我們來初始化一顆粒子試試看，讓objParticle根據剛剛的規範來製作，放在外面並用let比較不會有全域打架的問題objParticle = new Particle() ，成像的位置在畫布寬高一半處，這時在畫布中間就可以看到我們千辛萬苦的第一顆隨機色粒子啦。

let particles = []
let objParticle 
function setup() {
  createCanvas(1000, 1000);
  background(0);
  objParticle = new Particle({
    p: createVector(width/2,height/2),
    r: 100,
    color: color(random(255),random(255),random(255))
  })
}

function draw() {
  objParticle.update()
  objParticle.draw()
}

單一粒子動態軌跡

在update()處理位置（P）、速度（V）、加速度（a）和大小（r）的變化，每一顆的位置都會加上速度、而速度都會加上加速度。

update(){
  //資料更新
  this.p.add(this.v)
  this.v.add(this.a)
  this.r*=0.993 //由大變小
}

有物理模型後，我們來處理速度（v）和加速度（a），這邊介紹一個函式random2D()，可以在vector上隨機產生一個2D的向量。套用到速度上隨機產生方向，在爆炸初始時粒子會往原先的方向衝再往下掉，乘5倍讓初始速度>加速度，設定加速度為0.1，這樣我們就得到單一粒子的運動軌跡，也就是煙火炸開時的單一根花瓣。

製作束狀粒子群

有了一個粒子後，我們可以來做一束的煙火，用這些粒子加起來做成陣列。我們先把objParticle拿進來，用for迴圈做出50個粒子objParticle，再push到陣列particles內。在draw的地方把清單一個一個抓出來，我們就得到初步的美麗煙火了。

let particles = []
 
function setup() {
  createCanvas(1000, 1000);
  background(100);
  fill(0) 
  rect(0,0,width,height)
	
  for(let i=0;i<50;i++){
		
    let objParticle = new Particle({
      p: createVector(width/2,height/2),
      v: p5.Vector.random2D().mult(5),
      a: createVector(0,0.1),
      r: 20,
      color: color(random(255),random(255),random(255))
    })
    particles.push(objParticle)
  }
}

function draw() {
  fill(0,5) //留下煙火軌跡
  rect(0,0,width,height)
  for(let objParticle of particles){
    objParticle.update()
    objParticle.draw()
  }
}

模組化並自動發射

完成了一束煙火後，我們要接著做此起彼落發射的夏日花火祭，把發射的動作包成一個function firework就可以重複呼叫它。包起來後先在setUp呼叫一次，也可以引入位置參數（p），如果該參數有值就顯示、沒有則出現在畫面中央。接著設定他產生的頻率，每隔100個frame放一次煙火。

大家可以發現我們調高了煙火的數量，從50到100個，在這個情況中為了預防畫面因為生成的東西越來越慢，我們來消除超出畫面的煙火，用filter()留下小於畫面的物件。

仔細觀察煙火的粒子除了大小不同外，每顆的初始速度也不同，如果初始速度相同就會較規則，看起來像下垂的海葵（？），這邊用random()給予任意值處理，煙火的顏色也調整成HSB模式，相較於RGB模式有更彈性的明度暗度可以使用，色調的變數請參考下圖。

let particles = []

function firework(p){
  push()
	
    let baseHue = random(300)
	
    colorMode(HSB)
    for(let i=0;i<100;i++){
      let hue = random(0,120)
      let objParticle = new Particle({
        p: p || createVector(width/2,height/2), //有位置p時取用p，沒有時就從畫面中央
        v: p5.Vector.random2D().mult(random(1,10)),
        a: createVector(0,0.1),
        r: random(40),
        color: color((baseHue+hue)%360,360,360) //避免>360的數字都是紅色
      })
      particles.push(objParticle)
    }
  pop()
}

function setup() {
  createCanvas(1000, 1000);
  background(100);
  fill(0) 
  rect(0,0,width,height)
  firework()
}

function draw() {
  fill(0,5) //留下煙火軌跡
  rect(0,0,width,height)
  for(let objParticle of particles){
    objParticle.update()
    objParticle.draw()
  }
  if (frameCount%100==0){
    firework()
  }
  particles = particles.filter(obj=>obj.p.y<height) //留下小於畫面的物件
	
  fill(0)
  rect(0,0,100,50)
  //計算畫面中粒子數
  fill(255)
  textSize(20)
  text(particles.length,50,50)
}

基礎版：滑鼠觸發煙火

接下來加入mouse的互動。首先註解掉自動產生的frameCount，每當滑鼠按壓時就在該位置呼叫firework，為了避免重複參數造成順序混亂，在呼叫時把p包成一個物件{p}，記得setUp時也要回傳一個空的物件firework({})。

這時候會產生一個問題，因為p引入firework被所有的粒子共用，所以有幾顆粒子他就會被update幾次，我們用copy()複製p出來給當下的粒子，避免所有的粒子共用位置。再加入fireR、praticleR等參數做出隨機粒子大小和隨機煙火大小。

function mousePressed(){
  firework({
    p: createVector(mouseX,mouseY),
    fireR: random(1,100), //煙火的大小
    particleR: random(1,10) //粒子的大小
  })
}

function firework({p, fireR, particleR}){
  push()
    let baseHue = random(300)
	
    colorMode(HSB)
    for(let i=0;i<100;i++){
      let hue = random(0,120)
      let objParticle = new Particle({
        p: (p && p.copy()) || createVector(width/2,height/2), //複製新的位置給當下的粒子，讓它重複100遍
        v: p5.Vector.random2D().mult(random(1,fireR || 5)), 
        a: createVector(0,0.1),
        r: particleR || random(40),
        color: color((baseHue+hue)%360,360,360)
      })
      particles.push(objParticle)
    }
  pop()
}

進階篇：用聲音觸發煙火

做完基礎煙火互動後，如果可以用聲音來觸發煙火那一定很酷，p5.js裡有一些關於「聲音」相關的函式，今天介紹的是Mic Input可以截取電腦麥克風的聲音，我們先開啟p5.sound的library。

套用官方語法在setUp加上input = new p5.AudioIn()開始取用聲音。

let input

function setup() {
  createCanvas(1000,1000);
  background(100);
  fill(0)
  rect(0,0,width,height)
  firework({})
	
  input = new p5.AudioIn()
  input.start()
}

在draw()加上觸發條件，如果有聲音，即在畫布上放煙火。這樣我們聲控的煙火大會就大功告成啦！

function draw() {
	
  let volume = input.getLevel()
  let speaking = voulume>0.15
	
  fill(0,8) //留下煙火軌跡
  rect(0,0,width,height)
  for(let objParticle of particles){
    objParticle.update()
    objParticle.draw()
  }
  particles = particles.filter(obj=>obj.p.y<height) //留下小於畫面的物件
	
  fill(0)
  rect(0,0,400,200)
  fill(255)
  textSize(20)
  text(speaking,50,50)
	
  if (speaking){
    firework({
      p: createVector(mouseX,mouseY),
      fireR: random(1,5),
      particleR: random(1,10)
    })
  }
}

小試身手

做完上面的煙火後，這邊提供幾個大家可以繼續嘗試看看的方向，希望大家可以長出各式各樣的煙火，讓夏天的夜晚更為熱鬧！

• 粒子的顏色漸層
  可以在def的地方新增endColor: color('yellow')，利用lerpColor()這個漸變函式在Update()指定顏色的變化跟階數。

this.color = lerpColor(this.color, this.endColor, 0.05) //每次變換0.05

• 扭曲的粒子運動軌跡
  在粒子translate的時候如果根據sin/cos偏移，可以做出扭曲的煙火效果會更漂亮。

curve: random(5),
curveFreq: random(2,40),

translate(this.p.x+sin(this.p.y/this.curveFreq)*this.curve,this.p.y+cos(this.p.x/this.curveFreq)*this.curve)⁠

• 製造煙火的霧氣
  透過在Particle中的draw()增加一些半透明且半徑較大的粒子，來增加模糊的光影。Color先複製一份避免動到原先的設定，用函示setAlpha()製作透明度。

let copyColor = color(this.color.toString())
  copyColor.setAlpha(10)
  for(var i=0;i<100;i+=10){ //重複畫圓形
  fill(copyColor)
  circle(0,0,this.r*i/20) ⁠
}

• 混合模式
  加入混合效果，blendMode()調整顏色呈現。

push()
  blendMode(SCREEN)
  for(let objParticle of particles){
    objParticle.update()
    objParticle.draw()
  }
pop()

• 效能處理
  設定當r小於某個半徑時就不顯現，減少效能負擔。

particles = particles.filter(obj=>
            obj.p.y<height &&
            obj.r>0.01
  )

以上就是這次的教學，成品請參考這裡，希望大家還玩得開心，那我們就下次再見啦！

也許你對互動生成式藝術比較有興趣？來看看老闆的《互動藝術程式創作入門》課程，跟著將近兩千位同學一起把程式碼當作畫筆創作，或是先看看這篇文章，欣賞同學們完成的作品吧！

此篇直播筆記由幫手 Jeudi Kuo 協助整理

這篇文章 【p5.js創作教學】CreativeCoding 花火大會（直播筆記） 最早出現於 Creative Coding TW - 互動程式創作台灣站。

今年的夏天，我來到了紐約開始我的研究所生涯，唸的是IDM (Integrated Digital Media)，剛開學的時候很急著在學校裡面找到工作（因為想要拿SSN就能辦信用卡跟做很多事了)，對自己的感覺就像拿到了一個證明，知道自己真的在這裡開始扎根了，這應該算是我第一個受聘的正職，進行得比想像中順利很多，所以趁著在學期結束的一切記憶都還熱騰騰的時候，為各位帶來在紐約當助教的八卦跟到底都在玩些什麼東西。

為什麼要當助教呢？

學期初的時候原本投了學校IT部門UX Designer的工作，沒想到雖然面試很順利，但是卻遲遲沒有消息，完全就是一個被發無聲卡的節奏，同時間又看到系上開始在找研究助理，我就想說，不如兩個都投投看吧！反正原本自己就在做教學相關的工作，如果還能夠順便幫教授做做project應該蠻好玩的。

在還沒見到我的教授之前，看網路上的照片快被嚇死，我的教授看起來超兇，感覺剛被放出來（欸，但實際上見到人之後覺得意外地很和善，長得也完全不像照片上那樣。所以跟教授面試的時候，就開了課程的範例跟敘述一下自己在程式方面的經驗，打開codepen炫了炫。

當下有提到如果IT上了的話，我就要毅然決然地拋棄系上來去曼哈頓上班，享受一下在繁華大城市的感覺，因為我們校區在布魯克林，實在是相對比較悠閒跟沒那麼誇張的繁華。

想了一天之後，覺得如果是繼續做設計稿的話好像跟在台灣做的事情沒什麼差別，又很不甘願工作就只是在電腦前做做別人指定的設計稿，所以就直接聯繫教授說我想要這份工作了XD 現在想想好險是做這個決定，開啟了我後面這一串莫名認真（？的助教進化之旅。

在這12週裡做的事情遠超乎自己的預料，雖然大部分是因為不甘心就只坐在那邊給人問問題，所以會自己給自己找事情做。這學期我把系上的助教體制從一開始的毫無規範，到建立了整套運作規則， 預約制、記錄表格、週報、成效分析與怎麼評估跟分配時間，也大幅的增強了自己建立人際關係的能力，跟知道要如何停損每個人花費的時間，陪養了很多的耐心，在看到一臉呆滯沒在思考的學生的時候不會暴怒XD

預約制規劃與規則制定

原本助教應該是不用約的，就是挑一張自己覺得愜意的桌子，捧著電腦把office hour 待好待滿，我一開始不知道其實蠻多研究生助理不會把時數做滿，教授還是會給滿20小時的薪水，所以就傻傻的每週排了20小時的助教時間再來崩潰，因為20小時實在太長，只靠乾等人來的話實在是無聊又無法預測到底要怎麼幫那些學生。

那時想起了在預約課程討論的時候，有用過一個好像不錯的軟體叫做calendly，於是我第一週閒暇之餘開始研究把助教時間改為預約制並要求至少要提早一天左右預約，就能看到日曆裡面自動隨著預約會冒出應該要出現在學校的時間。

還好一開始有想到預約制，隨著期中期末大家越來越崩潰，老是捧著電腦一個接著一個來，預約制讓我可以名正言順地留足夠的時間給每個人，當然，也會有提早結束的時候，就當做自己偷偷休息的時候，但尤其是外國人，問問題都沒在客氣的，常常雙手一攤就說，我不會做，把事情全部丟給我，如果東西簡單我還會好聲好氣的說你要多嘗試一下，更多是那種複製一堆別人的code來給我看，說我不會改的，整個怒火就會上來叫他回去自己努力一下再過來找助教。

地點跟流浪

原本以為我會有一間自己的辦公室，但夢想第一週就破滅了哈哈，我被告知找一個自己喜歡舒適的角落，學生找得到我就好，因此剛開始我待在系館外面，因為沒有固定座位每週都要換位置，兩週之後實在是很抓狂，覺得不能再這樣像是遊牧民族的當助教下去了。後來，我找到了原來系上的研究生有研究室可以用，一用角落的位置之後一試成主顧，又有超高級的外接螢幕可以用，整個超級方便，所以後半學期就定居在這個座位上了。

助教日誌的誕生

做助教做到後來已經養成了只要有人來問問題，就會直接紀錄下用了多少時間跟問了什麼問題，這樣的習慣也讓我在後續一樣的學生來問問題時，可以直接找到上次的紀錄，快速的掌握他得學習狀況跟弱點在哪，同時也能當作真的有在認真工作的證明給教授看XD 後來有幾個學生連續助教時間回去後都沒有動，隔週預約繼續來找我從上次進度開始也沒有試著搞懂。

週報

在第一個禮拜結束的時候，總覺得結束的很沒有踏實感，意外想到了以前跟朋友聊天時，他說他每個禮拜都要寄一封整理的Email給老闆，報告這週自己做了什麼，或有什麼想法。仔細想像這樣的方式經營真的挺不錯的！

在國外的工作比較自由，我又深切的感受到其實我的教授自己很忙，完全沒有空理我，把輔導學生的工作都丟給我做，所以我就開啟草稿紀錄一下這週我做了些什麼事情，有哪些學生，然後開了一個表格把每個學生問的問題跟我幫忙解決的事情記錄下來，整個學期累積下來真的超級可觀的。

減少資訊不足的情況卡住

一開始填寫預約的時候只有填名字跟問題，直到做了兩週之後，我才發現原來我要負責的不是只有我們教授的班，而是系上這學期所有的班都是我要負責的，而且研究所跟大學部也都是來找我問問題（這堂課給大學部跟研究所的兩個版本）。

難怪每個學生來作業跟課綱都超級不同，發現這件事情的時候，痛苦了好一陣子，覺得自己被推坑做了超雷的工作，但後來整理好心情好之後就想要怎麼樣管理這麼多班級的學生，所以後來我就把預約表單一次問完。

有時候助教時間結束後，會需要寄一些參考資源給學生，原本還會很認真的一封一封弄，但是後來數量實在太多懶惰了，就做了一套罐頭信模板，可以直接把名字跟連結填一填複製信件寄出。

第一次領薪水

在美國第一次領薪水的時候真的很感動，目前大概薪水可以勉強打平房租＋生活費，硬是死撐著用著覺雖然大部分都會超過一些些，但是能有能力第一個學期就用專業支撐生活的感覺很棒，雖然跟學費相比真的是杯水車薪，不過就心態而言是告訴了自己，你有在國外好好過自己生活的能力了呢！

成效分析

最後兩週的時候，因為資料實在太多，一眼看不出到底有多少學生來跟問了多久問題，就又開始自己給自己找事情做，先是把所有學生這學期來的次數列出來，然後統計他們到底都是哪個教授的，有些東西實在是做出來才知道誇張，這學期教授丟了一個網頁小哥來給我，說是他們教授實在幫不了他，所以整個學期他不斷的預約來找我。
做完整理之後，發現這學期總共有四十幾個學生來找我，也發現了很多很常利用助教時間的學生，原來斷斷續續的這樣office hour下來，也真的教過很多次了呢。

在教學中誕生的眾多範例跟創作

在教學過程中，其實我自己也很常突然冒出意料之外的寫法或創意，就會趕快記錄下來或趁空擋實作出來，在這裡課堂上教的寫程式雖然東西沒有特別難，但是教授都用一種很設計系的方式在帶系上的課，很鼓勵學生冒出很多怪想法，互相討論可以做什麼很ㄎㄧㄤ的東西，和看很多案例，雖然會讓我當助教這邊的loading蠻重的，但能很清楚感覺到跟台灣一般在教程式一板一眼的感覺很不一樣！

一些小小心得

能在一個陌生的國度逐漸走穩腳步的感覺很珍貴， 所以自己才會花那麼多的心思在希望把第一份工作做好上，也因為很多來的學生其實是跟自己同一屆的同學，所以有時候助教時間做一做就變得比較熟，能夠有人聊聊天或一起吃個飯，也不會自己一個人悶在家裡做事情，雖然常常以學校為家到半夜兩三點弄完回去，但是過得真的蠻開心的～

對於這份工作心裡還是有些小小的不滿，原本工作描述是說有要幫老師做Project，結果所有時間都被助教佔掉了，教授好像也對我太過放心，所以就也沒什麼管我，每次跟我討論的時候還被說做得太拼了完全沒什麼好挑惕XD

下個學期可能會一起規劃系上的統一課綱的資源庫，也很想把整套學起來自己教哈哈哈，這個學期歷經數百個助教時間摧殘，總覺得已經能夠把整套東西倒著講過一遍了，很希望有一天能把這整套課程帶回台灣，也許能夠為程式教育注入一些活水呢。

撰文：吳哲宇

三門老闆的線上課程，快與上萬名同學一起加入寫code的行列吧！

動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。

打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。長達3085分鐘，超過60個精緻範例與400張的投影片以上，以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片，成為hahow上最長的課程。

互動藝術程式創作入門(Creative Coding)線上課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

你也會有興趣閱讀其他文章：

從不只是一門線上課程，而是一場推動進化的豪賭
釀造一門結合網頁、設計、數學與特效的線上程式課程

這篇文章 在紐約大學讀研當助教的進化日誌 最早出現於 Creative Coding TW - 互動程式創作台灣站。