粒子系统（二）：Canvas绘制精美图案

准备

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

上一篇：粒子系统（一）：从零开始画一棵树