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

本次講師之一 － 黑洞創造創意總監、零維空間創辦人以及政治大學 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 - 互動程式創作台灣站。

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

大家好，我是叁式的 Hoba，今天我會用我們2021年在高雄辦的 DigiWave 的展覽，來分享叁式如何用數位的方式製造體驗。

我擔任的是技術美術，負責的部分大約是從視覺到程式，同時我也擔任製作人的角色，也就是在製作執行的時候我要去匡列資源、以及安排工作排程。

關於叁式

叁式致力於用數位打造新媒體藝術、互動科技，核心理念是用數位打造無與倫比的體驗。有興趣的人可以看看我們公司的 Reels（介紹短影片）。我們成立於 2010 年，因為我們的工作相當跨領域，因此我們的組成成員也十分多元，我們相信跨領域必定能激起一些火花，因此我們也擅長用數位去整合這些不同的元素、產生不同的體驗。我們很難解釋數位體驗是什麼，因此通常我們會說如果你希望用數位解決一些你不知道如何解決的問題，就是我們工作的內容。

DigiWave 專案背景

接著我想介紹我們公司幾個不同類型的案子。2018 年我們在台中花博會有項展覽，主題是「在台中看見半個地球」。故事內容是大甲溪從海拔 0 到 3886 生態的美景，因此我們用在牆壁以及地板上很大的投影製造沉浸式體驗。

第 30 屆的金曲獎，我們協助鄧紫棋演出的舞台視覺，平常我們熟悉的是雷射，而雷射光照出去是一片的，我們利用攝影機的特性，讓光在空中打出去後是可以被拆解開來，不會只是單純的柱狀造型。那一年金曲獎的螢幕是許多波浪造型，要在波浪的曲面上做出視覺是很困難的。因此我們就利用程式的方式，將畫面拆解開來，讓負責視覺的人員可以大幅減輕他們的負擔。

我們也有一些藝術類型的案子，比如說安娜琪舞蹈劇場 2019 的作品〈永恆的直線〉，這部作品的主題探討當科技介入之後，生死的界線是什麼？因為舞蹈家認為煙很適合傳遞生死交界的意向，因此我們便去玩煙在不同的溫度、風向、場域或燈光下，給予雷射或投影的變化，讓煙跟舞者產生不同的體驗。

我們也跟捷安特合作過文化探索館，捷安特成立這個博物館中呈現許多如腳踏車的機構原理、或是自行車從交通工具演進到一種生活態度的演變。這個博物館有一些如觸控螢幕或透明螢幕的機械設計，因此我們設計了偵測、沉浸式投影的裝置。

2021年的 DigiWave 則是以電玩為主題，除了主展場的 「Game On」展覽外，也有在鹽埕老街區的「20 合一實境遊戲」。這個展覽中，我們使用了 Line 作為遊戲的入口，結束的統計我們產生的 Line 訊息總共有 27 萬則，包括遊戲者跟機器人的對話，以及從機器人得到關卡的資訊等。Game On 的關卡總共有 20 關，最後統計被開啟的次數總計約有 9 萬次，平均下來每個人開啟 9.3 個關卡；鹽埕的部分則開啟了 35,000 次。有興趣的人也可以看看我們這場 DigiWave 的 Reels。

在這個電玩的主題下，我們希望能讓透過不同角色的角度，或是不同載體、玩家或遊戲設計師不同的切角來看電玩跟我們的關係。因此我們在展覽的空間上使用了不同的空間尺度以及色光，去切割不同的區域以及情緒的轉換。在主展區我們則是用天花板的投影，隱喻每個人都是電玩畫面裡面的玩家，讓大家可以在這個展區裡面躺著或坐著，去觀看影片。

為了完成這個展覽，我們對電玩也做了非常多的研究，也曾經找過相關人士來上課，我們搜集了很多電玩中可能出現的機制、角色、系統，最後挑選了二十個作為遊戲關卡，希望玩家在玩這些遊戲的時候，能夠理驗到我們想要透過遊戲傳達的機制。

