本集我們邀請到了——黃新一起來聊聊。黃新分享了他踏入互動藝術領域的契機，當時是如何啟發他進入這個領域的。我們深入探討了生成式藝術的獨特之處，了解這一藝術形式在當代藝術中的地位和特點。除此之外，我們還聽取了黃新分享他踏入互動藝術教學領域的原因和故事，讓我們更深入了解他對於教學的熱情和使命感。

在這一集的節目中，我們透過黃新的親身經歷和專業知識，深入探討了互動藝術和生成式藝術的精彩世界，也了解了台灣數位藝術創作者所面臨的現實挑戰！

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

⬢ 黃新小資訊 ⬢

黃新，別名紐耶羅（newyellow），是新媒體世界的定居者，也可稱為加密世界的新移民。他在數位互動藝術領域有著超過十年的資歷，在政大就讀數位內容學程碩士時，他就對 AR／VR 等互動科技深感興趣。自 2011 年起，他開始嘗試進行數位藝術創作，作品更曾三度獲得國際黑客松 AR Spark 首獎，展現了他在此領域的卓越才華。

除了作為一位成功的數位藝術家外，黃新也是 Meta 元宇宙培訓學院的合作講師，同時也是政大區塊鏈應用課程的講師，專注於教授與分享他對數位互動藝術的知識。作為生成式藝術的創作者和收藏家，他在這個領域中扮演著重要的角色，持續為藝術世界帶來創新和驚喜。

⬢ 老闆小資訊 ⬢

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

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

⬢ 精選片段 ⬢

Generative Art 大賣秘辛「毛毛密碼」㊙️？

⬢ 本集重點 ⬢

02:13 踏入互動藝術領域的契機

09:37 生成式藝術的獨特之處

18:59 生成式藝術都在模仿嗎？

23:44 作品大賣的神秘密碼

27:50 fxhash造就的生成式藝術作品寒武紀大爆炸

34:23 踏入互動藝術教學的原因與故事

42:42 談談Volume Dao

45:42 台灣數位藝術創作者的生存之路

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

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

這篇文章 CC！我跟你說！S1EP4｜黃新來聊聊：創作鑑賞與教學心路歷程 最早出現於 Creative Coding TW - 互動程式創作台灣站。

台北生成現場：列島雜湊 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 - 互動程式創作台灣站。

在本集的 Podcast 中，我們將探討 NFT 與藝術之間的關係，以及它們對藝術創作和創意產業的影響。這一集將帶領你進入NFT和藝術的精彩世界，並深入了解其對藝術創作和創意產業的重要影響。還有聽聽老闆在NFT市場的故事，絕對讓你留下深刻的印象！

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

⬢ 老闆小資訊 ⬢

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

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

⬢ 精選片段 ⬢

程式碼也有歲月痕跡嗎？數位泛黃究竟是什麼樣的概念呢？

⬢ 本集重點 ⬢

05:01 究竟什麼是 NFT？

08:35 數位扭曲/數位失真 🌬️

11:33 NFT 市場中的精品店和假日市集？

14:19 殿堂中的經典作品

19:10 NFT 才能玩的創作技術

23:10 老闆作品被盜用的心酸故事

28:43 開源程式碼的所有權歸屬問題

31:41 進入 NFT 市場對創作初心的影響

36:43 「數位版畫」＆「審美外包」的討論

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

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

這篇文章 CC！我跟你說！S1EP3｜數位世界的創作革命：NFT與藝術的關係 最早出現於 Creative Coding TW - 互動程式創作台灣站。

在本集中，我們將探索 Creative Coding 的奧秘——里歐娜會和老闆一起討論什麼是 Creative Coding ，以及老闆是如何踏上這條路的，在這條路上，又遇到了什麼樣的困難和驚喜之事呢？我們還會分享一些有趣的案例，並且比較台灣與國外的程式創作資源的不同之處。

如果你曾經對學習程式的門檻感到困惑，相信本集也會對你有所啟發。最後，我們也會分享近期 Creative Coding 相關的活動資訊！

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

⬢ 老闆小檔案 ⬢

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

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

⬢ 精選片段 ⬢

老闆的大學回憶：在學聯會行銷部，用 Arduino 做了蝦趴聖誕樹，還在 Dcard 上爆紅？

⬢ 本集重點 ⬢

02:21 究竟什麼是Creative Coding？

03:31 老闆開始接觸Creativ e Coding的契機

05:17 Creative Coding的有趣案例

08:28 藏在非典型電機人內心的創作熱血🔥

09:39 出國進修的動機💭、國外程式創作與教育環境

15:59 我們都有茫然的時期…

18:16 國外的程式創作資源、互動設計風氣和台灣有什麼不同？

21:31 面對學習程式的門檻，我該怎麼辦——身為過來人，老闆用心良苦的建議

30:44 在台灣的進修資源有哪些

32:20 學習Creative Coding有什麼出路或運用？

36:36 老闆語重心長的建議

38:09 近期Creative Coding相關活動資訊

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

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

這篇文章 CC！我跟你說！S1EP1｜理工宅的藝術創作之路：國內外程式創作、互動藝術進修資源，以及老闆的建議 最早出現於 Creative Coding TW - 互動程式創作台灣站。

哲宇老師榮幸受邀在 2021 年臺灣 JavaScript 開發者年會（ JavaScript Developer Conference ，簡稱 JSDC ）開講 JavaScript 在生成式、演算藝術與 NFT 的應用。 JavaScript 開發者年會是台灣最大的 JavaScript 年度性技術研討會， 提供台灣中高階 JavaScript 技術人才與世界最新 JavaScript 相關技術討論與分享。

此次分享將涵蓋到生成式藝術和互動領域的常用工具，包括不藏私實際操作 Processing 和 p5.js，以及解密如何在 Artblocks 和 Opensea 等 NFT 平台上架作品。我們還會介紹連結硬體 OSC 和 socket，以及 MaxMSP 中 JS 模組的撰寫和基於 Tensorflowjs 的機器學習，帶領創作者一步步了解這些工具和技術，以便可以更好地創建自己的生成式藝術和互動作品，滿滿 JavaScript 乾貨讓創作者一次帶回家！

JS的發展與瀏覽器虛擬化

JavaScript 在 p5.js 或是 即時 Web Base Ide 這些工具上，都能快速幫助藝術家和工程師快速的開發，甚至是結合網頁特效的 Library。當這些前端的東西都有了後，創作者通常會連結硬體。以前連接硬體，我們可能需要就是再額外安裝一些軟體或直接寫一些需要編譯的執行檔，現在你可以透過比如說像 OSC 與 socket，或者是像 web USB 這類協議直接連接硬體。在其他的軟體生態系裡面也逐步方便，比如說 Max MSP，也可以用 JS 來撰寫模組，甚至像 Tensorflowjs 的機器學習以及 ml5.js，也可以把機器學習跑在前端，然後最後再用 Electron 把它包裝成跨平臺的應用程式，都十分流暢。

