閱讀完此篇文章，你會知道：

• 什麼是 Shader
• Shader 應用案例
• 如何開始學習 Shader

相關資源

• Codrops：有很多網頁互動相關的資源，大家可以去挖寶
• Shadertoy：很多厲害的 Shader 作品
• The Book of Shaders：詳細地介紹 Shader
• The Book of Shaders 提供的 Shaders 編輯器
• 老闆自製 p5 的 Shader template 不藏私分享給大家

Shader 作品和必追蹤的藝術家

• Madebyevan – webgl water
• Sayama
• Zach Lieberman

Shader

老闆第一次接觸 Shader，是在 Codrops 看到的 WebGL Distortion Hover Effects 這篇文章，第一印象覺得它根本就像是外星語言，因為它是非常底層的、類似 C++ 的程式語言。

滑鼠滑過物件的互動，對網頁工程師來說，大概就是簡單地在 css 寫上 &hover 然後可能換個背景圖片和顏色，再加上 transition 。但這篇文章中的 Demo 卻做出了各種讓人為之驚艷的效果，像是類似液體那樣 ㄍㄡˊ ㄍㄡˊ 的感覺、三角形漸層、稜鏡感、刷色感、鋸齒狀…等等。老闆原本想說，這大概需要研究個兩三天用很多行的程式碼才寫得出來，殊不知點開它的 code ，發現做出這麼酷炫視覺效果的程式碼，嚴格上來說只有短短的六行！

大概就是這個部分：

