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

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

在活動正式開始之前，先來宣傳一下墨雨設計最近的一個徵文比賽：第一屆互動程式創作徵文賞，只要是有關互動藝術、動態網頁、人機互動、沉浸式內容、XR等主題的文章皆可投稿，單篇只要600字以上，且可以一人投多件，相關說明歡迎詳閱簡章，期待很快能在Creative Coding Taiwan上看到你的作品！

吳秉聖

現在是噪咖藝術的音樂統籌，也是一位聲音藝術家的吳秉聖，剛開始從視覺藝術以及聲音藝術這兩個領域鑽研，研究所開始研究影像和配樂，去英國交換時念了creative sound and media technology，開啟了這一段旅程。

他所任職的噪咖藝術有限公司是一個推動新媒體藝術和裝置創作的團隊，整合多種領域的專業人才和力量，參與數位藝術展覽／公共藝術、教育活動、文創空間規劃等。也正因團隊中的成員多來自不同背景及專業，能完成的作品和個人藝術家能夠達成的事情亦不相同，相對的，在創作的過程中，勢必也須要大量的溝通才能夠擦出最亮眼的火花。

現場演出／聲音裝置／聲音設計

吳秉聖的創作可以分成三類，分別是（音像或是實驗噪音的）現場演出、（聲響實驗室、美術館或藝廊的）聲音裝置以及聲音設計（包含動畫、新媒體劇場及舞蹈演出）。他並沒有工程或是程式語言的背景，而是從創意 (Creative) 出發，慢慢開始學習 Coding，在此之前也不曾梳理自己跟 Creative Coding 的關係過，謝謝哲宇與Jerry的邀請，這次從過去在新媒體藝術團隊參與的專案，以創作及技術兩個不同的層面切入，和大家分享。

（左上）之前在歌劇院的音像現場演出＜城市升溫＞，與視覺藝術家合作，吳秉聖則負責處理音樂跟互動的部分。

（右上）個人的聲音裝置作品＜脆弱的透鳴 The Resonance of Fragile＞，主要透過振動頻率讓紙張發出聲響，藉由這件作品試圖討論聲音與空間之間的關係。

（左下）近期的個人研究，波場合成系統 (wave field synthesis) 透過緊密排列的喇叭形成的一種物理特性，將聲響直接投放到聆聽者的耳邊，可以想像成是一種聲音的投影機。

（右下）聲響實驗室的波場合成系統跟大型多聲道系統整合。

延伸閱讀：C-LAB實驗波 觀察報告：聲音場景的取樣、錄製與再建置

吳秉聖常用的創作軟體為 Max MSP 及 Touch Designer ，都是視覺化的程式撰寫工具，差別在於 Max MSP 主要處理聲音或是影像，吳秉聖常拿來做聲音邏輯安排和互動裝置的串接； Touch Designer 則著重於影像處理、燈光控制、裝置整合等。下面就一一介紹幾件結合聲音、光與互動裝置的作品吧！

縫與花

＜縫與花＞是一件位在萬華的公共藝術作品，呼應萬華當地的服飾商圈，以燈光裝置將地景和在地文化縫合在一起。

裝置的曲線和地面其實分別代表著縫線和布的相互關係，以弧形為整體的基本造型，配合既有地形做排列規劃。

上圖左邊是尺寸和固定結構，燈光在正下方，地面上也有反光。右邊是整體燈光分布和距離配置，因為裝置是靜態，希望透過光的流動帶入一些動態元素，所以除了造型上有穿針引線的意象外，也以「光」來回應縫的主題。

接下來的考驗在於如何用燈光來實踐「縫」這個動詞，詮釋車縫機和拷克的動作？因為在公共場域中的燈光設計和舞台劇場很不一樣，以下做了不同的嘗試，可以看到有橫向、直向、縱錯、交錯、點狀、跳躍等的方式。

上下圖分別是程式模擬的燈光效果，以及最後到現場的呈現，其實也還是會有一些差異，但透過 Touch Designer 加一些 shader ，在進場安裝之前利用模擬出來的場景，確認好作品的視覺畫面，模擬設計得好，就能減少不必要的風吹日曬雨淋，對於戶外裝置的公共藝術作品有事半功倍的效果。

光譜印象

下一件作品是＜光譜印象＞，位於戲曲中心廣場與台灣音樂館之間廊道，同樣是地板燈光，但跟上件作品不同的是加了更多與音樂的互動。因為音樂館有豐富的音樂及樂譜的館藏資料，所以燈光上的設計希望以流動的數位化樂譜為題，使觀者與作品互動。

地板上有燈光的亮點，呼應音樂編輯軟體中，midi 訊號的排列方式。廣場上的燈光燈柱經過改裝，增加了幾個感測器還有幾組四聲道的喇叭，透過感測器觸發燈光和音樂。

在製作燈光和影像設計的過程中，需要注意不同載體的規格也會影響呈現效果：一開始在螢幕上的設計轉移到了大型 LED 螢幕搭配感測器時，或是第三階段到了現場安裝，細節可能不會和最當初的設計想像完全一樣，需要再三來回測試、確認和調整。

無限放大器

＜無限放大器＞是一件期間性的藝術裝置，以「合成器的使用方式」做為整件作品的核心概念，介於街道家具／遊具的裝置，放在台北流行音樂中心外的綠帶空間給民眾參與。

如何將互動做得平易近人，同時又富有教育意義，是這件作品最有挑戰的地方，以引導的方式引領民眾願意主動學習互動，不需要有使用合成器的底子或經驗也能寓教於樂。

由六個大小不一的金屬箱體組合成放大版的 MIDI 合成器，透過箱體上的旋鈕及按鈕可以產生多樣的音色與速度變化。六個機箱有各自不同的喇叭，當觀眾對旋鈕或按鈕互動時，對應箱體的喇叭就會針對觀眾的互動做訊號回饋。在燈光和聲音的設計上，以如何引導、給予適切的視聽覺回饋去發想。

這件裝置有三種互動的模式，透過旋鈕來選擇：一是米老鼠式的互動，一按就有聲音以及燈光的反饋；二是遊戲的模式，觀察哪邊在閃，去觸動它，就會有聲響的回饋；三是再現減法合成器的運作模式。

虹光．聲棒

位於上海的商場中的＜虹光．聲棒＞作品，從雨棒（又稱「雨聲筒」等）樂器的概念出發，傳統的製作方式即是找竹子釘上密集的釘子，放入一定數量的紅豆或綠豆，翻轉製造出下雨般的聲響。

＜虹光．聲棒＞利用玻璃柱體抬升和下降的動態來產生聲音，柱體裡面有玻璃珠、燈光、隔板，有一種沙漏的意象外，也體現了時間感的過度和流逝。

運作模式是透過排列和傾倒的方式去移動，每個整點會演出一次，因作品裝置在商場裡的關係，會有些技術面例如維護、安全性、摩擦後透光度等等需要特別注意。

演出模式的模擬動態，為了表現不同音樂的橋段還有時間，而衍生出不同的動態思考：飛行、下潛、游泳，軟（波動）和硬（計時翻動）的視覺感律動。

但其實這些不同的律動都是由各種波形堆疊而成的，右圖上半部就是說明正弦波堆疊升方波的過程，利用不同的波形來慢慢堆疊出我們所想要的動態。

下方示意圖則是從側邊去觀察動態，當波形互相作用後，會出現位移距離造成時間差的問題，圖中橘色點要移到黑色點的位置，每個裝置要移動的距離不一樣，因此就要依照每個不同的距離去分配它的速度，這也是這件裝置比較特別的地方。

此裝置主要的四個元素是「動態」、「音樂」、「燈光」、「物理聲響」，設計時會有一些提問，例如動態所產生的物理聲響如何安排在空間中？由左到右、近而遠，還是由遠而近？抑或是燈光與動態間的關係？燈光可否輔助柱內移動的粒子？還是物理聲響如何與環境中的音樂做搭配？當互動裝置放置在公共場域時，除了處理裝置本身之外，也需要思考整體環境跟裝置的融合狀態。

音樂樹

＜音樂樹＞是一件戶外樂器裝置作品，位於台灣音樂館，是一個像是大樹樹枝狀的結構，將音樂像系譜般發散出去，但樹枝末稍長了鳥屋，每間都有一隻小鳥叼著紅色的球，敲擊橘色的鐵琴發出聲響，同時在夜間也有燈光的安排。

這件作品有三個重要的元素，LED 螢幕上的動畫、樂器、燈光，利用 Touch Designer 與燈光系統溝通，用 MIDI 跟樂器溝通，再跟整棟大樓開關電的系統溝通，最後用程式將他們全部整合在一起。

大家會好奇樹上鳥屋的音階是怎麼安排的嗎？

不同音高的鐵琴有不同的長度和厚度，在製作裝置的過程中，除了決定鐵琴尺寸外，還有要如何在樹上排列，最後用旋轉上升的方式安排這些鳥屋的實體位置，中下圖的紅色箭頭呈現螺旋狀，標明了音階的關係，達到最佳的視覺及聽覺效果。

