內容及實作來自吳哲宇《動畫互動網頁特效入門（JS/CANVAS）》

ES6 模板

透過 ES6 重新製作向量物件、並將常用的圓形、畫線、滑鼠控制和 dat.GUI 都放入，之後透過 fork 來使用可以快速開發。

See the Pen 動畫互動網頁特效 ch50. Canvas與特效動畫- 繪圖模板 by Winter (@yichinweng) on CodePen.

粒子系統

粒子系統看起來真的很炫又很複雜，但實際上並不是這麼困難。透過不斷繪製圖型，針對圖型設置隨機的變化，例如隨機產生顏色、位置的偏移，就可以達成基本的效果。

對我來說困難之處是在於想到作法 (像是力場解構後就是透過距離差來移動粒子，看起來像是越來越遠而有斥力)，還有一些數學上的問題，腦袋不太好 XD，需要多加練習解構和計算。

See the Pen 動畫互動網頁特效 ch51. Canvas與特效動畫- 物件導向結構 粒子篇 by Winter (@yichinweng) on CodePen.