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

哲宇老師榮幸受邀在 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 數位永恆生命的靈魂魚 – 製作過程

大家好，我是生成式藝術家吳哲宇，四五年前我開始製作動態的數位藝術，像是互動網站、平面設計等開始對踏入互動設計的領域，後來研究所到了紐約 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 - 互動程式創作台灣站。

黑洞創造創意總監：古健樺

本次講師之一 － 黑洞創造創意總監、零維空間創辦人以及政治大學 3D 遊戲程式兼任講師 － 古健樺，從資工科系相關背景，進入到網頁設計專業，並在接觸到 Unity 後對互動設計領域十分感興趣，因此從工程師的角色轉換到目前專注於介面設計，讓網頁設計專案執行時除了注重流程外，也會更重視介面細節。

古健樺總監觀察到，現今在網頁頁面設計流程中，設計師端與工程師端，時常會對於相同問題點，因理解角度不同而討論，但其實最源頭的執行方向本就有所差異。如何面對這樣的問題呢？古健樺總監認為，可能是設計師方要多一分在程式語言上的能力，又或是工程師在原有的程式語言能力加上些許設計概念，才能有效加速流程的進行。

執行專案介紹

古健樺總監認為，原有的程式語言能力加上多項平台或遊戲引擎的開發學習，強調必須要善用資源的運用，並且更專注在創意流程的設計或是更艱難的技術上，才是未來網頁互動設計的趨勢。在政大遊戲程式教學課程擔任兼任講師時，跨領域或是從零基礎開始的學員有時候會因為不同理解角度而迸發出更多的創意。古總監也在課程中帶領學員進行黑客松，藉此勾引出對程式的興趣而去嘗試學習更多不同的程式語言。

而 黑洞創造 ，主打以美感與設計製作出具有豐富視覺的科技服務，創辦初衷希望能傳遞「勇敢突破、創造力、喜愛接觸新科技」的品牌形象，也因此產出的作品具有極高的視覺吸引力。業務內容包含特效網站、互動科技以及虛擬展場。

以下為黑洞創造執行專案的介紹：

JPG 擊樂實驗室 – 朱宗慶打擊樂團合作

互動裝置設定在當樂手敲擊時，下方投影就會出現相對應的效果，或是將果物與聲音裝置串起，形成另一種趣味。

台北市電腦商業同業公會製作 – 技能競賽線上展

除了展現線上展覽趨勢外，此專案裡七十幾項職類競賽，在兩個月的時間內完成 3D 圖片展示，攤位也皆可以使用滑鼠旋轉，讓整體呈現更富有趣味性。

金赫獎成果展

在展間裡，除了作品欣賞外，觀者還可以進行投票。另外，在展間的整體規劃上，光影以及客戶端的視覺重點 logo 也是可以多加注意的小重點。

大溪大禧

與衍序規劃設計合作之專案。將地方和相關民俗活動盛事做結合，從抽籤、繞境和煙火等等，都做出精美的互動。例如，觀眾在繞境時，可以先選擇不同角色進行活動，在隊伍中，個神將的順序也都參照民俗規範。每個不同的停駐位置都有不同的變化出現，這樣的 CUE 點在互動展場製作中，也讓使用者印象深刻的小技巧。

品牌諮詢公司 Distractions! 網站

互動設計上，介面的動態效果呈現都必定會經過多重修改，此份專案上可以注意到網頁中的球形在行進的狀態，除了拖拉外，還有在放掉球形時，會有動畫式的反彈。

兩廳院合作專案：神不在的小鎮 線上 串聯兩廳院活動，進行與劇本有相連結的線上互動網站

網頁主要強調 2D、3D 及 4D 的呈現，本次專案中黑洞設計主要負責2D 的進行。合作專案本身是一部沉浸式劇場的表演，此網頁主要是以劇情前導部分製作，因此內容詳盡，讓沒有機會前去現場的觀眾，也可以藉由線上展覽了解劇情。特色方面，一樣可以選擇角色，主要畫面以 Pixel 風格完成。

Ladybug 線上策展

此專案以串聯女性設計師為概念的計畫，畫面視覺風格上，想傳達「數量多」的概念，因此使用類似桌面風格，在桌面上多個資料夾，以及文件點開後只會不斷重複堆疊的效果。

品木宣言專案

品木宣言在以線上方式進行直播時，使用 Unity 打造的展間進行展示。在這專案中，強調的是互動網頁設計在串接上的學習重要性。

NEWYELLOW紐耶羅 NFT藝術展

此專案是黑洞創造第一個以虛擬畫作進行展覽的線上展間，使用線上展間進行 NFT 的呈現有一項最大優點，就是使用像是 Javascript 或是 p5.js 呈現的畫作，可以將其作品 3D 的動態效果直接呈現，線上瀏覽動態作品，所以不會是單純以平面的方式展示。

Art Taipei 台北藝術博覽會

