台北生成現場：列島雜湊 2023

在今年四月，由台灣第一個立基在 Tezos 鏈的 NFT 藏家群體「眾聲道」（Volume DAO）策畫主辦「台北生成現場：列島雜湊 2023」的區塊鏈生成藝術展覽。展覽主要分為藝術家、主題、裝置和互動四大區域，藉此希望觀者可以從作品本身的創作意涵，到使用的程式技術介紹以及與作品間的直接互動，以全新角度認識區塊鏈藝術，讓更多人能夠了解區塊鏈技術和藝術的結合，進一步推動了區塊鏈藝術的發展和普及化，也帶來更加豐富多彩的體驗和思考。

藝術家個展區

此區域匯集了加拿大藝術家麥特‧德洛里耶（Matt DesLauriers）、台灣藝術家王新仁和汶萊藝術家亞齊‧阿薩哈里（Yazid Azahari）的個展作品。麥特‧德洛里耶展示的〈FOLIO〉為一個生程式的繪圖系統，其設計受到早期電腦繪圖的影響，將作品以傳統印刷技術的方式做區塊鏈上的雜湊質呈現。在展場上，也直接放置了早期的電腦設備，讓觀者可以使用此介質與作品產生互動。

台灣知名數位藝術家王新仁以藝術實驗計畫《Chaos & AI Research》，使用自創的演算法，將觀眾上傳的作品，加入自身的創作風格形成嶄新的藝術型態。

來自汶萊的藝術家亞齊‧阿薩哈里（Yazid Azahari）的多樣作品展示出他對極簡主義的深度探索和科技的獨特見解，像是作品〈自動主義〉作品建構了426 個版次的迭代輸出，使用了筆觸混合各種運動方向，像是不規則曲線、直線、突然轉折等，但也同時使用特殊演算法，避免筆畫重疊。

展區介紹

接續藝術家展區，進入本次的主題區「遞迴性」。遞迴是生成式藝術中常用的技術之一，在遞迴中，一個函數或算法會反覆地引用自身，從而產生出複雜且多層次的結構。這種遞迴的應用使得生成式藝術作品具有自相似、無窮迴圈和奇特形態等特點。而本次展覽也特別選擇了，〈Fractal Trees 樹狀分支〉、〈Subdivision 區塊分割〉與〈Cellular Automata 細胞自動機〉三種常見主題展現其特質。

從一條線分支出數條線，直到成為一顆樹，就是〈Fractal Trees 樹狀分支〉的結構表現；〈Subdivision 區塊分割〉為線條從平面延伸到立體的應用，讓視覺效果更加豐富；〈Cellular Automata 細胞自動機〉常用於模擬自然現象，以一個基礎單位互相影響，建構不同的產出模式。展場也挑選多位生成式藝術家的遞迴相關作品展出，複雜震撼卻都各個獨特的創作，展示出生成式藝術的一大特點。

數位作品與實際的現場作品常被進行討論和比較，而在「轉譯」展區中的〈苗繡〉便將此議題以實際作品展出的方式做呈現。〈苗繡〉為本次展覽地點 – 鳳甲美術館中的實體藏品，以細膩的中國苗族刺繡工藝製成，乍看之下為具有規律性變化的幾何圖形組成，實際上，在每一處小角落都有不同的細節變化。展覽邀請了藝術家林逸文與劉乃廷使用生成式藝術專業，將實體藏品轉化成作品〈生成苗繡 14 號〉與〈生成苗繡 16 號〉。藝術家們藉由觀察原作品的邏輯，並使用韻律重複與隨機變化的生成式藝術特點，交織重現出具有趣味性也極富創意的重構作品。

當觀者從觀賞藝術作品到比較實體作品與數位作品的差異後，展覽最後邀請大家在互動區中，與藝術家共同創建一件屬於自己的數位化藝術作品。就如同人們會使用水彩或是色鉛筆等繪圖工具去進行實體的藝術創作，在共同創建的作品中，藝術家們先使用演算法以及不同的程式做出一個基礎框架，而觀眾可以再藉由使用手機，調整顏色設定、線條的粗細或是每個形狀的大小等等。在互動，觀眾可以經由實際操作馬上理解到快速生成，且每一次都有其獨特性的生程式藝術特色，進而沉浸於它的魅力中。

不可否認區塊鏈藝術將為藝術界帶來更多的創新和可能性，當這些區塊鏈生成藝術品在展場上展示時，觀眾可以更加直觀地體驗到區塊鏈藝術所具備的獨特性和創新性。同時，這也將為藝術家和藝術愛好者提供一個更加多元化和開放的藝術生態系統，讓更多人能夠參與其中，推動藝術創作的發展和進步。

加入互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道隨時補充新媒體藝術的養份！

這篇文章 區塊鏈藝術的新視野：「台北生成現場：列島雜湊 2023」展覽 最早出現於 Creative Coding TW - 互動程式創作台灣站。

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

藝術作品介紹

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

〈反射研究〉

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

〈碎形〉

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

〈非歐幾何延伸公設〉

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

〈植光・花〉

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

〈耳語〉

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

〈福朗提爾壹號〉

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

〈光的時間量子〉

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

科技與藝術發展的融合

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

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

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

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

Creative Coding 是由墨雨設計主辦，創辦人同時也是藝術家的吳哲宇，先前在 Hahow 開設了三堂線上課程「動畫互動網頁程式入門」、「動畫互動網頁特效入門」和「互動藝術程式創作入門」，累計教學超過兩萬人快速上手網頁和 p5.js 等工具做程式互動作品；隨興就開「老闆，來點寇汀吧。」直播，陪著大家一起從零開始完成一件網頁或互動的作品，剛開始直播的契機是因為很少工程師或藝術家完整公布他們創作的過程，除了需要手口腦並用、現場 debug，另一個原因是花費時間太長，很少有人耐心看。有興趣的朋友，歡迎多多追蹤 YouTube 頻道。

Creative Coding 社群聚會自 2022 年起至今，目前辦到第五場 (2023.02.24)，希望除了互動程式創作臺灣站這個網站之外，同時也有實體聚會活動，把臺灣有趣的人拉進來相互認識與交流。這次邀請到吳哲宇及黃新兩位新時代新媒體藝術家，跟大家分享現下最夯的 AI 及生成式藝術 (Generative Art) 兩個主題與領域中，你必須要知道的事。

新時代互動創作者的 AI 大亂鬥 – 哲宇

吳哲宇身為新世代的跨領域新媒體藝術家，從軟體開發、網頁製作，到互動型的數位表演、生成式藝術 NFT 創作等，喜歡探討的是「互動」以及將靈魂注入程式碼的那段過程。2022 年在臺北 101 五樓的双融域(AMBI SPACE ONE) 中展出個展「混沌實驗室」，也一直追著新奇的科技應用以及工具，嘗試融入創作乃至於商業應用裡。

10000%的破壞性壓縮創新

最近 AI 話題正夯，現在的我們其實面臨著文藝復興或工業革命時期相同的難題：當新的工具或技術出現，足以讓人類的平常工作以快 100 倍的速度達成，身而為人的價值是什麼？我們會不會被取代？

Midjourney 和 ChatGPT 的爆紅，許多人赫然發覺文字與圖像生成這些工作由 AI 做甚至比人類更快更好，現今每個人都有部分職能非常容易被取代，像是設計師製圖、社群小編寫文案等。創作者該如何轉型？我們該如何駕馭這些工具，這些 AI 工具又如何讓我們進化、升級？

AI 在三、五年前的商業應用

一個親身經歷是哲宇在紐約的 Outernets 互動數位廣告公司工作時，最主要的服務是 AI 視覺辨識，透過影像分析人體骨骼點，提供綜合的性別年齡等數據判斷，再投放相應的互動廣告給潛在顧客，有點像是現實世界中把你最想要的商品推到鼻子眼前的 Google Analytics。譬如酒商的廣告，人像分析結果超過二十歲，才會播放揮手的影像邀請你靠近並打開酒瓶，再透過更深入的互動與問答推薦一款適合你的酒。

另外，在當時也已經可以用網路瀏覽器辨識骨架，而不需要再架設 kinect 或是 processing 等軟硬體與感測器，這些技術早已被廣告商拿去開發路上互動的行銷活動。一個分享的案例是吸引自行車騎士玩完接蛋糕的小遊戲後，便可以得到一張兌換對面酒吧飲品的 QR Code。在過程中一步步引導被吸引住目光的潛在客戶進入體驗流程，你的每一個體驗都是客製化的，也更容易讓顧客成為品牌的忠實粉絲。

後 MidJourney 和 ChatGPT 時代的 AI 商業製作

現今的演唱會商業市場競爭越來越激烈，因此，結合 AI 技術進行商案製作已成為未來發展趨勢。第一個實例分享，在預算及時間有限下，結合 Midjourney 和 ChatGPT 兩種技術快速製作出演唱會的動態視覺。哲宇和墨雨團隊當時只有一星期的時間完成 18 首歌的影像。

一開始先有系統性地從這些歌曲的歌詞提取了形容詞、感受等關鍵字，丟進 Midjourney 中慢慢調整 prompt 去生成一張張靜態圖檔，與業主確認視覺方向後，再開始做動態。動態的部分，則結合了像 After Effects 和 Touch Designer 等不同的工具，其中像是 After Effects 裡的一個 Loopflow 效果，只需要設定好軌跡，就會順著完成循環動畫，最後再依據每段影像的需求，手動修一些動態。