JavaScript 在近年來的快速發展和優化，特別是 V8 引擎的改進和像 M1 晶片這樣的新技術的加入，使得JavaScript 的執行速度得到了大幅提升，從而使得 JavaScript 在處理一些複雜的任務，例如大量的particle 模擬或者是電腦繪圖等方面，也能夠有較好的表現。在這樣的情況下，像 Processing 和 p5.js 這樣的 JavaScript 框架也因其易學易用，而逐漸成為許多創作者和開發者的首選。這些框架提供了一個簡單的方式來設計和實現各種視覺化效果，從而使得創作者可以更輕鬆地進行創作，而不必擔心性能問題。

生成式藝術與互動的常用工具

在創作生成是藝術跟互動的常用工具，第一個首選就是 p5.js 。 p5.js 可以視為 Processing 的 JavaScript 版本，它可以在網頁瀏覽器中運行。在 Processing 和 p5.js 中，可以使用不同的圖形和動畫函數，例如線條、形狀、色彩等，來創建各種視覺效果。或是使用鍵盤、滑鼠和觸控螢幕等輸入方式來創建互動應用程式。現在也有很多可以快速實作 p5.js 的 web ID，以下簡介給各位，第一個是 open processing 也是哲宇老師最常用的平臺，Open processing 使用上對初學者的設計師或工程師非常友善，像是在介面上以視覺為主，canvas 本身已幫創作者準備好，可以直接撰寫 p5.js 簡化的程式語言在上，並即時看見其渲染圖應用效果。比起 web canvas api 需要準備基礎的結構，可以讓創作者在最短的時間內執行 prototype，快速將生產環境建構出來。只要使用簡易語法，即可在畫布上建立不同的效果，例如：

• createCanvas()：建立畫布
• fill()：填上顏色
• stroke()：線條粗細
• rect()：建立方形
• ellipse()：建立圓形
• mouseX、mouseY：利用滑鼠 X 軸與 Y 軸的移動來控制圖形呈現的效果
• rotate()：旋轉
• sin()、cos()：旋轉的角度

直述式的程式語言，與公開的文件參考資料讓使用者能夠直覺式的撰寫，讓大家可以更快速的進行創作。假使在使用上想要更嚴謹，或是引用更多的函式庫，哲宇老師推薦使用 CodeSandbox ，其與他者的差異性在於可以引入 Npm ，有點像是一個在遠端的虛擬機，可直接加入特定想使用的函式，檔案結構完整，甚至可以建立自己的模板，讓撰寫嚴謹，也符合個人化的專案設定。再來是 Codepen ，純粹使用 web canvas api，相較於 p5.js 較繁雜，但使用的工具本身並無優劣，而是需要依照每個人不同的的使用情境以及需求等等，去做創作上的使用。

在創作生成式藝術上，哲宇老師最常使用的方式是 p5.js 再加上 glsl 的 shader，產出效能大約為2至3小時一張創作便能完成，以下幾張較代表性的創作圖與各位做分享：

創作上，哲宇老師經常使用留下筆跡的創作手法，在畫布上設定畫布大小、需要出現的圖形與顏色，並且記得藏起背景功能，因為背景功能在 draw 底下為在每一次重複將東西清掉，所以無法顯示圖形軌跡，如下示範：

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

function draw() {
  // background(220);

  fill("blue");

  push();
    fill(255, mouseY, 50);
    translate(mouseX, mouseY);
    rotate(frameCount / 50);
    rect(0, 0, 200, 200);
  pop();

  ellipse(0, 0, 200, 200);
}

而 Chaos Dancer 就是以類似產生大量的 particle，讓它們隨著時間旋轉並逐漸變小，再加上 sin cos 等力場，並將軌跡留下，形成畫布，並再疊上不同材質讓創作有更不一樣的感覺。

就是單純用迴園功能，讓圓圈往漸小的往上長，與隨機的大小變化去執行。

除了留下軌跡外，哲宇老師也分享了另一種常使用的創作手法，變化的遞迴切割。

半圓型線條，再加上大小不同的色塊與質感組成，跳脫一般遞迴切割的相同模式，形成較新穎的氛圍。在此創作上，主要使用 divideSq() 去形成遞迴切割的部分，並且設定在不同機率下形成的多樣變化。哲宇老師分享因自己的工程背景，在創作上常使用一些數學物理相關概念，也說明到其實遞迴、粒子或是物理模擬等等進行創作。諸如此類的視覺特效也有不同的資料庫提供大家參考使用，像是專門製作 3D 的 Three.js 、圖像處理與 Shader，具有像素等級處力效能的 Pixi.js 、向量操作專門戶 Paper.js 以及類似於早期的 Flash，專門製作小型遊戲的 Phaser.js。

Artblocks – 區塊鏈與生成式藝術的整合

生成式藝術與 Artblocks 的關係到底為何呢？先來簡單介紹 Artblocks 給大家。 Artblocks 是賣生成式藝術的 NFT（非同質化代幣）平台，每個作品在平台上可能會有 500至1000個版本。但其限制是，平台希望程式也要在鏈上，所以只能接受使用一種  dependency 。當創作者完成創作後，每一個版本都會有所不同，但同時間因為透過了每個作品上的 hash ，轉換成亂數並給作品做使用。 在 opensea 上面會擁有這些不同版本的創作。

平台上編寫時，主要使用 xor 演算法，此演算法會依據不同的 seed ，也就是亂數位元作操作。操作完後，在以模擬電腦亂數表方式產生亂數， 如果次數固定，則意味著在相同 hash 的狀況下，一定可以在某些特定狀況下得到相同亂數，此方法可以在 random 中設定想要更改的數字或陣列。哲宇老師也使用了 Token Art Tools 執行 debug，透過左側項目欄調整各種比例以更改 hash 的組成，並自動提供給 script ，這樣就可以快速地看到作品在不同 hash 時的不同樣貌。（更多 Artblocks 的執行細節可參考此篇 >>【老闆週六來聊聊】吳哲宇 Artblocks Project – Electriz 製作分享）

在上架 Artblocks 平台時，會要求將所有程式碼上架到主網上，而因此需付 1 至 2 ETH 左右。另外，在 mint 的同時，即會產生隨機的 hash ，也同時間將 preview 上架到 Opensea 上。所以，從 Artblock 到 Opensea 上的流程總體結論就是從 Hash 到 Random Number Generator ，最後在看要使用 Static output（靜態輸出） 或是 Dynamic output（動態輸出），並且會在這整個流程中的某一時刻擷取快照形成 preview 。生成式藝術的應用多變性，也直接的反應在創作中。像是要形成如上述複雜的圖樣，哲宇老師通常會使用變化角度 sin() 或 cos() 等去執行，或是假使作品要應用到不同載體上，如投影或是印製到硬體上，需要放大作品的像素密度，我們也只需要簡單設定 PixelDensity()，使作品在只要能透過瀏覽器進行的載體上，都能設定出自己所需要的圖片密度大小。