展場上，將畫作連結賣場以利買賣，像是在第一天就將七幅畫作以 RNFT 的方式銷售出，購買之後在現下進行兌換。但也因為是多家藝廊合辦，所以針對鏡頭位置的規劃也是當初調整許久的部分。

羅芙奧線上拍賣｜無設限：NFT 專場

羅芙奧為藝術集團，本次合作是為進行 NFT 交易買賣 NFT 拍賣虛擬展，希望帶給藏家們如同在實體展場中觀賞 NFT 收藏，大破既有的規則框架，沉浸在欣賞當中。

從 Web 到 Web3 的數位流程

從數位化 Web 到 數位轉型 Web2、Web2.5再到現在的數位登陸 Web3到底各自代表了什麼？

╴數位化：數位典藏列如將文物掃描、聲音以 Mp3 方式錄製作為紀錄，或是原本只本書冊轉換為電子書。
╴數位轉型：將原先數位化加上原有商業模式，融合改變後形成全新的商業模式。
╴數位登陸：以區塊鏈為基礎，從數位轉型前行的過程。

在 Web3 的浪潮下，古總監 2022 年結合 Web3D 技術打造 Web 3.0 的產品 Virsody i.o 。
Virsody i.o 為線上虛擬策展平台，核心概念主打「在前往 Web3 的路上沒有人該被留下」。強調數位的東西需要以數位的方式被展示出，例如 NFT 、多媒體相關物件、3D模型，甚至是 iframe 網頁本身，皆能嵌入。希望大家都能共同無負擔的進入元宇宙，其簡易的編輯和上傳應用，或是 SEO 縮圖與管控展場模型地圖，主要目的是想讓不是 3D 專業的觀眾也能操作使用，能快速達到虛實整合，讓線上與線下展覽相輔相成，從展前預熱、展期互助到最後的展後留存，都是未來在虛擬世界與現實中希望能夠達到的最佳目標。

閱讀完文章後，對於線上展間感興趣嗎？歡迎一同追蹤古健樺總監所開設的 黑洞創造臉書社團 ，或是加入 動畫互動網頁特效入門（JS／CANVAS） 及 互動藝術程式創作入門課程 開始學習互動式網頁應用的基本功吧！還有不要忘了 追蹤老闆 Twitter 和訂閱 老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷！

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

這篇文章 【互動網頁設計網聚】數位登陸：網站3D特效到虛擬展間 – 黑洞創造創意總監古建樺 最早出現於 Creative Coding TW - 互動程式創作台灣站。

版塊設計總監：李明

李明畢業於實踐大學媒體傳達學系，他從學習動畫接觸到設計，再發展到現在的網頁，是版塊設計的作品多以動畫作為主要呈現風格的原因。他從 2010 年進入產業，至今將近 12 年的時間，於 2015 年時創立版塊設計。目前團隊人數 20 人以上並執行超過 200 個專案。公司目前業務以品牌識別設計和網站設計開發為主，擅長以互動網頁作為載體傳達品牌的精神和資訊。與前面講者稍有不同的是，板塊設計是先由品牌轉換成視覺，再從視覺轉換成設計與互動，達到一個網站所要傳遞的目的與樣貌。

重點專案介紹

高雄流行音樂中心

使用 3D 模型技術將場館呈現在網站上，希望藉此吸引外縣市人參觀當時臺灣第一座流行音樂場館。藉由鏡頭移轉細節，更有置身於場景內的效果。

放視大賞

與三頁文團隊共同執行的2021放視大賞專案，以主視覺做相關設計發想、動態海報視覺乃至於網站等。

臺灣設計研究中心

使用臺灣文化策進研究院計延伸，以曲面方式呈現線上展覽，將展品環繞在視覺當中進行觀看和互動。 （相關報導：【2020 創意內容大會│Re: 眾感未來（Human Touch – A Closer Future）】Taiwan Creative Content Fest）

Politics Design 政治設計

版塊設計的內部專案。團隊對於社會議題抱持著有趣的心態執行，希望能引起大眾對於公共議題的重視。

實踐大學入學服務中心

遊戲橘子 －GAMA 25周年線上展

與前面講者古健樺所分享的 LadyBug 專案概念相似，但呈現方法更加視覺化。

金曲獎GMA29 – 活動網站

多元的客戶類型

除了上述多方面專案外，版塊設計的客戶從捷安特、實踐大學到可不可熟成紅茶官網，跨足多項領域。數位設計裡的規劃、設計與整合，到網站介面設計、前端後端程式開發和品牌視覺設計，還有許多延伸出來如攝影、動態包裝、線上展覽、ARVR、3D 或是品牌識別等等的小細節都是版塊設計執行的項目。

版塊自己的官網又是如何設計的呢？

他們以地圖概念進行設計，從最外層衛星地圖，到街區景象，最後進到電腦螢幕，表達版塊設計整體一條路的概念。

動態 SOP 與專案經驗