若不是有這兩款工具，要在一週之內完成如此細膩、有插畫感、原創又要不單調的視覺成品，真的很難做到。若以傳統方式製作，所需的圖像和素材需要花費大量的時間和資源才能獲得。但是，使用AI技術可以簡化這個過程，因此也可以大大節省製作MV所需的時間和人力資源。

另一個部分是歌詞播放機，也是為了這個專案，使用一些關鍵字讓 ChatGPT 「詠唱」出來的，沒耗費太多時間開發。這個軟體使用了包含 GSAP 和其他套件寫成，可以讀取特定類型的文字檔，並轉換成可以直接使用的演唱會動態視覺。再透過 Midi 工具控場、使用 OBS 串接影像，未來也許再加入 timecode 就會是更完整的即時歌詞播放機。

僅僅拿歌詞播放機來說，這些過往是前端工程師的工作，現在都可以由 AI 來做了，哲宇不是要大家去找新的工作，而是想辦法在你的公司、你的產業裡導入這樣子的工具幫助你做基礎開發，而你則是往 Senior的角色邁進。

AI是乘法，1 x 10000

有了這些工具，我們不再需要花大把時間與力氣在重複的工作上，尤其是創作者，更該用「乘法」的概念去想 AI，你自己要有專業的那個 1 而不能是0，再利用 AI 乘以萬倍輔助。

以前的設計師在對客戶提案的過程中，往往需耗費大量時間做圖，無論是提案不採用或是專案流標，對於設計師來說都是可觀的沉默成本；如今可以快速地生成完整的圖做更精準的溝通。也因為哲宇樂於嘗試新的工具，往往也對改善工作流程或是創作的靈感有意想不到的妙用。像是以往直播需放一個綠幕去背，現在只需打開網路攝影機鏡頭加上 X-Split Camera 軟體就可以自由替換成喜歡的動態背景。

身為工程師、藝術家，哲宇對於 AI 的想像相對樂觀，像上述分享的例子一樣善用這個工具，讓 AI 成為 Junior 工程師、繪圖師，甚至是生成逐字稿、會議紀錄等，像擁有一個自己的專屬助理，代替自己執行勞務，才能夠釋出更多時間，探索進階工具與整合新興技術。因技術與效能的迭代速度成指數性上升，早期的導入必有陣痛，但也讓我們的眼光能放更長遠，優化工作效率，專注於人生更重要的事情上。

不過由於 AI 技術在法律方面還有一些模糊的空間，因此可能會產生一些法律風險。其次，使用 AI 技術產生的內容對於目前而言，可能會引起輿論壓力，適當的風險評估和管理仍屬必要，若是應用在商業案的話，也需與業主做事前溝通。

整體而言，結合 AI 技術製作商業專案，或是對於個人創作，都具有高效和節省成本的優勢。我們期待在未來的市場中，AI 技術能夠發揮更大的作用，讓專案製作能夠更高效率，品質也更提升。(歡迎一起加入~)

呼應哲宇的分享，黃新近期也深刻體會到 AI 的來勢洶洶。Copilot 是 GitHub 出的一款 AI 工具，當你在 VS Code 的編輯器裡寫程式碼時，Copilot 會跳出建議寫法，但 ChatGPT 的速度更像是有人在旁邊盯著寫程式，還在思考下一段怎麼寫的時候，就已經顯示出來了。若你今天完全不懂，其實很難驗證 ChatGPT 說的是真是假、正確性多高，所以多少學一點程式也是好的。

另外像是剛正式推出的 Notion AI 工具，中翻英的文稿，翻了第一版之後，只需要調整一段成為較通順的寫法，接下來就寫得比自己寫出來的英文稿還好了。完成後即使還有一些段落怪怪的，或與你原意相差甚遠，身為主廚的你應該有能力審核它、驗證它、修改它了。

這些基礎知識和識讀的素養，應該會成為未來個人的重要能力。

生成式藝術鏈上生態與政大生成藝術課程內容分享 – 黃新

講者黃新過去累積比較多數位互動的作品，包含 AR 濾鏡、裝置等，稱自己是加密世界的新移民，也是 Volume DAO 的一員。個人創作與收藏許多 NFT 的生成式藝術作品，也與海內外的藝術家一同在台北當代藝術館（MoCA）《蓋婭：基因、演算、智能設計與自動機＿幻我；它境》展出多件 NFT 作品。

雖然有些人對於加密貨幣與 NFT 存疑，但以本質來看，這些新的技術與工具的出發點卻是良善的。如今隨著科技的不斷發展，生成式藝術慢慢成為藝術界中的一股新興力量，而結合 NFT技術後更具發展潛力。

在這波 AI 浪潮中，我們需要了解，生成式藝術不等同於 AI 藝術（又或有人稱為「生成式AI (Generative AI)」：AI 藝術是用 AI 這個工具「生成」出文字、影音的成果，而生成式藝術更偏向一種藝術創作的方式，利用程式撰寫來生成、創作出獨特的作品，由 NFT 作為生成式藝術的載體以及憑證，實現藝術作品的不可替代性與價值。

視覺上來說，AI 產生出來的視覺會有一種獨有的奇怪融合感，並且有許多具體的形象出現；生成式藝術通常更數位一點，線條、基礎圖形、顏色、材質去層疊而成。

生成式藝術簡介

• Generative Art 生成式藝術
• Procedural Art 演算藝術
• New Generative Art 新式生成藝術

生成式藝術 (Generative Art) 從過去的觀點來看，就是用程式演算法達到動態視覺的效果，比如遞迴、碎形都是常見的程式和視覺呈現，其他名稱比如說 Procedure Art 或是 Parameter Art，用參數來做設計的概念。

但事實上，生成式藝術在 NFT 出現後又不同了，所以生成式藝術的藝術家 Toxic 曾說，現在 NFT 這個圈子的生成式藝術根本不是生成式藝術：正統的生成式藝術透過演算法讓作品有豐富變化的成果呈現，更包含了不可控制的成分在；現在大家控制得太好了，姑且只能算是由隨機花紋或顏色組成的作品，故稱為 New Generative Art。這個「新式」生成式藝術其實帶點貶義，但這些相對新的東西也還是在持續發展變動。生成式藝術廣義定義是，利用程式碼編寫而成，帶有隨機性且每次成果都不盡相同。

許多人因為生成式藝術、NFT、AI 這些正熱門的名詞，常來問黃新「生成式藝術可以應用在哪些地方？」其實像是海報、公司產品包裝或視覺設計、網頁上的視覺與動畫、或是獨一無二的桌布等都可以，而且以往就有許多人這麼做；現在之所以那麼多人密切關注甚至一頭熱想投入，正是看中它的「金融性」，也就是作為藝術品買賣的最大價值，或是成為行銷手法一環的最大附加價值，譬如購買手機就送內建的生成式藝術桌布以及該桌布的 NFT等。

最關鍵的一件作品是 Tyler Hobbs 的《Fidenza》，當初以超級高的價格賣掉，約為1000以太幣（用現在已經跌到不行的幣價計算也是新台幣3000萬元左右），從這一刻起開啟了整個生成式藝術的市場大爆發。

生成的瞬間就是永恆

回過頭來講到 NFT 跟 Generative Art 作為藝術品，必須提到 Art Blocks 跟FxHash 這兩個最重要的國際生成式藝術銷售平台。

Art Blocks 被譽為「生成式藝術殿堂」，作品上架須審核，且經過嚴格的線上會議，與創作者討論作品理念與程式通過後才可以上架販售，相對封閉、策展型的平台、且位於以太鏈上；FxHash 則是位於 Tezos 鏈上的開放式平台，任何人只要程式寫完丟上去即可，在過去一年裡大概產生兩萬多件作品，視覺風格迭代快速，也有許多在這邊紅了的藝術家被邀請去 Art Blocks 上。

Art Blocks 發明了一種「即時生成鑄造並銷售」的方式，把生成式藝術轉變成很好的 NFT 銷售出去：在作品展示頁按下「隨機」後，僅會秀給你看這件作品的其中一種可能性，也可以重複點擊欣賞它的多樣變化；當按下「鑄造 (mint)」也就代表購買，之後才會看到你實際上買到的是哪一張。

這個關鍵的銷售模式，背後的概念是將原本演算法中的隨機與無限可能，運用區塊鏈的技術以及綁定區塊鏈帳本與身分而獲得「我擁有了獨特的它」的感覺。技術上來說，是以交易的序號 (Hash) 作為作品的 Random Seed，根據序號產生你買的那一張圖，也正是為何你擁有的那一張圖會是獨一無二的。

藝術品之所以珍貴就在於它的稀缺性，在這些作品的生成機制之中，藝術家當然會放入一些較稀有的隨機元素，購買者無法確定最終購買的會是哪張作品，博弈的性質就提高了，吸引更多人購買，也無形中形成了同系列作品中價格的差距。上述提到的市場爆發，也多少跟這種博弈的特質有關聯，常見的手法像是透過大量購買而增加擁有特殊款的機率，更進一步地翻十倍賣掉等等。

如何欣賞生成式藝術

在這些平台上長期觀察，一級、二級市場的銷售指標成為生成式藝術美學演變的參考依據，不同的藝術家、收藏家、策展人也不時交流評斷作品，包含是否好看、價格高低、動態程度、互動性、效能等。在這裡分享一下幾個大原則：

