粒子系統（二）：繪製精美幾何圖案

準備

　　IDE：Visual Studio Code

　　Language：TypeScript

　　GitHub：general-engine

　　本文主要講述 Particles - Walker 示例的實現步驟，不涉及具體的代碼細節。

第一節 粒子概述

　　粒子是粒子系統最基本的組成元素。

　　粒子有哪些屬性

　　顏色（Color）：渲染顏色

　　位置（Location）：渲染位置

　　年齡（Age）：當前存活幀數

　　大小（Size）：當前渲染直徑

　　最大年齡（MaxAge）：粒子的最大存活幀數

　　最大大小（MaxSize）：粒子的最大渲染直徑

　　屬性如何變化？它們之間有什麼關係

　　年齡逐幀增大

　　位置定向移動

　　大小與年齡成正比關係：Size = MaxSize * (Age / MaxAge)

　　粒子何時死亡？死亡後如何處理

　　當年齡超過最大年齡時認爲它已經死亡

　　死亡後的一種處理方法是當即回收佔用的資源

　　另外一種是重置粒子的狀態，即看成一個新的粒子

　　如何保留歷史移動軌跡

　　在每幀繪製前蒙一層顏色不透明的矩形

　　若矩形的顏色隨機漸變，會產生更好看的動態變化效果

圖1-1 定向移動

第二節 力學運動

 　　經典力學描述了物體的宏觀運動形式。

　　須要擴展哪些屬性

　　密度（Density）：粒子的密度（可選的）

　　質量（Mass）：粒子的質量

　　速度（Velocity）：當前速度

　　加速度（Acceleration）：當前加速度

　　速度上限（VelocityUpon）：最大運動速度

　　屬性之間的關係

　　2D物體質量與面積成正比，即 Mass = Density * (Size / 2) * (Size / 2) * PI

　　3D物體質量與體積成正比，即 Mass = Density * (Size / 2) * (Size / 2) * (Size / 2) *(4 / 3) * PI

　　若要簡化計算，能夠不考慮常量值，有時候咱們無需和現實世界保持一致

　　粒子的牛頓萬有引力運動

　　物體加速度的大小跟做用力成正比，跟物體的質量成反比，即 Acceleration = Force / Mass

　　引力大小與它們質量的乘積成正比與它們距離的平方成反比，即 Force = G * Mass1 * Mass2 / (Distance * Distance)

圖2-1 引力運動

第三節 直線連線

　　粒子的渲染方式不是一成不變的。

　　有哪些簡單的渲染方式？

　　繪製空心、實體圓形

　　繪製空心、實體矩形

　　繪製貼圖

　　繪製連線 （下圖的方式）

圖3-1 粒子連線

第四節 樹形拓撲

　　樹形是天然界中常見的一種拓撲結構。

　　如何以父子層次結構組織粒子

　　子節點繼承父節點的顏色

　　子節點初始位置相對父節點偏移適當距離

　　子節點只承受與父節點之間的牛頓萬有引力

圖4-1 樹形拓撲

第五節 中心旋轉

 　　一個圖形繞着一個定點旋轉必定的角度獲得另外一個圖形的變化叫作旋轉。

　　如何實現好看的旋轉效果

　　設置畫布中心點爲旋轉中心，而後旋轉畫布

　　若每幀的旋轉角度隨機漸變，可產生不一樣的動態效果

　　下方示例圖片的隨機效果

　　畫布背景顏色隨機漸變

　　畫布旋轉角度隨機漸變

　　粒子父子節點相對位置的旋轉角度漸變

　　粒子父子節點相對位置的距離係數漸變

圖5-1 效果圖一

圖5-2 效果圖二

圖5-3 效果圖三

附錄

　　Demo：Particles - Walker

　　GitHub：general-engine

　　上一篇：粒子系統（一）：從零開始畫一棵樹