連接硬體 OSC 與 socket

以前在連結硬體上，都需要再透過 processing 進行傳輸，現在其實有多種不同方式可以使用，包含 p5.js 也可以幫你執行！比較為一般人常見的傳統 Open sound control（網絡音訊傳輸協定）有應用在 DJ 控制燈光及音樂的常見場景，使用 udp 加上 socket.io client，使前端網頁可以直接連結到 bridge 上接收 osc 的訊息，範例如下，哲宇老師使用過藉由賭博的方式去控制檯燈的作品。

此作品連結 MaxMSP，運用偵測到骰子上的點數以及有幾個骰子加上連結 socket 去控制檯燈的明亮度。另外，像是開源式平台 Arduino 只要在網站上就能編輯，或是 Johnny-Five ，一個基於 JavaScript 的機器人和物聯網（IoT）程式框架，允許開發人員使用高級程式語言來控制硬體。 Johnny-Five 設計可於包括 Arduino 、 Raspberry Pi 和 Particle 設備等各種硬體平台一起使用。

還有 Node-RED 以簡單易用的圖形化用戶界面，用戶可以通過拖拽節點並用連接線連接它們來創快速構建 IoT 應用程式。

經由這些新平台的介紹，我們可以知道，其實 Javascript 現在的語言邏輯更容易上手，能整合多種生態系，甚至是跨軟硬體執行，對創作者更增加了無限的可能。

MaxMSP 的 JS 模組撰寫

講到硬體與軟體的應用，就不得不提到 MaxMSP 了。 MaxMSP 為一款音樂創作、聲音處理和音樂表演的軟體，它可以讓用戶使用圖形化的方式編寫音樂程序。界面直觀，使用滑鼠和鍵盤就可以輕鬆地創建、編輯和控制音樂和聲音，所以 VJ 或是新媒體藝術家常運用此軟體進行創作。在使用上， MaxMSP 也提供了 Node for Max ，一個專門為 Max/MSP 環境開發的軟體，讓使用者也可以運用 Javascript 撰寫並轉譯成 MaxMSP 可以運用的語言。語言資源方面，除了 Max 的 api 外，也能使用像是 tonal，擁有諸多和弦及音符等相關處理函數能夠去做運算。

前端機器學習及相關運用

以下與大家介紹更多相關資源，例如 TensorFlow.js ，是 Google 開發的一個開源 JavaScript 框架，它使得開發人員可以在網頁瀏覽器上使用並進行機器學習。強大的 JavaScript API ，可以用於在瀏覽器中創建、訓練和部署機器學習模型，除了可以在瀏覽器中運行這些模型外，還可以在瀏覽器中使用預訓練模型進行影像、聲音和自然語言處理等任務。

使用上，則有 ml5js 函式庫的協助。函式庫中包含影像、聲音、姿勢和自然語言處理等多種模型，提供了更簡單的方式來使用機器學習。

示範案例，使用函式庫進行臉部以及動作的追蹤創作，也可以依此應用延伸出更多商業價值，像是依據追蹤動作，留下軌跡或是特別觸發某些機關等互動式創作。

或是透過 Google 的 Teachable Machine，在線上訓練不同的模型，輸出為 json 檔案後再透過 ML5 做載入，例如以下為說明左傾右傾的差別，並在最後到 p5.js 進行視覺化。

上述所講到的瀏覽器端應用，皆可以使用 Electron 進行包裝，藉由封裝方式形成桌面板可應用程式，可運行於 Windows 、 macOS 和 Linux 等多個操作系統平台上，讓開發者可以使用熟悉的前端技術來開發桌面應用程式。

JS 在創作領域發展的展望與未來

瀏覽器的完整虛擬化和純雲端應用程式使得開發者可以在雲端環境中開發和部署應用程式，從而降低開發和維護成本，同時提高應用程式的可擴展性和安全性，進而也讓 Isomorphic JavaScript 的執行效能得到了大幅優化，並且提供了 App 包裝功能，使得開發者可以將應用程式打包成原生應用程式，運行在桌面和手機等平台上。加上高階特性和語法糖的成熟以及 TypeScript 的支持使得開發者可以更加容易地編寫高質量的程式碼，與 Package 生態系的豐富性和開源社區的活躍性，都為開發者提供了更多的選擇和支持。快速開發環境和不重複造輪子的潮流下，使得開發者可以更加專注於應用程式的邏輯，並且快速開發出高品質的應用程式，同時也可以減少開發成本和風險。

總體而言， JavaScript 的發展帶來了許多新的機會和可能性，使得創作者可以更輕鬆地實現各種想法和概念。同時，像 Processing 和 p5.js 這樣的框架也為創作者提供了更多的工具和資源，使得他們可以更加專注於創作本身，而不必花費太多時間和精力在技術層面上。最後，經過本次分享你也躍躍欲試，等不及想要開始進行快速易上手的創作了嗎？趕快訂閱 老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道搶先了解第一手消息，或是加入哲宇老師在 hahow 開設的課程，一起快速上手程式藝術撰寫！也歡迎對相關項目有興趣的同學可以至 墨雨設計 聊聊天喔 ~

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

這篇文章 未來 JavaScript 應用指標！不藏私 p5.js、生成式藝術與NFT 技術分享教學 最早出現於 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 - 互動程式創作台灣站。

靈魂魚的創作故事：p5.js 程式創作 | Soul Fish 數位永恆生命的靈魂魚 – 創作故事

老闆在直播中分享五月份至美國紐約參加研討會的感想，研討會上有像是 6529 等創作家在研討會上做分享交流。讓老闆想到，最一開始接觸 NFT 是因為創作，從創作上也有看到像是 Pak 這樣藝術家的作品，純粹、好玩卻也附有商業性價值，因此開始接觸區塊鏈，參加像是 Consesus 這樣的區塊鏈相關活動。雖然近期不論國內與國外，對於虛擬世界的交易開始有些反感的聲浪出現，但也因此某些事項反而逆勢而起，像是在 Art Blocks 上購買生成式藝術的趨勢逐漸成長。在創作上，老闆也建議，雖然觀眾在某一期間追求的風格會相似，導致大多創作人會往同風格進行創作，但也不要忘了，走出自己的路線才最有可能被記憶紀錄。

為什麼會選靈魂魚當主題與創作概念？

在準備個展期間，有關看到一部與金魚相關影集，觀察到金魚本身的姿態，因此以此為創作靈感來源。取名自老闆的姓名，靈魂魚誕生於虛空之中，由各式各樣的情緒凝結在深海中誕生，他靜靜的在那邊帶來平靜，自己游著，有些靈魂與全身長滿了亮麗的鱗片，有些則默默地緩緩地飄動，身軀幾乎消逝於深海的光線中。

