準備 IDE：Visual Studio Code Language：JavaScript / ECMAScript 6+ GitHub：Natural2D.JS 本文主要講述 Particles - Walker 示例的實現步驟，不涉及具體的代碼細節。 第一節 粒子概述 粒子是粒子系統最基本的組成 ...
準備
IDE：Visual Studio Code
Language：JavaScript / ECMAScript 6+
GitHub：Natural2D.JS
本文主要講述 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：Natural2D.JS
上一篇：粒子系統（一）：從零開始畫一棵樹