在做控制的時候，中間的流程分成三大部分：
1.程式呼叫編號，讀取完整曲目或是隨機選取樂句，判斷音高、長度、響度後送給機構做動作；
2.機構動作，會有行程差異、裝設位置差異、物理特性（重力／慣性）、機構設計差異等；
3.樂器發聲，視敲擊的材質、角度、力道、位置而定，即使是用一樣的力道敲打同一個鐵琴、同一個音鍵的同一個位置，兩次都不會是完全一樣的聲音。

登月計畫

暫時性的裝置作品，當時設置在流行音樂中心。流行音樂是最接近大眾的音樂形式，透過大型互動樂器裝置，加上現場複合式的演出，以張雨生跟月球為主題延伸出來的作品。裝置上布滿各種樂器：爵士鼓、鐵琴、木魚、鈸等，除了樂器之外還有燈光的安排，因燈具數量龐大，如何串接、編碼，同時又顧到樂器驅動的工作，需要蠻多時間一一處理。

有趣的經驗想跟大家分享：用程式寫聲音創作的時候，想要它甚麼時間點觸發都可以輕易設計，但若是在真正的、物理的樂器上，觸發後會有一個反應時間，每一種樂器的動態機構不一樣，觸發反應所需的時間也不盡相同，所以程式中編好的音樂，在真正的樂器上演奏時，會是完全另外一回事（嚴重到創作者也認不出來的地步。

因為不是程式背景出生，這次分享的作品如同先前提到的，多使用 Max MSP 及 Touch Designer 等視覺化程式語言編寫工具創作。

視覺化程式語言的優勢，是能夠「快速」將需求「達到目的」所使用的工具和手段。只需要一些程式背景知識，就能夠製作；又有點像流程圖，在檢查時能快速理解流程和邏輯，對於視覺或設計背景的人來說，是學習程式的入門。

相對的它也是有缺點，簡單的邏輯卻需要很繁雜的串接才能達成，有可能一行程式碼就能解決的問題，視覺化程式語言要上百條線。

不知道讀到這裡的你，對聲音設計或是互動裝置是否更加好奇了呢？附上吳秉聖的相關連結看看他在 Fxhash、Oursong 等不同平台上發表的更多有趣的作品囉！

五月社群聚的下集則是由張文瀚分享 fragment shader 的有趣創作思維，以及三位 lightning talk 根據這次的共創主題「山」帶來的創作分享。>> 文章這邊請：五月社群聚（下）：張文瀚教你用數學作畫 GLSL fragment shader

還不知道如何開始踏入 Creative Coding 嗎？那 Hahow 課程 ＜互動藝術創作程式入門＞再適合你不過了，快加入2000位同學的行列，一起學習互動藝術創作吧！

整理編輯：Chia 編

這篇文章 五月社群聚（上）：吳秉聖的聲音、光、裝置與創意程式 最早出現於 Creative Coding TW - 互動程式創作台灣站。

本次，主辦單位以 <創意程式設計——Processing／p5.js教學與趨勢觀察> 作為第一場對談活動主題。

時間：2021年10月21日
與談人：
– 國立臺北藝術大學新媒體藝術學系專任講師、科技藝術創作者 王連晟老師
– 墨雨設計創辦人、跨領域新媒體藝術家 吳哲宇老師

Processing為一種開源式語言，最初的目的是希望能以視覺化的方式幫助非程式設計師學習程式語言，而後演變成在電子藝術或是互動式設計上都能發現其應用。至今，Processing已發展了20餘年，目前版本更新至 4.0 BETA版，在使用上能明顯感受過程大於成果的體驗，也因為對於社群的支持程度相對較高，當使用者在分享與互動的過程中讓更多人能進入此領域，創造出更多元與突破自我的作品。

在Processing的官網上能做初步的了解及下載，擔心英文無法做深入了解的同學，搜尋「Processing基本介紹」也會有中文的學習資源參考。

而p5.js即是將 Processing 以 Javascript 語言做應用，使其可在網路瀏覽器上進行直接創作，免費及開放資料庫的特性，降低了學習門檻，也吸引更多人進入創意程式設計 Creative Coding 的領域。（延伸閱讀 : p5.js快速上手:互動網頁教學）

利用Processing及p5.js展現新媒體互動程式結合藝術，已成為現在的新興潮流，此次的線上對談中邀請到王連晟老師與吳哲宇老師分享對於此趨勢的觀察與教學發展，引領大家進入創意程式設計的世界！

Processing的教學與趨勢觀察

以資訊工程為背景的王連晟老師（以下稱王老師），在就讀臺北藝術大學科技藝術研究所時期即投身於數位藝術研究，也有許多國際電子藝術節參展或交流的經驗，作品跨足互動裝置到聲音表演（如：波動現象），教學方面，前期主要開設短期工作坊為主，遍布台、中、英、日、法、西、德等國，近期則以學校教學為主，包括中國地科技大學及廣州美院，現則回到母校任教。

創作，而不是學習語言；思考方式而非技術

目前王老師在教學上以Processing為主，其具有容易安裝、對於各類型的開發環境皆友善、能快速開發Prototype和學生能快速進入語境等特點，適合應用在工作坊教學或是製作期較短的專案。像是和致力於實驗聲音影像藝術的非營利組織 噪流Fluid Noise 合作的課程中，帶領學生在一到兩個禮拜的時間內，完成融合影像與聲音的創作（課程作品觀賞 : A/V 衝刺班 – 噪流實習 vol.1 Fluid Noise in Practice vol.1）。

在教學的過程中，因為現今的網路便利性，查找到相關教程影片並非難事。也因此希望學生再加入更具有原創性的設計在作品裡，將每次作品以物件導向做思考，了解程式碼在應用時，實際在處理甚麼樣的問題。不論是從基礎的程式基本知識、體感遊戲規劃或是不同介面溝通，到進階的資料結構與演算法，都是為往後更大的專案串接做提前的練習與準備。對於之後的課程規劃上，也期許能在 Javascript 、 p5.js (2022「衍生藝術p5.js研討會」工作坊) 及 NFT的發展做更多著墨 ，著重在教學與活動上面的應用聚焦。

p5.js的教學與趨勢觀察

而學習過程中一路與數位創作與發展相關的吳哲宇老師（以下稱老闆），從電機到整合數位媒體碩士的經歷，讓老闆開始探索藝術與工程的邊界，發展跨領域新媒體藝術。近年致力於推廣程式藝術，像是在 HaHow 好學校開設以實戰易上手 p5.js 課程〈互動藝術程式創作入門 (Creative Coding)〉，引領同學們進入程式互動設計的世界。

身為一位新媒體藝術家，老闆不單單只使用 p5.js ，也涉略了如 Unreal引擎、VR 等結合多種軟硬體的藝術程式應用，乍看是不同平台、語言，實際上邏輯都是相通的，程式撰寫只是一種創作方式，皆能互相應用（老闆的作品集這邊看）。

在初期的教學課程裡，老闆在HaHow好學校開設使用 Codepen 製作的 動畫互動網頁程式入門 (HTML/CSS/JS) 及 動畫互動網頁特效入門（JS/CANVAS）。在網頁設計的歷程中，從顏色、平面設計或是為了動態設計而應用到的三角函數等數學，這些其實也都是Creative coding應用內容。

Creative Coding顧名思義是一種以程式創作來表達的藝術形式，表現方式不限於視覺、聲音、投影或裝置藝術等等，是跨足所有互動相關開發的核心概念（延伸閱讀 : 章節一 Creative Coding程式創作是甚麼）。比起傳統脈絡切入的規律程式撰寫（例如:C++），應用p5.js創作Creative Coding會比較彈性，較沒有經驗的同學也能在一兩個月的時間內上手，進而開始從Canvas轉而使用p5.js，增加撰寫的效率。

目前教學以短期的線上課程為主，帶學生了解Creative Coding如何應用，，以商業應用的案例或是程式創作領域的應用想要生成的效果為導向，鼓勵學生以成果反推回需要學習的技術，加上p5.js開放式資源的特性，關鍵字查找十分方便，提倡不必死背也能運用線上資源創作。

對於工程師來說，設計靈感來源常成為一個瓶頸。老闆鼓勵大家從生活中獲取靈感，並舉例知名Youtube頻道 The Coding Train，藉由每天的特定主題進行Coding創作。而老闆也在自己的老闆來點寇汀吧Youtube頻道上傳相關教學影片，以實際操作呈現給學生（延伸閱讀 : 【p5.js創作教學】CreativeCoding花火大會(直播筆記)），照著直播影片上的教學操作，快速了解程式碼對應的呈現效果，及適合的工具及語法。

老闆擷取了擔任助教期間的教學經驗，會根據學生是否有程式相關經驗，給予不同的教學方式，也提供了線上課程與筆記教材，使學生在針對想要完成某個特定效果時，能夠更快找到相對應素材。在教學技巧上，一貫的實作導向，將較複雜的觀念以平易近人的範例類比講解，像是將畢卡索的畫作解構成不同角度的平面幾何組合，直接以設計的角度切入，並拆解成簡單的步驟元素，一步步地以程式語言建構創作。

上述各種p5.js程式教學分享，都說明了其蔚為趨勢的原因，也因為能多方對接，在實際商業應用，瀏覽器虛擬化上的成長上已逼近原生。最佳的實際應用案例莫過於 墨雨設計工作室 的網站，利用了Vue.js將許多動態的作品呈現，透過不同的案例展現，讓學生能對設計的應用更加了解。

