第二次的 Creative Coding 社群聚，上集由聲音藝術家、同時也是噪咖藝術的音樂統籌吳秉聖帶來聲音、光、裝置與創意程式的互動關係，本篇下集則是由張文瀚分享 fragment shader 的有趣創作思維。
張文瀚曾是清大藝術學院的兼任教師，教虛擬實境藝術，也是黑洞創造的前端工程師，自己開了一間 Team9 工作室擔任技術長，主要是在做遊戲，像是「文字遊戲」是只用文字做出來的一個解謎遊戲。
上一位講者吳秉聖分享的是如何用視覺化程式語言、軟體結合實體裝置，製作出互動的裝置作品（想閱讀上集的這邊請）。當大家談到 Creative Coding 通常都會直覺想到 p5.js 等等，叫電腦幫你畫出東西，慢慢組成漂亮的畫面，張文瀚介紹的則是 Creative Coding 的另一個面向、另一種 Creative Coding 的工具： GLSL 的 fragment shader，以及他跟 p5.js 相較之下的優劣勢。
如何叫電腦畫出一個圓？
先從圓的定義開始：「由距離特定座標 500px 以內的所有點集合而成的圖形」在這個畫面中的所有像素，若是離圓心 500px 以內的為黑色，不是的則維持白色。 在 p5.js 內甚至不用懂這個，只要跟 p5.js 說：「在畫布中央用黑色畫一個半徑為500的圓！」他就會幫你畫好了。
下一個問題，如何畫出一個圓，而圓內每個像素都是從黑到白的隨機顏色？
p5.js 畫不出來。
這就是 shader 派上用場的時候了！
像素等級的上色就交給 fragment shader （片段著色器），前提是要親自處理這些運算，了解數學、座標及空間的關係。 需要一些陣痛期才能轉換成 shader 的邏輯和思路，一旦上手之後就可以很順地做出細緻的作品。
為什麼會需要用到片段著色器？
想像要做出如左圖這般混合漸層的效果，他的上色規則是甚麼？
對每個像素說，「你在越上面，就越綠；你在越右邊，就越紅。」 用程式替像素上色則變成：
for (var y=0; y < height; y++){
for (var x=0; x < width; x++){
var r = (x / width)*255;
var g = (y / height)*255;
var b = 0;
pixels[y][x] = [r,g,b];
}
}
如果一個畫布的長寬為 1920×1080，總共就有 2,073,600 個像素要著色，也就是為了要完成這一個漸層，這個迴圈程式碼總共要跑兩百萬次！如果只是畫一次，就算多花一點時間也沒關係，何況現在的硬體越來越強大，說久也其實不需要多久。
如果現在規則再加上一條「時間越推移，你就越藍」，而且要及時處理還能跑 60fps，1920 寬 x 1080 高 x 60 fps，每秒鐘得做1.2億次的著色指令！
像這樣的迴圈程式指令就像一個個的生產線，CPU的單執行緒邏輯，一次只能處理一件事情，東西一多，就會向右邊的圖一樣塞車。我們需要GPU圖形處理器的多執行緒邏輯，同時有無數跟管子並行處理。
Fragment Shader 片段著色器
片段著色器就像是一個著色工廠，用你制定好的統一規則，決定畫布裡每個像素的顏色，工廠裡的幾百萬個工人，每一個工人負責一個像素，只要工人依據規則（各種參數）對各自負責的像素著色，每人只要畫一筆，一幅畫就瞬間完成了。
優點：由於利用 GPU 並行處理，可以快速做出複雜的像素操作，某些複雜的數學運算可以直接使用硬體運算，跟電流一樣快速。
兩個最大的限制，第一個是盲視，每一個線程（工人）都是完全獨立的，無從得知其他線程的運算結果，更無法干預；第二個是無記憶，每一個線程只會知道此刻的狀況，不會記得上一刻的自己在做甚麼，每一幀都是完全獨立的。
回到原本的畫布問題，我們需要用 fragment shader ，對每個像素說：「你的紅與綠的程度是由你的 uv 所決定，而藍的程度則由時間推移所決定。」
uniform vec2 u_resolution;
uniform float u_time;
void main(){
vec2 uv = gl_FragCoord.xy/u_resolution.xy;
gl_FragColor = vec4(uv.x, uv.y, sin(u_time)*0.5*0.5, 1.);
}
你的每一個上色程度都是用 uv 決定，就像是每個像素的座標或是工人的名牌一樣，每個像素都有一個自己的 uv ，就可以指定它改變顏色。
Fragment shader 可以算是比較類似Ｃ語言的程式語言，撰寫著色器程式的思考模式要從單個像素的角度出發，而非畫布的整體。
以右邊的例子來說，就是對著每個像素說：
「你在畫布左半邊就是白色，右半邊就是黑色；但你跟滑鼠的距離若是在畫布大小 5% 內就是紅色。」
uniform vec2 u_resolution;
uniform vec2 u_mouse;
void main(){
vec2 uv = gl_FragCoord.xy/u_resolution.xy;
vec2 dist = uv - u_mouse.xy/u_resolution.xy;
vec3 color = mix(
vec3(step(uv.x, 0.5)),
vec3(1,0,0),
step(length(dist), 0.05)
);
gl_FragColor = vec4(color, 1.);
}
Shader 不可思議之最：空間折疊
若要在畫布上畫出一百個圓，最直覺的想法是用迴圈，但要畫的圓越多，指令要執行的次數越多，有沒有其他不用迴圈卻能達成同樣效果的方法？
在畫布中心畫一個圓形（上方左圖），並將水平與垂直線分別均分十等份，做 0.0 到 1.0 標號，接下來只需要一個數學運算 uv = fract(uv * 2.0 ); 取餘數的小數點（捨去整是數1），瞬間就能變成四個圓形（上方右圖），每一個方塊其實都是原本完整的 0.0 到 1.0 ， 1.0 改成 0.0、1.2 變成 0.2，以此類推，x 和 y 都是相同邏輯。
我們只用了一個數學運算式便把一個圓形變成 2×2 四個，舉一反三，不費吹灰之力就可以變成 5×5、10×10、100×100 的畫面，無論在這個圖上渲染多少個圓，都不會消耗額外資源，僅僅改變數學運算裡的一個參數！效能的高低只要是看指令執行的多寡，像這個例子只有一行運算，完全不會有效能上的差異，連在手機上也可以跑，很多 shader 吃效能是因為畫面的細緻要求和大量的運算。
理論上，你可以擁有無線長寬、無限縮放的畫布，極限僅在於你的像素多寡而已。這個感覺像是你先看一個圓， zoom out 將攝影機往外拉，看到一百個，再往外拉，看到上萬個，用極少量的運算做到複雜的視覺效果。
但，如果只能在每個空間複製一模一樣的圖案，那就太單調了。讓每個小空間內都出現不同的變化需要另一個數學的運算：取 floor 把小數點去掉，進而得到他的 ID 身分證明，再依據該圓圈 ID 的 x 值做出圓形半徑改變。
live coding 一下：
首先在畫布中寫出一個圓，並製作出方才提到的空間折疊效果，然後再把圓的半徑拉出來指定，這個半徑會隨著 ID 的 x 值的不同而改變。如果把 uv 縮放得更誇張就可以看出差異，縮放 30 倍（下圖左）和 100 倍（下圖中）的效果已經明顯不同，可以利用這個方式製作許多不同的效果。若圓圈的大小還受 y 軸的影響，相乘會出現更不一樣的 pattern ；加上時間的參數，就變成了動態。
Shader 除了從全白的畫布開始畫之外，也可以當作濾鏡使用，一個範例是這個網站http://filters.pixijs.download/dev/demo/index.html，可以靠右側的控制器改變顏色、曝光、模糊、風格化等，這是 shader 實務上最常用到的應用方式。
如果想用 shader 創作，可以從哪個裡找到學習資源呢？
第一個是 Shadertoy 老牌的創作平台，使用純粹的 fragment shader 而無法結合其他語法，所有神人都在這裡，你在這裡會看到很多匪夷所思到無法想像是怎麼做出來的作品，尤其又以 3D 為大宗，主要也可能是因為 Ray Marching 這個技術特別流行，大家嘗試了很多在 2D 畫布中渲染 3D 物體。
另一個創作平台是大家更熟悉的 OpenProcessing，可以用 p5.js 結合 shader 作創作，也可以使用 vertex shader + fragment shader，可以自由上傳或讀取自己的素材，達到更多不同的效果，但要小心沒有 GLSL 的語法上色，因 WebGL 版本較舊，不支援部分語法，手機支援度也較差，有視覺顯示或是無法運算等問題。 因為可以結合 p5.js ，張文瀚近期也開始改在這個平台上創作和發表作品，也做了他的 shader template 可以直接 fork 一版來做你的創作。
有參加第一次社群聚的人看到這件作品應該不陌生，這件是張文瀚上次的共創主題「宇宙」的作品。後來張文瀚也製作了一篇如何從零開始做出這件作品的教學，歡迎大家參考！ 看似複雜但程式碼其實很少，只有 37 行，即使是初學者也可以透過教學文章慢慢踏入 shader 領域。對張文瀚來說，撰寫 shader 的成就感最主要來自於「僅用少少的 code 跟簡單的數學運算就可以達到絢麗的視覺效果」。
Shader 學習資源
台灣目前沒有太多中文的 shader 學習資源，不過 The Book of Shaders 即是針對入門者打造的教學網站，有翻譯成簡體中文的版本，且可以即時做範例，是最推薦的學習管道。
The Art of Code：從初學實作到進階理論都有的 Youtube 頻道，也主要針對 shadertoy 上作品的實作，全英文
Inigo Quilez 頻道：Shader 界宗師，以前貌似在皮克斯工作，動畫裡用到大量的 shader， Youtube 頻道裡多數為進階理論和 live coding，全英文
Inigo Quilez 網站：更深奧的理論與實作文章，全英文
讓大家看一下 Inigo Quilez 在 Shadertoy 上的頻道，乍看真的無法相信這些細緻五官的人、風景、蝸牛等等都是用一行行的程式碼製作而成的，對於也還算初學的張文瀚在研究程式碼的時候，真的看不懂任何一行 code ，但這些作品真真確確是透過這些加減和數學運算組合而成的。
張文瀚個人作品分享
第一件是替藝術家展覽製作的互動動態網站＜體感溫差＞，核心概念是使用 shader 當作濾鏡製作出熱像儀的效果以及熱像軌跡，左上角顯示滑過軌跡上的顏色所對應的溫度。
第二件則是文字遊戲延伸出來的字畫產生器，用純文字組成畫面，也另外開發一個小工具，方便大家做宣傳圖和素材。這個網站可以非常即時地將影片、影像轉換成文字，顯示的內文、字型、模式等都可以自由調整。
其他的作品歡迎來張文瀚的 Shadertoy 頁面 以及 Open Processing 頁面 觀看玩耍。
張文瀚的個人網頁>>https://changwenhan.com/
五月社群聚共創主題：＜山＞
張文瀚<And As The Sun Goes Down>
是一個靜態 shader 作品，使用到先前提到的 Ray Marching 的技術，這個山坡是用數學式所描述出來的 3D 物體，讀一張影像素材，用素材上的像素決定他的突起程度，去掉這一個步驟的話就是很一般、很光滑的 mapping，由素材本身的複雜度去決定成品最終的樣貌。 因為本身並不擅長顏色搭配，通常一件作品就保守用兩到三個顏色決定色調。
Jennifer
自由接案 js 工程師，「山」這個主題想到Open Processing上水墨畫的山，齊柏林在淡水的看見台灣展覽，有很多台灣的照片，所以決定做台灣的地形，月世界。
從沒有真正創作過，一開始想到是用遞迴樹（recursive tree）的方法，從稜線開始畫，但線條會相互重疊，變得很不自然，不是山稜線該有的樣子，所以認為需要改用面而非線去畫；接著在搜尋其他更好的製作方法時，找到主打資料處理、數據視覺化的 Observable 平台，參考了其中網友發表模擬珊瑚碎形的作法（網頁連結），回頭調整作品。
哲宇<Mountain & water>
使用 noise 做不同層次的疊加，有一個 x 從左到右，在 y 上疊很多不同的sin 及 cos；一個大的perlin noise再乘上一個波，增加疏密的變化；另外一個比較有趣的手法，山脈往下長的這個效果是使用 mainGraphics.image(mainGraphics,0,2) 把祝張圖往下畫，上面再多疊一條又一條的線，整體畫面就呈現一直往下長的動態效果。
2022年5月也是第二次的 Creative Coding 社群聚就在這邊到一個段落了，如果還沒有看過上集由聲音藝術家吳秉聖帶來聲音、光、裝置與創意程式的人趕快點擊閱讀，這次因為疫情飆升、台北又下大雨而沒有太多的人來現場交流實在可惜，希望下一次有機會能夠在現場見到喜愛用 Creative Coding 創作的你們！
還不知道如何開始踏入 Creative Coding 嗎？那 Hahow 課程 ＜互動藝術創作程式入門＞再適合你不過了，快加入2000位同學的行列，一起學習互動藝術創作吧！
整理編輯：Chia 編