網站動態規則，從互動、設計到生成式藝術，要如何轉換成商業價值呢？其實在一般的網站，使用上與網頁可以進行互動的階段非常多，李明總監在這邊將其觀察到的部分進行 A 到 K 的設計規劃，形成規則 SOP。（延伸閱讀：動態特效網站規則 SOP）

從載入動態到離場畫面都是需要注意的點，但如果全部進行對於效能上可能不是這麼平衡，所以李明總監建議著重或是以優先完成在 A、C、D、F、G、H 這六項上為目標，讓網站呈現更有魅力與互動性。

李明也在講座分享中給上圖六個階段提出建議，像是從網頁 Loading 到進入一個完整頁面，這個載入環節的進場動態，不論是以文字或圖像呈現，都能讓網站細節和品牌視覺的延伸感有所加分。進入網站頁面後，第一個主要呈現的即為代表動態。而就版塊設計的作品舉例，大多皆會在代表動態當中呈現具有高強度視覺印象的圖像動畫，像是前面介紹的高雄流行音樂中心或是文策院專案；或是將頁面做移動時的滾動動態，不單單以平面化圖像呈現，而是經由滑鼠滾動，給予不同的反饋，傳達更多的資訊層級；以及使用游標動態傳遞給使用者如主動提醒般的作用。除去以上幾點必要的執行動作，轉場、持續、點擊、離場或是設備等等，以上動態在執行後會使整個網站體驗更加完整。依據不同的客戶、專案性質，甚至是網站使用情境或架構還有自己本身的技術含量，綜合評估後決定需要編輯哪些動態到網站上面。

接下來，李明以自身經營的網站趨勢社團經歷，與觀眾分享網站觀察上的 11 個重點，目的是在提供不同的觀察角度，不論是網站或是任何的設計作品，我們都能使用這 11 個觀點去練習欣賞或是分享給其他人不一樣的觀點。

1. 了解網站在幹嘛？
   網站本身可能是要賣東西？是推廣活動？或者是線上展覽？
2. 主動態是什麼？
   當觀者在關掉網站後，腦中會浮現對網站第一個印象的事物。
3. 動態 SOP 分別是什麼？
   11 個不同的網站動態規則 SOP 是如何執行的呢？
4. 可能採用什麼技術？
   從動態到整體設計是以什麼技術去執行，並且更進一步思考，這份技術本身可以被使用在何項專案上。
5. 版面切版方式？
   觀察切版目前是否還有再創新的設計
6. 網站突破點？
   例如：一般在執行文章頁面上下篇轉換時，以直接轉換最為常見。但，當你在換期間的三秒內，跳出具有解釋下篇涵義的圖片時，這就呈現了其網站的突破點。
7. 品牌延伸到網站的設計元素
   不只動態技術，設計的含量也要加入思考。如何藉由網站持續傳遞品牌特質，可能是使用具標誌性的圖片，或是顏色上是否只使用了品牌主色，輔助色上面的配比又是如何呢？
8. 缺點是什麼？
   將缺點提出來，並加以思考如果是自己本身在執行此專案的話，會如何修正缺點。
9. 手機版做得如何？
   現代人在手機上面的使用遠遠大於電腦，因此手機版面設計顯得比以往更加重要。一般可能就會以資訊傳遞為主，但某些網站能將電腦版網站無痛轉移至手機版，此類的範例即可以馬上思考學習。
10. 聯想到什麼設計作品？
    在專案與專案間發現類似或是元素擷取的部分，這樣的聯想與記憶幫助了腦中資料庫的建立。
11. 如果是我來做的話會怎麼做？
    在閱覽完一個專案後，不妨開始思考如過是自己設計將會如何執行。

參考案例介紹

一開始進入網頁時，發現中間透明棋子會隨著滑鼠滾動而改變，誤以為中間的透明反光也會跟著變化，後來發現中間棋子只是單純的圖像呈現。這樣翻轉概念的設計和切版有許多跟平常不同的地方，連手機版也是無痛轉移。嘗試套入上述 11 點做自我問答，那這份專案如果是自己執行的話，有哪部分認為能再改進呢？棋子是否能轉換成其他方式的動態，或是能不能再更進一步的資訊分層？

一進入網站，在眼前呈現的便引人思考，它是如何設計出如此動畫卡通的風格呢？3D 地球上的點按動態是如何執行的呢？如此的進行探討練習，對於設計也將有一定幫助。

版塊設計專案介紹與執行流程分享

可不可熟成紅茶

可不可熟成紅茶在視覺傳達的全面性非常完整，網站動態以簡單的弧形視差效果呈現。整體專案從網站想要呈現的目的、品牌名背後呈現概念了解、理解客戶需求以及運用客戶品牌現有資源，為最一開始所需要知道的資訊。可不可熟成紅茶的特色之一為全台不同店家擁有不同的專屬店卡，店卡的設計特色以版畫和復古為主。「將世界各地的好茶，飄洋過海傳遞給你。」是品牌想要強調的核心概念，結合上述品牌特點，與客戶品牌設計師共同構想了網站主視覺的運茶船。

