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

Nyan Cat ©Chris Torres via GIPHY

在疫情拉開實體距離的這段日子，「線上化」是維持著人與人之間聯繫的一大功臣。拜疫情所賜，藝術界的交易也掀起一股改變的浪潮──透過NFT這樣的加密技術線上競標、拍賣藝術品。如果是近期有在關注老闆動態的大家，對於這個詞或許會有一些些印象，今天就來聊聊NFT這個神奇的東西，以及老闆如何踏入NFT這個新興的藝術市場交易形態。

什麼是NFT？ 如何運作？

NFT ：非同質化代幣（Non-fungible token），簡單來說概念就是「數位正本」。在傳統的藝術市場中作品之所以可以交易、販賣、或有投資價值，是因為我們有辦法認知它的所有權是誰。假設你有一幅畢卡索的畫，因為是實體所以他在數量上具有獨特性（世界上只有唯一一幅），但在數位藝術的世界中以往是無法確立這件事的。當我們下載一個圖像、一首音樂時可以複製很多份，導致「正本」這個概念難以存在。現在有了區塊鏈的技術，我們可以透過NFT來做到「數位正本」以確保作品的唯一性和所有權，進而創造了數位的交易市場，讓藝術作品可以透過電子化的方式被交易與收藏。

透過NFT我們可以知道這件作品的總量是多少、持有者是誰，畢竟區塊鏈這個技術就是把所有資料儲存在不同的節點上，包含被交易到哪裡去等資訊，當大家都持有這些資料時，就像有一個具有全球公信力的機構去背書這件事情的存在，公開且透明。

擁有一個加密錢包帳號是必備的前置作業，若是沒有加密錢包，則你無法在任何NFT交易平台上進行買賣交易。以OpenSea這個平台為例，用戶若是想要購買任何作品，皆需要用以太幣作為付款貨幣，因此在註冊完加密錢包後需買入一些以太幣（ETH）。上述都準備好後，就可以選擇一件喜歡的NFT作品購買完成下單。

接觸NFT的契機？

稍微介紹一下身上掛滿各種title的老闆背景，從在台灣創立墨雨設計工作室，與故宮、工研院等單位合作專案、接著前進紐約進修整合數位媒體相關碩士，現在在美國同時身為全職藝術家和兼職互動設計師。在偶然一次與學長的交談中談到可以嘗試將生成式藝術的作品上架成NFT，於是就上架了20幾個作品到最大的 NFT 市集公海 OpenSea。一開始並沒有引起多大的迴響，直到其中一個小機器人遭到他人抄襲並上架至Artblocks販售，雖然是一個不怎麼愉快的作品瓢竊事件，卻直接讓老闆的作品在市場上刮起一陣炫風，進而爆紅。（延伸閱讀：NFT故事集：用程式碼畫畫賣出一億元的台灣人）

有哪些NFT相關平台？

目前市場上可以分為主要的四大平台：

OpenSea – 「這裡是公海！」如果有看過賭俠的朋友或許對這句話很熟悉，OpenSea正如其名可說是最自由的NFT平台。他是最基礎的底層架構，提供各種數位資產和支援多種的支付代幣，並且可以免費註冊和瀏覽廣泛的產品。他有點像是市場本身，裡面住著大大小小並有各自特色的攤販（Foundation、Artblocks）。對於NFT世界的初體驗，OpenSea是一個很好的起點。

Artblocks – 專注於策劃可程式設計生成藝術作品的平台，這些作品通常使用 p5.js 進行程式設計。目前平台上的作品分為三種類型： a. Curated Projects (策展專案) – 由平台方精選作品所做一系列的策展計畫，主要目的在於挑選出符合平台主旨的作品，也就是尋找世界上最有趣、最創新的生成式藝術。 b. Artist Playground（藝術家遊樂園）- 一旦作品曾被選入過curated projects ，藝術家便拿到通往playground的門票，在這裡藝術家們被鼓勵嘗試更實驗性的作品。 c. Factory（工廠）- 上述策展專案等通常需要經過一段長時間的發酵作品才得以登台供大眾欣賞，對於一些藝術家來說，透過factory能更容易快速上架一系列作品。 （延伸閱讀：A Brief Guide to Curated, Playground, and Factory Projects on Art Blocks）

Foundation – 以販售單張靜態作品為大宗，經營的概念與氛圍較貼近展場或藝廊。與其他「申請審核制」的平台不同，Foundation 是一個邀請制的 NFT 藝術平台，只有受邀請的藝術家的作品才能被上架。

Rarible – 作品型態比較像是Gify、imgur，通常較數位化一些，也比較多以Gif的形式呈現。

