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

準備

　　IDE：Visual Studio Code

　　Language：TypeScript

　　GitHub：general-engine

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

第一節(jié) 粒子概述

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

　　粒子有哪些屬性

　　顏色（Color）：渲染顏色

　　位置（Location）：渲染位置

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

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

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

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

　　屬性如何變化？它們之間有什么關系

　　年齡逐幀增大

　　位置定向移動

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

　　粒子什么時候死亡？死亡后如何處理

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

　　死亡后的一種處理方法是立即回收占用的資源

　　另一種是重置粒子的狀態(tài)，即當作一個新的粒子

　　如何保留歷史移動軌跡

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

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

圖1-1 定向移動

第二節(jié) 力學運動

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

　　需要擴展哪些屬性

　　密度（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 引力運動

第三節(jié) 直線連線

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

　　有哪些簡單的渲染方式？

　　繪制空心、實體圓形

　　繪制空心、實體矩形

　　繪制貼圖

　　繪制連線 （下圖的方式）

圖3-1 粒子連線

第四節(jié) 樹形拓撲

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

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

　　子節(jié)點繼承父節(jié)點的顏色

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

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

圖4-1 樹形拓撲

第五節(jié) 中心旋轉

 　　一個圖形繞著一個定點旋轉一定的角度得到另一個圖形的變化叫做旋轉。

　　如何實現好看的旋轉效果

　　設置畫布中心點為旋轉中心，然后旋轉畫布

　　若每幀的旋轉角度隨機漸變，可產生不同的動態(tài)效果

　　下方示例圖片的隨機效果

　　畫布背景顏色隨機漸變

　　畫布旋轉角度隨機漸變

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

　　粒子父子節(jié)點相對位置的距離系數漸變

圖5-1 效果圖一

圖5-2 效果圖二

圖5-3 效果圖三

附錄

　　Demo：Particles - Walker

　　GitHub：general-engine

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