專案流程如下：運用品牌現有的資源、理解網站想要達成的目標，透過 CIS 的 MI（Mind Identity 概念）、 VI（Visual Identity 視覺）、 BI（Behavior Identity 操作）去思考問題。客戶在 MI 上想強調手搖杯精緻化、 VI 將品牌形象延續與獨樹一格的風範、 BI 能以易用性為主，接下來，為列出專案關鍵字。 Cutty Shark 、冒險、手搖杯、水面、側視和茶等等組成設計發想來源，而實際的設計圖像也看得出此類小巧思，像是網站主視覺其實是浮在手搖杯水面的船，希望這艘運茶船能夠乘風破浪將茶運給你喝。再來是主件、顏色與字體設定，以及綜合上述來完成整體樣貌。整體規劃流程以及經由觀察角度可以發現，設計一個網站的動態不需要每一步都完整做到也可以極具吸引力，只要將想法完整呈現、氛圍適度掌握，思考如何才是對此份專案最有利的規劃，就能形成一個好的成果。

遊戲橘子 －GAMA 25周年線上展

遊戲橘子在2020年的合作專案，進行25週年線上展覽，回顧遊戲橘子經歷的歲月與不同遊戲的開發。也因此呈現上，埋設了許多以 Windows95 的特殊視窗操作，加上結合品牌與小遊戲的巧思。流程與上個專案雷同，顏色、字型到轉換遊戲橘子本身自有的 Icon， 與設計了許多彩蛋在網站體驗上，使整體更加活潑也貼近品牌舉行此線上展覽的目的。

高雄流行音樂中心官方網站

在高雄流行藝術中心專案中，使用到 JL Design 品牌設計，發想各項 Icon 與進行3D 場館建置。

高雄流行音樂中心官方網站

整體以「港灣」為發想來源，像是首頁的進場動態就結合滑鼠按壓的時間長度與加速音波的呈現，或是除了首頁外，活動快訊等頁面也加進波型及小泡泡等小彩蛋。希望藉由這些細節，讓觀者在體驗上能感受到更多高雄流行音樂中心想要傳達的概念。

TDRI 台灣設計研究院網站專案

專案中，主要使用滾動動態與持續動態進行，以台灣設計研究院 Logo 裡的兩顆眼睛進行網站貫穿。根據品牌形象、點線圖片以及想要傳遞的政策想法做設計延伸，主要強調台灣過去與現在的政策是如何對接國外及擴散。在單頁式的網站中，也隱藏許多體驗性小彩蛋，使用滾動動態和數位體驗行為營造趣味性。

Politics Design 政治設計

此為公司內部自行設計之專案，目的為蒐集台灣至今，與選舉相關的設計並希望引起民眾對選舉的注意。將原本的問卷調查型式轉換成類聊天室的互動，版塊丟出問題，兩位候選人政見描述以及互動者的回答，讓互動者在做完問答之後可以實際體會到，自己期望的理念與欲投的候選人是否相同。

網站趨勢

網站趨勢 WebCRACK 是李明總監經營的社團，主要分享現今網站趨勢，以及網站上的設計和技術分享，近期也有新手網頁設計師友善的圖文教學。最後，如果對網站設計有興趣並想增進能力的同學，講師在 HaHow 也有開設課程，深入了解如何將品牌轉換成網站、設計師與工程師之間的溝通、動態回推設計以及諸多動態與網站結合的教學。

閱讀完文章後，對於互動式網頁感興趣嗎？歡迎一同追蹤李明總監所開設的網站趨勢社團，或是加入動畫互動網頁特效入門（JS／CANVAS）及互動藝術程式創作入門課程開始學習吧！還有不要忘了追蹤老闆 Twitter 和訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube 頻道讓學習不間斷！

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

這篇文章 【互動網頁設計網聚】版塊的線上建築－版塊設計總監李明 最早出現於 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 - 互動程式創作台灣站。

KIVΛMKII 科幻聲音之旅：經驗分享

大家好，我是 Kiva，我是做聲音工作的，不過這是我第一次講非關聲音主題的專場，所以我現在有點緊張（笑）。今天希望能從我的專業和技術出發，帶大家看看相關的專案，從基礎知識開始，讓大家從聲音的角度理解「設計聲音」這件事情，我在設計聲音的時候也會根據畫面做轉換，這與大家在視覺設計上也許也有共通的地方。

我們先聽一小段我的作品，☞ 前往聆聽（編按：是好聽、有趣也很特別的一段音樂，有興趣的人推薦花個兩分半的時間聽聽看喔！），我會定義自己的曲風是 Cinematic、Base music，我以前是玩樂團的，後來對電子音樂產生興趣，接觸到 EDM、Trance，越聽越深以後就接觸到 base music、mid-tempo，最近很紅的一款遊戲 Cyberpunk 2077 裡面的配樂都是這種類型的音樂。我自己對這樣的曲風以及這樣的曲風如何呈現畫面感或電影的感覺非常有興趣，所以我至今都在專研怎麼做出這樣的效果跟聲音。