對於生成式新媒體藝術的發展與未來，老闆十分樂觀，認為p5.js的效能優化加上商業案例的增加，將有效推動潮流。像是知名生成式藝術平台 Art Blocks 上的作品大多都是以p5.js寫成（延伸閱讀 : 最頂級的NFT藝術市場「art blocks」，策展專售生成式藝術），甚至在平台上，有些原先不熟悉生程式藝術的藝術家，也開始使用p5.js將原本熟悉的創作主題轉化成生成式藝術作品。在未來的教學演化上，希望往實戰型的職訓班方向前進，也會持續在Youtube上面更新教學影片，累積大眾對於相關知識的學習基礎，期望帶領更多人認識生成式藝術。

其他相關學習資源：
Creative Coding TW – 互動程式創作台灣站
老闆 來點寇汀吧。 Boss,CODING please. 臉書
老闆來點寇汀吧 Boss, Coding Please IG
老闆 來點寇汀吧YouTube頻道

創意程式設計在業界與學院內的教學

曾在中國進行新媒體藝術教學的王老師提出，中國的學制比較像是一個又一個的短期高強度衝刺班，而臺灣學期制、分散成18週的教學方式易導致大學部的學生多數學習動機強度不一，許多人對於自己真的想要創造及探索的東西都具有相當大的困惑。老闆也回應在紐約大學擔任助教時有過相似的經驗，在課堂上，每位同學都會發表作品，著重在討論作品的進行。但因大學部學生技術部分並沒有非常深入，只會提供一些補充資料學生自行學習。相較於業界內容易帶入技術學習，在學院裡或許可以回到更多程式撰寫觀念上的討論，將創意程式設計的想法提供給學生，引導出學生對於課程乃至於創作的興趣。

NFT作品上架後，能如何經營?

「如何引導學生參與技術社群交流？今日網路與社群上資源蓬勃，學校老師的功能有會變動，老師如何調整教學？」在對談的尾聲，臉書直播留言中有人問了這個問題。

目前創意程式設計最多人矚目及討論的商業應用即是 NFT。王老師認為可以在課堂上可以透過實際參與 NFT 的上架後，再針對作品及相關問題做討論，學生將更深切了解社群、藝術品與商業界更密切的關係。老闆也分享開始做NFT以來的心得，從作品被竊取後開始發展的社群（延伸閱讀：NFT故事集：用程式碼畫畫賣出一億元的臺灣人），包含 Twitter 與 Discord 都是現今經營 NFT 的主要市場。不論是持續的作品累積、社群宣傳互動與後續流量追蹤，都會成為成功經營與否的關鍵。

無論是王老師或是老闆都肯定，將市場實作成為課堂的一部份，帶入學校裡最能提供的討論空間，將有助於未來因應趨勢發展而改變的教學方式。

另外，也有聽眾提出「如果想用 Coding 創造聲音&音樂，會推薦學 p5.js、Processing 還是有其他推薦軟體嗎？」p5.js 有提供ADSR相關設計的簡易版本，包含基礎聲音顆粒、節奏或是音色等等；進階的創作可以考慮 MaxMSP，初期從聲音設計、波型與數學計算等開始了解，漸漸便可以玩一些有趣的聲音互動。

結語

無論是使用 Processing 還是 p5.js ，不變的是背後的概念。與談之中，王連晟及吳哲宇對於創作邏輯的分享，對程式軟體的演變，提醒我們不斷地學習 ，並保持精進與開放的態度。

以上就是 2021 C-LAB未來媒體藝術節臺美連線的第一場對談- <創意程式設計——Processing／p5.js教學與趨勢觀察>的分享！

對於Creative Coding感到十分有興趣嗎？歡迎訂閱老闆,來點寇汀吧。Boss, CODING please. Youtube頻道或是加入互動藝術程式創作入門課程來更深入瞭解創意程式設計吧！

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

這篇文章 創意程式設計：Processing／p5.js教學與趨勢觀察——王連晟、吳哲宇台美連線對談 最早出現於 Creative Coding TW - 互動程式創作台灣站。

Nyan Cat ©Chris Torres via GIPHY

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

什麼是NFT？ 如何運作？

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

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

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

接觸NFT的契機？

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

有哪些NFT相關平台？

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

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

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

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

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

有哪些不同性質的NFT？

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

https://oncyber.io/

有哪些知名的藝術家？

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

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

NFT的附加價值

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

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

老闆與NFT

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

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

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

未來的創作計畫

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

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

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

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

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

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

今年的夏天，我來到了紐約開始我的研究所生涯，唸的是IDM (Integrated Digital Media)，剛開學的時候很急著在學校裡面找到工作（因為想要拿SSN就能辦信用卡跟做很多事了)，對自己的感覺就像拿到了一個證明，知道自己真的在這裡開始扎根了，這應該算是我第一個受聘的正職，進行得比想像中順利很多，所以趁著在學期結束的一切記憶都還熱騰騰的時候，為各位帶來在紐約當助教的八卦跟到底都在玩些什麼東西。

為什麼要當助教呢？

學期初的時候原本投了學校IT部門UX Designer的工作，沒想到雖然面試很順利，但是卻遲遲沒有消息，完全就是一個被發無聲卡的節奏，同時間又看到系上開始在找研究助理，我就想說，不如兩個都投投看吧！反正原本自己就在做教學相關的工作，如果還能夠順便幫教授做做project應該蠻好玩的。

在還沒見到我的教授之前，看網路上的照片快被嚇死，我的教授看起來超兇，感覺剛被放出來（欸，但實際上見到人之後覺得意外地很和善，長得也完全不像照片上那樣。所以跟教授面試的時候，就開了課程的範例跟敘述一下自己在程式方面的經驗，打開codepen炫了炫。

當下有提到如果IT上了的話，我就要毅然決然地拋棄系上來去曼哈頓上班，享受一下在繁華大城市的感覺，因為我們校區在布魯克林，實在是相對比較悠閒跟沒那麼誇張的繁華。

想了一天之後，覺得如果是繼續做設計稿的話好像跟在台灣做的事情沒什麼差別，又很不甘願工作就只是在電腦前做做別人指定的設計稿，所以就直接聯繫教授說我想要這份工作了XD 現在想想好險是做這個決定，開啟了我後面這一串莫名認真（？的助教進化之旅。

在這12週裡做的事情遠超乎自己的預料，雖然大部分是因為不甘心就只坐在那邊給人問問題，所以會自己給自己找事情做。這學期我把系上的助教體制從一開始的毫無規範，到建立了整套運作規則， 預約制、記錄表格、週報、成效分析與怎麼評估跟分配時間，也大幅的增強了自己建立人際關係的能力，跟知道要如何停損每個人花費的時間，陪養了很多的耐心，在看到一臉呆滯沒在思考的學生的時候不會暴怒XD

預約制規劃與規則制定

原本助教應該是不用約的，就是挑一張自己覺得愜意的桌子，捧著電腦把office hour 待好待滿，我一開始不知道其實蠻多研究生助理不會把時數做滿，教授還是會給滿20小時的薪水，所以就傻傻的每週排了20小時的助教時間再來崩潰，因為20小時實在太長，只靠乾等人來的話實在是無聊又無法預測到底要怎麼幫那些學生。

那時想起了在預約課程討論的時候，有用過一個好像不錯的軟體叫做calendly，於是我第一週閒暇之餘開始研究把助教時間改為預約制並要求至少要提早一天左右預約，就能看到日曆裡面自動隨著預約會冒出應該要出現在學校的時間。

還好一開始有想到預約制，隨著期中期末大家越來越崩潰，老是捧著電腦一個接著一個來，預約制讓我可以名正言順地留足夠的時間給每個人，當然，也會有提早結束的時候，就當做自己偷偷休息的時候，但尤其是外國人，問問題都沒在客氣的，常常雙手一攤就說，我不會做，把事情全部丟給我，如果東西簡單我還會好聲好氣的說你要多嘗試一下，更多是那種複製一堆別人的code來給我看，說我不會改的，整個怒火就會上來叫他回去自己努力一下再過來找助教。

地點跟流浪

原本以為我會有一間自己的辦公室，但夢想第一週就破滅了哈哈，我被告知找一個自己喜歡舒適的角落，學生找得到我就好，因此剛開始我待在系館外面，因為沒有固定座位每週都要換位置，兩週之後實在是很抓狂，覺得不能再這樣像是遊牧民族的當助教下去了。後來，我找到了原來系上的研究生有研究室可以用，一用角落的位置之後一試成主顧，又有超高級的外接螢幕可以用，整個超級方便，所以後半學期就定居在這個座位上了。

助教日誌的誕生

做助教做到後來已經養成了只要有人來問問題，就會直接紀錄下用了多少時間跟問了什麼問題，這樣的習慣也讓我在後續一樣的學生來問問題時，可以直接找到上次的紀錄，快速的掌握他得學習狀況跟弱點在哪，同時也能當作真的有在認真工作的證明給教授看XD 後來有幾個學生連續助教時間回去後都沒有動，隔週預約繼續來找我從上次進度開始也沒有試著搞懂。

週報