p5.js 靈魂魚實作示範

創作的初始概念，先以 Shader 呈現（下方圖示參考），使用扭曲線條模擬金魚尾巴線條的流動。 Shader 本來是以點到點之間連成的線條組成，在其後，老闆應用 Sin 波的原理，將 Shader 線條隨著波長座移動變化。

再來進到金魚的輪廓姿態，下方第一版的金魚創作其實可以看出大致上金魚的形狀，以及圖樣上模糊的效果，呈現靈魂的感覺。

將金魚的輪廓以線條構出後，發現從身體上半步到尾巴下半部的線條，呈現 Sin 波的形狀，就以多重 Sin 波線條組成第一版金魚。老闆也實際操作一次供大家參考，首先，由左到右畫出連成一條線。

function setup() {
  createCanvas(windowWidth, windowHeight);

  background(100);
}

function draw() {
  background(255);

  beginShape();

  for (x = 0; x < width; x += 20) {
    stroke(0);

    strokeWeight(5);

    vertex(x, height / 2);
  }

  endShape();
}

當線條畫出來之後，如何形成金魚的輪廓形狀呢？由左到右以及上下的的曲線變化，這時就需要加上 Sin 波，呈現出魚的一半輪廓。

function draw() {
  background(255);

  beginShape();

  for (x = 0; x < width; x += 20) {
    let ang = map(x, 0, width, 0, PI * 1.5);

    let y = height / 2 + (sin(ang) * height) / 5;

    stroke(0);

    strokeWeight(5);

    vertex(x, y);

    circle(x, y, 20);
  }

  endShape();
}

得出單一線條後，以相反方向再繪製出另一條線，將完整金魚的輪廓勾勒出來。

function draw() {
  background(255);

  translate(width / 2, height / 2);

  scale(0.8);

  translate(-width / 2, -height / 2);

  for (direction = -1; direction <= 1; direction += 1) {
    beginShape();

    stroke(0);

    noFill();

    strokeWeight(5);

    for (x = 0; x < width; x += 20) {
      let ang = map(x, 0, width, 0, PI * 1.5);

      let y = height / 2 + ((sin(ang) * height) / 5) * direction;

      vertex(x, y);

      circle(x, y, 20);
    }

    endShape();
  }
}

上述大略是第一版金魚的組成方式，但老闆認為於本身可以再更活潑的方式做律動，於是進行第二版的製作。第二版的示範操作，著重在呈現魚尾巴，如雨水般的流動感外，也將除了輪廓外的線條作範例，呈現擁有底色與動態的尾巴。

function draw() {
  background(255);

  translate(width / 2, height / 2);

  scale(0.8);

  translate(-width / 2, -height / 2);

  for (direction = -1; direction <= 1; direction += 0.2) {
    beginShape();

    stroke(0);

    noFill();

    strokeWeight(5);

    for (x = 0; x < width; x += 20) {
      let ang = map(x, 0, width, 0, PI * 1.5);

      let y = height / 2 + ((sin(ang) * height) / 5) * direction;

      let xx = x;

      if (ang > PI) {
        xx += (ang - PI) * 50;

        xx += sin(xx / 40 + frameCount / 50) * 50;
      } else {
        if (x % 40) {
          arc(xx, y, 100, 100, -PI / 4, PI / 4);
        }
      }

      noStroke();

      vertex(xx, y);

      fill(255, 0, 0, 90);

      arc(xx, y, 5, 5, -PI / 2, PI / 2);

      circle(x, y, 1);
    }

    endShape();
  }
}

反覆編輯的過程中，從第一、第二版次的基本輪廓呈現，到了第三版大面積的色彩變化（下方圖示參考），以及最後，第四版層疊了鱗片出現發光發亮的質感（下方圖示參考），再繼續堆疊後，變會呈現帶有霧霧的靈魂感覺。這樣的靈魂質感，是如何執行的呢？

在第四版金魚上，主要強調使用 blendMode，並進行疊光 screen，就能發現微發光的質感。而後建議以 shader 再去修飾外型，下方程式與圖片為示範範例。

function draw() {
  push();

  beginShape();

  background(0);

  translate(width / 2, height / 2);

  scale(0.8);

  translate(-width / 2, -height / 2);

  blendMode(SCREEN);

  for (direction = -1; direction <= 1; direction += 0.2) {
    noFill();

    strokeWeight(5);

    for (x = 0; x < width; x += 20) {
      let ang = map(x, 0, width, 0, PI * 1.5);

      let y = height / 2 + ((sin(ang) * height) / 5) * direction;

      let xx = x;

      if (ang > PI) {
        xx += (ang - PI) * 50;

        xx += sin(xx / 40 + frameCount / 50) * 50;
      } else {
        if (x % 40) {
          arc(xx, y, 150, 150, -PI / 4, PI / 4);
        }
      }

      noStroke();

      vertex(xx, y);

      fill(255, x / 2, 0, 100);

      arc(xx, y, 5, 5, -PI / 2, PI / 2);

      circle(xx, y, 5);
    }
  }

  pop();
}

特殊技法介紹

在完成了基本霧面質感金魚後，老闆進到 shader 技法教學。在這邊使用到 shader 的原因是想呈現發亮的螢光感，以及 shader 特有的毛邊質感。在背景中的流體顏色，也是應用 shader去達到此效果，而這樣的概念從老闆早期作品中，就陸續有不同的變化。像是如同宇宙星河般的效果，堆疊的彩色雲層。這樣雲層的概念，又是取自於老闆本身的創作，純粹使用 p5.js 繪製出的雲層效果（下方圖示）

從 p5.js 單點渲染，到 shader 即時動態渲染，後面更進化到會滑動的線條，甚至在線條與線條間也出現反光感的效果，呈現細緻，類似地層沉積剖面的質感，也應用這樣的技法呈現在靈魂魚的背景中。

老闆也提到，他認為目前應用 shader 最極致的呈現是如同金屬液態的質感創作（下方圖示）

要呈現這樣的效果，就是將背景進行扭曲。像此圖示最初是一張漸層平面圖（下方圖示），形成原理是以多個點點構成一張圖的基底平面，每個點點會有著大小不同的漩渦，再以每個點點在圖上偏移的角度要是多少，與漩渦的方向還有角度構出。

不過老闆也說，雖然 shader 很有趣，作品彈性高，但缺點是每次遇到不同型態的需求都會需要重新造輪子，所以目前實際手寫 shader 的人不多，通常都還是以 3D 軟體執行，或是使用 Unreal、Unity 和 shader note editor 等等。以 node based shader editor 為範例，一樣也是經由不同的部分進行疊加，但不一樣的是，已經進行了模組化，讓使用上更快速簡便。

讓我們重新回到作品靈魂魚的技法上吧！

