Photo by Evie S.
Sprite Doodle Effect
上個週末，我和鄰居的小朋友一起玩，看到他的塗鴉展現出無限的精力。這讓我想起小時候上美術課的情景，我特別喜歡水彩畫課程，用斑駁的水袋和水彩盤將腦海中的畫面無拘無束地表現出來，沒有邊界和限制，甚至畫板還能延伸到同學的衣服上，大家都變成五顏色六的迷彩人！那是一段令人懷念的時光。大概是因為這種記憶的連結，覺得塗鴉那種充滿動感的視覺效果還蠻可愛的，於是決定自己動手嘗試實作。
設計簡述
在電腦裡，圖形就像是用一堆小三角形拼出來的積木。只要稍微挪動這些三角形的角，圖形就會變形。想像一下，我讓這些角每秒扭五次，每次隨機轉個位置，圖形就有了塗鴉那種隨意的動感！ 我用WGSL Shader Script實作，Alan Zucconi的文章有更多細節解釋。
第一步：讓圖形動起來 (Vertex Shader)
電腦先拿到圖片的「骨架」（就是那些三角形的角），我用程式要求：「Party Time，每秒扭五次吧！」這些角就開始隨機轉來轉去，讓圖形開始動起來。
技術筆記
Vertex Shader接收原始圖片的三角形頂點資料（Vertex Input），然後計算新的頂點位置。透過雜訊（noise）和隨機運算，頂點會隨時間改變，最後將新資料傳給下一步。第二步：塗上顏色 (Fragment Shader)
新位置算好後，我拿著「數位畫筆」（Fragment Shader）給這些地方刷上顏色。
技術筆記
Fragment Shader接收Vertex Shader傳來的頂點位置資料（Output），然後根據這些位置填充顏色，完成最終的視覺效果。結語
想讓塗鴉跳得更快? 試著調高「noise snap time」，每秒的畫面就會變多。 如果想要更誇張的效果，就把「noise scale」調大，圖形就會晃得更厲害 ~
我在Github上放了source code，有興趣的話可以玩玩看。