在第一個禮拜結束的時候，總覺得結束的很沒有踏實感，意外想到了以前跟朋友聊天時，他說他每個禮拜都要寄一封整理的Email給老闆，報告這週自己做了什麼，或有什麼想法。仔細想像這樣的方式經營真的挺不錯的！

在國外的工作比較自由，我又深切的感受到其實我的教授自己很忙，完全沒有空理我，把輔導學生的工作都丟給我做，所以我就開啟草稿紀錄一下這週我做了些什麼事情，有哪些學生，然後開了一個表格把每個學生問的問題跟我幫忙解決的事情記錄下來，整個學期累積下來真的超級可觀的。

減少資訊不足的情況卡住

一開始填寫預約的時候只有填名字跟問題，直到做了兩週之後，我才發現原來我要負責的不是只有我們教授的班，而是系上這學期所有的班都是我要負責的，而且研究所跟大學部也都是來找我問問題（這堂課給大學部跟研究所的兩個版本）。

難怪每個學生來作業跟課綱都超級不同，發現這件事情的時候，痛苦了好一陣子，覺得自己被推坑做了超雷的工作，但後來整理好心情好之後就想要怎麼樣管理這麼多班級的學生，所以後來我就把預約表單一次問完。

有時候助教時間結束後，會需要寄一些參考資源給學生，原本還會很認真的一封一封弄，但是後來數量實在太多懶惰了，就做了一套罐頭信模板，可以直接把名字跟連結填一填複製信件寄出。

第一次領薪水

在美國第一次領薪水的時候真的很感動，目前大概薪水可以勉強打平房租＋生活費，硬是死撐著用著覺雖然大部分都會超過一些些，但是能有能力第一個學期就用專業支撐生活的感覺很棒，雖然跟學費相比真的是杯水車薪，不過就心態而言是告訴了自己，你有在國外好好過自己生活的能力了呢！

成效分析

最後兩週的時候，因為資料實在太多，一眼看不出到底有多少學生來跟問了多久問題，就又開始自己給自己找事情做，先是把所有學生這學期來的次數列出來，然後統計他們到底都是哪個教授的，有些東西實在是做出來才知道誇張，這學期教授丟了一個網頁小哥來給我，說是他們教授實在幫不了他，所以整個學期他不斷的預約來找我。
做完整理之後，發現這學期總共有四十幾個學生來找我，也發現了很多很常利用助教時間的學生，原來斷斷續續的這樣office hour下來，也真的教過很多次了呢。

在教學中誕生的眾多範例跟創作

在教學過程中，其實我自己也很常突然冒出意料之外的寫法或創意，就會趕快記錄下來或趁空擋實作出來，在這裡課堂上教的寫程式雖然東西沒有特別難，但是教授都用一種很設計系的方式在帶系上的課，很鼓勵學生冒出很多怪想法，互相討論可以做什麼很ㄎㄧㄤ的東西，和看很多案例，雖然會讓我當助教這邊的loading蠻重的，但能很清楚感覺到跟台灣一般在教程式一板一眼的感覺很不一樣！

一些小小心得

能在一個陌生的國度逐漸走穩腳步的感覺很珍貴， 所以自己才會花那麼多的心思在希望把第一份工作做好上，也因為很多來的學生其實是跟自己同一屆的同學，所以有時候助教時間做一做就變得比較熟，能夠有人聊聊天或一起吃個飯，也不會自己一個人悶在家裡做事情，雖然常常以學校為家到半夜兩三點弄完回去，但是過得真的蠻開心的～

對於這份工作心裡還是有些小小的不滿，原本工作描述是說有要幫老師做Project，結果所有時間都被助教佔掉了，教授好像也對我太過放心，所以就也沒什麼管我，每次跟我討論的時候還被說做得太拼了完全沒什麼好挑惕XD

下個學期可能會一起規劃系上的統一課綱的資源庫，也很想把整套學起來自己教哈哈哈，這個學期歷經數百個助教時間摧殘，總覺得已經能夠把整套東西倒著講過一遍了，很希望有一天能把這整套課程帶回台灣，也許能夠為程式教育注入一些活水呢。

撰文：吳哲宇

三門老闆的線上課程，快與上萬名同學一起加入寫code的行列吧！

動畫互動網頁程式入門(HTML/CSS/JS)以簡單例子帶你入門網站的基礎架構及開發，用素材刻出簡單有趣又美觀的網頁和動畫，享受做出獨一無二的網頁所帶來的成就感，在職場上與設計師和工程師合作無間。

打好基本的互動網頁基礎之後，可以進階動畫互動網頁特效入門(JS/CANVAS)，紮實掌握JavaScript 程式與動畫基礎以及進階互動，整合應用掌控資料與顯示的Vue.js前端框架，完成具有設計感的互動網站。長達3085分鐘，超過60個精緻範例與400張的投影片以上，以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片，成為hahow上最長的課程。

互動藝術程式創作入門(Creative Coding)線上課程中你可以認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與機器創作完整的作品，並將創作輸出應用在個人品牌或網站、主視覺或海報，甚至互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。

你也會有興趣閱讀其他文章：

從不只是一門線上課程，而是一場推動進化的豪賭
釀造一門結合網頁、設計、數學與特效的線上程式課程

這篇文章 在紐約大學讀研當助教的進化日誌 最早出現於 Creative Coding TW - 互動程式創作台灣站。

就在不久前的2017/8–2018/8，我花了整整一年時間，在Hahow製作我的第二門線上課程，這不只是一門線上課程，而是把我對線上課程的想像再做好做滿、做爆，做到未曾有人嘗試的東西，也希望他能夠在深度、廣度上完整超過第一堂「動態互動網頁程式入門」。

而這堂「動態互動網頁特效入門」，便是一條尋找自我的旅程，深掘是什麼造就了對互動網頁跟程式的憧憬，所以在講到這堂課的製作過程之前，我想從這堂課的主題-數學以及教育開始講起。

數千年來，數學家與科學家花了大半輩子的時間，看著宇宙的星星月亮，推算出了萬有引力跟萬物運行的軌跡，在沙地上畫著三角形與方形，推算出了畢式定理跟得到了世界上居然有不能用分數表達的數字。

數學與科學真正的美，在於用一條式子可以預測未來，擺脫非理性的判斷跟控制，透過兩千多年來，人類不斷思考世界到底是什麼鬼東西的成果，我們終於在這混亂不堪的世界中找到了秩序，藉以預測今天月亮會怎麼變化，知道了怎麼藉由電力架構邏輯運算變成電腦，更激發了人類的潛能，促進了各種藝術跟互動科技的蓬勃發展。

台灣的教育，讓數學在很多人的心中是學生時期的夢靨，提到便心生反感，更何況去主動接觸，於是多少人在一次又一次的小考中，執筆的手一緊，跟不上進度的失落感，壓垮了最後一根稻草，便從此放棄數學了，只好安慰自己說著：我真的做不到，我大概…一輩子不擅長這個吧！

後來的我們，在職場的某一刻察覺做遊戲用到了大量的演算法與數學，後來的我們，也許從商、從醫，也許從事設計，發現原來生活除了找錢做生意會用到加減乘除外，很多創作也能透過數學與演算法脫穎而出。

台灣教育環境中升學導向主義極為盛行，我們以分數判斷一個孩子的學習成果，老師也就針對成績盡力的填鴨提升，在我的記憶中，正課上很少老師在教學時說：

你看！比例真的很美，在建築、設計的歷史中像是黃金比例、出版頁的隔線系統設計，都有用到，也有他的歷史故事在，不只講數學，而是能綜合一些歷史、人文、心理學的角度來闡述一個學科。

也許在教自由落體的時候，直接把帶到戶外拿不同的重量的球投擲做實驗，試著劃下那些千變萬化的軌跡，讓我們親見原來，這樣看似複雜的運動可以單純用兩個方向加速度跟速度來描述，引燃與生俱來的好奇心，我們不是沒有可能性，而是沒有看見，也許順便了解下伽利略在比薩斜塔上扔的兩塊石頭確認了下落速度並非由空氣決定的驗證。

我們在乎的，大多是這題會不會考，考試會不會拿高分

常聽見的是考試少三分打10下，每堂課一下課就發著一張考卷接連著考，聯絡簿上寫著成績變成家長口中彼此比較的話題，今天不努力上課唸書長大你就找不到好工作，過不了好的生活，而過多的外部動機可以摧毀內部動機，讓我們失去做這些事的成就感，不再為了喜歡做這件事而開心，學習亦是如此。

雖然不切實際，我仍希望教師的角色是一盞明燈，帶著你撥開混沌的迷霧，看見世界真實的模樣，而不是拿著書本直接塞給你這東西那式子，然後就發下考卷只看分數。

最初的嘗試 — Youtube線上直播教學

2017 四月時，我嘗試經營直播「老闆，來點寇汀吧！」，以自己設計精緻的範例直播寫程式，吸引了一批熱愛技術與視覺設計的工程師跟設計師，雖然備受好評，卻在數次直播之後感到吃力，每次從基礎開始講解太久，後期講到用三角函數做特效時，在留言區大家總是一遍哀嚎。

數學好難，還是放棄來去做視覺吧，我們可能就是沒這天份

