靈魂魚的製作過程：【p5.js 程式創作】Soul Fish 數位永恆生命的靈魂魚 – 製作過程

大家好，我是生成式藝術家吳哲宇，四五年前我開始製作動態的數位藝術，像是互動網站、平面設計等開始對踏入互動設計的領域，後來研究所到了紐約 NYU 互動媒體學系讀書，因此認識了 Creative Coding 這個領域而深深著迷，發現程式也有很多的可能性，不僅是為了設計或是達成目標而存在，而是寫程式的本身即是藝術。

在這篇文章中，我想跟大家介紹為什麼會製作靈魂魚，如何透過多重感官觀賞作品，他的完整故事與設計，以及在視覺跟聽覺和互動上的巧思，曾展出的空間形式和未來期待繼續發展的方向！

我曾製作了很多互動型態的作品，像是 CryptoPochi 或是 Seahams，也曾在 Foundation 平台上嘗試傳統繪畫手法探索美術館質感的作品，我發現我最喜歡的是能夠製造有機的狀態，意味著作品的本身的隨機性除了表現在初始屬性之外，也隨著動態生長讓作品在執行的過程中有一定的隨機度，例如粒子的軌跡是由每個時刻的亂數累積決定的，最後繪製成一個完整的作品，得益於亂數原理與現在的區塊鏈技術，我們能夠確保在同一個數位作品中，完美而精準的重現隨機過程，這是我覺得最迷人的部分。

永恆的生命是什麼樣子？

剛開始想到製作靈魂魚的時候，我的靈感來自於深海生物，他們的形體透明的浮游在水中，通常會有一些自己的發光器官來照亮周圍的環境，我覺得這樣的有機感很迷人，也很喜歡一些像是光暈、觸鬚般物理上的物理模擬動態，因此想來以深海魚作為主題來創作一個作品，我想要創造出深海中精細結構帶有透明狀態的魚的感覺，這些魚像是靈魂似的漂浮在幽暗的水域中，因此取名為「靈魂魚」，這些魚能夠永恆的存在與游動，不跟著時間的進行而逝去。

靈魂魚其實也同時取名自我自己的名字 – 吳哲宇最後一個字，他們靈魂魚誕生於虛空之中，在各式各樣的情緒凝結，在深海中誕生，他靜靜的在那邊帶來平靜，自己游著，有些靈魂與全身長滿了亮麗的鱗片，有些則默默地緩緩地飄動，身軀幾乎消逝於深海的光線中。

如何去繪製魚柔軟有機的形體呢？

在製作初期，我仔細的觀察後發現，魚的形狀類似於一個波(sin/cos)的前半部所有狀態疊加的形狀，所以如果我把一條波的線條擷取出來，上下透過不同的比例複製重複，就能夠繪製出外觀。

過程中除了計算一個一個點的精確位置之外，也確保不會死板的加入了不同頻率，也就是不同大小的波來建構形體，如果加上了時間函數讓他們慢慢的交錯移動，就能夠形成魚的動態質感。每一個點都有額外再經過噪聲跟波形處理，來創造靈魂般不穩定的形體跟質感，最後再加上從身體到尾部的波狀動態，產生出空間中尾巴來回擺動的效果。

使用波狀函數、自然噪聲以及物理模擬

我製作的第一個版本看起來像實心的卡通魚，接下來逐漸改的透明、加上shader背景，讓所有的線條跟筆觸在繪製時，能夠帶有透明度的重疊，也逐漸加入細節 像是魚骨頭、鬍鬚、魚鰭、尾巴等設計，為了創造出有機感，我混合了材質、形狀跟很多的結構設計，包括中心的魚骨頭一節一節的可以動、生命線的鬍鬚是由20幾個點透過鎖鏈物理模擬的形式來控制，與尾巴跟魚鰭的薄膜每一條線條，都透過精密的計算擺動隨機性的設計，每一隻魚都會有不同的線條數量、大小跟身體結構。

顏色設計上，我讓魚可以橫跨所有的光譜，並且在每一隻魚中，都會有類似泡泡表面的色偏質感，也讓他們的顏色更為有機，隨機性的產生了所有的顏色數值之後，我讓他們再對應到相對的顏色的名字。顏色上會有兩個主要的顏色過渡來建構一隻魚的形體，來確保能夠產生和諧漂亮的漸層，我想要作品呈現出類似極光般的質感以及擁有漂亮的光暈，因此用不同的顏色模式重疊了幾次混合，模擬用光線作為筆觸來去繪製靈魂般的小生物。