在創作金魚本體時，我們有使用到一個叫做 blendmode 的融合選項，在 blendmode 中其實有兩種不同的方式能呈現疊色。第一個就是上述有提及的 blendmode(SCREEN)，這一項變化就是讓疊色時出現螢光的效果，再來第二個就是 blendmode(MULTIPLY)，而這線就是將疊色效果呈現墨水的質感。以下使用範例是以多線條的方式，進行 blendmode(MULTIPLY)，所呈現出的細緻金魚。

以魚鰭來舉例，下方圖示可以看到老闆簡單的說明

魚鰭是依據金魚身體上半部的輪廓點延伸，設定在特定距離上做不同點，再依這些點連成一條又一條組合成魚鰭的線。不過，也因為以線條作為主要組成金魚的來源，所以效能上並不是非常理想。在最終完成品上，可以觀察到，除了金魚本身與線條外，內部也有像是生命線般，會在魚擺動時跟著起舞，這個部分是老闆使用物理模擬操作。在 p5.js 中， Example 中有一個系列叫做 Simulation 物理模擬，在這系列裡，像是 chain，此功能就是將特定點與點之間連成線外，也能進行動態移動，除了作品上，老闆也將其運用在官網上面，將視覺衝擊更加優化。

作品在電腦上完成後，老闆也有將靈魂魚藉由台北藝術中心舉辦的活動，大範圍的投影在藝術中心外，最顯眼的位置做展示。

生成式音樂

在圖樣不斷變化的過程中，老闆也在本次創作中增加入生成式音樂做襯托，讓音樂配合游動的靈魂魚產生不同音調。不過生程式藝術結合音樂輔助呈現這個部分，目前是 fxhash 才提供可上架的服務，因為生成式音樂本身檔案較大，像是 artblocks 目前無法接收過大的夾帶檔案。靈魂魚的生成式音樂是將每一節的音樂 sample 檔案與空白格做不同的排列組合，使用 tone.sampler 做完整拼接，拼接完再套用 bpm 讓整段旋律有休止或是不同的音樂變化，最後，再以 reverb 營造具有回音的空間感，讓我們在觀看、收聽時，能夠聽到一段又一段的美妙旋律。

如何將作品上架 fxhash

接下來，我們進入統整上 fxhash 的流程，老闆習慣當作品在 openprocessing 修整到一定程度後，就回到 VsCode 上，使用 fxhash 的模板進行整合。 fxhash 的模板會提供一個固定的亂數，引導你如何使用這套亂數，讓導出的結果都是一樣的（參考連結），而 fxrand 就是提供的亂數名稱，只要給它特定的 hash，就會產生特定的 random。在 VsCode 編輯上，老闆就會針對例如說 features 的這個選項進行編輯。為何是 features 呢？在將生成式藝術上架到 fxhash 時，都會需要標記每一個作品產出的相關特徵，而老闆通常會使用 renderfeatureas() 的方式，將特徵全都渲染出來，但也有時候會因為抓取的值與原本創作呈現的值其實是不同的狀況，這時候就會需要再根據一定的規則算出，我們最終要顯示的是什麼。這樣，在告訴收藏家時，也能以較通俗的說明讓藏家了解作品本身，除了意象外的特徵內容。

為了應對較複雜的上架流程，老闆製作了一個名為「previewer」的專案，這個專案可以印出所有生成式藝術作品中的渲染結果。當今天一個作品渲染出了一千張圖片後，這個功能會將這一千張圖片綜合在一個小型網頁上，然後可以在此網頁上進行不同種類的過濾，以進行每一張渲染圖片的檢查。在上架方面，老闆分享了他在fxhash上架時遇到的問題，包括價格、數量和最初設定的販售名單和策略之間的差異，因此他建議同學們在這方面要多加注意。此外，他還提到了作品呈現方面的要求，希望之後製作的每一件作品都能具有足夠的精采度。在前置作業完成後，老闆帶領我們稍微講解了白名單處理流程。在NFT世界中，每當我們購買一件項目，都需要鑄造並購買NFT，但通常NFT在販售時會有數量限制，並非所有人都能鑄造，這就是「白名單」的概念。白名單主要是指只有在名單內的購買方才能鑄造項目，因為他們已經預先保留在名單中了。因此，賣方需要在fxhash上設定白名單流程，首先，要去「mint generation token」瀏覽要上傳的解壓縮檔案，然後按照每個步驟的要求進行上傳或選項勾選，最後，確定上架後就完成了。老闆還建議上架最好一次上完，並且數量控制在256到500之間，這樣對於購買單項作品的買家再繼續購入，帶來的後續效益會更大。老闆也順勢舉例近期執行的「FabDAO 百岳山脈計畫 」，此計畫除了老闆外也與多位藝術家合作，執行公益的 NFT 計畫。在計畫中，老闆的作品便是以 Shader 執行，也示範有無 Shader 的差異。作品內容都十分精彩，有興趣的同學都歡迎至官網做更進一步的了解。

新作品介紹

新作品呈現如同粒子搬形成的圖畫，經由 Shader 再去製造出邊緣不規則的狀態。

作品經反覆編輯製作後，以2D 生成3D 的方向勾勒出虛擬世界感。而此項目將會與老闆致英國作展出。展出的地方名為 Outernet London，主要就是在進行生成式藝術展示的展館，那到時至英國後，老闆也會與共同展出的藝術家們合作交流，後續有任何更新也都會開直播影片與大家分享心得。

總結

在最後也觀眾提出有關近期蔚為風潮，MidJourney – AI 生成藝術的相關問題，老闆也對於這個興起的議題提出了一些看法。其實，不論是生成式藝術與 AI 生成藝術都是經由更快速與便利，與傳統手繪不同的數位化方法進行藝術創作，個人特色或是創意能不能持續表現，才是更值得被記錄的，也希望大家都能勇於嘗試不同的方法做各式各樣的藝術創作探索。

如果想要更深入的了解，目前有與李婷婷講師合開針對 Web3的相關課程，也歡迎直接訂閱老闆的 Youtube 頻道，時不時會有直播 live coding或是近期有持續更新像是 Web3相關影片等等，都歡迎加入並進行踴躍發問喔！

以上就是本次影片和文章的介紹啦！別忘了加入互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道隨時補充新媒體藝術的養份，讓我們一起探索這多元的世界吧！下次見~

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

這篇文章 【p5.js 程式創作】Soul Fish 數位永恆生命的靈魂魚 – 製作流程 最早出現於 Creative Coding TW - 互動程式創作台灣站。

靈魂魚的製作過程：【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 - 互動程式創作台灣站。

上篇這邊走：

課程開始

首先，延續第一天的工作坊進度，老闆先大致瀏覽了昨日有進行創作練習的同學們的作品。有同學提出在創作時的疑問，例如，當設定圖形為筆刷時，雖然圖形是連續性的出現，但當滑鼠動作較快時，圖形就無法連續性的出現，這個問題能如何解決呢？