聽了當下真的是很生氣XD ，怎麼會還沒嘗試過就直接放棄了呢？於是出國前我花了一整年時間，製作了「動態互動網頁特效入門」，橫跨基礎網頁、JS入門、Canvas與特效動畫到Vue進階應用，超過60個精緻範例與400張以上的投影片的課程，貪婪地把自己的所學化為精緻的教材，不到十個小時募資超過600%，至今已接近2300位學生。

「動態互動網頁特效入門」的掙扎與誕生

這堂課最初的點子，是來自於做在直播時做canvas動態時鐘，講到了畢式定理跟一些三角函數的應用，當時真的很害怕大家會一頭霧水，還好用到的部分數學還沒很難，所以順利地把範例寫出來，也直白地做到讓大家能懂，教東西虐待大家的時候還挺有成就感的XD

從那之後動機越來越強烈，延伸成第二門課的主題「動態互動網頁特效入門」，也觀察到一個現象，很多前端工程師或設計師在寫動畫或是特效的時候，都是用現成的函式庫或程式碼，我想讓大家看見，怎樣從基礎了解原理，如何巧妙地去應用相關的概念或演算法。

從一個完整入門的角度開發各式互動網頁的經驗，敘述自己平常怎麼思考問題、如何理解程式運作，不只是會寫寫網頁語法，而是真的用這些工具，循序漸進地從自己的手中做出絢麗、夠專業的作品。

所以我從要怎麼做出特效動畫開始想起，首先用程式畫一些簡單的圖形，然後因為座標開始複雜了，就會學習如何使用向量來操作東西，接著東西要能互動就要引入物件的概念，並且賦予每個在畫面上的元素特性，最後是一些進階的數學，比如三角函數、極座標等等。

我把所有想要教的概念一個個放到Trello上，頓時覺得我好像在教高中數學啊XD 很希望一教完這些概念就能讓大家看見成果，所以我每個都設計了一個很精緻的案例，為的就是讓大家一學完就有感覺，更會愛上這些抽象卻又美好的工具。

首先起頭的系列單元是「HTML/CSS 快速入門」

因為畢竟是寫網頁，所以還是需要把基礎的元素、語法以及基本的html/css 以及pug/sass講清楚，但是因為很多人是舊生，所以我重新設計了全部的範例，並加入更多漂亮的示範帶大家精煉入門。

課程內容包含flex 、前處理語言模組使用，重新所有的設計範例，帶你熟悉網頁基礎語法，到使用sass/pug 做出漂亮介面，鍛鍊到能夠憑著純粹CSS就能寫出很漂亮的動態效果，我最喜歡的是裡面我做很久的時間盒子，可以切換動態的流星雨與白天，全部用html與css建構成。

接著是程式基礎：「JavaScript入門到進階 」

程式語言的邏輯非常重要，如果有學過任何一種語言，應該就能體會到其實有很多基本的概念要掌握，從變數、字串、迴圈到簡單的邏輯判斷、陣列操作，到開始加入時間的控制製作動畫，我認為程式的基礎重要在於說，知道我們要解決問題，然後用有邏輯的語言敘述邏輯給電腦執行，所以不僅是了解語法，而是了解「為什麼會有這個概念，又能用在哪裡」。

教完字串操作跟動畫後，有一個Project是做摩斯密碼翻譯器，除了可以打鐵趁熱地讓大家練習怎麼操作字串跟動畫之外，更能夠完整練習函數的使用，把程式模組化、讓他們能夠重複應用。

我以十幾個有趣範例入門JS打基礎，到後面帶物件導向的概念，從寫義大利麵式的程式，到變成可以獨立完成有趣的小應用，開始加入程式之後，就有了更多能做互動的工具，最後一個完成的Project就結合鋼琴音效做了記憶遊戲，教大家遊戲控制跟流程的設計。

然後就進入主題 — Canvas與特效動畫了！

從數學座標、物理模擬、三角函數到音效設計，讓你結合數學跟程式，創造互動藝術與各種遊戲(agar.io / 小精靈 / 科幻碼表…等)，做10個範例與6個大專案，這是這次課程最精華的部分XD

在製作了第一個單元的繪圖練習之後，我加上了利用偏移跟調整座標系的工具，在一個範例裡面偷渡了九個範例，快速讓大家練習進階的繪圖跟狀態保存，用堆疊的概念保存畫布當下的轉換狀態，就能夠繪製非常複雜的圖形。

熟悉了繪製之後，我們了解到畫布上面都是沒有狀態保存跟物件的概念的，所以開始要用es6的class語法製作一個球的物件，並加入滑鼠控制與偵測座標，讓我們可以去跟球互動，並學習物理概念，把位置、速度、加速度包在球的狀態中。

在這之後，為了更複雜的座標跟數值計算，引入了向量跟三角函數的概念，讓我們能夠更容易與直觀地去了解物件旋轉、極座標跟電腦世界中這些形狀怎麼繪製出來的過程，如果稍微延伸下剛剛的球的範例，大量的產生物件就能夠變成漂亮的粒子系統。

接著利用三角函數的概念，就能夠繪製很漂亮的時鐘，製作FUI的科幻感。

而到這邊，大致上就是基礎概念都教完了，最重要的就是應用了，要如何結合不同的技術建構有趣的互動範例呢？

「直接實戰，大量從頭建構的完整範例練習」

所以接下來的就是直接建構一個大型的應用範例，比如我自己喜歡的遊戲或是互動藝術，分析我想要達到的效果，然後一步一步的解析會用的原理，從頭開始建構出來。

如果結合繪製加上遞迴的概念製作生成式藝術，學會利用機率的概念長初樹枝，加上一點電腦圖學的烏龜繪圖法，就能夠畫出漂亮的大樹。

學習完靜態的操作之後，如果使用TweenMax結合速度函數，可以操縱數值做出很漂亮的動畫，所以除了直接操作html元素，還能拿來針對js的物件製作連續的平滑數值，就能夠套用動畫法則讓畫面很生動。

如果學完用TweenMax動畫之後利用向量模型，可以製作引力、斥力，與接觸判斷，再結合物件導向從遊戲物件繼承到每個玩家，就能做出一個有幾乎完整功能的agar.io，再加一點點小判斷就能幫其他的球加上AI，我自己做完整個範例玩了很久XDDD

接著結合物理的概念，製作小朋友下樓梯的遊戲，樓梯有不同的種類、物理性質，加上遊戲控制邏輯之後，使用繼承的概念製作遊戲物件到延伸成不同類型的階梯，懷舊的小遊戲就在手中誕生了。

在後期的幾個大Project中，我自己最喜歡的是做了經典的小精靈，從地圖的設計、物件生成、牆面繪製，到如何去控制小精靈跟鬼的動畫，最後加上接觸判斷、鬼的吃食物機制，和會追隨玩家的AI，兩個小時的範例，但我用了將近兩個禮拜完成。

好啦我知道真的很多，所以製作課程的時候真的很崩潰，每次都在埋怨自己當初為什麼要開這麼多單元… 但是我既然答應了大家，我就要完整地完成這個東西，不僅是對自己負責任，而是真的燃燒生命，讓大家看見我所相信的世界。

最後系列是前端資料框架的使用 — Vue.js

因為現代前端框架真的很重要，所以最後從了解為什麼需要資料同步與前端框架，帶你從應用情景（車票、商品列表、電影選擇、撲克牌遊戲）入門，掌握如何將vue.js應用在互動網頁上，也特意設計了互動範例，不只是做個簡單的todolist，而是能拿來製作實務應用中精緻的互動遊戲或介面。

這個系列單元的Project是製作一個電影清單選擇的介面，結合Vue.js先將資料渲染成網頁上的元素，然後解構Vue.js中的事件觸發，加上TweenMax調整裡面使用者動作的觸發跟回饋，在裡面練習了CSS的調整介面、FlexBox、Vue的渲染跟計算屬性、方法、製作非同步的動畫狀態…等，當初也是構思非常地久，如何練習得到每個有教過的細節。

加碼單元

在最後加碼單元中，我介紹了 TimelineMax / D3 / Three.js ，幾乎每一個單元都可以當成獨立的課程來教了，裡面直接用60分鐘帶大家了解函式庫的特性、使用方式，比如用timelineMax+滑鼠來製作卷動動畫，或使用Three.js製作一個酷炫的原子轉轉畫面。

課程內容介紹大概就到這，還有超過一半的範例並沒有放上來，但每一個都是熬了好幾天夜，白了好幾根頭髮才生出來的，好多失敗的草稿，好多覺得不夠好的範例都一再一再地雕琢，為的就是最後端上來，呈現在大家眼前的每個東西都看起來足夠完美。

內容的深度、廣度、範例複雜度，如果把三者全部點好點滿…

原本以為這堂課最困難的地方會是範例設計，但是隨著準備投影片的過程，發現要把這些數學跟程式的概念講解得夠清楚直白實在是很難啊！不僅要從日常有趣的範例開始帶入主題，還要一些圖解跟動畫輔助才能一目瞭然，尤其要重新消化一遍自己熟悉的東西。

錄製過程中的困難

一直以來，我希望實作可以藉由完整的思路，能從零開始建構每個範例作品，因此在錄製課程時總是花很多的時間在不斷順內容，不斷重錄，以及一直修改投影片，雖然時間上的掌控一直沒能拿適當，常會花比預期長非常多的時間在準備課程。