• 單一作品的視覺美（繪畫感）觀看影片範例↗
• 整個系列的變化豐富性 觀看影片範例↗
• 作品的情緒張力 觀看影片範例↗
• 程式本身的優雅

生成式藝術粗略分類有兩種寫法，一種是已經想好構圖，用程式碼而非畫筆將物件和效果一個接著一個寫進指定的位置；另一種比較是從系統概念出發，且隨機組成出來的圖視覺上都要是好看的，感受有點不同，黃新和哲宇的作品都較偏向後者。但兩種寫法都能夠利用加入雜訊紋理等不同元素或材質的技巧，使畫面可以有更多元化的呈現。

生成式藝術的美學演化可說從「幾何與極簡」、利用質感與紋理堆疊出來的「毛毛密碼」、山水樹木的「自然印象派」、模擬與擬真的「數位古典主義」、具有驚奇元素的「魔幻寫實」，最近的流行則是利用筆觸與材質而成的「數位幾何印象派」。透過欣賞生成式藝術，我們可以感受到科技與藝術的完美結合。每一件生成式藝術品都有著自己獨特的風格和氛圍，這使得作品具有價值及吸引力。（各流派的詳細說明與舉例請直接自影片1:28:14 觀賞起）

鏈上社群生態

Anika Meier 在2022年5月的推特說：

過去藝術家就僅只是藝術家，如今藝術家也會購買藝術作品而變成收藏家，透過展示收藏作品成為策展人甚至是藝廊的角色，而藝廊則消失了。有些人認為 NFT 以及 Art Blocks 等線上的平台與交易形式讓藝廊被取代，但實際上也許未必。

著名的藝術家 Kevin Albach 也曾推特過「I don’t trust artists who don’t collect art.」在生成式藝術 NFT 的買賣上，因為算是新興的領域，鏈上的所有交易紀錄也都公開，有些成為收藏家的藝術家，會以潛在購買藝術家的過往購買紀錄，乃至於社群上的互動積極度，作為該創作者是否足夠投入這個領域的指標。

要入門生成式藝術的重點，除了學習創作工具和善用這些技術之外，更多是需要通盤了解加密貨幣的知識、錢包的掌控、買賣操作等，了解市場的喜好之後更學會經營創作者身分與社群，才能真正賣出自己的作品。

關於黃新去年在國立政治大學中開課課程的更詳細說明，包含課程的設計、整學期的紀錄以及同學的作品分享，請參考2022 政大「生成式藝術入門」課程紀錄。

總體來看，NFT 技術已經改變了數位藝術品的流動性。結合 NFT 技術的生成式藝術讓生成式藝術更具發展潛力，為藝術界帶來新的機遇和挑戰。我們可以期待未來的數位藝術市場能夠繼續發展與茁壯，並且看到更多優秀的生成式藝術作品出現。

今天分享內容豐富，遺憾沒有足夠的時間邀請與會者各自分享交流，希望下次能再見到你們。謝謝大家今天的參與，附上大合照一張，我們下場社群聚再見！

此篇文章由 Chia 編彙整撰寫。

這篇文章 新時代互動創作者不可不知：AI工具及生成式藝術鏈上生態 最早出現於 Creative Coding TW - 互動程式創作台灣站。

今年 2022 下半年，我榮幸能夠跟 麥當勞 合作推出實驗型公益專案，在生成式藝術的探索上與大型的品牌做公益聯名。

這次的合作邀請大家把圖片/影片或 LivePhoto 設定為桌面(ios15 or android)，就能在掃描手機載具時，順手捐出手中的發票支持公益行動，動態桌布版本支援特定的手機型號跟系統。

雖然不是非常 web3 出發 (發行 NFT )的做法，我認為跟生成式藝術合作，是麥當勞在規劃上很創新的嘗試，支持實驗型的專案讓藝術的影響力擴張到現實社會，結合微小的力量也很符合Web3社群的精神 – 每個人微小的貢獻帶來巨大的進步與改變。

「藝術如何融入生活與落地？」

之前我曾經跟 White Castle 合作，目標也是想要做一個跟商業結合的心情是藝術應用，當時我們做了非常多的動態漢堡並結合即時的音樂生成，有點像是互動版本的安迪·沃荷 的罐頭湯，是屬於商業廣告型的 NFT。而這次與麥當勞的合作比較偏公益性質，對於新媒體藝術如何創造影嚮力這件事情有不同的詮釋。

這次採用的創作手法 – 生成式藝術

這次的專案是延伸至之前創作的作品來改造，我創作的方式比較特別不同於用傳統的繪圖工具來繪製，或者一般的電腦軟體去做靜態的圖像。

程式創作，也就是對電腦描述作品的規則，讓他執行的模擬運算延伸出最後的成品，所以更像是個工程師去設計系統設計一個小宇宙，讓他們自行運轉在觀賞，後來不可預期的藝術產出。

生成式藝術是設計活的作品，將作品構成的規則與變化保留，當收藏家收藏到生成式藝術作品的時候，如果使用數位產品的形式，就可以即時的在自己的終端上渲染看到長出來的效果，而這些作品創作藝術家手法的靈魂也保存於其中，因此同一套演算法，可以產生1000種不同的變化，每一幅都會是獨一無二的畫作。

在品牌視覺的應用上，生成式藝術能夠進一步推進到動態的主視覺、規則， 舉例來說如果有一家公司他的核心元素是重力，那就可以在他的不同視覺網站輸出品上，用重力的概念去表達跟設計。

在網站上，你可能看到所有的元素會往下掉跟堆疊，在實體空間上可能會使用大小的物品懸掛在空間中表達被重力吸引，在聲音的設計上可以用很多的物品去做錄製物品落下的聲音，再重新編排成企業的識別音樂， 而這些核心就會延伸至我們以前說的主識別概念，他已經跨越了視覺的層級，成為了一統品牌對外形象的核心運作法則。

與麥當勞一起推出的作品 – 「有愛大力量」「暖心大城市」與「愛心特快車」

這次總共推出了三個作品，從上千種不同的選擇中挑出好看的樣式，加上愛心的元素以呼應這一次活動的公益主題。

第一個作品是有「有愛大力量」，用粒子的效果加上物理模擬去建構微小的粒子產生宏觀的愛心，爆炸擴張成宇宙，剛好跟這次的主題「微小也能偉大」搭配上。

第二個作品是「暖心大城市」，當時創作這個作品的背景是在疫情的期間，每個人都關在移動移動的大樓建築裡時心裡十分孤寂，所以我想透過氣球遞送愛心的方式，將愛傳播到整個城市的人手中。

第三個作品也是我很喜歡的一個是「愛心特快車」，這個作品是透過數學的方式，畫出雲霄飛車的軌道，有很多小車子幾何形狀在上面跑來跑去，當經過特定的節點愛心的時候就會發出可愛的聲音，愛心也會隨之跳動活起來。

流程的優化與工程挑戰

我在選作品的時候我會去留意配色與構圖，我覺得一個好的生成是藝術演算法是在大部分的情況下，所有的延伸作品都可以非常好看，而這個條件非常難達到。因為我們要在不過度設定外觀的情況下，允許他自由發展，演算法的設計是其中的關鍵，會需要一次又一次的生成幾百張圖片，調整讓所有的作品都一起進化，開發時也為了這一次的合作案寫了一套工具，隨時地用亂數種子來控制渲染出來的特定樣式，方便討論與修改。

剛開始輸出的時候，我是使用手動的方式重新整理網頁並調出喜歡的圖，那這個方式在前期測試都很快速，後期測試時，我們面臨到的問題一個是要針對所有的圖輸出不同的螢幕尺寸，再加上要同時輸出靜態動態以及Live Photo的版本，如果跟客戶來回幾次去調整，每次都要重新輸出花一兩個小時就會很沒有效率，所以到後期我直接開發了一套工具，使用程式的方式模擬瀏覽器的行為，自動錄製靜態與動態作品，未來也會想要逐步將專案使用的錄製與自動化技術開源，讓更多的創作者不用重新造輪子。

在過程中，我覺得遇到最大的困難是硬體與系統限制，因為手機型號非常多種，而我們又想要讓使用者可以設定為動態桌面，蘋果當時推出了新的手機還有 iOS 16 拿掉了 Live Photo 桌面的功能，原本測試的能夠達到的動態桌布效果，就受到了系統的限制較難去做設定。

「人們渴望巨大的改變發生，轉捩點是荒野中的腳印踏出了一條新的道路。」

我認為社會的進化，是在一點一點的突破中累積性地發生的，有些藝術他掛在美術館裡面，有些藝術他出現在我們習慣的建築物周遭，而麥當勞這一次的合作，是將作品延伸到現實世界每個人手中終端的一個創新實驗，結合了公益號招，邀請大家一起支持這個專案，這次作品的發票載具都會連接到麥當勞叔叔之家，幫助遠地就醫兒童家庭，除了讓藝術融入我們的生活，更是成為正面的力量溫柔的推動社會進步。

最後，我想推廣一下墨雨設計與我在台灣也有經營程式創作的社群！除了想要讓大家接觸這些程式創作領域的知識能夠更順暢之外，也想要經營一個社群環境可以隨心所欲地交流創作想法，雖然以前有很多人在做類似的事情，不過新媒體藝術在台灣是一個比較小的領域，要找到志同道合的人，除非你去念碩士或是剛好認識社群的聚會交流，不然不太容易找到除了興趣之外可以怎麼發展的方向，希望可以把台灣對互動創作有興趣的人都聚集在一起。