我們也用 Line 作為遊戲入口，將使用者會需要用到的 Menu 放在 RichMenu 裡面，也包括讓玩家在進入遊戲時輸入名字及選擇頭像。為了讓玩家在遊戲關卡中能夠快速上手，我們也做了仿 GameBoy 的上下左右及Ａ、Ｂ按鈕，讓玩家解謎。

因為展覽時間有限，只有兩週的時間，假設在中間如果有伺服器或程式碼的問題，維護上可能會有困難，因此我們希望架構盡量單純，讓節點盡可能地少，之後假使需要除錯便能更快地找出來。為此我們採用的是 BotBonnie 也就是 Line 對話機器人的服務，遊戲中的 Line 對話大部分都用 BotBonnie 完成。

比較進階一點的功能，例如在進入關卡的時候，會跳出 LIFF 的網頁，在 LIFF 網頁執行遊戲， 網頁本身是用 React 寫，如果是需要比較多圖片的遊戲則是用 PCJS。網頁的後臺則是 Node.js 部署在 Amazon，現場的大螢幕則是用 Unity 做的。LIFF 與 Unity 都是透過 WebSocket 與伺服器溝通，包括有一些遊戲需要手機連線到大螢幕也是使用 WebSocket。

鹽埕 20 合 1 的部分因為是在老街區，我們使用的是 QRCode 透過 BotBonnie 轉址到 Line 裡面開啟關卡，現場也有放一些 Line Beacon。

鹽埕 20 合1我們選了 20 個當地有特色的老店家，例如：理髮店、廟宇、豬肉攤等等，像是過去那種 20 合1的電玩卡帶，每一個店家就是這 20 合1中特殊風格的小遊戲。

當玩家在巷弄中穿梭的時候，我們也會透過 Line Beacon 傳送一些推薦的在地店家，玩家則能夠參考收到的訊息前往店家休息消費。

DigiWave 機制拆解

對於我們的理念「用數位打造無與倫比的體驗」，什麼是我們覺得重要的「沉浸要素」呢？以下是在這次展覽中，我們覺得可以分享的地方：

1. 黏著度－賭博：

電玩遊戲最重要的是我們希望玩家待的越久越好，我們做了許多不同的遊戲機制，其中一種是賭博，很多人為了賭博而花費了非常多的時間。 下面這張圖是我們二十關的遊玩次數，最左邊是第一關，也就是遊戲的入口網站，因為入口是玩家一定要進入的，因此圖中可以看出他是最高的；而第二高的就是賭博，可以看出玩家對賭博是非常有興趣的。 右邊的表則是分數排行，第一名的 Cu 的遊戲積分是 1200 億，他不只是在遊戲當天進入，而是一直到回家以後，有時晚上 23:30 我們還能看到他進入遊戲賭博，一直到展期結束，他開啟了 288 次關卡。

2. 黏著度－成就系統：

我們有鹽埕 20 關和 Game On 20 關，在遊戲歷程裡面我們會將玩家破關的關卡或未破關的關卡羅列在上面，現場的玩家會有想要消除未通關的問號符號。我們同時會在玩家通過所有關卡的時候，給玩家一張金卡作為獎勵，有的人會因為希望能拿到金卡跟朋友炫耀而努力通關。

3. 獎勵－Master of DigiWave：

當玩家通過所有 40 個關卡的時候，我們會頒發 Master of DigiWave 獎狀，原本我們希望所有獎狀上都有高雄市長（陳其邁）的簽名，但他可能公務繁忙，因此最後只簽了三張，在最後活動結束的時候，全破者總計有 195 位。 在最後活動結束的時候，我們在社群上面做了一張封神榜，將所有全破的玩家的角色跟 ID 放在上面。當我們一將資料放在社群上後，馬上就有玩家在底下留言說他有全破但沒有被列到，因為當時我在從資料庫取出資料的時候有少搜尋到。由這也可以看出大家其實是會關注社群的。

4. 獎勵－兌換商品：

我們也有實質的獎勵，當你累積了一定破關積分以後，就能夠用積分兌換一些實質的獎品，例如：海報、周邊商品等等。

5. 互動－陌生人之間：

