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 - 互動程式創作台灣站。

本篇文章則是由叁式互動新媒體的技術美術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 - 互動程式創作台灣站。