將冰冷程式碼轉譯為動人故事，從微小見偉大，邀請你一起潮公益

「潮公益 生成藝術桌布」動態桌布下載位置：https://pse.is/4jw3x2

Creative Coding 台灣社群：https://creativecoding.in/

墨雨設計：https://monoame.com/

這篇文章 探索未知疆域，藝術家吳哲宇與麥當勞一起做「生成藝術」 動態公益桌布實驗。 最早出現於 Creative Coding TW - 互動程式創作台灣站。

什麼是 Creative Coding？

通常大家比較常將 Coding 認知為解決問題的一種工具，以比較制式的方式去解決設定好的問題。而 Creative Coding 在新媒體藝術領域來說，是結合設計、工程、數學、動態、程式邏輯與硬體的一種創作形式，嘗試在不同事物間建造一座溝通的橋樑。只要擁有程式的基礎概念、能夠靈活運用以及美感具備，就能創作出有趣的作品。以池田亮司，這位來自日本的聲音和視覺新媒體藝術家舉例，其藝術創作多是以資料轉化為視覺藝術模式進行，並投射在物件上，使觀眾在進入藝術展間時，有種身處異空間的錯視感；或是知名沉浸式內容製作公司 TeamLab，以商業型展覽為主，藉由展品與觀眾間的互動模式呈現作品；除了在展覽上的呈現外，像是演唱會或是公共裝置藝術也是現今常被應用的管道。

老闆以「Floating in the sky – VR experience」介紹其創作理念，藉由個人的想法作為出發點，使用了 UNREAL 遊戲引擎、MaxMsp和自行製作的音樂， 結合軟體與硬體間的互動所呈現的有趣 VR實境作品。還有像是「Net Device – The Gambling Lamp」及「Explode – Motion Capture Performance」這幾項作品，帶出不同事物之間，皆能以程式來進行對話，甚至最終變成視覺化的藝術創作。

Creative Coding 對概念的視覺化，強調用不同領域及不同的觀點將自身的角度陳述出來，像詩意運算就是早期在做 Creative Coding 的藝術家所提出來的概念，藉由程式撰寫所表現出的質感、顏色或是律動的模式，如 Tyler Hobbs、高偉俊介 或是 Matt Deslauriers，這些具有燈光藝術與裝置藝術背景的創作者作品，在與藝術創作時所提到的「心流」有極大的相似之處。

現在 Creative Coding 最主要的發展方向強調的是，所有人皆能上手的程式語言撰寫，建立現有的程式資料庫，讓沒有程式背景的人在有足夠認知的能力下，也能快速反應的應用方式。而在創作時還是建議，作品本身觀看時，可以不用解釋也能理解其想表達的事物。

從網頁教學到 Creative Coding 教學

最初，老闆是以視覺平面設計師的角度教授動畫互動網頁程式入門 (HTML/CSS/JS)，在課程中使用 Codepen 或是 OpenProcessing，希望引導設計師們不只是使用程式，更希望能創造出想要的網頁視覺樣貌。以 Vue.js 舉例，一般具工程背景的同學大部分拿它做出網頁的資料框架，但老闆將其應用，做出互動式網頁鋼琴作品。

為了將互動式網頁進階與特效做結合，老闆開設了第二門課程，動畫互動網頁特效入門（JS/CANVAS）。在網頁設計的教學歷程中，發現從顏色、平面設計或是為了動態設計而應用到的三角函數等數學（延伸閱讀 : 來用可怕的三角函數做網頁吧! -Part 2科幻時鐘（直播筆記）），這些其實也都是 Creative Coding 應用內容。

其實，使用 Coding 的邏輯也能套用在不同的傳統藝術作品上，舉例來說，許多印象派的畫作皆由不同的筆觸重複堆疊而成，而 Creative Coding 也能使用相同的概念去創作，再應不同的創作設計出不同想法，將客觀物體經由本身的主觀認知詮釋成新的作品。也因此開設了第三門〈互動藝術程式創作入門 (Creative Coding)〉，使作品不限於視覺、聲音、投影或裝置藝術等等，是跨足所有互動相關開發的核心概念。（延伸閱讀 : 章節一 Creative Coding程式創作是甚麼）

目前老闆仍持續應用 p5.js 和  OpenProcessing 做創作及教學，前期也有在 C-LAB 工作坊作做分享（延伸閱讀：創意程式設計：Processing／p5.js教學與趨勢觀察——王連晟、吳哲宇台美連線對談）。

p5.js 的由來是一位在紐約新媒體藝術家， Lauren Lee McCarthy 所建立的，將開源式語言 Processing 以 Javascript 語言做應用，只要能夠跑瀏覽器就能創作，像是現今流行的 Sketch 和 Figma 等設計工具，就是應用了瀏覽器虛擬化的特點，不用再多安裝任何軟體，在網頁上即可進行。而 p5.js 也藉由其免費及開放資料庫的特性，降低了學習門檻，吸引更多人進入 Creative Coding 的領域。

在上半場的分享中有許多踴躍發言，以下為紀錄同學與老闆的問答：

Q：如何在實作上使用 UNREAL，操作以上所提到的效果並搭配音樂？
A：可以在每節旋律上擷取重拍的位置做效果，或是依據旋律的大小聲做變化。

Q：如何調適創作時的低潮？
A：在創作時必然有自己或他人不喜歡的作品，但還是鼓勵可以從每一次不同的產出中獲得不同的養分，變成下一個的創作靈感。老闆提供自身經驗說到創作的想法來自將日常所發生的點滴記錄下來，或者是平日感興趣的問題也能作為深入探討的目標。

Q：如何使用硬體 EYESY 來做生成式藝術？
A：藉由音樂的輸入，與程式的應用，傳導出生成式藝術。

接續上半場的應用介紹，下半場老闆二話不說實際展示了 Live coding 線上 Demo 給同學們。

p5.js 線上 Demo

本次 Demo 為介紹基礎應用，以下介紹會使用到的 API 及創作成果，使用 Openprocessing 做撰寫，各位直接點擊連結便能開始創作。

應用 API 介紹

• createCanvas(width, height)：創建畫布，參數中分別輸入寬跟高的大小。
• background(colorCode)：制定背景色，可依照文件輸入色碼參數或是基本顏色英文名稱。
• ellipse(x, y, width, height)：在 (x, y) 上繪製一個寬高 (width, height) 的橢圓形。
• circle(x,y,d)：在 (x, y) 上繪製 d 大小的圓形。
• mouseX()：滑鼠沿著左右移動。
• mouseY()：滑鼠沿著上下移動。
• frameCount()：控制每一秒產生的 frame 格數。
• random()：亂數，沒有傳參數時，會來回的隨機浮點數。
• fill()：填入圖形顏色，依照 colorMode 選擇的填色模式填入對應的參數。
• stroke()：圖形邊框顏色，依照 colorMode 選擇的填色模式填入對應的參數。
• strokeWeight()：邊框粗細，依照填入的數字大小。
• if-else：判斷多種不同條件執行。

基本程式裡分成兩個部分，setup 與 draw。前者代表在畫布上的設定，後者代表不斷在畫布上重複著畫上新東西的動作。而 function 則是指動作的集合。以下先依序講解如何應用基本 API 設定。

一、背景顏色置換示範

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("red"); //顏色名稱
}

第一步，先建置畫布，設定畫布的大小及顏色。尺寸使用 createCanvas(width, height) 在參數中分別輸入寬跟高的大小。而畫布顏色使用 background()，並在括號裡依照文件填入色碼（上）或是基本顏色名稱（下）。

二、繪製圖形、圖形大小與顏色變更示範

function draw() {
  fill('black')
  if(mouseIsPressed){
    fill('red')
  }
  stroke('white')
  strokeWeight(2)
  circle(mouseX,mouseY,mouseX+random(50))
}

第二步，畫布上的圖形建置。圓形隨著滑鼠的位置出現，大小會隨著滑鼠在 X 軸上的移動加上到50間的亂數做變化，圓形外框為白色的並且粗細設定為2。在按下滑鼠鍵時，圓形將會被填上紅色，如沒有便是黑色。

三、示範成果

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

function draw() {
  fill('black');

  if(random()<0.2){
    fill('white')
  }

  if(mouseIsPressed){
    fill('red')
  }

  stroke('white')
  strokeWeight(2)
  rect(mouseX,mouseY,mouseX/2+random(50))}
}

在這邊，我們先設置一個與視窗長寬相符的黑色畫布，並且在上方生成在不同情況下會有不同外觀改變的長方形，正常情況下，為黑色方形，外框為白色的並且粗細設定為2，而大小會隨著滑鼠在 X 軸上的移動除以2加上到50間的亂數做變化。在亂數小於0.2時，就會變換為白色方形，當按下滑鼠鍵時，則會是紅色方形。將上述 API 整合使用，便會出現以下的Demo範例。

應用以上基本教學，加上自己思索想要的圖樣，開始小試身手看看！

什麼是 MaxMsp？

MaxMsp 本身具有程式語言的概念，以 Creative Coding 應用在音樂的視覺化效果呈現。其撰寫與 p5.js 的不同在於，一般會以程式碼顯示，但在 MaxMsp 是直接以視覺的圖案的方式做呈現，將語言命令可視化成一塊一塊的圖形，再依位置的安排去創造不一樣的效果，串接出不同的流程。