// hover-effect.js
void main() {
  vec4 disp = texture2D(disp, vUv);
  vec2 dispVec = vec2(disp.r, disp.g);

  vec2 uv = 0.5 * gl_FragCoord.xy / (res.xy) ;
  vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);

  vec2 distortedPosition1 = myUV + getRotM(angle1) * dispVec * intensity1 * dispFactor;
  vec2 distortedPosition2 = myUV + getRotM(angle2) * dispVec * intensity2 * (1.0 - dispFactor);
  vec4 _texture1 = texture2D(texture1, distortedPosition1);
  vec4 _texture2 = texture2D(texture2, distortedPosition2);
  gl_FragColor = mix(_texture1, _texture2, dispFactor);
}
`;

為了瞭解他如何運作，老闆接觸到 Shadertoy 這個網站，裡面有類似剛剛那種 hover 效果的超級進階版應用，像是用 200 行左右的程式碼做出 超逼真海水 ，或者像這樣利用造點圖片加上扭曲旋轉效果即完成的 銀河 Galaxy 。

什麼是 Shader ？

What is a fragment shader?

Shaders are a set of instructions, but the instructions are executed all at once for every single pixel on the screen. That means the code you write has to behave differently depending on the position of the pixel on the screen. Like a type press, your program will work as a function that receives a position and returns a color, and when it’s compiled it will run extraordinarily fast. － The Book of Shaders

Shader 是繪製螢幕上內容的著色器，最重要的特性在於它是以每顆像素個別做渲染的方式運作，可以想像成活字印刷機，透過定義每顆像素在每個位置的表現組成一個完整畫面。

為什麼 Shader 渲染可以這麼快？

因為它不是用 CPU ，而是用 GPU 來運算。 CPU （中央處理器）通常被大家理解為是電腦的大腦，負責執行作業系統所需的指令與程序，它是線性的加工廠，一次可以處理一個工作。而 GPU （繪圖處理器）則是由許多更小也更專業的核心組成，所以我們就可以一次性地送出我們想處理的像素，一次性地處理完之後，再渲染出來。

用水管來比喻的話， CPU 就像一根大水管，但它一次只能處理一顆像素，而我們有堆積如山的像素等著被處理； GPU 則像是很多個水管並列，所以我們可以讓很多顆像素同時通過不同的小水管。

但是問題來了，我們要怎麼告訴這些不同的小水管，每顆像素該如何做處理呢？

在撰寫 Shaders 時使用的語言是 GLSL （OpenGL Shading Language） ，也稱做 GLslang ，是一個以 C 語言為基礎的高階著色語言。它讓我們可以跟 GPU 溝通，安排每個小水管該負責什麼工作。

這也是讓 Shaders 看起來不是很平易近人的原因。

首先，為了讓每根小水管能夠同時獨立運作，它們彼此之間的資料會是單向且無法溝通的，就像上方圖片示意那樣，資料處理的方向必須是相同的，而且每根水管都沒有辦法知道彼此處理完的像素變成什麼樣子。此外，因為 GPU 會讓工作接踵而至，換句話說會一直塞東西進水管，所以這些水管也就忙到沒辦法記得它們自己上一個工作的內容。

Each thread is not just blind but also memoryless. Besides the abstraction required to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers. － The Book of Shaders

Hello World

讓瀏覽器顯示 Hello World 通常是學新語言時會做的第一個練習，但是要在 GPU 領域渲染文字是件相對困難的事情，所以這個範例就用色塊來說明：

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
  gl_FragColor = vec4(0,0,0,0); // red, green, blue, alpha
}

接著也可以嘗試代入變數uniform

我們可以透過 uniform 從 CPU 發送資料到 GPU ，且透過 uniform 宣告的變數會是全域且獨特的，可以在所有的 Shaders 中讀取。

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
  gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);

  // gl_FragColor = vec4(abs(sin(mod(u_time, 0.5))),0.0,0.0,1.0); // 例如這樣寫可以讓閃爍變快
}

在 GLSL 中有提供許多計算數值的 functions ，像是 sin(), cos(), tan(), asin(), acos(), atan(), pow(), exp(), log(), sqrt(), abs(), sign(), floor(), ceil(), fract(), mod(), min(), max() and clamp() 等等，我們可以用這些函式搭配時間做出會不斷變動的圖形。

gl_FragCoord

除了像上面的範例那樣，用 uniform 宣告同樣的 input ，再用 default output vec4 gl_FragColor 呈現結果的做法外， GLSL 也給了我們 default input vec4 gl_FragCoord ，其中儲存了每個水管正在處理的 pixel 或 screen fragment 的座標，有了這個資訊，我們就可以針對每個座標做個別的處理，而這個情況下所使用的變數就不會叫做 uniform ，而會稱作 varying 。

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
  vec2 st = gl_FragCoord.xy/u_resolution;
  // vec2 st = gl_FragCoord.xy/u_mouse; // 例如這樣可以用滑鼠改變漸層的位置

  gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}

在 Shader 裡面畫圖形是很困難的事情

因為用「點」連成「面」是一個相對高階的概念，在 GLSL 中如果要做出形狀，就得把每個邊的位置都計算出來之後再組合起來，才可以變成圖形。所以就會需要很多角度、三角函數、指數等等的數學計算。

Shader 可以做什麼？

把 Shader 做為材質來使用

• Time Swirl
• DNA Mutation

可以用圖層的概念來想： 基礎圖形 + 一些 filter + 扭轉座標 = 看起來就會像有躁點的漩渦。

把 Shader 用在 3D 的模型上

• Plasma Planet

用 Shaders 渲染一顆 3D 的球，也可以根據滑鼠位置做變化。

綜合應用

• Memory Lost

用 p5.js 畫一張動態圖片 + 把 Shaders 做成扭曲 filter。

如果註解掉 frag 標籤下， void main(){} 裡面的這三行程式碼，就可以得到沒有經過 shader 濾鏡的原始 p5.js 動態畫面：

distorted_st.x+=cnoise(vec3(st.x*5000.,st.y*3000.,u_time))/(1.+(sin(sqrt(st.y+u_time/20.)*50.)+1.)*500.)/2.; // 電視雜訊 1
distorted_st.y+=cnoise(vec3(st.x*5000.,st.y*3000.,u_time))/(1.+(sin(sqrt(st.y+u_time/10.)*50.)+1.)*1000.)/2.; // 電視雜訊 2
distorted_st.x += sin(distorted_st.y*(50.+sin(st.x)*20.)+u_time)*distorted_st.y*distorted_st.y/10.; // X方向的扭曲

Shader 就像是非常高功能的透鏡，但困難的點在於，我們要定義每個像素經過這個透鏡的行為。

與 3D 整合：Three.js – Displacement map

3D 軟體的渲染，像是 Unreal、Vray、Octane 等等軟體內的材質編輯器，跟 Shader 運用的概念都一樣，所以如果沒有要做到更底層的應用，使用 Shader 就像是在自討苦吃。因為把 Shader 做為 3D 環境的材質來使用，勢必得考慮光影的渲染，例如光打到某個點上，材質會如何變化、入射方向、反光效果等等，會更加複雜。

例如要做出像磁磚獲木紋那樣凹凸的效果，除了貼上紋理之外，還需要告訴軟體根據這個紋理渲染對應的陰影。 Shader 的 displacement map 就是透過指定一個畫面，算出對應的陰影和光線反射，讓整個畫面看起來更真實。

應用案例

日本藝術家 Sayama 的創作

實務應用

所有技術最重要的還是要能夠應用，譬如工作室願意把它用到上線的專案中，它才有意義。

實務上老闆把 Shader 拿來畫 OUTERNETS 的 Home 和 About us ，做出光暈和躁點效果，還有非常繽紛科幻可以跟滑鼠互動的旋轉球球。

Outernets

Outernets – About us

墨雨工作室也嘗試把 Shader 應用在 跟18天台灣生啤酒1起吃飯8！ 這個活動網頁上，做出啤酒噴灑出來的動態扭曲效果。

如何開始學習 Shader ？

The Book of Shaders

這個網站用深入淺出的說明加上可以操作的範例，也提供了一個好用的 編輯器 （從網站首頁點選 Examples Gallery ，再點擊 “Hello World” 下面的色塊），可以先從這邊熟悉 Shader ，之後再嘗試放到自己的專案中。

Touch Designer

探索 Shader 也可以從 Touch Designer 開始，它幫我們把各種模組都寫好，讓我們不用寫任何程式碼，只要載入不同的圖片和效果就可以玩出各式各樣的變化。

Banana Test

例如老闆之前在嘗試的時候，把香蕉經過 transform 再合成到背景上面。

題外話：各位如果對 3D 有興趣的話，可以去玩玩看 Blender ，它是開源的免費軟體。

在 p5 裡面玩 Shader

ITP – p5js shaders 介紹了如何把 p5 和 Shader 結合使用，把 Shader 當成材質或者影像的即時處理。

老闆也在 OpenProcessing 製作了 Shader template ，基礎的架設都已經完成了，歡迎 fork 之後自己玩玩看囉！

簡單的 Demo

雜訊效果：可以用 rand() 給原本位置的像素一個隨機的位置資訊，就會讓畫面有看起來霧霧的效果。

// frag 標籤中的第 20 行開始
void main(){
  vec2 st = var_vertTexCoord.xy /u_resolution.xy;

  st.x += rand(st); // 霧霧的效果
  st.x += rand(st) / (1.+st.y*10.); // 上面會霧霧的，但越下面會越平滑

  vec3 color = vec3(st.x,st.y,1.0);
  float d = distance(u_mouse,st);
  color*=1.-d;
  gl_FragColor= vec4(color,1.0);
}

扭曲效果：用 sin() 給 y 位置的資訊（但因為底圖沒有東西所以看不太出來效果）

// frag 標籤中的第 20 行開始
void main(){
  vec2 st = var_vertTexCoord.xy /u_resolution.xy;

  st.y += sin(st.x/10.)/10.; // 像這樣

  vec3 color = vec3(st.x,st.y,1.0);
  float d = distance(u_mouse,st);
  color*=1.-d;
  gl_FragColor= vec4(color,1.0);
}

範例 test bubble 根據左側的底圖，做完扭曲效果後就變成右側：

void main(){
  vec2 st = var_vertTexCoord.xy /u_resolution.x;

  st.x += rand(st)/5.; // 模糊效果
  st.y += sin(st.x * 50.) /10. ; // 扭曲效果

  vec3 color = vec3(0.);
  float ang = atan(st.y-0.55,st.x-0.5) ;
  float r = sin(ang*5.+u_time*2.+u_mouse.y*3. +u_mouse.x*3.);
  vec2 displacemenetMap = vec2(cos(ang),sin(ang))*r /150. ;
  vec3 spray = texture2D(tex0,st + displacemenetMap -vec2(0.,0.2) ).rgb;

  if (!u_mouse_pressed){
    color += spray;
  }else{
    color = vec3(displacemenetMap,0.5)*500.;
  }

  gl_FragColor= vec4(color,1.0);
}

也可以拿上一格留下的畫面做扭曲，看起來就會像液體效果。

結語

老闆覺得現在 3D 的趨勢應該會越來越往網頁發展，像 Autodesk 也出了 Fusion360 可以在網頁上製作 3D 物件，如果可以把這些效果應用在案子的網頁上，想必可以創作出更加吸睛的視覺。

五分鐘問答時間

Q. 會開 Shader 課程嗎？

感覺有點難募資達標，有點太小眾了😂

Q. 最近有看到什麼用 Shader 做的酷案例嗎？

可以在 awwwards 上找到很多厲害的範例！搭配 p5.js 或是 three.js 就可以用在像是 carousel （輪播）或是其他扭曲的效果。

Ｑ. Node Editor 怎麼做？

可以使用現成函式庫 Rete.js ，把自己的 function 做成可以給前端使用的介面。但技術尚未非常成熟，用在實務要自己注意一下囉。

小範例：胎死腹中的 文章產生器 原本想說可以做一份教材，用模組編輯的方式組裝成 A, B, C… 多種不同的教材，就可以因材施教。但發現沒有特別方便，而且概念其實也蠻類似現在的筆記工具 Notion 。

老闆貼心提示： CodePen 不是工程師實務上會使用的

使用 CodePen 或者 OpenProcessing 等平台，主要是為了讓學生快速上手，不需要自己架設開發環境，如果想實作到 production ，還需要再去更進階了解 JavaScript 的模組化概念，以及使用 Webpack 或者 Rollup 之類的打包工具。

工商時間

《互動藝術程式創作入門》課程學生作品分享

Hahow 課程作業成果

• Google Chrome 恐龍離線小遊戲（廖書賢）
• 夜空煙火（廖書賢）
• Colorful Rotate Rect（lai Ben）
• The Jungle（柯名陽）
• seawaves（Loxi）
• Instagram – ivavay.draw

課程加碼單元

• 文本分析 – 了解文字藝術：cloud and rain
• 物理模擬 – 讓物件自然的落下碰種：alphabet blocks
• 3D 世界與物件 – p5 的 WebGL 應用：3d camera texture 、 3d model sword 、 3d demo

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

這篇文章 外星圖像渲染語言？如何應用 Shader 跟 WebGL 達成絢麗視覺效果 最早出現於 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 - 互動程式創作台灣站。