我們可以看一下在軟體裡面能夠對聲音做什麼樣的處理跟應用。在數位音樂軟體中，音樂檔案會分軌、線性的方式來呈現，我們在裡面也會用到很多生成式藝術，我們會用聲音作為 source，再用許多不同的效果器讓電腦隨機對這個聲音做出變化。我自己偏好在這個過程之後再加上一個步驟，也就是當聲音生成為不同的段落以後，再透過 audio 的方式將它們剪下來，然後選出我喜歡的段落來使用。這樣就能讓自己設計的 source，再加上 audio 作出的變化，再以自己偏好的方式編排，就能產生非常原創、獨一無二的作品。

我們先大概介紹一下有什麼基本的效果器可以使用，聲音的效果器有非常多種，但其實可以將它們歸納為三個類別：dynamic（動態）、frequency（頻率）跟 space（空間）。通常在設計聲音的時候，可以注意到現在我們在聽音樂的時候大概 95% 以上都是用 stereo 格式，也就是兩個發聲體，但是你必須要創造 3D 的效果給聽眾，有點像是我們在設計 3D 的影像，雖然螢幕是平面的，但可以利用大小、遠近、光影製造出立體的效果。聲音也是一模一樣的概念，我們可以利用聲音的大小、遠近、頻率的高低或空間中的位置不同，讓聽的人感覺到空間，去聽到聲音的位置差異等等，其實是用不同的效果讓大腦產生 3D 的錯覺。

Dynamic（動態）

動態其實是在控制聲音的大小，因此如果這個效果器會對音量產生嚴重的變化，我就會歸類在 dynamic，例如 compress、saturation 等等。

Frequency（頻率）

因為現實空間是 3D 的，聲音也分為三個軸，上下、前後、左右，而 dynamic 控制的是前後軸，一個聲音如果是一樣的狀態，當它越大聲代表離你越近、越小則越遠；而 frequency 控制的則是上下軸，當聲音高頻越多，聽起來就會在音場的上面；低頻越多則會在音場的下面。這跟我們人體如何跟音頻共鳴有關：高頻的聲音是跟鼻腔產生共鳴，低頻的聲音則是跟胸腔共鳴，因此即使你是帶著耳機聽見一個聲音，即使這個聲音並沒有在空間中產生任何震動，我們的大腦也會自動產生高頻在顱腔上方、低頻在顱腔下方的判斷，在腦內建構出音場。因此我們也是利用大腦這樣的特性，在音樂中產生不同的聽覺效果。

Space（空間）

Space 就是左右軸，也就是聲音要多寬？如果一個聲音是 mono 單聲道的，比如說我現在講話是單聲道，但是透過喇叭傳出來、在空間中迴盪的效果，你們聽起來就會是 stereo 立體聲的，也就是你們左右腦聽到的聲音會有些微的差異。當左右腦聽見的資訊有差距的時候，大腦就會認為這是一個立體的聲音。因此假設今天左右喇叭放出來的聲音是一模一樣的時候，大腦就會把它處理成中間訊號。

假設平常有在戴耳機聽音樂或者用喇叭放出來的習慣的話，可以觀察看看，有些音樂的 vocal 或是鼓聲這類的主要元素，會在兩個音場的中間，但是實體空間的中間並沒有喇叭，這就是利用大腦的特性產生的錯覺。

Sound Design（聲音設計）

最後還有一類是 sound design 類，後面時間許可我後面會再多介紹。這種類型是針對聲音的時間軸或生成的東西做一些亂數的變化，讓我們的聲音變得更豐富。如果是用這類生成的技術在處理聲音或設計的話，就會像是在跟電腦對話，因為它會產生什麼其實是沒有辦法控制的。

這也是為什麼我會在聲音處理的流程後再加上一個編排的程序，因為當我在設計聲音的時候需要讓它是合理的、有一定的音樂性。例如是在同一個調性上、或是在一定的節拍中出現，因此我會在流程的後面加上一個將這些亂數的東西排列，讓它聽起來是一個有邏輯的音樂，而不僅是一個聲響。

我自己做音樂的時候會在這兩者之間做調整，讓它不是流行的音樂、但也不完全是聲響，我喜歡抓取中間的平衡點，這是我自己在創作時覺得很有趣的地方。

在創作聲音時我會把音軌分成幾大類，畫面上藍色的部分會是節奏類的聲音，如：鼓、鈸等。

