Javascript:简单的粒子运动,粒子弹性反弹其他粒子

时间:2013-08-06 21:27:50

标签: javascript particle-system

我创建了这个相当简单的JavaScript;球或“分子”在屏幕上移动。我希望增加功能,当一个球与另一个球接触时,它们会交换速度。我们不需要担心任何角度,只要它们彼此接触,速度交换。 (而不是改变速度,但在链接的代码中,我只是编码了颜色变化)

我一直试图将这个功能称为“某个地方”以识别分子何时接触,但我没有运气。我真的不明白为什么。

链接到代码:

http://jsbin.com/arokuz/5/

似乎有三个主要问题:

  • 分子似乎在随机变化,而不是两个分子接触时。

  • 当一个人设置数组时,3个分子,只有两个出现,第一个实际存在,但对.fillstyle变化没有反应,因此对画布不可见

  • 使用功能方法,我只能识别阵列中串联(1和2或4和5)的分子何时触摸...我怎样才能检查所有分子?

2 个答案:

答案 0 :(得分:1)

您只是将一个分子与另外两个分子进行比较,实际上可能在任何地方 碰撞检测是一个很难解决的话题,但如果你想拥有自己的想法 你可以快速地使用2个嵌套for循环的n ^ 2算法。

代码非常期待:

  // collision
  for(var t = 0; t < molecules.length-1; t++)
     for(var tt = t+1; tt < molecules.length; tt++) {
         var p1 = molecules[t];
         var p2 = molecules[tt];
         if (sq(p1.x-p2.x) +sq(p1.y-p2.y) < sq(p1.radius+p2.radius) ) 
          {
            p1.collided = 8;  // will diplay for next 8 frames
            p2.collided = 8;  // .
         }
  }
小提琴在这里: http://jsbin.com/arokuz/10

答案 1 :(得分:0)

只有两个出现的原因不是因为第一个没有渲染而是最后一个没有渲染它,这是因为你通过比较它与下一个的距离来绘制它们的方式列表 - 因为它是最后一个没有下一个,因此抛出一个空错误并继续(检查控制台)。

他们似乎“随机”检测到碰撞的原因是因为他们没有检查所有其他分子 - 只有列表中的下一个,不幸的是,唯一的方法就是通过所有其他球每一个球和检查。

为了让分子检测距离你可以使用毕达哥拉斯定理,我通常使用它如下:

var distx = Math.abs(molecule1.x - molecule2.x);
var disty = Math.abs(molecule1.x - molecule2.y);
var mindist = molecule1.radius + molecule2.radius;
return Math.sqrt(distx*distx+disty*disty) < mindist;