如何開始撰寫呢？在打開版面後，我們能運用兩側及上下方的按鈕來做指令，或是在空白處左鍵點擊兩下叫出長方形空白格，並在空白格內打入文字指令。

以下為本次示範有使用到之按鈕與指令名稱：

• delay：接收訊號與要延遲多久，假設在delay處設定1000，等於在觸發第一個動作之後，隔一秒才會觸發接在delay後的動作。
• cycle：在這邊就代表著數學中三角函數的 sin，代表正弦曲線。
• toggle：控制物件或是介面的開與關
• scope：類似於製波器
• dac：將數位的訊號變成類比的訊號
• ~ ：代表輸出時是類比的訊號，為一連串的音訊作呈現
• saw：鋸齒波
• tri：三角波
• slider：藉由在slider上面的滑動製造出聲音
• kslider：虛擬鋼琴鍵盤
• mtof：轉換音符對應到的頻率
• function：設定 ADSR
• metro：節拍控制
• sub patch：子函數
• midiinfo：可讓 midi 裝置在 Maxmsp 裡呈現
• polyin：可一次取得多個聲音輸入

如何製造出音符？

藉由訊息傳遞數字的不同，連結上 slider 後，再藉由觸發的時間點差異去形成一顆音符。再音高上面，則可以使用虛擬鋼琴鍵盤 kslider，將鍵盤上的音符轉換成頻率，透過視波器去看再圖形上面的呈現。

對於聲音的控制，最主要的兩點為音高與音量大小，傳統在音樂合成上有 ADSR 作為進行的代表。ADSR 字母分別代表了四個不同意思，分別是Attack 、Decay 、Sustain、Release，中文意思為起音、衰減、延音、釋放。

起音：從無聲音開始上升到最大音量所用的時間。

衰減：最大音量下降到指定的維持音量所需的時間。

延音：主要聲音持續的時間。

釋放：延音到無聲音所需時間。

經由 function 撰寫 ADSR 後，我們得以此控制音量的大小，再加上節拍的控制及前面的波長頻率設定，就完成了基礎 MaxMsp 範例，將音符呈現。

再更進階要取得多個音符一次輸入的話，將上述一個音符所應用到的程式函數化，使用 sub patch 濃縮至一個圖形中。如要外接 MIDI 音樂數位介面，且多個音符同時呈現，只要設置 midiinfo 讓 MIDI 音符輸入，再以 polyin 取得同個模組多個聲音，就能製造出好玩的音樂。老闆也分享自身經驗，在前期街觸到 MaxMsp 的 noise 功能後，發現與節拍還有音符的結合創造出非常有趣的東西，因此也鼓勵同學能多方嘗試，玩出興趣也激盪出不同的火花。

新媒體藝術家與新媒體藝術未來趨勢發展

來到講座的最後，老闆分享對於新媒體藝術的未來觀點，新媒體藝術在之後還是會持續存在，不過重點是應用的軟體或平台可能會有所改變，而身為創作者，我們要如何去融會貫通各種不同的應用，以及背後的創作理念呈現的思考方式，都是可以多加著墨以應變未來變化。

例如，元宇宙，將所有3D物件都無資料庫化，以類區塊鏈的方式，將所有人的東西都在網路世界做一個副本，虛實整合，所以不論是虛擬世界及現實世界都能執行交易。也帶領傳統藝術家經由生成式藝術觸發更多不同的靈感。老闆建議，如果要嘗試開始進入新媒體藝術的同學可以從 p5.js 開始下手，或是經由觀看多位不同新媒體藝術家的作品了解應用。

Q. 數位的東西得以快速實踐以及被改變，何以說明所謂的原創？
A. NFT 其實就是以數位正本的概念去運做的，所有人在網路上的交易紀錄都能被認得與證明，清楚的說明所有權的歸屬，這也才造就價值，以限量性和稀有性。

建議從最終想要達到甚麼樣的目標，去開始思考，能從何種媒材下手運用，再來進入到可以使用哪些資源開始學習與實踐。

結語

看完影片和文章後也對科技藝術躍躍欲試了嗎？加入互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道隨時補充新媒體藝術的養份，讓我們一起探索這多元的世界！

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

這篇文章 科技藝術初階入門看這篇準沒錯!! 新媒體、科技與程式藝術創作入門講座 最早出現於 Creative Coding TW - 互動程式創作台灣站。

在活動正式開始之前，先來宣傳一下墨雨設計最近的一個徵文比賽：第一屆互動程式創作徵文賞，只要是有關互動藝術、動態網頁、人機互動、沉浸式內容、XR等主題的文章皆可投稿，單篇只要600字以上，且可以一人投多件，相關說明歡迎詳閱簡章，期待很快能在Creative Coding Taiwan上看到你的作品！

吳秉聖

現在是噪咖藝術的音樂統籌，也是一位聲音藝術家的吳秉聖，剛開始從視覺藝術以及聲音藝術這兩個領域鑽研，研究所開始研究影像和配樂，去英國交換時念了creative sound and media technology，開啟了這一段旅程。

他所任職的噪咖藝術有限公司是一個推動新媒體藝術和裝置創作的團隊，整合多種領域的專業人才和力量，參與數位藝術展覽／公共藝術、教育活動、文創空間規劃等。也正因團隊中的成員多來自不同背景及專業，能完成的作品和個人藝術家能夠達成的事情亦不相同，相對的，在創作的過程中，勢必也須要大量的溝通才能夠擦出最亮眼的火花。

現場演出／聲音裝置／聲音設計

吳秉聖的創作可以分成三類，分別是（音像或是實驗噪音的）現場演出、（聲響實驗室、美術館或藝廊的）聲音裝置以及聲音設計（包含動畫、新媒體劇場及舞蹈演出）。他並沒有工程或是程式語言的背景，而是從創意 (Creative) 出發，慢慢開始學習 Coding，在此之前也不曾梳理自己跟 Creative Coding 的關係過，謝謝哲宇與Jerry的邀請，這次從過去在新媒體藝術團隊參與的專案，以創作及技術兩個不同的層面切入，和大家分享。

（左上）之前在歌劇院的音像現場演出＜城市升溫＞，與視覺藝術家合作，吳秉聖則負責處理音樂跟互動的部分。

（右上）個人的聲音裝置作品＜脆弱的透鳴 The Resonance of Fragile＞，主要透過振動頻率讓紙張發出聲響，藉由這件作品試圖討論聲音與空間之間的關係。

（左下）近期的個人研究，波場合成系統 (wave field synthesis) 透過緊密排列的喇叭形成的一種物理特性，將聲響直接投放到聆聽者的耳邊，可以想像成是一種聲音的投影機。

（右下）聲響實驗室的波場合成系統跟大型多聲道系統整合。

延伸閱讀：C-LAB實驗波 觀察報告：聲音場景的取樣、錄製與再建置

吳秉聖常用的創作軟體為 Max MSP 及 Touch Designer ，都是視覺化的程式撰寫工具，差別在於 Max MSP 主要處理聲音或是影像，吳秉聖常拿來做聲音邏輯安排和互動裝置的串接； Touch Designer 則著重於影像處理、燈光控制、裝置整合等。下面就一一介紹幾件結合聲音、光與互動裝置的作品吧！

縫與花

＜縫與花＞是一件位在萬華的公共藝術作品，呼應萬華當地的服飾商圈，以燈光裝置將地景和在地文化縫合在一起。

裝置的曲線和地面其實分別代表著縫線和布的相互關係，以弧形為整體的基本造型，配合既有地形做排列規劃。

上圖左邊是尺寸和固定結構，燈光在正下方，地面上也有反光。右邊是整體燈光分布和距離配置，因為裝置是靜態，希望透過光的流動帶入一些動態元素，所以除了造型上有穿針引線的意象外，也以「光」來回應縫的主題。

接下來的考驗在於如何用燈光來實踐「縫」這個動詞，詮釋車縫機和拷克的動作？因為在公共場域中的燈光設計和舞台劇場很不一樣，以下做了不同的嘗試，可以看到有橫向、直向、縱錯、交錯、點狀、跳躍等的方式。

上下圖分別是程式模擬的燈光效果，以及最後到現場的呈現，其實也還是會有一些差異，但透過 Touch Designer 加一些 shader ，在進場安裝之前利用模擬出來的場景，確認好作品的視覺畫面，模擬設計得好，就能減少不必要的風吹日曬雨淋，對於戶外裝置的公共藝術作品有事半功倍的效果。

光譜印象

下一件作品是＜光譜印象＞，位於戲曲中心廣場與台灣音樂館之間廊道，同樣是地板燈光，但跟上件作品不同的是加了更多與音樂的互動。因為音樂館有豐富的音樂及樂譜的館藏資料，所以燈光上的設計希望以流動的數位化樂譜為題，使觀者與作品互動。

地板上有燈光的亮點，呼應音樂編輯軟體中，midi 訊號的排列方式。廣場上的燈光燈柱經過改裝，增加了幾個感測器還有幾組四聲道的喇叭，透過感測器觸發燈光和音樂。

在製作燈光和影像設計的過程中，需要注意不同載體的規格也會影響呈現效果：一開始在螢幕上的設計轉移到了大型 LED 螢幕搭配感測器時，或是第三階段到了現場安裝，細節可能不會和最當初的設計想像完全一樣，需要再三來回測試、確認和調整。

無限放大器

＜無限放大器＞是一件期間性的藝術裝置，以「合成器的使用方式」做為整件作品的核心概念，介於街道家具／遊具的裝置，放在台北流行音樂中心外的綠帶空間給民眾參與。