其實這個問題反向思考來說，就是要讓筆刷連在一起，所以老闆先設定 line()，將已經經過的滑鼠位置，與滑鼠正在進行的位置串起，形成如同在繪圖軟體中，筆刷繪製的效果。

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

function draw() {
  stroke(255)
  line(pmouseX, pmouseY, mouseX, pmouseY)
}

也可以再依據線條想要調整粗細、顏色變化，或是當滑鼠按下右鍵後再執行筆刷等等變化。

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

function draw() {
  stroke(255, frameCount%255, 100)
  strokeWeight(10)
  if(mouseIsPressed){
  line(pmouseX, pmouseY, mouseX, pmouseY)
}

第一階段 – 重複迴圈

短暫回顧完第一天的內容後，老闆進行第二天的主要內容的講解，包含以迴圈與互動、增加不同色彩或是複雜圖形的編輯做分享。先從迴圈與互動，建構創作規則上面開始。老闆以知名藝術家，草間彌生的作品說明建構創作規則的原因。草間彌生的知名創作，大多都建立在「觀察事物的形體」、「重複線條的位置」以及「大量的重複」等手法，去構成她的創作系統。或是莫內及梵谷，拆解其創作手法，就會發現使用連續性的線條和錯落的顏色，去重複堆疊出作品。而上述列出的方法，對程式創作來說，是低成本就能執行的技術，也因此我們能藉由這樣的方式去快速獲得一件具有「美術手法」的創作作品。以迴圈來說，可以設計出相同圖形但是不同排列，具有設計感或是抽象感的作品，像臺灣的傳統花磚，就是利用重複圖案，但是利用不同角度的鏡射，排列出具有韻律感的設計作品。

那我們也開始迴圈實作吧！

老闆先以最單純的圓圈重複做範例，在還沒學習到如何使用重複迴圈技法時，我們可能就是使用重複貼上同一組程式碼，再在位置上做些許變化執行。但這樣並不便利，也因此又能使用迴圈 for() 來解決此項問題，先來說明 for 的基本語法結構。

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

實際帶入數字撰寫示範說明：

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

function draw() {
  background(0)
  for(let i=0; i<10; i+=1){
    ellipse(width/2+i*50, height/2, 300, 300)
  }
}

在 i 這個變數下，根據前面設定的數字，起始到結束重複執行。

創作過程中，老闆也提供一些設計小技巧，像是顏色選擇。在創作中，顏色佔了很大的一部分，但當我們對於選色上想要有更快速的方式就是應用設計網站。老闆提供一個叫做 COOLORS 的網站給同學做參考，可以選擇自已想要的主要顏色，點按空白鍵就能產生多種配色選項。

那要如何經由程式，去排列出不同顏色卻執行重複動作的流程呢？

老闆以陣列舉例，去執行顏色上的排列。在前一天的工作坊中，也有提到陣列以中括號執行即可。我們先列出需要的顏色，再將其存取起來。當形成一個完整陣列後，再套入重複圖形的顏色當中。

let colorList = ["#ffffff","#2e86ab","#d0cdd7","#ffa62b","#273469"]

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

function draw() {
  background(0)
  noStroke()
  for(let i=0; i<50; i+=1){
    fill(colorList[i%5])
    circle(width/4+i*(mouseX/10), height/2, 300 -i*6)
  }
}

在程式創作的好處就是能夠快速地進行大量編輯，例如如果要替換配色，只要在陣列中變換色票即可，又或是，想要變化圖形的位置，我們可以從觀察程式中哪裡有重複進行編輯，以下示範：

先設置一個 function() ，將會重複使用到的程式包在裡面，再將設置的代表文字，套入 draw() 中，簡化重複的程式，增加多樣化編輯。

let colorList = ["#ffffff","#2e86ab","#d0cdd7","#ffa62b","#273469"]

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

function draw() {
  noStroke()
  drawCircles(random(width), random(height))
}

function drawCircles(posX, posY){
  for(let i=0; i<50; i+=1){
    fill(colorList[i%5])
    circle(posX+i*(mouseX/10), posY, 300 -i*6)
  }
}

不想制式的都從同一個顏色開始，可以在顏色上使用 random，讓顏色隨機出現，也需要 int 套入在設定前，讓出現的數字得以四捨五入為整數。

for(let i=0; i<count; i+=1){
  fill(colorList[int(i+random(10))%colorList.length])
  circle(posX+i*span, posY, 300 -i*(300/count))
}

增加了隨機的亂數，作品是否又多增加了不同的詩意呢？老闆在這邊提出了有趣的看法，他認為，程式雖然可大量重複的行為，但再加入無法預測的亂數後，出其不意的呈現，就會在視覺上趨向傳統所謂的藝術感。

迴圈教學到這邊，休息十分鐘讓同學提問以及練習。有同學提問，為何在此次練習中，老闆使用 let 而不是 var 做函數參數呢？老闆在這邊鼓勵大家，雖然在 javascipt 當中是以 var 做使用，但 let 會更加嚴謹。舉例說明，用在函數定義範圍時，let 就是在大括號的範圍內具有作用。但如果是 var 的話，是以 function 為範圍，所以定義較大，判斷上較不容易。在這十分鐘，老闆也持續的做小技巧教學。例如，要如何隨機對應不同顏色組合，做圖形上的顏色變化，我們必須先設定不同的 colorList 設定顏色組合，再依據需求變更。

延伸閱讀：使用 let / var / const 宣告變數的差異（鐵人賽：ES6 開始的新生活 let, const – 卡斯伯）

let ColorList = ["#ffffff","#2e86ab","#d0cdd7","#ffa62b","#273469"]
let ColorList2 =["#c9cba3","#ffe1a8","#e26d5c","#723d46","#472d30"]

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

function draw() {
  noStroke()
  drawCircles(random(width), random(height), mouseX/5, 50, ColorList2)
}

function drawCircles(posX, posY, span, count=50){
  for(let i=0;i<count;i+=1){
    // 從清單中選取顏色
    let colorIndex = int(i+random(10))%ColorList2.length
    fill(ColorList2[colorIndex])
    circle(posX+i*span, posY, 300 -i*(300/count))
  }
}

可以依照上方陣列設定，變化要使用 ColorList 或是 ColorList2 執行效果。另外，設定畫布的大小可以讓畫面更接近畫作感覺。

再來進入到使用變數紀錄狀態，如同一個簡化邏輯的過程，就像是假如今天我們設置了三種不同筆刷效果供使用，要如何快速切換這些效果呢？最快的方式又是設定變數。設定筆刷 paintMode，並且設定筆刷在不同模式時的效果，像是隨機大小變化，就能使用 random 進行。

let colorList = "32373b-4a5859-f4d6cc-f4b860-c83e4d".split("-").map(clr=>"#"+clr)
let colorList2 = "0c090d-e01a4f-f15946-f9c22e-53b3cb".split("-").map(clr=>"#"+clr)
let colorList3 = "6622cc-a755c2-b07c9e-b59194-d2a1b8-fff".split("-").map(clr=>"#"+clr)
let colorList4 = "2f2d2e-41292c-792359-d72483-fd3e81-fff".split("-").map(clr=>"#"+clr)

let paintMode = 0

function setup() {
  createCanvas(1000,1000);
  background(0);
  paintMode = int(random(2))
  // print(colorList[2])
}

function draw() {
  // background(0)
  noStroke()
  if (paintMode==0){
    drawCircles(
      random(width),random(height),
      mouseX/5, 50, random([colorList, colorList2])
    )
  } else if (paintMode==1) {
    drawRects(
      random(width), random(height),
      mouseX/5, 50, random([colorList3, colorList4])
    )
  }
}

function mousePressed(){
  paintMode++
  paintMode = paintMode %2
}

function drawCircles(posX, posY, span, count=50, useColorList){
  for(let i=0; i<count; i+=1){
    let colorIndex = int(i+random(10) )%useColorList.length
    fill(useColorList[colorIndex])
    circle(
      posX+i*span, posY,
      300 -i*(300/count)
    )
  }
}

function drawRects(posX, posY, span, count=50, useColorList){
  for (let i=0; i<count; i+=1) {
    let colorIndex = int(i+random(10) )%useColorList.length
    fill(useColorList[colorIndex])
    rectMode(CENTER)
    rect(
      posX+i*span, posY,
      300 -i*(300/count)
    )
  }
}

應用重複的紋理與符號，改變物件的大小、方向或是出現的頻率，讓畫面的效果更加豐富。

第二階段 – 色彩

在 p5.js 裡常用的色彩系統有 RGB 與 HSB 兩種，RGB 是指顏色紅、綠與藍三種交疊後產生，HSB 是由色相、飽和度與亮度三種維度組成。應用 p5.js 的 Color 物件，並填上以像是一個數值、RGB 數值、填入顏色名稱、填入色票號碼或是宣告色彩模式後再填入色碼等多樣化模式都是得以進行的。了解基本設定後，就來進行實際操作示範吧！

先由圖形的顏色變化開始，假設要執行顏色漸變的圓形，可以先設定色彩系統 HSB，再依據可能使用滑鼠讓顏色變化的技巧，進而使顏色做漸進變化。

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

function draw() {
  colorMode(HSB)
  fill(mouseX%360, 100, 100)
  ellipse(mouseX, mouseY, 500, 500);
}

多方應用 random，使其在顏色或是圖形大小變化上，都能做一定範圍的控制。

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

function draw() {
  colorMode(HSB)
  noStroke()
  fill(random(0,50), random(50,100), 100)
  circle(mouseX, mouseY, random(300));
}

或者是控制在特定範圍內，即使是 random 的效果也能控制想要的方向，像是指定色相的呈現，顏色偏移在指定的範圍內。

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

function draw() {
  colorMode(HSB)
  noStroke()
  let startHue =random(0,150)
  for(let i=0; i<20; i++) {
    fill(startHue+i*5, random(50,100), 100)
    circle(mouseX+i*20, mouseY, 200-i*10);
  }
}

另一種常見的顏色使用功能為  blendMode(模式名稱)，與 p5.js 當中的疊色模式十分相近， 帶入不同的模式時，疊色的效果就會不同，以 SCREEN 作範例，就是亮系的疊色效果，老闆調整變化速度與圓形顆數示範疊色效果，過程中也可以應由透明度的調整變化出不同的感覺。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  frameRate(5)
}