因為對自己的標準提升，所以錄音、口條與後製都更完美主義了，想更清楚的講解概念，準備了數百張投影片跟說明圖，同時程式變得更難、更複雜，講解難度大幅提高，因為沒有人開設過這樣的課程，得要慢慢濃縮淬煉出整條課程的大綱路線。

這個影片大致上就是整堂課的流程，從開頭、講解投影片跟原理，然後到livecoding把整個案例實作出來，一刀未剪，完整的從零開始建構，一邊講解思考流程、為什麼這樣做，以及語法要用什麼。

對我而言，因為製課難度的大幅提升，每個單元的時間都非常難以掌握，常常因為想要設計一個很棒的範例，一兩個禮拜就過去了，再加上還要把觀念消化、講解、程式練習講過幾遍跟重構，所以其實單元上線拖了非常之久，也很感謝所有學生耐心與包容。

另外很感謝的是Hahow負責Review我課程的詩涵，完整地把3000分鐘看過（真的很厲害），給予修改跟調整的建議，以及協助我把整體的課程時程規劃做好，和在過程中處理了很多對外的客服問題，雖然知道這堂課的時程延誤了很多，仍然耐心細心地一起處理完整堂課程。

那些瀕臨放棄的時刻

2018三月時是最黑暗的時期，課程上線進度落後，不斷被催稿，每次錄音看天逐漸亮了就覺得好崩潰，想到要連續講3小時的範例就覺得焦慮，要繃緊神經到極限，順暢、有調理、好吸收地把整個程式重新實作一遍。

總想著，我幹嘛把東西做那麼精緻，但是現在回頭看，就好似看到茫茫大雪中，一條深刻且扎實的足跡就這樣踏了過來，唯有熬過那樣的寒冬，才能留下在心中足夠完美的這一門課，迎來百花綻放的春天。

這一年來不斷地在攝取新的領域，同時規劃完整的基礎入門，比如我在音樂學到了合成器、聲音的基礎概念，就把他直接應用到範例中，或是看到了什麼真的很酷的遊戲，就想著怎麼把他用自己的技術與想法詮釋，很希望能夠在此留下一個里程碑，把至今探索數學跟程式的整合道路，以開發軟體、遊戲跟網頁十年左右一路學習過來的脈絡呈現。

一場沒有終點的旅行

對於很多人來說，這一堂課就像是一場沒有終點的旅行，而對我來說是很大的里程碑，把從開始寫程式、開工作室到現在的功力都放在這裡，做一個完整的整理希望能幫上想要探索這條路的人，一方面也是告訴自己告一個段落，不要在已經會的東西裡頭打轉，再起步伐去探索未知的世界。

寫網頁真的只有如此嗎？

我們是否因為工作而忘記了創作的初衷？

學會數學或技術到底該怎麼用在日常生活中？

創作到底還能以什麼形式、什麼體驗展現呢？

這些疑問，想透過這堂課也充分的證明了我所相信的事物，而我也放下了至今的包袱，前往紐約攻讀碩士探詢對於這些想像的更多不同解法了。

希望不管你什麼時候回來，這門課都能成為你堅實的後盾不只教程式，更打好數學、架構設計跟特效的內功實戰，不管是剛走上程式路途的你，正在路上跌跌撞撞的，還是已經身經百戰的工程師，都能在此得到收穫。

有一天，如果有人跟我說，嘿！ 我看了你的課程，謝謝你把這條足跡留下來，那一切的努力就值得了吧！

歡迎你一起加入這條通往未知的旅行

動態互動網頁特效入門，這堂課從html/css 講到 物件導向 講到 數學、音樂、遊戲的綜合應用，囊括JavaScript完整入門、es6物件導向，到後來自己了解原理並做一個遊戲引擎，範例從記憶遊戲、小精靈、生成式藝術到agar.io。

長達3085分鐘，超過60個精緻範例與400張的投影片以上，以及四個加碼單元vue-cli、GSAP、D3、Three.js的投影片，成為hahow上最長的課程。

到Hahow上課去>>>

動畫互動網頁程式入門(HTML/CSS/JS)
動畫互動網頁特效入門(JS/CANVAS)

延伸閱讀：
2016第一堂課的心得：從不只是一門線上課程-而是一場推動進化的豪賭

撰文：吳哲宇

這篇文章 釀造一門結合網頁、設計、數學與特效的線上程式課程 最早出現於 Creative Coding TW - 互動程式創作台灣站。

本文撰寫時間為2016/10/2，由墨雨設計創辦人，同時也是互動藝術家的吳哲宇親筆記錄下關於「動畫互動網頁程式入門」這堂線上課程的來龍去脈，從最開始的起心動念、一路的辛苦籌備路程，還有被越來越多的學生上了幾堂課後的作業所驚豔，更加堅定地相信設計跨領域程式、以及各領域的雜學所能帶給世界的創新能量，並且願意帶著後起之秀一同前進，持續推動互動領域（無論是網頁、科技、設計乃至於藝術產業）的發展。

在課程上線滿一個月的這天，啜著咖啡看到人數已逐漸來到了1667人，整理著每天到三四點睡留下來的瓶瓶罐罐跟咖啡杯，試圖留下些什麼紀錄，回神才發現準備課程這段漫長的道路已接近了尾聲，便打起了草稿想把這一切曲折離奇、燃燒生命的光芒記下

「寫網頁好難喔….每次看線上程式教學，都在講解功能沒講怎麼完成一個好看的網頁，總覺得自己做出來，離別人美美的網站就是有一段沮喪的距離」

我想，這句話是當初開始想開課的初衷，也是自己三年前開始踏入網頁領域自學的痛，總覺得無法掌控的各種超自然力量在影響網頁的排版，各種摸不清底細的屬性，總要擺兩包科學麵獻祭祈禱網頁乖乖的不要跑掉，光是用工程師思維把網站寫出來都很吃力了，更別提要如何處理視覺、文字，讓網頁不會看起來陽春的像小學電腦課做的。

那時候第一次網頁還是脫離不了所見及所得軟體，要改東西直接拖拉，用adobe animate不顧結構做出一個還算可以用的網站，心想，做網站不過就如此嘛，我幹嘛那麼辛苦去寫html跟css，尤其當那時html只知道可以放元素，css只知道改改文字顏色改改框線的時候。

經過了波折的三年，接了數十個專案的歷練跟學習下來:

1. 從單純的html/css，開始踏入js、踏入各種svg/canvas動畫效果
2. 一開始接觸bootstrap之後狂用，但受限於風格跟不易改動後又捨棄，那時功力還沒有辦法秒速做到bootstrap水準。
3. 逐漸用很基本的css/Jquery 也能夠做出很漂亮精準的互動，開始不喜歡用別人的套件，用自己理解到的原理或概念重建parallax網站或互動
4. 開始研究物件結構跟演算法製作動態跟互動的網頁，愛上優雅的物件結構跟定義，把重力、3D、生物、遊戲等等概念濃縮到網頁上。
5. 因為要做售票系統跟會員開始入門後端php跟資料庫，到中期為了給客戶編輯自幹了一套還算不錯用的CMS，在這個時期建立了完整前後端的概念，體驗到了溝通問題也體驗到接案的窘境。
6. 摸過laravel/ruby on rails幾個月，覺得有趣但模板一半切完板之後交給後端處理，改動的可能性就消失了，回到原本輕型框架的網頁結構。
7. 寫了一年後發現資料在後端處理跟產生網頁真的太麻煩，觸碰到了前端框架angular.js/ Vue.js，愛上了用資料轉換網頁的樂趣，從快速變成極快速，尤其Vue.js的調性真的很簡潔大方。
8. 開始集大成，把手邊能用的技術逐漸都熟練，開始把實踐的功能寫成一個個模組，比如自動分析列表產生音波文字，用後期分析的方式，以canvas為基礎動態產生靈活的動畫，操作聲音、數學，覺得網頁真的可能性無限。
9. 更加熟悉資料流/前端的互動，專案在規畫的時候會更全盤地思考如何在既有的架構跟畫面下創造更多可能性，讓網頁活起來，或是有個觸動心靈的點，甚至看到有趣可以實驗的案例就直接用網站實現出來(像是示波器)。

這些年來很多有趣的案例：

生活中很多有趣的案例都可以當作網頁的素材，所以對我而言，網頁是一種呈現媒介，很有力量跟可能性的呈現媒介，第一個：他快，可以迅速的把東西/產品上架/測試實驗性的想法，第二個：他會動，比起靜態的呈現，互動感會帶給我們很大的感受升級，第三個：他跨平台，只要有瀏覽器就有網站。

其他的範例可以到 hahow課程頁面 或我的codepen觀看。

「恩..說是要分享，但是要從哪裡開始呢?」

5月時，與hahow的魏敏討論市場上網頁技術的需求之後，決定開設一門讓大家可以輕鬆入門網頁，卻又不像是一般codeacademy / 一些免費的教學，只能大概了解概念，卻沒有辦法有系統地完成一個網頁跟調整視覺。

討論完之後，終於訂出了這次課程精準的目標，說是精準其實也有點惶恐，是一個大方向，很少人嘗試過的教學方式：