如何將互動做得平易近人，同時又富有教育意義，是這件作品最有挑戰的地方，以引導的方式引領民眾願意主動學習互動，不需要有使用合成器的底子或經驗也能寓教於樂。

由六個大小不一的金屬箱體組合成放大版的 MIDI 合成器，透過箱體上的旋鈕及按鈕可以產生多樣的音色與速度變化。六個機箱有各自不同的喇叭，當觀眾對旋鈕或按鈕互動時，對應箱體的喇叭就會針對觀眾的互動做訊號回饋。在燈光和聲音的設計上，以如何引導、給予適切的視聽覺回饋去發想。

這件裝置有三種互動的模式，透過旋鈕來選擇：一是米老鼠式的互動，一按就有聲音以及燈光的反饋；二是遊戲的模式，觀察哪邊在閃，去觸動它，就會有聲響的回饋；三是再現減法合成器的運作模式。

虹光．聲棒

位於上海的商場中的＜虹光．聲棒＞作品，從雨棒（又稱「雨聲筒」等）樂器的概念出發，傳統的製作方式即是找竹子釘上密集的釘子，放入一定數量的紅豆或綠豆，翻轉製造出下雨般的聲響。

＜虹光．聲棒＞利用玻璃柱體抬升和下降的動態來產生聲音，柱體裡面有玻璃珠、燈光、隔板，有一種沙漏的意象外，也體現了時間感的過度和流逝。

運作模式是透過排列和傾倒的方式去移動，每個整點會演出一次，因作品裝置在商場裡的關係，會有些技術面例如維護、安全性、摩擦後透光度等等需要特別注意。

演出模式的模擬動態，為了表現不同音樂的橋段還有時間，而衍生出不同的動態思考：飛行、下潛、游泳，軟（波動）和硬（計時翻動）的視覺感律動。

但其實這些不同的律動都是由各種波形堆疊而成的，右圖上半部就是說明正弦波堆疊升方波的過程，利用不同的波形來慢慢堆疊出我們所想要的動態。

下方示意圖則是從側邊去觀察動態，當波形互相作用後，會出現位移距離造成時間差的問題，圖中橘色點要移到黑色點的位置，每個裝置要移動的距離不一樣，因此就要依照每個不同的距離去分配它的速度，這也是這件裝置比較特別的地方。

此裝置主要的四個元素是「動態」、「音樂」、「燈光」、「物理聲響」，設計時會有一些提問，例如動態所產生的物理聲響如何安排在空間中？由左到右、近而遠，還是由遠而近？抑或是燈光與動態間的關係？燈光可否輔助柱內移動的粒子？還是物理聲響如何與環境中的音樂做搭配？當互動裝置放置在公共場域時，除了處理裝置本身之外，也需要思考整體環境跟裝置的融合狀態。

音樂樹

＜音樂樹＞是一件戶外樂器裝置作品，位於台灣音樂館，是一個像是大樹樹枝狀的結構，將音樂像系譜般發散出去，但樹枝末稍長了鳥屋，每間都有一隻小鳥叼著紅色的球，敲擊橘色的鐵琴發出聲響，同時在夜間也有燈光的安排。

這件作品有三個重要的元素，LED 螢幕上的動畫、樂器、燈光，利用 Touch Designer 與燈光系統溝通，用 MIDI 跟樂器溝通，再跟整棟大樓開關電的系統溝通，最後用程式將他們全部整合在一起。

大家會好奇樹上鳥屋的音階是怎麼安排的嗎？

不同音高的鐵琴有不同的長度和厚度，在製作裝置的過程中，除了決定鐵琴尺寸外，還有要如何在樹上排列，最後用旋轉上升的方式安排這些鳥屋的實體位置，中下圖的紅色箭頭呈現螺旋狀，標明了音階的關係，達到最佳的視覺及聽覺效果。

在做控制的時候，中間的流程分成三大部分：
1.程式呼叫編號，讀取完整曲目或是隨機選取樂句，判斷音高、長度、響度後送給機構做動作；
2.機構動作，會有行程差異、裝設位置差異、物理特性（重力／慣性）、機構設計差異等；
3.樂器發聲，視敲擊的材質、角度、力道、位置而定，即使是用一樣的力道敲打同一個鐵琴、同一個音鍵的同一個位置，兩次都不會是完全一樣的聲音。

登月計畫

暫時性的裝置作品，當時設置在流行音樂中心。流行音樂是最接近大眾的音樂形式，透過大型互動樂器裝置，加上現場複合式的演出，以張雨生跟月球為主題延伸出來的作品。裝置上布滿各種樂器：爵士鼓、鐵琴、木魚、鈸等，除了樂器之外還有燈光的安排，因燈具數量龐大，如何串接、編碼，同時又顧到樂器驅動的工作，需要蠻多時間一一處理。

有趣的經驗想跟大家分享：用程式寫聲音創作的時候，想要它甚麼時間點觸發都可以輕易設計，但若是在真正的、物理的樂器上，觸發後會有一個反應時間，每一種樂器的動態機構不一樣，觸發反應所需的時間也不盡相同，所以程式中編好的音樂，在真正的樂器上演奏時，會是完全另外一回事（嚴重到創作者也認不出來的地步。

因為不是程式背景出生，這次分享的作品如同先前提到的，多使用 Max MSP 及 Touch Designer 等視覺化程式語言編寫工具創作。

視覺化程式語言的優勢，是能夠「快速」將需求「達到目的」所使用的工具和手段。只需要一些程式背景知識，就能夠製作；又有點像流程圖，在檢查時能快速理解流程和邏輯，對於視覺或設計背景的人來說，是學習程式的入門。

相對的它也是有缺點，簡單的邏輯卻需要很繁雜的串接才能達成，有可能一行程式碼就能解決的問題，視覺化程式語言要上百條線。

不知道讀到這裡的你，對聲音設計或是互動裝置是否更加好奇了呢？附上吳秉聖的相關連結看看他在 Fxhash、Oursong 等不同平台上發表的更多有趣的作品囉！

五月社群聚的下集則是由張文瀚分享 fragment shader 的有趣創作思維，以及三位 lightning talk 根據這次的共創主題「山」帶來的創作分享。>> 文章這邊請：五月社群聚（下）：張文瀚教你用數學作畫 GLSL fragment shader

還不知道如何開始踏入 Creative Coding 嗎？那 Hahow 課程 ＜互動藝術創作程式入門＞再適合你不過了，快加入2000位同學的行列，一起學習互動藝術創作吧！

整理編輯：Chia 編

這篇文章 五月社群聚（上）：吳秉聖的聲音、光、裝置與創意程式 最早出現於 Creative Coding TW - 互動程式創作台灣站。

中篇 初次見面請多指教！Creative Coding第一次社群聚（中）Hoba與叁式的演算視覺邁進之路 則是由叁式互動新媒體的技術美術Hoba帶來演算視覺的應用，不藏私揭露叁式近年來精彩的作品幕後祕辛，以及另一位與會的創作者張文瀚帶來作品 <Wormhole>分享。

下篇則是由 FAB DAO 的黃豆泥讓大家一窺＜沒有市場的靈魂綁定NFT＞又是怎麼一回事（影片從這裡開始看），以及第三位創作者 Mizok 帶來他的<Universe-alpha>及<Universe-beta>（作者展示）。

我的PFP是一隻雞，我叫黃豆泥

豆泥是江湖藝名而非本名，元宇宙裡大家都喜歡用 PFP (Profile Picture) NFT 當個人頁的大頭照，我是一隻雞，我叫黃豆泥。

去年還在當醫師時，就買了哲宇的 Hahow 互動藝術程式創作入門的課程，到現在只聽了四堂課，大家都知道，一個班級裡有成績很好也有成績很差的同學，黃豆泥完全可以被歸類在沒聽課、成績超爛的壞學生之中。後來離開了醫界，想要開始認真學習 p5.js，上了王連晟老師的課程，號稱上完四個星期的課程後就可以在 fxhash 發行作品了，但我到現在都還沒有。

既然自己沒有辦法成為一個合格的創作者，那就成為一個瘋狂的收藏者吧！在這半年間，我買了超多跟生成式藝術相關的 NFT 大約六百多件。我在過去幾個月，一直在看生成式藝術的市場，從幾十幾百塊台幣就可以入手，但便宜的也可能價值翻倍、一開始貴的也可能身價下跌。

今天我要分享什麼是生成藝術的 NFT，有甚麼樣的形式，但今天我特別想講的，是那些不會紅的生成式藝術，也就是所謂的靈魂綁定 NFT。

話說從頭 – FAB DAO

在這之前，要先吹捧一下哲宇，身為生成式藝術家，賣了很多 NFT，但生成式藝術家是否能為台灣做一些事情呢？可以，我和哲宇一起創立的 FAB DAO，中文名稱福爾摩沙藝術銀行， FAB DAO 想做的事情是藉由區塊鏈或是 NFT 等新技術，幫助非營利組織，特別是公益團體及文化團體發行 NFT，一方面做文化保存，另一方面開拓新的募款管道。台灣目前還沒有人做這個事情，但我們有一群人在這裡努力研究開拓。組織是由哲宇去年在 Art Blocks 上賣的系列作品 Electriz 所賺進的十顆乙太幣資金成立，萬一你們之後發達了、想為台灣做一些好事，歡迎來找 FAB DAO。

生成式藝術NFT？

