學(xué) p5.js 以後一直想做做看這種風(fēng)格的圖形動畫
我覺得 p5.js 很適合用來繪製這些幾何圖形 也可以配合 WebGL 打造立體的空間
這個動畫的組成可以分成兩個部分
一個是鏡頭的移動
一個是在鏡頭周圍產(chǎn)生各種圖形動畫
鏡頭的部分有 X、Y、Z 軸的移動，還有 Z 軸的旋轉(zhuǎn)
這些數(shù)值每隔一段隨機(jī)的冷卻時間就會隨機(jī)改變
然後用由快至慢的曲線速度去移動畫面製造運(yùn)鏡的動畫
另外也在鏡頭的位置加了 noise 製造一些晃動
圖形的話有大塊的方形、小顆的粒子、會擴(kuò)散的波紋、直線和虛線圓形
大塊的方形可以讓畫面不要太碎
粒子和線條則是豐富畫面的細(xì)節(jié)
色票是一開始就做好的 然後再隨機(jī)分配給畫面裡的圖形
成品如下
達(dá)人
