粒子系统(二):绘制精美几何图案
准备
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
上一篇:粒子系统(一):从零开始画一棵树
转载于:https://www.cnblogs.com/experdot/p/8764740.html
粒子系统(二):绘制精美几何图案相关推荐
- 如何用python画数学图案_使用Matplotlib 绘制精美的数学图形例子
一个最最简单的例子: 绘制一个从 0 到 360 度完整的 SIN 函数图形 import numpy as np import matplotlib.pyplot as pt x = np.aran ...
- 使用Java 2D绘制黑白太极图案
一:基本原理 利用Java 2D的Area对象对绘制形状几何操作的支持,完成太极图案的绘制,使用Paint来 完成对不同颜色的填充.Java 2D图形API Area对Shape支持四种几何操作: - ...
- 风机桨叶故障诊断(二) 获取图像几何主方向
风机桨叶故障诊断(二) 获取图像几何主方向 昨天,我将视频资源按帧抽取并筛选得到了可以用来提取样本的图像库.今天还是进行项目的准备工作.当我们拿到一张图片,我们的软件要做的大致可以分为三个步骤:从原图 ...
- python画有权重网络图_使用Python的networkx绘制精美网络图教程
最近因为数学建模3天速成Python,然后做了一道网络的题,要画网络图.在网上找了一些,发现都是一些很基础的丑陋红点图,并且关于网络的一些算法也没有讲,于是自己进http://networkx.git ...
- Python-Matplotlib可视化(3)——自定义样式绘制精美统计图
Python-Matplotlib可视化(3)--自定义样式绘制精美统计图 前言 控制线条样式和线宽 线条样式 线宽 控制填充样式 控制标记样式 控制标记大小 创建自定义标记 总结--对标记进行更精细 ...
- python绘制人际关系图_干货!利用Python绘制精美网络关系图
Python实战社群 Java实战社群 长按识别下方二维码,按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群▲ 作者丨tan45du 来源丨袁厨的算法小屋(ID:t ...
- 用Python的networkx绘制精美网络图
最近因为数学建模3天速成Python,然后做了一道网络的题,要画网络图.在网上找了一些,发现都是一些很基础的丑陋红点图,并且关于网络的一些算法也没有讲,于是自己进http://networkx.git ...
- 数据可视化——R语言ggplot2包绘制精美的小提琴图(并箱线图或误差条图组合)
数据可视化--R语言ggplot2包绘制精美的小提琴图(并箱线图或误差条图组合) 概述:R语言使用ggplot2工具包绘制小提琴图.为了使数据表达更加丰富,同时将小提琴图与箱线图和误差条图相结合.另外 ...
- 干货!利用Python绘制精美网络关系图
点击上方蓝字关注我们 最近发现一个特别好用的python库,能够绘制精美的关系图,俗话说有好东西要学会分享,所以袁厨就肝了这篇文章,大家可以参考一下. 一.概述 NetworkX是一个用python编 ...
最新文章
- [Asp.net 5] Options-配置文件(2)
- vue注册新节点_vue怎么重新组装slots节点
- XX must be built with ARC
- Python 技巧篇-官方网站打不开的情况下通过官方获取最新python安装包方法
- 摩根士丹利华鑫基金公司面试
- cmake (0)简介
- Vue+ElemtUI中对el-dialog弹出框宽度调整方法
- Got minus one from a read call异常
- webstorm激活+汉化教程
- java 中符号_谁能告诉我java中符号的用法,见代码
- ibatis返回数据集映射举例
- C++ ---------- map的使用
- gridview划线
- 创建font_年底干货来了!图案创建、字体、图库、UI套件常见工具大合集!
- 发现一本好书--《Windows用户态程序高效排错 》
- 360 php SQL注入,php中sql注入漏洞示例
- 浅析数据中心机房工程
- 使用函数求余弦函数的近似值
- linux环境sphinx搭建,Sphinx安装配置应用
- mysql sending data_MySQL:sending data状态包含了什么