在我們設計聲音的時候，通常會有兩種音軌，一個是 audio 軌，一個是 midi 軌。audio 軌跟剪輯影片比較像，當你輸入一段音樂的時候，畫面上會有音樂的波形可以看，能夠看到聲音的大小、形狀等等，midi 軌的話則是會送一段 midi 訊號給電腦，電腦收到訊號以後，就會去讀取 midi 訊號裡的資訊，midi 訊號中主要有音高、 velocity（速率）等訊息，這些不同的參數會傳給電腦，電腦則去找出對應的參數、給出不同的回饋，所以我們可以透過這些細微的參數去調整聲音的變化。

紫色的部分則是我的有機樂器組。我在做聲音的時候喜歡把音樂分成有機跟無機，所謂的無機就是全部都是用合成器做的，在現實生活中比較不可能接觸到的聲音；而有機就是在現實生活中辨識度比較高的聲音，例如人聲、小提琴或是鈸類的聲音等，聽到這類聲音的時候較容易想像對應的樂器是什麼，無機的聲因則比較有序、會覺得是冰冷的，更接近是電腦程式算出來的聲音，比如說合成器產生的聲音全部都是整齊的，在現實世界中比較不容易聽到這樣的聲音。

我們可以這樣理解，當我們想要把一個聲音做得越有機的時候，其實可以讓它隨機性多一點，因為我們現實中很難接觸到很有序的聲音，很有序的聲音通常都是經過設計的，如果我們希望把聲音做的越有溫度、越人性化、越貼近自然的話，隨機性就要高一點。

但如果我們要做音樂，就不能都是隨機的東西，這樣聽眾會無法理解作曲家的意圖，所以為了要跟聽眾有互動感或邏輯感，好像是一種語言般的方式傳遞訊息給他人。

做音樂會分成作曲、編曲、錄音的環節。作曲是先寫出這首歌的概念、旋律或歌詞；接著是編曲，這首歌要是什麼樣的調性？每個段落怎麼安排？配什麼樣的樂器？最後是錄音，歌曲中有些東西如果是需要實錄的，我們就會進錄音室錄音。

但因為現在科技越來越發達，我們許多聲音都能利用電腦模擬出來，像是人聲，雖然也許還能夠聽得出一些破綻，但已經能夠模擬得很像，因此會有 vocal voice、初音這樣的產品，雖然我們聽得出來是電子音，但初音還是成為了一個許多人崇拜的虛擬偶像。

錄音之後會進到混音的環節，比如說 mixing，像畫面上這樣一軌一軌的聲音，我們去做音量上的調整、頻率的調整、三軸上平衡的調整等等，三軸的調整之所以重要，是因為我們在做數位音樂的時候，其實有許多的限制。

比如說：超過 0 分貝會爆掉，所謂爆掉表示上面的音訊已經受損了，電腦無法幫你記錄下來，因為電腦在記錄聲音是有一個固定的量，比如說我現在看一個單獨的音軌波形，桃紅色裡面的音軌有兩個，因為這是一個 stereo 的檔案，上面是左聲道、下面是右聲道，透過聲音的震動變化，電腦會將這個訊號送到喇叭的單體，單體裡面是一個磁鐵，單體根據訊號產生震動，讓我們聽到相應的聲音。

假設我把這個聲音的訊號往上推，堆到一定程度後它會變成平的，也就是超過了一定的值，當它超過一定的值以後，電腦就不會再記錄了，你再看它的波形就會發現有些地方的資訊不見了，這樣的聲音聽起來就會很可怕，會讓人很不舒服。所以我們可以用一些 compressor 或 limiter（限制器）之類的東西去處理它。

效果器

下面我們來介紹一些基本的效果器，瞭解效果器能對聲音做出什麼樣的應用。

之後如果我們講到聲音的動態變化，其實就是在指聲音的最小跟最大聲的差異值。例如說當我們說這段聲音的動態很大，就是在說這個聲音的最小聲到最大聲的差異很大；如果我們說這個聲音沒有什麼動態，表示這段聲音從頭到尾的音量是差不多的。

我們在做聲音時偶爾會需要動態很大的聲音，譬如遊戲的配樂，因為遊戲的前面可能會有人講話的聲音、可能會有其他音效，因此不能讓不同的聲音彼此覆蓋掉。比如說假設我今天在做 PS5 遊戲的配樂，我就不能以一般流行音樂的格式處理，如果這麼做的話，遊戲中其他的聲音加上去之後，就會造成數據超出接受範圍，玩家在玩遊戲的時候就不是一個好的體驗。

我們今天舉例使用一段鋼琴的音樂加上效果器做變化。我們可以使用編輯音樂的軟體裡內建的效果器，若內建的效果器不能滿足需求的話，就會額外使用外部插件（Plug-in）。

插件的部分如果是 Mac，一般我們可以使用 AU（Audio Units）或是 VST，這兩個軟體的格式在影片製作軟裡中也是相容的，因此在影片中若需要對音樂做人聲的處理等等，也能使用這些插件來完成。比如說覺得音樂疊加上人聲變得太大聲，就能夠使用 compressor 把兩個聲音壓縮到同一個音量，讓最後轉出的聲音能夠在容許值的範圍內，觀眾的聽覺體驗比較好。

