重力和影响bug

时间:2012-07-01 17:03:20

标签: javascript jquery html5 canvas

我开始使用物理/粒子模拟器,我在碰撞检测方面遇到了一些问题:

http://mmhudson.com/physics.html

我不是在寻找代码解决方案,而是有人在概念上向我解释这个问题。

它的工作方式是我检查粒子是否会在下次移动时与对象内部/相交。如果是,则重力倍增器反转,使其方向反转。

我使用的运动方程是:

下一个位置=当前速度+重力率+当前位置

速度是重力倍增器

希望有人之前看到过这样的问题,或者愿意查看我的网页来源。

非常感谢任何帮助

2 个答案:

答案 0 :(得分:2)

没有概念性的解释,而是一堆随机的观察:

我建议添加画布宽度/高度变量,并将它们与粒子位置进行比较。现在,即使它们从画布上掉下来,你的颗粒也会不断下降。类似的东西:

if( particles[i][1] > height )
    particles.splice(i,1);

newPY < objects[k][2] + objects[k][3] + radius

真的很奇怪。你从这里得到了什么?添加对象的宽度和高度以及粒子半径?如果移除此部分,只要粒子具有“动量”,粒子就会从物体上反弹。


至于动量,我假设您想弄清楚如何阻止粒子穿过物体。给定当前代码,我会这样做:向粒子添加第五个变量,默认为画布的高度。然后,一旦发现有撞击,将撞击位置保存到粒子,然后在循环后检查粒子是否低于该点。如果是这样,请将其重置为该点。肮脏的修复,但嘿,它的工作原理。我添加了下面的完整循环,对我有用。要阻止clearRect方法清除对象,可以考虑重新绘制它们。


您正在检查对象顶部的粒子,但我认为“掉落”方面是您询问的错误的一部分,因此目前不太重要:

particles[i][1] < objects[k][1] + objects[k][3] + radius 

但是,如果你决定玩耍并减少重力,那么粒子就会获得动力并反弹到上面的物体上。


至于你的objCheck变量,你在最后一个&amp;&amp;中混淆了y的宽度。部分。它应该是:

mY < objects[i][1] + objects[i][3] + radius 

而不是

mY < objects[i][2] + objects[i][3] + radius

现在,你的objCheck无效。


另外

for(var i=0; i < particles.length; i++) {
    var clrRadius = 2*radius;
    canvas.clearRect(particles[i][0]-radius, particles[i][1]-radius, clrRadius, clrRadius);
}

优于

for(var i=0; i < particles.length; i++){
    var clrRadius = radius + 4;
    canvas.clearRect(particles[i][0]-(clrRadius/2), particles[i][1]-(clrRadius/2), clrRadius, clrRadius);
}

编辑:似乎你更改了代码,因为我上次检查过,所以上面可能不再相关了!

edit2:添加粒子停止修复。这是完整的重力循环:

for(var i=0; i<particles.length; i++){
var clrRadius = 2*radius;
canvas.clearRect(particles[i][0]-radius, particles[i][1]-radius, clrRadius, clrRadius);
}

for(var i=0; i < particles.length; i++){
var newPY = particles[i][1] += particles[i][2] + particles[i][3];

for(var k=0; k<objects.length; k++){
    if(
        //particle
        particles[i][0] > objects[k][0] - radius && 
        particles[i][0] < objects[k][0] + objects[k][2] + radius && 
        particles[i][1] > objects[k][1] - radius &&
        particles[i][1] < objects[k][1] + objects[k][3] + radius //&& 
    ){
            //reverse gravity
            particles[i][2] = particles[i][2] * -1;
            particles[i][5] = objects[k][1] - radius;
    }
}


particles[i][2] += particles[i][3]*weight;
particles[i][1] += particles[i][2];

if( particles[i][1] > particles[i][5] )
    particles[i][1] = particles[i][5];

if( particles[i][1] > height )
    particles.splice(i,1);
}

for(var i=0; i <particles.length; i++){
canvas.fillStyle = "#000";
canvas.beginPath();
canvas.arc(particles[i][0], particles[i][1], radius, 0, Math.PI*2, true);
canvas.closePath();
canvas.fill();
}

答案 1 :(得分:0)

我不会使用重力倍增器。

每个对象看起来应该是这样的:

var circle = {
    x: 0,   // x position
    y: 0,   // y position
    dx: 0,  // x velocity
    dy: 0   // y velocity
}

要更新粒子,请将速度(dx,dy)乘以某个时间间隔,然后将其添加到当前位置。

每个周期,由于重力都会增加一些速度变化。

如果检测到碰撞,则改变速度,使圆圈相互反弹。这方面的一个例子是:

// In a collision, simply reverse the direction of movement
// so the circles move away from each other.

function onCollision(circleA, circleB) {
    circleA.dx *= -1;
    circleA.dy *= -1;

    circleB.dx *= -1;
    circleB.dy *= -1;
}