「我想要用設計的角度去教程式(恩?」

因此將課程的目標定為「用illstrator的概念了解並實作網頁」，並且每一個範例是貨真價實的，帶著把一個網頁從頭刻到尾，會碰到甚麼問題/要調整哪些css/視覺的考量如何轉換成程式的架構…等，比起怎麼做，更重視 「想要達成甚麼效果」跟「為什麼要這樣做」，才不會讓東西過於枯燥。

原本的大綱規劃有十三堂課，分別講解html基礎概念到css到帶入一些js的基礎概念，想說畢竟是”入門”課程嘛，就是每一個會用到的東西大概帶到就ok了:

///原本的課程規劃
1 - html/css/js 網站結構介紹- 一棵三種語言構成的大樹
2 - 規劃架構- 寫網頁前的規劃與準備
3 - 元素定位- 基礎元素定位 上下左右對齊與大小
4 - 基礎html/css - 網頁名片
5 - 開始開發- 架構原則- 使用 class 與 id 操作元素
6 - 開始開發- Codepen操作實務- 介紹sass與jade 快速開發入門
7 - 元素定位- padding、margin、align 元素之間彼此的關係
8 - 元素定位- div布局策略、overflow 有最好的棋盤才能下最好的棋
9 - 視覺介面- css 初階視覺調整
10 - 視覺介面- 顏色、大小、一切你在Illstrator會看到的美好事物
11 - 視覺介面- 字體 小小改變就能帶來超高CP值的調整
12 - 視覺介面- Illstrator 圖像匯入與png實用
13 - 靜態專案實作-實作模仿刻一個HAHOW的課程頁面
14 - 使用者互動- css 動畫-滑鼠的點擊、進入、滑動互動
15 - 使用者互動-基礎 css animation使用 用%影格概念操作動畫
16 - JS 基礎入門 - 使用Jquery改變元件外觀
17 - JS 基礎入門 - 使用Jquery 在各種事件中觸發網頁動態改變
18 - SVG - 向量不失真的網頁圖像格式
19 - SVG 動畫 - 讓你的LOGO或圖像動起來
20 - 動態專案實作- 做一個獨特動態的個人頁面
21 - 破除障礙- 問題解決與找資源的技巧
22 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

「錯了，錯了，全部都錯了」

隨著湧入的人越來越多，我一開始錄的時候發現，完全不是這麼回事啊!!!

如果稀哩呼嚕一堂講了兩個小時，誰聽得懂你在做甚麼，尤其當教學的東西到一個量之後沒有任何練習範例或看得到的產出，看的人就會開始覺得無趣抽象，抓不到你想傳述的概念，更別提去練習或了解了，這種教學方式，就像是拿著一本說明書一樣對著學生在念嘛，自己看著都覺得無趣了，更別提怎麼讓別人愉悅地把東西學進去。

想了好久好久，決定來進行一次大改造，想像自己如果是平面設計師，完全沒有程式基礎的時候，會怎麼樣去了解一個東西，為什麼要這樣做那樣做呢，到底什麼樣的範例事會讓大家覺得有趣的? 什麼才能讓大家再做中學，學中獲得成就感呢?

也因此課程暴增到了九十幾堂，每一堂原本預計5~10分鐘，但也時常超過20分鐘甚至到一個小時，就為了把最完整的思考流程、設計等等脈絡帶出來，才算是好的教學，想像自己是一個完全的新手，對於網站開始要有了解，有了全面的認知之後，再開始進入開發階段，一個個把小小的工具跟技能練好實作，再一個階段一個階段地把看似不可能的專案實踐出來，在小成就感中喜悅，逐漸成長。

///新的課程列表
 1 - 最新公告區(2016/9/28)-點擊"講義"查看最新課程消息
 2 - 楔子-課程進行模式說明 
 3 - 楔子-網頁前後端如何運作 
 4 - 基礎前期規劃-網站專案開發流程 
 5 - 基礎前期規劃-網站主題名稱logo 
 6 - 基礎前期規劃-網站瀏覽結構樹規劃 
 7 - 基礎前期規劃-網站排版規劃與分類 
 8 - 基礎前期規劃-網站視覺配色概念與資源 
 9 - 本機環境架設 - sublime 操作與瀏覽器預覽網頁 
 10 - 本機環境架設 - 伺服器瀏覽與原理講解 
 11 - Codepen環境架設 - 平台介紹/註冊與基礎設定 
 12 - Codepen環境架設 - 實際使用sublime中快速鍵 
 13 - 基礎HTML/CSS - html中元素&排列的概念 
 14 - 基礎HTML/CSS - html中結構&層級的概念 
 15 - 基礎HTML/CSS - <project 0> 簡易版本自我介紹 
 16 - 基礎HTML/CSS - css 直接調整外觀與顏色框線 
 17 - 基礎HTML/CSS - css 分開撰寫 - class&id概念 
 18 - 基礎HTML/CSS - css 顯示方式 display block/inline 
 19 - 基礎HTML/CSS - css 元素位置 - 相對 / 絕對定位 
 20 - 基礎HTML/CSS - css 內間隔/外間隔(padding/margin) 
 21 - 基礎HTML/CSS - css 字體變化與span-在文章段落中製作變化 
 22 - 基礎HTML/CSS - <project 1> html / css 大整合-製作獨特名片網頁 
 23 - ​基礎HTML/CSS - <homework 1> 功課說明-製作自己的技能網頁 
 24 - 系統性管理開發 - html縮寫模組-Emmet 介紹 
 25 - 系統性管理開發 - html樣板語言-jade (課程主要使用) 
 26 - 系統性管理開發 - css 樣板語言-sass (課程主要使用) 
 27 - 系統性管理開發 - sass - 變數概念管理色彩&內容 
 28 - 系統性管理開發 - sass - 動態產生模組mixin概念 
 29 - 系統性管理開發 - sass - 常用mixin與累積資源 
 30 - 系統性管理開發 - html參考資料轉換jade 
 31 - 系統性管理開發 - <project 2> 實作網頁品牌視覺指導套色 
 32 - 素材前期準備 - 如何在以拉中製作icon/圖像 
 33 - 素材前期準備 - 如何輸出圖片jpeg/png/svg 
 34 - 素材前期準備 - 將圖片上傳到imgur影像網站 
 35 - 素材前期準備 - 管理網頁色彩(guideline/sass/js) 
 36 - 前端基礎動畫互動-html attr 與自定義屬性名稱 
 37 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative 
 38 - 前端基礎動畫互動 - css 加入基礎滑鼠互動 :hover / :active 
 39 - 前端基礎動畫互動 - css 動畫基礎 transition-duration/delay 
 40 - 前端基礎動畫互動 - css 製作影格動畫 animation/keyframes 
 41 - 前端基礎動畫互動 - css 動畫速度曲線 fillmode/speed curve 
 42 - 前端基礎動畫互動 - SVG - 繪製向量網頁圖片 / logo 
 43 - 前端基礎動畫互動 - SVG - 讓你的LOGO或圖像動起來 
 44 - 前端基礎動畫互動 - <project 3> 動態互動天氣盒子 
 45 - 前端進階程式js-引言 
 46 - 前端進階程式js - jquery 動態改變css外觀/ html內容 
 47 - 前端進階程式js - jquery 初階滑鼠事件 - click/hover 
 48 - 前端進階程式js - jquery 變數概念- 儲存修改與判斷 
 49 - 前端進階程式js - json 物件陣列概念 & for 遍歷 
 50 - 前端進階程式js - jquery / json 動態產生購物車清單 
 51 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹 
 52 - 前端進階程式js - Jquery ajax - 實作導入資料代辦清單 
 53 - 前端進階程式js - <project 4> 實作購物車-動態新增購買物品與結算 
 54 - RWD原理與應用-內容流與概念說明 
 55 - RWD原理與應用-指定比例尺寸% 與max-width/min-width 
 56 - RWD原理與應用-重新排版的原理-特定條件css-media query 
 57 - RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化 
 58 - RWD原理與應用-懶人工具- bootstrap 原理與結構講解 
 59 - RWD原理與應用-bootstrap 格線系統(container/row/column)原理 
 60 - RWD原理與應用-bootstrap 欄(xs/sm/md/lg) RWD應用 
 61 - RWD原理與應用-bootstrap 應用技巧 padding型規劃/多層div 
 62 - <project 5> 實際應用範例 bootstrap-常見企業品牌網頁 
 63 - 網頁視覺設計-流程-版面規劃軟體 AI/SKETCH/紙筆 
 64 - 網頁視覺設計-流程-與頁面結構/跳轉方式規劃 
 65 - 網頁視覺設計-元素-樣式 顏色規劃 
 66 - 網頁視覺設計-元素-元素動畫 反應規劃 
 67 - 網頁視覺設計-元素-從元素建構而上的設計 
 68 - 網頁視覺設計-元素-從頁面整體切分而下的設計 
 69 - 網頁視覺設計-元素-從設計轉換程式網頁的常用技巧 
 70 - <project 6> 實際網站應用案例-Material Design風UI/UX 
 71 - 前端框架Vue.js-為什麼要用資料導向做網頁(回顧js) 
 72 - 前端框架Vue.js-將變數代入模板中 
 73 - 前端框架Vue.js-v-for 列舉元素應用 
 74 - 前端框架Vue.js-v-model 使用者輸入雙向綁定 
 75 - 前端框架Vue.js- v-if / v-show 條件渲染與資料的後處理-實作博客來 
 76 - 前端框架Vue.js- v-on / method 建立js事件 
 77 - 前端框架Vue.js-與AJAX的對接 動態載入資訊 
 78 - 前端框架Vue.js-綜合案例-使用hahow課程資料 
 79 - <project 7> 客製化待辦清單Todo List 
 80 - 購買伺服器部署/網域-伺服器原理與規格說明 
 81 - 購買伺服器部署/網域-購買linux主機與網址DNS設置 
 82 - 購買伺服器部署/網域-購買不能ssh連線的主機設置 
 83 - 購買伺服器部署/網域-安裝apache/mysql 
 84 - 購買伺服器部署/網域-使用filezilla軟體連線與上傳 
 85 - 購買伺服器部署/網域-使用sublime sftp進行同步 
 86 - <project 7> 購買伺服器部署/網域-網站上線實作 
 87 - 實作案例分析-HAHOW-練習使用Bootstrap+Vue.js建構課程頁面 
 88 - 實作案例分析-Autodesk-影片式背景一頁式網頁+導覽列 
 89 - 實作案例分析-Medium-部落格-多資料首頁 
 90 - 破除障礙- 問題解決與找資源的技巧 
 91 - 後續發展- 兩大路線 (前端網頁佈局/ 專攻動畫與圖形處理)

我知道列表看起來有點長有點可怕，但是每個單元都是5–10分鐘(後期常超過20…)，一個功能一個功能帶入並詳細地分析、演示這會用在真正寫網頁的哪些地方，帶著實作一次，也因為方法、結構都是一整套下來，照著思路練習過幾次，自然就能逐漸熟悉網頁撰寫的流程。

如果以前有人這樣帶著我這樣有趣的入門網頁，應該就可以少雷的一兩年的人了吧(笑，有些自己探索了很久去蕪存菁的重點，也是在時間歷練之下理出的心法，所以我不後悔做這樣的決定，更是與有榮焉希望有朝一日如果看到設計師們漸漸地不再懼怕程式，不管是溝通、還是台灣網頁界的現況都能夠得到極大的成長。

「每個人都是在雷人中成長，磨利了現在的自己，那為什麼要讓大家再自己坎坷的走一遍?」

曾經有一個建築廠商找我，希望能夠製作一個工地管理系統，方便能夠把工人的位置/狀態回報/或是建材等等的資訊，以一個APP或是網頁的方式呈現，在建材需要的數量/報價上也能夠及時掌握數量跟回報，他們長期以來的人事都是email傳excel檔案管理，亂糟糟的毫無章法，更常漏東漏西或時間成本全砸在上面。

這是非常好的改變，但是一個晚上他打電話來，說他不想做了，因為不管怎麼做都沒有辦法防止有心人士看到系統，然後直接請工程師團隊模仿一個出來，他說：

「這樣不就自己花了錢來讓競爭對手變厲害嗎？ 我幹嘛這樣做」

然後就憤憤不平地掛電話了，當下我是十分錯愕的，談好已經幾乎要開始執行的案子突然就沒了。

但是更令我沮喪的是，他們寧可用各種複雜的excel報表，有時差地傳遞資料/手動計算，而不願意試圖改良前進，即使對手也許會看到跟進這樣的制度，台灣的傳統廠商到底發生了什麼問題，為什麼當我們踩穩了一個能夠賺錢跟成長的位置之後就放棄了進化呢？

同樣的道理套用在我的課程上，有很多人跟我說：那是你的專業耶！你捨得這樣掏心掏肺地把課程設計得像蛋糕一樣容易吸收，把大量的經驗分享出去!?你不怕別人這樣學完之後就變成你的競爭對手嗎？

我們不願意進步，恐懼別人進步，因為潛意識知道自己沒在前進。

有有趣的對手交流較勁比自己獨鬥有趣，更何況，誰說我一輩子要靠這個吃飯，難道會寫網頁賺錢之後就要死命地抱著自己僅有的一點點技能嗎？我從來都沒有放棄前進，放棄學習，也因此在課程中學到的儘管多，也僅僅是過去的我的巔峰，一轉眼又再成為遠方的背影。

雖然這陣子錄課程錄到回台北過家門而不入XD(喂，大量的不讀不回別人訊息XD 好多好多時間都砸在這個上面，還是真的很開心的，當然不是要催大家看，影片一直都會在，只希望你記得你曾經想學習，就不會忘記初衷。

「一場豪賭 一場自我進化」

台灣現況

在傳統的職場環境（台灣）中，設計師被稱作是美工，不過我想這雙方都有一點問題，一個是設計師被動地認為自己是接收工作並且直接執行美感轉換，像是一個人體Photoshop一般的存在，所以在面對不合理的修改要求、抱怨的時候會怨天尤人，心情也差了，但還是認命地改，不企圖反駁什麼，畢竟台灣社會從小到大的教育並不鼓勵我們表達想法，多得是你就照我說的做就對了的心態。

設計做到後期之後反而覺得真正重要的是「溝通」，比起美感，不管怎麼樣的風格都有它美的極限；在不同風格間，並非誰比較好，而是誰比較適合這個載體資訊。網頁的本質是溝通媒介，所以當溝通的訊息沒有成功的傳遞，不管UI再絢麗再細緻都會很遺憾地無法發揮價值。

講到溝通的隔閡，從開始接網頁相關的案子也滿三年了，持續地成長茁壯後，看到業界發生的大部分情況都是「設計師出稿、工程師刻板」，而且在中間會有很多時候無法溝通，設計師難以了解以程式方式網頁能夠做到的，工程師覺得設計師機車一直在調整小細節或出各種難搞的spec，當固守著自己領域的時候，就會出現像是丟皮球般的埋怨跟被動放棄溝通。

「設計師們，相信我，會了技術的你們根本是外掛，自產素材VI、想動態、實作細節，更可以去探索跟完成原本純視覺設計達不到的事情」

如果有著平面設計的基礎，在設計網站版面的時候，自然能比純工程師有更高的彈性，可以改變跟嘗試的事情就更多了，除了飛來飛去、動來動去的花俏UI之外，一般中規中局的版面規劃也能以平面設計的角度關注細節，自然在介面的規劃上就拉開了一段距離，更別提很多設計師身兼插畫家，可以自己產出網頁用的素材，不用辛苦上google搜尋一堆不同風格的素材之後，苦惱怎麼拼在一起了，這樣的優勢真的是犯規級別。

所以如果設計師學習了網頁程式，有人以設計師的角度去分析，從「想要讓網站視覺變得好的時候要怎麼做」去層層剖析達到目的需要的方法跟教學，就能夠以很短的速度入門、昇華，融合原有的設計既能達到一個新的境界，這樣的境界是新時代的「雜學」，讓工具成為自己的左右手，而非最終的目的。

最後關於價錢的部分，有人跟我說

「2000元你傻啦，這樣的課程去外面xx電腦之類的根本是幾萬塊在收的」

其實我並不怎麼怕，因為你不看課程永遠損失的是自己，學到的東西永遠跟自己的努力成正比的付出。

我在教學中學到的事物，經過講過一遍之後能力三級跳，基礎功更為扎實，其實也算是收穫很多，重點是現在的時代不一樣，群募的線上課程節省了講師用無限重複的時間去授課的缺點，所以這樣開2000元收一千多個學生，跟8000元收二十個學生，而且要不斷地重複一樣的事情，這樣的效果是跟可以帶來的影響力是乘倍數增加的，也是以前時代做不到的，而我也不用那麼大的時間成本重複地授課，可以鑽研自己喜愛的事物。

像是學生裡面就有很多讓我驚嘆的，才剛學會網頁就做出真的很不錯的作品：

他們都是動態網站而不是純平面的作品，靠程式刻出來的！ 右上 左上 右下 左下

目前，已經1600人修課 ，超過1/3的人開始第一堂課，將近100人開始完成第一個Project。

如果我們把工具當學科看，只會看到無趣，就像劇本設計一樣，核心思想才是王道，希望所有買跟修這門課的同學，我都能夠幫助到你們，就像在幫助兩年前的自己一樣，不只傳授工具、更傳授了跨領域結合、我所信仰的雜學。

「我們無法一直在這片天空上飛翔，只能奮力保持著盡量不墜落」

一起進化吧，我把到目前為止的能量都放在這邊了， 如果有朝一日能夠讓即使1%的人開始踏出自己的領域，我也滿足了。 現在的各種平台盛行，很難觸及到所有人分享，但願每個進來的人，都能收穫滿滿的離開，展開新的人生道路。 

快瞧瞧哲宇老闆精心製作的線上課程動畫互動網頁程式入門(HTML/CSS/JS)

p.s.如果這門課真的有幫助到你，讓你體會到網頁學習的樂趣， 再請不吝給予評價與分享了:)

看看下一篇：釀造一門結合網頁、設計、數學與特效的線上程式課程

撰文：吳哲宇

這篇文章 從不只是一門線上課程，而是一場推動進化的豪賭 最早出現於 Creative Coding TW - 互動程式創作台灣站。