另外也有一些魚是白色背景的，小時候的我很喜歡生物科學，不同於黑色背景螢光的效果，白色的背景更像是顏料暈染，也很像小時候在做標本時，會將植物的組織切片染色，在顯微鏡底下看到的狀態。

背景中有什麼樣的巧思？

在靈魂魚的系列中，有三款主要的背景 – 虛空、波動跟深海，大部分的魚都是虛空背景，能夠讓你在投影或黑暗的空間感受時，能最直觀的感受到作品的神聖感，會將焦點全部都放在魚的身上。波動的背景來自於以前的另一個作品 – 星雲 (220413 Nebula Drift)，是由 GPU計算所有的星星之後，動態的扭曲來創造流動的銀河。最後一種背景深海，是模擬由上照下的一束光線穿進深海的質感，在者三款背景中，都有額外加入一些灰塵跟懸浮物，會緩緩地在水中漂動，並會跟著音樂閃爍。

如何搭配視覺產生有機的聲音系統設計？

在靈魂魚的作品中，聲音是很重要的部分，在前幾個作品如 Sliderverse 或是 Soul sea 中，我都有嘗試使用 Web audio api 的方式來合成聲響，而在 Soul Fish 這個作品中，我使用了一組鋼琴的 Sample，並在作品開始執行的時候，確定這個作品的和弦進行和旋律線，因為是動態生成的音樂，每一隻魚的旋律線都是獨一無二的，會搭配較高的弦律線與較低的伴奏聲音來構築曲子，每一隻魚都是旋律自動機，能夠合成屬於他的曲調。

就像是 生成式視覺一樣，生成式音樂的概念鮮為人知，是打散一首歌的長度跟制式編曲，不是根據既有的譜面來演奏，而是透過規則來去建構音符和和弦的進行，因此可以產生永不停止可以持續生成而有機的聲音編制，在 開啟基因 (B) 的模式中，你能夠看到每隻魚都有自己對應的和弦，是自己的旋律不斷的重複的自動機，另外泡泡破掉時，也可以聽到他觸發高音的鋼琴音符，這也對應到我當初對於作品的期望，是能夠創造視覺與聽覺的詩意同步，當這些所有的感官整合起來觀賞作品時能夠有最完整的體驗。

在互動設計中有哪些可以玩的元素？

在製作作品的最後，我加入了游動與泡泡的設計讓藏家能夠去控制魚的游動時快時慢，以及使用鍵盤往特定的方向移動，我搜尋了一些真實的魚的影片，發現他們其實魚鰭跟尾巴在高速游動時都比我預期的快跟靈活，因此加上了游動的機制之後變的很生動，更像自然中魚類運動的樣子。

除了魚的互動之外，泡泡會不斷的從下方冒上來，你能夠使用滑鼠戳破泡泡，或泡泡碰到魚的時候，會同時觸發高音的鋼琴聲，跟背景的音樂呼應。

發售的狀況與後續調整

我在 2022 五月時發行了靈魂魚的作品，原本計畫是500版次，原本預期會有很多 Hamily 來 mint 所以調整成 1000 版，近期調整回 400 版確保作品的獨特性，雖然在過去的一年中沒有馬上 mint out，隨著時間過去，終於在 2023 Jan 16, 02:53:29 PM 鑄造完畢，達成了里程碑！

此外，我也曾受邀在台北表演藝術中心的大圓球建築物上投影靈魂魚，在大街上看到魚在圓球上游泳很像實體世界的巨型魚缸。我於台北101的個展 – 「混沌實驗室」中有展出，投影在沈浸式的空間中，沐浴在像是極光般的靈魂魚質感時很浪漫。

除了單件作品的展示之外，我也很喜歡讓靈魂魚以群體的方式呈現，因此後續希望能夠在線上做一個虛擬的水族箱，一個發光的海底世界，並且結合場域投影讓魚有機會再實體空間持續存在與游動，如果能夠結合實體場域，製作一個全互動式的虛擬投影空間，讓人可以彷彿置於深海的體驗黑暗中的光輝，一定會非常感動。

如果你對更多的創作過程有興趣，可以看之前的靈魂魚製作分享直播！

這篇文章 【p5.js 程式創作】Soul Fish 數位永恆生命的靈魂魚 – 創作故事 最早出現於 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 - 互動程式創作台灣站。