我認為互動式體驗不只是人跟手機遊戲的互動，而是玩家跟現場的每一個人能夠有一些不同的化學變化。例如我們其中一個關卡是你必須要搜集四個符號才能通關，但一個人只會拿到一個符號，剩下三個你必須去詢問身旁其他玩家，等到湊齊了四種符號後才能通關。 我們這樣設計也是因為在一般的想像或經驗上大家會有些害羞，但在現場我們觀察到不同的反應，許多人是蠻積極地去詢問其他玩家，我覺得這不只開啟那一次的對話，他們也會繼續詢問對方的進度、通關提示等等。

6. 互動－連線遊戲：

另一種互動就是同樂，因此我們做了一個大螢幕，讓大家在定時的時候可以連線遊戲、互相競賽。其中最熱門的是手速王，這個遊戲是當大家一開始連線時就必須要在 30 秒內輸入指定的按鈕符號，結束的時候也會有排行榜。因此有些人因為想要上榜，我們展覽期間的遊戲紀錄也不停被刷新，現場非常熱鬧、可以聽到玩家的歡呼聲。

7. 社群－留言社交：

在遊戲內會希望能夠有一些互動，因此我們也設計了一個關卡，讓大家可以輸入文字，文字會呈現在大螢幕上。蠻多學生會在現場利用留言功能聊天、告白等等。

8. 社群－遊戲攻略：

出乎我們意料的社群影響是，有一天我們看到一個部落客坐在現場拿著筆電寫攻略，或者有一個弟弟在鹽埕拿著筆記，一邊走路一邊把地點、答案等等抄下來，最後將筆記在 PTT 社群上分享給其他網友。

9. 探索－20 合一：

在遊戲中有一個探索的機制，我們應用在鹽埕 20 合一裡面。因為鹽埕老街本身非常大，在這個狹窄的巷弄裡面它本身就是一個實境迷宮，我們將這些點位放在其中不同的店家，讓玩家在其中探索。不僅是將玩家帶入老街區，更重要的是讓玩家能夠走進這些地方，讓鹽埕的歷史記憶能夠被保存下來。

10. 探索－平常不會做的事：

當玩家走進平常不會進去的地方時，就有機會去做一些平常不會做的事情，例如有一個關卡是玩家需要去跟肉販請教豬肉的部位名稱，或是詢問廟公去理解廟宇的壁畫，或是我們將遊戲機台搬進巷弄裡面，玩家需要去跟關主 PK 俄羅斯方塊等等。

在我們 DigiWave 的宣傳影片結尾，有個畫面是許多粒子穿梭在街景中，這段影片並不是由我們的 AE 工程師做的，而是由我們的 Unity 工程師製作。叁式用了許多工程演算製作影片視覺、展覽視覺，用程式的方式打造。

Recap

最後做個回顧，一個好的數位體驗展覽要素有哪些呢？

• 空間與視覺：我們最基礎的展覽會需要打造一個空間，希望想出一個很棒的展示手法，當然也需要一個很棒的視覺。
• 機制：展覽要有好的視覺，就需要有好的內容去支撐它，因此可能需要去做一些研究，分析各種機制讓參觀者願意留在裡面。
• 觀者的參與：我覺得最重要的是參與的民眾，最困難的是當一個路過的民眾偶然經過展區，如何讓他願意留下來、花時間去玩遊戲，有些人第二天會重複再來、跟其他玩家互動，我覺得好的體驗不只是個人與作品的兩個單點之間，而是能夠連結現場的人、以及所有人沉浸在場域中所形成的共同回憶，這個回憶才是在若干年後有可能回想起來的東西。

Hoba 今天的分享就到這邊，如果對叁式有興趣的話也歡迎來 follow 他們的 Facebook 或 Instagram。

叁式 Facebook：https://www.facebook.com/ultracombos/
叁式 Instagram：https://www.instagram.com/ultra_combos/

老闆的工商時間

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

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

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

這篇文章 【互動網頁設計網聚】DIGIWAVE 案例分享-叁式技術美術長Hoba 最早出現於 Creative Coding TW - 互動程式創作台灣站。