現在來用哲宇的作品 SoulSea 簡單介紹甚麼是生成藝術的 NFT，這一張是我收藏的第 251 號 SoulSea ．每一件生成藝術作品在 fxhash 平台上，一個生成藝術就有一個種子碼，一個種子碼就是一個獨一無二的 NFT。這件作品就是一個蠻常見、經典的生成式藝術作品形式。

大家可能會好奇這個網頁下面為什麼會有火焰，現在（註：活動日期為 2022 年 4 月 14 日）是 fxhash 從 beta 版要升成為正式版的過渡期，big burn 就是指他們把目前 beta 上未鑄造完成或是未賣出的作品全部燒光光。fxhash 正式版已經於四月中上線，全世界的知名生成式藝術家都磨刀霍霍，準備上新作品了，平台的功能也會與 Art Blocks 大相逕庭，哲宇接下來又會有甚麼新作呢？敬請期待。

fxhash又是什麼

簡單介紹 fxhash ，這個平台有點類似 Art Blocks．完成上線的程式碼會成為一件生成式藝術作品，去鑄造（mint）的時候會隨機獲得一個種子碼，產生一個新的 NFT。這些 NFT 可能會有一些特色（features）、屬性，也可能沒有。

我收藏的另外一件作品 California Hills in Late Sun #38 ，我非常喜歡她山坡紋理的呈現，也因為經由獨特種子碼產生，作品也是獨一無二、可以拿去販售的。

再舉一個很ㄎ一ㄤ的案例，作品名稱為 Anaverse – forbidden city ，每個人會鑄造到屬於自己的城市或說是宮廷，相異的特色包括大小、作品名稱、建築和水池的數量等等。這個宮廷特別的地方在於，是可以進入到這個空間裡互動的，點擊官網、確認已連結到你的錢包之後，你就可以在你的宮廷裡走來走去，把這件生成式藝術作品直接變成虛擬展場空間，擁有者甚至可以掛所收藏的其他 NFT 等。

同時作為生成式藝術作品也是虛擬展間，最有名的虛擬展間是Oncyber，可以買下一個他人已做好的 3D 空間，掛上自己的收藏，這個展場本身就是藝術品，在藝術品中又能放進更多藝術品而成為一件新的策展作品，不斷堆疊出新的概念，繼續成為新的生成式藝術 NFT。

大家在坊間最常見的 NFT 作品形式是 PFP ，看起來不怎麼樣但背後也是大有學問。這個頁面是我所收藏台灣插畫家川貝母發行的 NFT，每個物件雖然是預先畫好的圖像，藉由程式的隨機性做堆疊，成為了不同排列組合的頭像圖片。一般常見的 PFP 也都是相同的概念，廣義而言算是生成式藝術，狹義而言只是從一個資料庫裡抓取元素生成。

靈魂綁定的NFT就沒有市場？

終於進到本次分享的重點：有沒有 NFT 是真正靈魂綁定且無法交易所以沒有市場的？我認為有，且也有許多人在做這些實驗。先前分享的作品案例都是屬於下圖左邊的這一類型，也就是說作者寫了一段程式碼，在購買程式碼的過程會生成 NFT ，透過種子碼讓作品成為買家專有的。可以留著或坐交易，在賣掉的過程中，種子碼會跟著 NFT 一起轉交給下一位買家，所以不管是在稀有度、視覺體驗上，每個人都可以去複製。也正因為這樣的設計，從去年到現在非常的火紅，是因為可以做交易。

那有沒有反交易的 NFT 呢？其實是有的，就是上圖右邊這一類型。今天有一串由創作者寫好的程式碼，鑄造成一個版次很大的 NFT （十版或上百版），買家是買到同一個 NFT 可是每個人在買 NFT 的時候，因為每個人的錢包地址都不同，這個代表錢包地址的一串亂碼在加密貨幣及區塊鏈的世界也就是代表某一個人（的錢包），把地址當成種子碼置入 NFT ，也就是說， NFT 會跟著你的錢包地址而變動，生成獨一無二的作品。

當我們買到一個 NFT ，只有我看得到我所看到的圖像，當下一個買家買走一件作品，重新綁定他的錢包地址，他看到的作品跟當初我所擁有時的樣貌不會一樣。我們無法交易這個經驗，除非截圖，但截圖儲存和分享，就失去了交易這一個環節。

這就是我們所謂的靈魂綁定，他跟你的人生經驗是綁在一起的，除非你再去開另一個錢包，把 NFT 傳過去，這時候才會有另外一個經驗的產生，但屬於你的經驗仍舊屬於你，直到你將錢包的帳密移轉給他人為止。

南藝大的林經堯教授發行的 Evil Bean 正是一個例子，黃豆泥剛好鑄造到一個醜到賣不出去的 NFT ，看起來很稀有卻是賣不掉的。回到林經堯教授的頁面上看其他的作品，一開始發布時的預覽圖是十六顆彩色邪惡豆豆以及一串地址，也可以看到其他被鑄造的 NFT 樣貌，有一些是由他自己手動鑄造出來的。

另外一件案例是藝術家黃新跟台灣當代藝術館當期的展覽《蓋婭：基因、演算、智能設計與自動機＿幻我；它境》所做的合作，這個案例能夠真正詮釋我所謂的靈魂綁定 NFT 。沈伯丞為策展人，討論科技、生物及未來的技術，只要新台幣五十元就可以看到國內外數十位藝術家的作品。

NFT 作為展覽展品目前仍為少數，而黃新為此次展覽「蓋婭：基因、演算、智能設計與自動機＿幻我；它境」做了新的一個 NFT 藝術品：展覽門票，他的賦能是只要花一百元買這張 NFT 門票，就可以無限次進場看展。這個東西有意思的地方在於，門票的「材質」呈現會因人而異，每個人因錢包位址不同，所鑄造出來的都會不一樣，像豆泥自己的看起來很像竹影飄搖的感覺。因為同一個 NFT 換人擁有就會大大改變他的樣貌，於是所有擁有這個 NFT 不同版次的人，都會將自己的 NFT 截圖後上傳至台灣當代藝術館粉絲專頁上，創造大量的留言。

經驗無法複製，很像當代藝術在討論的議題「靈光 Aura 」，由藝術家班雅明在攝影機剛發明的時代，討論藝術是否因為機械複製，而導致靈光消失？創作的靈光是否因為大量的複製，是否亦會消失？回過頭來看 Creative Coding、生成式藝術， NFT 的出現，讓創作透過種子碼製造的隨機性、自動性產生新型態的互動，還沒有大量的被當代藝術的世界中討論，但會是未來的趨勢。

其實生成式藝術並非完全是大家看到的樣子，還是有一些反市場的、非主流、實驗性的東西，FAB DAO 這個組織也在做非常多的嘗試，也希望有更多志同道合的人一齊加入。

Lightning talk 3 – Mizok

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

<Universe Alpha>

<Universe Beta>

作品連結：https://mizok.github.io/generative-art-playground/#universe-alpha

創作主要是在表達自己心裡的意象，可能是淺顯或埋較深的，＜宇宙＞這個主題會讓我立即聯想到星空、星雲，於是便用程式將他做出來。主要的技術為 ejs & typescript & scss，首先利用柏林噪聲、簡單的粒子系統以及 p5.js 裡的 random() 達到完成星雲，再使用預渲染及分層選染的方式算出圖樣，類金屬的光澤和質感由漸層加上 Blend mode 實現，On frame draw 再逐針疊上亂數生成的星星。

若你還沒有讀過前面的精彩內容，現在還來得及收看：
初次見面請多指教！Creative Coding第一次社群聚（上）吳哲宇的生成式藝術宇宙
初次見面請多指教！Creative Coding第一次社群聚（中）Hoba與叁式的演算視覺邁進之路

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

四月的 Creative Coding Taiwan 社群聚會在這邊告一個段落，不知道大家有沒有跟 Chia 編一樣收穫滿滿呀？五月的社群預計在5/12(四)舉辦，有興趣的朋友歡迎加入我們的臉書社團，第一時間接收活動報名消息，希望不久的將來，就能看到你跟大家分享你的生成式藝術創作囉！

整理編輯：Chia 編

這篇文章 初次見面請多指教！Creative Coding第一次社群聚（下）黃豆泥：沒有市場的靈魂綁定NFT 最早出現於 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 - 互動程式創作台灣站。

本次，主辦單位以 <創意程式設計——Processing／p5.js教學與趨勢觀察> 作為第一場對談活動主題。

時間：2021年10月21日
與談人：
– 國立臺北藝術大學新媒體藝術學系專任講師、科技藝術創作者 王連晟老師
– 墨雨設計創辦人、跨領域新媒體藝術家 吳哲宇老師

Processing為一種開源式語言，最初的目的是希望能以視覺化的方式幫助非程式設計師學習程式語言，而後演變成在電子藝術或是互動式設計上都能發現其應用。至今，Processing已發展了20餘年，目前版本更新至 4.0 BETA版，在使用上能明顯感受過程大於成果的體驗，也因為對於社群的支持程度相對較高，當使用者在分享與互動的過程中讓更多人能進入此領域，創造出更多元與突破自我的作品。

在Processing的官網上能做初步的了解及下載，擔心英文無法做深入了解的同學，搜尋「Processing基本介紹」也會有中文的學習資源參考。