function draw() {
  colorMode(HSB)
  noStroke()
  let startHue = random(0, 150)
  blendMode(SCREEN)
  for(let i=0; i<1; i++){
    let currentStartHue = (startHue+mouseY)%360
    fill(currentStartHue+i*5, random(50,100), 100,1)
    circle(mouseX+i*100, mouseY, 200-i*10);
  }
}

或是設定變數，讓在不同位置圖形有指定的顏色，限制色相的範圍，使其在生成時顏色為固定效果，以及加上填塞與單純線條的選項，讓作品更多活潑變化性。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  // frameRate(5)
}

function draw() {
  colorMode(HSB)
  noStroke()
  let startHue = random(0, 150)
  blendMode(SCREEN)
  // blendMode(MULTIPLY)
  for(let i=0;i<1;i++){
    let xx = random(width) + i*100
        yy= random(height)
    let currentStartHue = (startHue+yy/3)%360
    if(random()<0.5){
      fill(currentStartHue+i*5, random(50,100), 100, 1)
      noStroke()
    } else {
      stroke(currentStartHue+i*5, random(50,100), 100, 1)
      noFill()
    }
    circle(xx, yy, random(100));
  }
}

但，當在使用重複多種圖案顯示時，有些圖案並沒有顯示在畫布上，這時可以應用 push 與 pop，將圖案分別開來指定顯示，或是設定 frameRate() 圖形的出現速度變化，控制一秒中出現幾次。

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  // frameRate(5)
}

function keyPressed(){
  if (key == "1") {
    frameRate(5)
  } else if (key == "2") {
    frameRate(30)
  } else if (key == "3") {
    frameRate(60)
  } else if (key == "4") {
    frameRate(120)
  }
}

function draw() {
  colorMode(RGB)
  background(0, 1)
  push()
    colorMode(HSB)
    noStroke()
    blendMode(SCREEN)
    let startHue =random(0,50)
    // blendMode(MULTIPLY)
    for(let i=0; i<1; i++){
      let xx = random(width)+i*100
          yy = random(height)
      let currentStartHue = (startHue+yy/3)%360
      if (random() < 0.5) {
        fill(currentStartHue+i*5, random(50,100), 100, 1)
        noStroke()
      } else {
        stroke(currentStartHue+i*5, random(50,100), 100, 1)
        noFill()
      }
      circle(xx,yy, random(50,500));
    }
  pop()
}

練習過程中，老闆也陸續回答同學的發問。

【問題一】請問 Openprocessing Editor 與 p5.js Editor 有所不同嗎？

回答：其實兩者的使用方式以及效能都是大同小異的，皆為提供給創作者即時顯示創作效果的地方。但老闆覺得在整體設計上，openprocessing 對於初學者來說較友善且容易上手，但每個人的感受不一，建議同學都能去嘗試看看自己比較適合哪種應用介面。

【問題二】請問 p5.js 可以做到如同 Team Lab 或是 梵谷光影展那樣的內容嗎？

回答：可以，但在 3D 的呈現上，因為函式庫的內容還沒有那麼完整，在建構呈現效果以及動畫上可能就需要再多加著墨。

【問題三】請問對於每行的分號加或不加有什麼心得或是建議嗎？

回答：老闆在撰寫時習慣不加，因為在 p5.js 撰寫時目前並不是必要的。但是如果同學們擔心的話，在網路上也都能找到自動幫你每行加分號的執行系統。