有哪些不同性質的NFT？

最傳統的有單張的圖片，稍微進階一點可以上傳影片或Gif，這些也是滿受到歡迎的作品格式。當然像我們在推廣的生成式藝術也是常見的作品型態，但考慮到生成式藝術的特殊性，如果只有單張圖片的瀏覽會有些可惜，也失去了他是用程式產生渲染的本意。Artblocks便推出了Preview API的功能，把程式碼放在區塊鏈上打包，透過iFrame鑲嵌程式碼進去可以有一些動態、互動性的網頁型呈現。當然像是3D、音訊檔等，也是藝術家常選擇的表現手法。正因為NFT本身的多元性不只有生成式藝術，如果你是插畫家、音樂家其實也可以透過平台直接上架，甚至有些平台如Foundation也提供split等收益分成的功能，鼓勵不同的藝術家合作創作。

https://oncyber.io/

有哪些知名的藝術家？

對於剛踏入NFT世界的朋友來說，這邊推薦幾個不錯的藝術家給大家：

• Dmitri Cherniak – 元老級NFT藝術家，最知名的為Artblocks上的Ringer系列作品。 https://www.artblocks.io/project/13
• Tyler Hobbs – 早期在紐約經營很久的生成式藝術家，知名作品為Fidenza系列。 https://tylerxhobbs.com/
• Cryptopunk – 8位元風格像素的龐克角色，每一個都外貌奇特。 https://www.larvalabs.com/cryptopunks
• 阿亂 – 投身數位藝術創作十餘年的台灣藝術家，知名作品為具有時間性的影音創作Good Vibration。 https://www.artblocks.io/project/140

NFT的附加價值

以往藝術交易是一個窄門，需要有門路、有人脈、與藝廊簽約等等資源，才能夠開設自己的個展或販售自己的作品。透過NFT平台，藝術家可以繞過需要跟藝廊簽約的限制，即可公開地販售作品，可以掌握自己的品牌經營，並達到數位平權。

隨著NFT的市場白熱化，也有一些延伸的遊戲話社群如Axie Infinity的出現，將遊戲內的角色製作成一種NFT，遊戲圍繞收集，繁殖，戰鬥和飼養名為Axies的幻想生物為中心。

老闆與NFT

前面介紹了這麼多NFT的相關背景故事、知名的藝術家等，現在我們來聊聊老闆的NFT作品，還有踏入NFT後一路上遇到的各種奇聞軼事。

老闆的NFT可以分為兩種路線：精緻風與迷因風。通常比較精緻的作品會上架在FOUNDATION上，而比較趣味、迷因感的則是上架在OpenSea上。

如果有關注老闆NFT動向的朋友或許對於盜圖事件有些熟悉，這邊還是稍微介紹一下整件事情的來龍去脈。某天老闆在IG收到一個陌生私訊表示有人竊取他的作品Strange Robots系列並上架到Artblocks。這個系列名為 sail-o-bots，由 Sturec 與其夥伴打造，作品內容為 750 隻在海中漂浮的方塊火腿，所以簡稱 SeaHams 海火腿。當時這系列上架時受到熱烈歡迎馬上銷售一空，但當瓢竊的事實爆發，許多持有者紛紛低價拋售，也有許多人藉由此機會關注到老闆的作品，進而支持和聲援。

未來的創作計畫

近期老闆這邊也與Artblocks如火如荼地討論一些有趣的新企劃Electriz，近期將會上架至Artblocks。作品的主要概念為粒子與空間的互動，傳統物理學中科學家利用撞擊等方法試圖找出世界上最小的單位，然而粒子之微小要如何監測呢？我們利用煙霧讓粒子留下運動軌跡，經由這些粒子的半徑、質量等去判斷他是否為新的粒子。這個作品把根據圓周或隔線切成不同的部分，每個空間裡面有自己的物理法則，有的會旋轉、有的會有噪聲，粒子經過這些不同的影響，進而留下不同的軌跡和表現。

這系列的作品已經台灣時間 2021/12/08 凌晨一點開賣，歡迎有興趣的朋友持續發摟唷！

作品介紹：https://cheyuwu.com/nft

Artblocks：https://www.artblocks.io/project/216

以上是這次老闆週六來聊聊的內容，希望大家看完後也可以加入NFT這塊汪洋藝術之海，直播影片請往這裡走，我們下次再見啦！

這篇文章 【老闆週六來聊聊】我開始賣NFT作品啦！生成式藝術在NFT的價值 最早出現於 Creative Coding TW - 互動程式創作台灣站。