圖像設計者在使用的圖像編輯軟體中也大多會有 EQ（ Equaliser，均衡器） 類的編輯器，用來調整色溫，而在音樂編輯軟體中，也會需要同樣的編輯器，來調整音樂的「色溫」，因為音樂也是有所謂的色彩。通常我們會將高頻的聲音歸類在冷色系，低頻的聲音歸類在暖色系，我自己在設計音樂的時候也是如此，假設今天的畫面是冰冷的，我就會用比較高頻的聲音去點綴；如果要設計的聲音是比較溫暖的，我可能就會用比較低頻的人聲或是大提琴點綴。

現在畫面中播放的音樂會有一個自動生成的圖像，我們稱之為頻譜，頻譜的左邊是低頻、右邊是高頻，剛剛有談到音樂的三軸，數位音樂在這三軸上有各自的限制。例如說音量有一個表頭的限制，一但超過 0db 就會爆音，而表頭的值是從 0、-1、-2 開始依次遞減，因此超過 0db 的聲音就會產生 clipping 的效果，會聽到的是「劈劈啪啪」的爆音。

第二個限制則是頻率，也就是豎軸的限制。人耳能夠接受音頻的範圍是在 20 赫茲到 20,000 赫茲，超過這個範圍的聲音人耳是聽不到的，也會根據你的年齡增長變窄，因此建議平常有帶著耳機聽音樂習慣的人，不要連續戴超過一個小時，因為超過 28 歲以後，當耳朵的聽覺細胞受損是無法再回復的，所以能聽到的頻率範圍只會越來越窄。

那頻率上的效果器能做的例如把高頻的聲音砍掉，我們叫做低通濾波器（Low-pass filter 或是 high-cut），這樣聲音高頻的聲音就會減少，像我們現場的這個喇叭並不支援低頻聲音，當我經過 filter 把高頻的聲音都砍掉，只剩下 60 赫茲以下的聲音，現場其實是聽不到聲音的，這個動作我們就叫 filter（過濾）。因此當我們覺得一個聲音的高頻太多、覆蓋到其他聲音的時候，我們就能夠透過 filter 過濾掉。

或者我們能夠透過另一種做法 Shelf。例如 high shelf 就是以某一個頻率做基準點，基準點以上的頻率全部做增或減，比如說我將以上的頻率都降低以後，聽眾聽起來會覺得高頻的聲音還留著，但是變小聲了，這樣的效果在音場上產生的作用是，雖然彈鋼琴的人還站在原地，但聲音變遠了，因此聽眾的感覺是這個聲音變得向前傾。我們能針對某一個頻率的聲音做變化，頻率上的調整比單純音量上的變化能讓聲音變得更豐富，讓音樂不會消失或被覆蓋，疊加上其他聲音或人聲的時候也就不會超過容許值。

我們在做 mixing 的時候也就是在做這件事情，比如說我的音樂有 200 軌，要讓這 200 軌能夠同時播放但又不會超出容許範圍且每一個元素都能夠聽得很清楚，這時候我們就會去做 masking，去找出哪一個樂器需要哪一個頻率，保留需要的頻率，砍低其他不需要的頻率並讓給其他聲音，這樣就能讓音樂有立體感，讓所有聲音都存在且能夠清楚地被聽見。

聲音在不同頻率波段產生的效果和色溫其實是不一樣的，當我把同一個聲音的低頻或中低頻的聲音推多一點的時候，聽眾會覺得聲音變暖了；反之如果是高頻推多一點的時候，聲音聽起來變冷、變得比較沒有感情，這就是 EQ 可以做到的事情，EQ 也是在音量之後，最容易去做設計變化的特質。

接下來我們講空間，空間第一個會接觸到的是 delay，第二個是 revert，就這兩個。delay 是能夠複製前一個 source 往後貼上，複製的量如果越多，漸弱就會越久。效果器上有一個值是 dry wave，它代表的是 blend with original，它跟原聲之間的比例是多少，假如我們設定 100%時，就只會聽見複製的聲音，不會聽見第一個原來的聲音；反之全關的話，就只會聽見原來的聲音，不會聽見複製的聲音。因此如果我們開在 50% 的時候，聽眾能夠聽見這兩個聲音是一樣的。

我們也能夠透過速率（rate）去改變原聲跟複製聲之間的間隔，音樂有一個值叫 bpm，代表的是每一分鐘的拍數，比如說 90bpm 代表的是一分鐘有 90 拍，因此我們可以調整音樂的速度，這樣的調整很容易做出一種「聲音很寬」的感覺。

如果有人對聲音設計有興趣，我會推薦從 live 入手，好處是底下的效果器可以串無限顆，對比的是傳統的 DAW（數位音樂工作站軟體）可能會有一些限制，例如一軌只能串 10 顆，但在聲音設計中很容易一軌串到十幾二十顆，所以十顆是絕對不夠用的；live 的第二個好處是可以隨時隨地串聯、並聯，所以我可以一個訊號進去，但是分成兩個不同的效果處理，最後再合併在一起。

