20、《每周一点canvas动画》——桌球运动(2)

28人阅读 评论(0) 收藏 举报
分类:

每周一点canvas动画代码文件

在上一节,《每周一点canvas动画》——桌球运动(1)中我们介绍了如何运用动量守恒能量守恒的概念,最为真实的模拟了物体与物体之间发生碰撞后的情况。那么这一节,我们在上一节的基础上我们继续深入研究,非水平和垂直的情况下如何处理物体与物体之间碰撞后的情况,以及更为普适的多物体运动。本节主要内容:

  1. 二维碰撞解析

  2. 代码实现

  3. 粒子系统

  4. 总结

1.二维碰撞解析

深呼吸一下,接下来可能是本系列文章最为难理解的一部分(我是不是以前说过这话。。。),好吧!其实并不是多难,只要你看过前面的章节,你就会发现我们所有的东西都是循序渐进的,之所以说难,是因为复杂度的确有所提高。但是,所用到的知识绝对在前面做过铺垫。言归正传,接下来我们来分析这个从一维到二维的运动该如何处理。

我们上一节讲的一维碰撞运动如下图所示:

二维的概念很简单,即物体的运动方向并不是某个单一的方向。如下图中一图所示(左上第一幅),因为物体的速度方向并不是沿着某一个轴。所以,你不能直接把它带入动量守恒与能量守恒的公式中去计算碰撞后的速度,下面我们就来分析图中所示的解决方法。

首先,我们把物体的位置,速度全部都旋转到了水平位置。是不是有种似曾相识的感觉,没错,这与角度反弹那章其实是一个东西!下面我们继续分析,既然转到了水平面,一切就好说了。速度是矢量,我们把它沿着水平和竖直分解。

现在,我们将速度分解成了两部分,你可以直接忽视竖直方向的速度,而只考虑水平方向。为什么呢,你可以自己想想。然后,我们对物体做碰撞处理,因为只考虑改变水平方向,所以竖直方向不变,处理完水平的碰撞后,将竖直方向的速度与水平方向的合成。最后,你应该猜的到我们要做什么了,把所有的东西在旋转回去。

好了,这就是我们的整体思路,其实你应该发现,这与角度反弹那一章简直如出一辙。

2.代码优化

有了上面的解析,我们对上一节的代码做些优化。在桌球运动(1)中,我们这样计算碰撞后两个物体的速度vx0Final, vx1Final分别是多少。

...
var vx0Final = ((ball0.mass - ball1.mass)*ball0.vx + 2 * ball1.mass * ball1.vx)/(ball0.mass +ball1.mass);
var vx1Final = ((ball1.mass - ball0.mass)*ball1.vx + 2 * ball0.mass * ball0.vx)/(ball0.mass +ball1.mass);
...

但是,现在我们现在可以只考虑水平方向的速度。所以上述代码可以优化成如下形式:


var vxTotal = ball0.vx - ball1.vx;         //速度方向相反所以相减
var vx0Final = ((ball0.mass - ball1.mass) * ball0.vx + 2 * ball1.mass * ball1.vx)/(ball0.mass + ball1.mass);      //只计算其中的一个速度
var vx1Final = vxTotal + vx0Final;        //另一个速度

3.代码实现

还是老规矩,我们先上效果图:

下面我们来具体分析一下核心代码的实现,完整代码看源文件:

function ballCollsion(ball0, ball1){
第一部分         var dx = ball1.x - ball0.x,
                    dy = ball1.y - ball0.y,
                    dist = Math.sqrt(dx*dx + dy*dy); //用于距离的碰撞检测

                if(dist < ball0.radius + ball1.radius){ //如果发生碰撞
                      //计算物体间的夹角,并得出坐标旋转所需要的sin,cos值
                      var angle = Math.atan2(dy, dx),
                          sin = Math.sin(angle),
                          cos = Math.cos(angle),
                          //ball0旋转后的坐标
                          x0 = 0,
                          y0 = 0,
                          //ball1旋转后的坐标
                          x1 = dx * cos + dy * sin,
                          y1 = dy * cos - dx * sin,
                          //ball0 旋转后的速度
                          vx0 = ball0.vx * cos + ball0.vy * sin,
                          vy0 = ball0.vy * cos - ball0.vx * sin,
                          //ball1 旋转后的速度
                          vx1 = ball1.vx * cos + ball1.vy * sin,
                          vy1 = ball1.vy * cos - ball1.vx * sin,


第二部分               //不用考虑竖直方向的速度
                     vxTotal = vx0 - vx1;
                     //带入公式计算碰撞后的速度
                      vx0 = ((ball0.mass - ball1.mass) * vx0 + 2 * ball1.mass * vx1) /(ball0.mass + ball1.mass);
                      vx1 = vxTotal + vx0;
                      x0 += vx0;
                      x1 += vx1;

第三部分               //位置旋转回去
                      var x0Final = x0 * cos - y0 * sin,
                          y0Final = y0 * cos + x0 * sin,
                          x1Final = x1 * cos - y1 * sin,
                          y1Final = y1 * cos + x1 * sin;
                      //调整球体实际上位于屏幕的位置
                            ball1.x = ball0.x + x1Final;
                            ball1.y = ball0.y + y1Final;
                            ball0.x = ball0.x + x0Final;
                            ball0.y = ball0.y + y0Final;
                      //素的旋转回去
                            ball0.vx = vx0 * cos - vy0 * sin;
                            ball0.vy = vy0 * cos + vx0 * sin;
                            ball1.vx = vx1 * cos - vy1 * sin;
                            ball1.vy = vy1 * cos + vx1 * sin;
                }
            }

核心代码一共分为三个部分,在第一部分当中我们使用ball0作为整个系统旋转的中心点,所以它的位置为(0, 0),即使旋转后也不会发生变化。ball1的位置是相对于ball0,所以可以直接通过dx,dy获取ball1旋转后相对于ball0的坐标,最后是旋转ball0, ball1的速度。

第二部分,因为旋转到水平位置,所以不需要考虑竖直方向的速度。将水平速度带入公式,计算得到碰撞后的速度大小。同时我盟让x0,x1加上碰撞后的速度,让两物体分开。

第三部分,我们把球体的位置再旋转回去,由于ball0的坐标为(0,0),所以你可以注意到旋转后的坐标x0Final,y0Final仍旧为0。然后具体调整它们位于画布中的位置。这里你要稍微理解一下,在上面的坐标旋转,速度旋转中,我们都是以ball0为中心点做的。所以,最后的结果都是相对的,而我们需要的是他们位于画布中的实际位置。所以,需要加上ball0在画布中的坐标。最后,再把速度也旋转回去。ok,大功告成!

4.粒子系统

有了前面的具体分析我们很容易就可以实现多物体的应用。先上效果图:

是不是很炫啊!其实这个效果很早就能做出来了,只是当时并没有讲碰撞检测,所以你看到物体之间相遇后并没有发生相互作用。所以,一直到这我才放上这个效果。核心的代码,就是上面的部分,我们已经讲完了。这里我们就分析如何实现多物体处理。具体代码请看bolliard-multi.html

那么,我们是如何实现的呢?还是老东西,在动画循环中:

   for(var ballA, i=0, len = numBalls - 1; i<len; i++){

          ballA = balls[i];

          for(var ballB, j=i+1; j<numBalls; j++){
                       ballB = balls[j];
                       checkCollision(ballA, ballB); //物体间的碰撞处理
                       drawLine(ballA, ballB);  //物体间连线画线
                   }
   }

眼熟吧,其实它就是《每周一点canvas动画》——碰撞检测(2)中的多物体碰撞检测策略。那么物体之间的连线是怎么做的呢?

function drawLine(ball0, ball1){
               var dx = ball1.x - ball0.x,
                   dy = ball1.y - ball0.y,
                   dist = Math.sqrt(dx*dx + dy*dy); //计算物体间的距离

               if(dist < long){ //小于long画线
                   context.save();
                   context.strokeStyle = "rgba(255,255,255,0.3)";
                   context.beginPath();
                   context.moveTo(ball0.x, ball0.y);
                   context.lineTo(ball1.x, ball1.y);
                   context.closePath()
                   context.stroke()
                   context.restore();
               }
           }

最后在动画循环中调用,一个粒子系统就这样完成了,你甚至可以控制粒子的运动速度,大小,颜色,距离多远连线等等,拿去放心使用吧。这里还是要声明一点,在源码中的checkCollision函数中,为了便于使用做了些简单的封装,比如这样的:

function rotate(x, y, sin, cos, reverse){
               return {
                   x: (reverse)?(x*cos + y*sin):(x*cos - y*sin),
                   y: (reverse)?(y*cos - x*sin):(y*cos + x*sin)
               }
 }

应该不会影响你的理解。

5.总结

这一章到这就结束了,整个简单的碰撞体系到这基本就结束了。回望一下,其实我们的内容覆盖了,如何判断两个物体发生碰撞?如何处理碰撞后的情况?如何将其运用于多物体系统?这里面有简单和复杂之分。如果,你追寻的是简单效果,那么你只需要简单的做速度的反向处理等即可。如果,你想要更精确,更自然的效果。那你就需要使用本章所介绍的动量守恒和能量守恒等概念,来做精确的处理,所有的一切都取决于你的具体需求。

本章重要公式如下:

//遵循动量守恒和能量守恒的碰撞后的速度大小
v0Final = ((m0 - m1)*v0 + 2*m1*v1) / (m0 + m1);
v1Final = ((m1 - m0)*v1 + 2*m0*v0) / (m0 + m1);

//精简版
var vxTotal = vx0 - vx1;
vx0 = ((ball0.mass - ball1.mass)*vx0 + 2*ball1.mass*vx1)/(ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;

下一章,我们讲万有引力的应用。敬请期待!!!

查看评论

8、《每周一点canvas动画》——边界检测与摩擦力(2)

到目前为止,我们最常见的两种情形: 物体按照一定的速度做任意运动直到碰上边界 物体自身,或者通过外部的作用力,运用加速度来改变物体的速度 不管怎样,除非我们...
  • qq_39759115
  • qq_39759115
  • 2018-01-03 09:56:51
  • 91

11、《每周一点canvas动画》 —— 弹性动画

本系列文章代码文件 在上一章我们介绍了缓动动画,并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与缓动动画都是基于距离的百分比动画,两者的不同之处在于,一个作用于速度(ease), ...
  • qq_39759115
  • qq_39759115
  • 2018-01-15 17:20:02
  • 100

7、《每周一点canvas动画》——边界检测与摩擦力(1)

本章已经是《Canvas 动画系列》动画的第七篇了,我保证这一章不会再有难的数学公式和物理概念。鉴于有的同学并不是从第一章开始看这个系列,我将会把本文所用到的一些 类...
  • qq_39759115
  • qq_39759115
  • 2018-01-02 11:49:18
  • 119

19、《每周一点canvas动画》——桌球运动(1)

每周一点canvas动画代码文件 一本好的技术书籍往往都是由浅入深,本系列文章基本上也遵循这个原理。在上一章中我们介绍了高级的坐标旋转,并且通过它,我们实现了任意角度的碰撞反弹效果,它让物体与非...
  • qq_39759115
  • qq_39759115
  • 2018-04-17 11:09:02
  • 33

Canvas5——路劲应用绘制动画效果初级

Information 利用Canvas路径api绘制线与圆,让圆沿着线的方向运动。实现原理很简单,就是不断的清楚画布,然后再重新绘制各个组件。当然,这个逻辑也是制作大部分动画的根本逻辑。 有...
  • tangxiaolang101
  • tangxiaolang101
  • 2016-05-18 17:15:01
  • 601

Html5系列(二十三) canvas高级贝塞尔曲线运动动画

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
  • dhdhxgx
  • dhdhxgx
  • 2015-04-16 23:05:31
  • 5740

4.每周一点canvas动画--波形运动

在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括: 平滑运动 线性运动 脉冲运动 1.Sin函数的波形sin函数的波形想必...
  • qq_39759115
  • qq_39759115
  • 2018-01-02 11:40:30
  • 71

14、《每周一点canvas动画》——碰撞检测(1)

每周一点canvas动画代码文件 在前面的几章中我介绍了一些动画效果,这些动画效果都相对基础。但是通过这些基础的动画形式和概念,你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概...
  • qq_39759115
  • qq_39759115
  • 2018-01-15 17:22:53
  • 114

用canvas绘制一个圆形,实现绕着一个中心运动

实现效果 使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果。这里只是一个实例Demo,直接运行就可以,下面附上代码: ...
  • qq_24147051
  • qq_24147051
  • 2016-11-02 21:37:11
  • 1337
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 787
    排名: 6万+
    最新评论