而p5.js即是將 Processing 以 Javascript 語言做應用，使其可在網路瀏覽器上進行直接創作，免費及開放資料庫的特性，降低了學習門檻，也吸引更多人進入創意程式設計 Creative Coding 的領域。（延伸閱讀 : p5.js快速上手:互動網頁教學）

利用Processing及p5.js展現新媒體互動程式結合藝術，已成為現在的新興潮流，此次的線上對談中邀請到王連晟老師與吳哲宇老師分享對於此趨勢的觀察與教學發展，引領大家進入創意程式設計的世界！

Processing的教學與趨勢觀察

以資訊工程為背景的王連晟老師（以下稱王老師），在就讀臺北藝術大學科技藝術研究所時期即投身於數位藝術研究，也有許多國際電子藝術節參展或交流的經驗，作品跨足互動裝置到聲音表演（如：波動現象），教學方面，前期主要開設短期工作坊為主，遍布台、中、英、日、法、西、德等國，近期則以學校教學為主，包括中國地科技大學及廣州美院，現則回到母校任教。

創作，而不是學習語言；思考方式而非技術

目前王老師在教學上以Processing為主，其具有容易安裝、對於各類型的開發環境皆友善、能快速開發Prototype和學生能快速進入語境等特點，適合應用在工作坊教學或是製作期較短的專案。像是和致力於實驗聲音影像藝術的非營利組織 噪流Fluid Noise 合作的課程中，帶領學生在一到兩個禮拜的時間內，完成融合影像與聲音的創作（課程作品觀賞 : A/V 衝刺班 – 噪流實習 vol.1 Fluid Noise in Practice vol.1）。

在教學的過程中，因為現今的網路便利性，查找到相關教程影片並非難事。也因此希望學生再加入更具有原創性的設計在作品裡，將每次作品以物件導向做思考，了解程式碼在應用時，實際在處理甚麼樣的問題。不論是從基礎的程式基本知識、體感遊戲規劃或是不同介面溝通，到進階的資料結構與演算法，都是為往後更大的專案串接做提前的練習與準備。對於之後的課程規劃上，也期許能在 Javascript 、 p5.js (2022「衍生藝術p5.js研討會」工作坊) 及 NFT的發展做更多著墨 ，著重在教學與活動上面的應用聚焦。

p5.js的教學與趨勢觀察

而學習過程中一路與數位創作與發展相關的吳哲宇老師（以下稱老闆），從電機到整合數位媒體碩士的經歷，讓老闆開始探索藝術與工程的邊界，發展跨領域新媒體藝術。近年致力於推廣程式藝術，像是在 HaHow 好學校開設以實戰易上手 p5.js 課程〈互動藝術程式創作入門 (Creative Coding)〉，引領同學們進入程式互動設計的世界。

身為一位新媒體藝術家，老闆不單單只使用 p5.js ，也涉略了如 Unreal引擎、VR 等結合多種軟硬體的藝術程式應用，乍看是不同平台、語言，實際上邏輯都是相通的，程式撰寫只是一種創作方式，皆能互相應用（老闆的作品集這邊看）。

在初期的教學課程裡，老闆在HaHow好學校開設使用 Codepen 製作的 動畫互動網頁程式入門 (HTML/CSS/JS) 及 動畫互動網頁特效入門（JS/CANVAS）。在網頁設計的歷程中，從顏色、平面設計或是為了動態設計而應用到的三角函數等數學，這些其實也都是Creative coding應用內容。

Creative Coding顧名思義是一種以程式創作來表達的藝術形式，表現方式不限於視覺、聲音、投影或裝置藝術等等，是跨足所有互動相關開發的核心概念（延伸閱讀 : 章節一 Creative Coding程式創作是甚麼）。比起傳統脈絡切入的規律程式撰寫（例如:C++），應用p5.js創作Creative Coding會比較彈性，較沒有經驗的同學也能在一兩個月的時間內上手，進而開始從Canvas轉而使用p5.js，增加撰寫的效率。

目前教學以短期的線上課程為主，帶學生了解Creative Coding如何應用，，以商業應用的案例或是程式創作領域的應用想要生成的效果為導向，鼓勵學生以成果反推回需要學習的技術，加上p5.js開放式資源的特性，關鍵字查找十分方便，提倡不必死背也能運用線上資源創作。

對於工程師來說，設計靈感來源常成為一個瓶頸。老闆鼓勵大家從生活中獲取靈感，並舉例知名Youtube頻道 The Coding Train，藉由每天的特定主題進行Coding創作。而老闆也在自己的老闆來點寇汀吧Youtube頻道上傳相關教學影片，以實際操作呈現給學生（延伸閱讀 : 【p5.js創作教學】CreativeCoding花火大會(直播筆記)），照著直播影片上的教學操作，快速了解程式碼對應的呈現效果，及適合的工具及語法。

老闆擷取了擔任助教期間的教學經驗，會根據學生是否有程式相關經驗，給予不同的教學方式，也提供了線上課程與筆記教材，使學生在針對想要完成某個特定效果時，能夠更快找到相對應素材。在教學技巧上，一貫的實作導向，將較複雜的觀念以平易近人的範例類比講解，像是將畢卡索的畫作解構成不同角度的平面幾何組合，直接以設計的角度切入，並拆解成簡單的步驟元素，一步步地以程式語言建構創作。

上述各種p5.js程式教學分享，都說明了其蔚為趨勢的原因，也因為能多方對接，在實際商業應用，瀏覽器虛擬化上的成長上已逼近原生。最佳的實際應用案例莫過於 墨雨設計工作室 的網站，利用了Vue.js將許多動態的作品呈現，透過不同的案例展現，讓學生能對設計的應用更加了解。

對於生成式新媒體藝術的發展與未來，老闆十分樂觀，認為p5.js的效能優化加上商業案例的增加，將有效推動潮流。像是知名生成式藝術平台 Art Blocks 上的作品大多都是以p5.js寫成（延伸閱讀 : 最頂級的NFT藝術市場「art blocks」，策展專售生成式藝術），甚至在平台上，有些原先不熟悉生程式藝術的藝術家，也開始使用p5.js將原本熟悉的創作主題轉化成生成式藝術作品。在未來的教學演化上，希望往實戰型的職訓班方向前進，也會持續在Youtube上面更新教學影片，累積大眾對於相關知識的學習基礎，期望帶領更多人認識生成式藝術。

其他相關學習資源：
Creative Coding TW – 互動程式創作台灣站
老闆 來點寇汀吧。 Boss,CODING please. 臉書
老闆來點寇汀吧 Boss, Coding Please IG
老闆 來點寇汀吧YouTube頻道

創意程式設計在業界與學院內的教學

曾在中國進行新媒體藝術教學的王老師提出，中國的學制比較像是一個又一個的短期高強度衝刺班，而臺灣學期制、分散成18週的教學方式易導致大學部的學生多數學習動機強度不一，許多人對於自己真的想要創造及探索的東西都具有相當大的困惑。老闆也回應在紐約大學擔任助教時有過相似的經驗，在課堂上，每位同學都會發表作品，著重在討論作品的進行。但因大學部學生技術部分並沒有非常深入，只會提供一些補充資料學生自行學習。相較於業界內容易帶入技術學習，在學院裡或許可以回到更多程式撰寫觀念上的討論，將創意程式設計的想法提供給學生，引導出學生對於課程乃至於創作的興趣。

NFT作品上架後，能如何經營?

「如何引導學生參與技術社群交流？今日網路與社群上資源蓬勃，學校老師的功能有會變動，老師如何調整教學？」在對談的尾聲，臉書直播留言中有人問了這個問題。

目前創意程式設計最多人矚目及討論的商業應用即是 NFT。王老師認為可以在課堂上可以透過實際參與 NFT 的上架後，再針對作品及相關問題做討論，學生將更深切了解社群、藝術品與商業界更密切的關係。老闆也分享開始做NFT以來的心得，從作品被竊取後開始發展的社群（延伸閱讀：NFT故事集：用程式碼畫畫賣出一億元的臺灣人），包含 Twitter 與 Discord 都是現今經營 NFT 的主要市場。不論是持續的作品累積、社群宣傳互動與後續流量追蹤，都會成為成功經營與否的關鍵。

無論是王老師或是老闆都肯定，將市場實作成為課堂的一部份，帶入學校裡最能提供的討論空間，將有助於未來因應趨勢發展而改變的教學方式。

另外，也有聽眾提出「如果想用 Coding 創造聲音&音樂，會推薦學 p5.js、Processing 還是有其他推薦軟體嗎？」p5.js 有提供ADSR相關設計的簡易版本，包含基礎聲音顆粒、節奏或是音色等等；進階的創作可以考慮 MaxMSP，初期從聲音設計、波型與數學計算等開始了解，漸漸便可以玩一些有趣的聲音互動。

結語

無論是使用 Processing 還是 p5.js ，不變的是背後的概念。與談之中，王連晟及吳哲宇對於創作邏輯的分享，對程式軟體的演變，提醒我們不斷地學習 ，並保持精進與開放的態度。

以上就是 2021 C-LAB未來媒體藝術節臺美連線的第一場對談- <創意程式設計——Processing／p5.js教學與趨勢觀察>的分享！

對於Creative Coding感到十分有興趣嗎？歡迎訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube頻道或是加入互動藝術程式創作入門課程來更深入瞭解創意程式設計吧！

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

這篇文章 創意程式設計：Processing／p5.js教學與趨勢觀察——王連晟、吳哲宇台美連線對談 最早出現於 Creative Coding TW - 互動程式創作台灣站。