数值积分I

Posted 2020-07-27 web前端皇家魔法学院

这篇是来讲那些酷炫掉渣天粒子特效的

粒子系统可以模拟很多视觉 比如模拟大自然中的 雾气  火  雨 雪  还有些游戏中酷炫的激光 喷火等。。

一个粒子通常就需要一张纹理  对于那些火焰 激光的粒子系统 要配上globalCompositeOperation lighter属性 其作用就是叠加像素值

粒子的运动只需考虑线速度即可 也不用考虑粒子间的碰撞问题了 粒子是有生命期的 生命过后可以移除它 或者直接给它重置属性

不同的粒子系统 它们的发射点 纹理 生命期  受到的各种合力 都需要给出不同的参数

 

让我来唤起你の物理之魂（你要相信我！ 我是经过数学の女神传授过的！ 女神是不会错的！）

用你仅有的物理知识 你一定看得懂下面的式子

s=s0+v*t 

对一小段时间进行微分 得

dx=v*dt

位置变化就是某个时刻的瞬时速度乘很小的一段时间 我们可以将其推广到整个小段时间。

怎么把他用到具体代码中呢？dt就是连续的模拟时刻时间 用牛顿定律

有 F=m*a 

a=d2x/d2t

v=dx/dt

a=dv/dt

这样只需要力和根据力计算出加速度即可

必如存在重力的力 F=m*g  g也可以表示其他的力

粒子系统算法过程

1 计算某个时刻一个粒子上的合力

2 求出一个粒子上的加速度

3 利用数值积分求出速度改变位置

 

关键代码 

render(est){

    this.alp = sin(PI*(--this.ag/this.ag2));
    const finv = this.finv.scale(this.fss).rotate(this.frd);
    const [nn1,nn2] =[finv.x,finv.y];
    this.y += est*(this.n2+=est*nn2);
    this.x += est*(this.n1+=est*nn1);

    with(Stg.ctx){
        save();
        fillStyle = \'pink\';
        translate(this.x,this.y);
        globalAlpha = this.alp;
        drawImage(map,0,0);
        restore();
    }    

如下模拟了一个烟 有点像汽车的尾气吧。。

再来

总之 不同的参数都会呈现不同的效果

给出另外一种火球的效果  demo戳我~ 

在下一篇中 我将使用另外一种积分法 模拟出刚体 请期待~