【問題四】請問 p5.js 有類似於 opencv 進行影像處理或是人臉辨識的進階 library 嗎？

回答：有的，但並不是官方的，名為 ml5.js。在臉部的輪廓或是 pixel 的呈現都是能夠抓到的。

老闆也有執行過類似的創作，抓取人體位置輪廓，以線條和原點呈現。（作品參考）也建議如果有更多函示庫應用的相關資訊想了解，可以觀看上一篇的影片介紹喔！（影片連結）

第三階段 – 畫布操作

此階段以畫布操作，使同學在畫複雜圖形的時候，能以簡化的方式執行，快速且不需多樣計算，重點即是如何簡化繪製圖形的位置。

老闆先以要在畫布上畫多重圓形為舉例，比較先前執行與畫布操作後的差別。這邊應用到三角函數，因為需要使用三角函數去執行圖形的位置，而三角函數的取得需要使用到角度 degree() 功能去計算，今天以要得到一個在中心點圓形的45度角運行的圓形，以下為設定了角度、半徑與函數設定的程式。

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

function draw() {
  background(0)
  fill(255)
  let r = 200
  let ang =frameCount/100
  let x = r*cos(ang)
  let y = r*sin(ang)
  ellipse(width/2, height/2, 100)
  ellipse(width/2+x, height/2+y, 100)
}

此類的設定模式，會出現兩種問題。一，算式偏多，應該可以更加簡化。二，如果要畫多個圓形，就必須重複設定位置。對於這一系列的設定，老闆先解釋角度後說明如何應用，為何畫布的操作便是可以簡化此應用的方式。

我們在操作時，是為了要設定以一個圖形為中心，並依據此的某個特定角度，使用 translate() 進行其他圖形繪製。假設，今天要為中心的圖形，其實位在左上角，那我們移轉畫布就是讓左上角的圖形變成畫布的中央。（移轉畫布解說參考）

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

function draw() {
  background(0)
  fill(255)
  let r = 300
  let ang = frameCount/100
  let x = r*cos(ang)
  let y = r*sin(ang)
  translate(mouseX, mouseY)
  ellipse(0, 0, 100)
  ellipse(x, y, 400)
  ellipse(x, y, 300)
  ellipse(x, y, 200)
  ellipse(x, y, 100)
  fill(255, 0, 0)
  rect(200, 200, 50, 50)
}

此種移轉畫布的方式，讓圖形的總體位置相關參數，並不會跟程式邏輯混和在一起。偏移結束後，接下來進到畫布的旋轉。當設定為同種圖形在不同的位置重複出現，使用 translate() 與 roatate() 繪製出多個圖形。

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

function draw() {
  fill(255)
  let r = 300
  let ang = frameCount/100
  translate(width/2, height/2)
  rotate(ang)
  translate(200, 0)
  rect(0, 0, 200, 200)
  fill(255, 0, 0)
  rect(200, 200, 50, 50)
}

嘗試多做點不同變化，像是旋轉的幅度以及圖形的大小隨著旋轉有所改變。

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

function draw() {
  push()
    fill(255)
    let r = 300-frameCount/2
    let ang = frameCount/100
    let currentScale = 1-frameCount/500
    translate(width/2, height/2)
    scale(currentScale)
    rotate(ang)
    translate(r, 0)
    rect(0, 0, 200, 200)
  pop()
}

在顏色排列上，除了 random 的隨機排列外，也能使用 noise() 執行持續性的變化。什麼是 noise？其代表著連續性的、可預測性的亂數。依據 perlin 噪聲圖上的不同位置，去影響每個設定，給相同點的時候，出來的結果會是一樣的，所以就可以嘗試將 random 更換成 noise 去觀察結果的差異。

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

function draw() {
  noStroke()
  push()
    colorMode(HSB)
    fill(noise(frameCount/50)*100,100,100)
    let r = 300-frameCount/2
    let ang = frameCount/20
    let currentScale = 1 - frameCount/500 + random(0.1, 0.5)
    translate(width/2, height/2)
    scale(currentScale)
    rotate(ang)
    translate(r, 0)
    rect(0, 0, 200, 200)
  pop()
}

將 noise 與 random 共同使用，讓顏色變化不死板，有多樣性的呈現。使用 hue 色相作為變數，去引導顏色為漸進的變化。

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

function draw() {
  push()
    colorMode(HSB)
    let useHue = (random(20)+noise(frameCount/50)*100 +frameCount/3)%360
    fill(useHue,100,100)
    let r = 300-frameCount/2
    let ang = frameCount/20
    let currentScale = 1 -frameCount/500 +random(0.1,0.2) +noise(frameCount/50)/2
    translate(width/2, height/2)
    scale(currentScale)
    rotate(ang)
    translate(r, 0)
    rect(0, 0, 200, 200)
  pop()
}

今日工作坊總結

在本次工作坊的下篇，我們總共學習到了三大項主題，包含迴圈的建構創作規則、變化色彩使用與留下痕跡，到最後的進階應用，畫布的變化。上述這些應用，老闆在做後一個示範中，將上述的功能都包含在裡面。由左到右畫一連串的長方形，這些動作是可以被累加的。先使用 translate 將圖形重複的執行，再設定變數以及出現的規則，將圖形依照滑鼠位置做變化。

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

function draw() {
  // ellipse(mouseX, mouseY, 20, 20);
  fill(random(255), 200, 200)
  translate(0, height/2)
  rectMode(CENTER)
  for(let i=0; i<50; i++){
    rotate(map(mouseY, 0, height, -0.5, 0.5))
    translate(50,0)
    scale(0.95)
    rect(0, 0, 500, 500)
  }
}

雖然快接近結束，同學們還是十分積極的詢問問題，像是，如果想針對資料進行統計的視覺化呈現，有什麼相關的 lib 或 sample 可以參考嗎？比如地區人口統計？針對此問題，老闆認為目前 p5.js 的函數庫在視覺化上的效果還不是最齊全的，可能會使用其他函數庫如 D3.js 來進行，但也還是可以參考先前的相關課程，針對 p5.js 在視覺化上的 api 應用教學，來嘗試進行（參考文章）。

最後，也不免俗的與同學分享老闆在互動藝術程式創作的其他課程，或是影片推廣給大家。包含 Creative Coding TW – 互動程式創作台灣站 的專業文章網站、社群軟體上的即時資訊分享 老闆 來點寇汀吧。 Boss,CODING please（臉書）、老闆來點寇汀吧 Boss, Coding Please （臉書）、老闆,來點寇汀吧。Boss, CODING please（Youtube 頻道），當然還有想要進一步正式開始創作，歡迎加入 互動藝術程式創作入門課程 開始學習！本次分享就到這邊結束啦，歡迎各位一起踏入程式與藝術交織的世界！

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

這篇文章 p5 js互動藝術程式創作 – 初階應用實戰教學！（下篇） 最早出現於 Creative Coding TW - 互動程式創作台灣站。