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