主題

JavaScript 動態圖形

木白 | 2022-05-20 12:17:03 | 巴幣 530 | 人氣 125



學 p5.js 以後一直想做做看這種風格的圖形動畫
我覺得 p5.js 很適合用來繪製這些幾何圖形 也可以配合 WebGL 打造立體的空間

這個動畫的組成可以分成兩個部分
一個是鏡頭的移動
一個是在鏡頭周圍產生各種圖形動畫

鏡頭的部分有 X、Y、Z 軸的移動,還有 Z 軸的旋轉
這些數值每隔一段隨機的冷卻時間就會隨機改變
然後用由快至慢的曲線速度去移動畫面製造運鏡的動畫
另外也在鏡頭的位置加了 noise 製造一些晃動

圖形的話有大塊的方形、小顆的粒子、會擴散的波紋、直線和虛線圓形
大塊的方形可以讓畫面不要太碎
粒子和線條則是豐富畫面的細節
色票是一開始就做好的 然後再隨機分配給畫面裡的圖形

成品如下



創作回應

粉君
感覺很適合用來做V家PV,佬爆
2022-05-20 14:39:37
木白
有機會的話很像做做看 PV
2022-05-20 21:54:05

相關創作

更多創作