動態

那最後我們再看一下動態的變化。動態通常跟設計比較沒有關係，如果要跟設計有關係，要再進到 distortion（失真破音）的環節，除了做動態以外，也能夠做一些泛音，讓聲音變得豐富。在畫面的頻譜中，每一個突起的峰我們叫做「泛音」，如果是 side-wave 的話，後面是沒有泛音序列的，如果有泛音序列的話，我們會覺得這個聲音聽起來是有音色的。

通常人耳在分辨音色的時候，依據的是後面的泛音序列跟它的排列組合與動態，讓我們能夠分辨這是一個鋼琴或是小提琴的聲音。因此即使聽到的同樣是 Do 的音色，我們可以區分這是鋼琴彈出的聲音、或是小提琴拉出的聲音。

頻譜中最左邊的峰代表的是這個音的「基音（fundamental tone）」，因此假如我現在彈一個 Do，畫面上的第一個峰對照下來的就是 Do 的基音，這裡是 261.63 赫茲，因此假如我在 261 赫茲的地方製造一個 side-wave，產生的就是 Do 的音高，基音就是人耳分辨音高的位置。

今天我們粗略分享的就是聲音設計可以對聲音做什麼調配，如果大家對合成聲音或是相關知識有興趣的話，想知道如何從聲音的角度創造畫面的話，我自己有開設私人的課程，大家有興趣的話可以到我的 Facebook：Kiva Wu 了解更多，我們可以一起聊一些跟聲音設計相關的東西。

下面開放給大家 Q&A。

Q & A

Q：想了解 compressor 的使用？

Ａ：好，這個會需要花一點時間讓大家理解。比如說我們現在看到一段音樂的波形，畫面上有的波很小、有的波很大，這個就是所謂的動態差。通常 compressor 正常的使用方式是把大聲的地方壓小，小聲的地方不變，因為假如我把整個音量（volume）變小的話，會連小聲的地方都變小，因此 compressor 可以幫我們做到期望的調整。

當我們把聲音放進 compressor 的時候，你會看到四個主要的參數，包括 Threshold、Ratio、Attack、Release。礙於時間的關係，今天沒有辦法講到 Attack 跟 Release。

Threshold 就是門檻，當音樂超過門檻的時候，compressor 就會把波形往下壓，這樣就能夠讓動態差變小，當動態差變小的時候，就有空間讓我們把音量（volume）一起調大。這個就是 compressor 最基本的用法。

而 Ratio 則是決定我們希望把一個聲音壓小的比例。舉例來說，我們今天的 Threshold 是 -10 db，輸入的聲音是 -6 db，-6 與 -10 差了 4 db，假如今天我們的 Ratio 是 2:1，因此它會把相差的 4db 壓掉二分之一也就是 2 db，因此最後 -6 的聲音會變成 -8 db。原理大概是這樣，也就是太大聲的聲音它會幫你壓小，而小聲的聲音則不變。

除了 compressor 以外還有很多的動態效果器，比如說 compressor 就有分 upward 跟 downward，downward 就是我們一般熟悉的把大聲的聲音壓小聲。而所謂 upward compressor 就是將沒有超過Threshold（門檻）的聲音拉大聲。

因為我們做聲音的時候會有很多軌，比如說歌手唱到情緒激昂的時候聲音會變得很大，低音或主歌的時候變小聲，而我們希望不要破壞歌手的情緒，但要保留聲音的位置，因此我們會希望把 vocal 保留在動態範圍裡面，讓它不要大聲跟小聲的聲音差距太大，我就能夠透過 compressor 座落在期望的範圍區間裡面。

那今天分享的內容就到這邊，可能比較硬技術一點，希望今天的內容可以幫今天的活動增添一點色彩，也希望大家會喜歡，謝謝。

Kiva 的 StreetVoice：https://soundcloud.com/kivawu

老闆的工商時間

看完分享你會不會對生成式藝術躍躍欲試嗎？老闆在 Hahow 的課程〈互動藝術程式創作入門（Creative Coding）〉教你認識程式與互動藝術產業應用，開啟對工程跟設計的想像，當然還有在直播中提到無數次的，內容扎實程度相當於買到賺到的〈動畫互動網頁特效入門（JS／CANVAS）〉讓你紮實掌握 JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的 Vue.js 前端框架，完成具有設計感的互動網站。歡迎大家看看～

那，我們下次見啦～₍₍ ◝(　ﾟ∀ ﾟ )◟⁾⁾

此篇直播筆記由幫手 Kate Chu 協助整理

這篇文章 【互動網頁設計網聚】KIVΛMKII 科幻聲音之旅－Projectλ工作室 Kiva Wu 最早出現於 Creative Coding TW - 互動程式創作台灣站。