5

我使用牛顿方程使我目前正在研究的这个程序中的球在相互碰撞时被“分开”，但有时它们会相互卡住，这会造成很多麻烦。

.

这是我的代码：

<center>
<canvas id="canvas" style="border: 2px solid black; cursor: crosshair;" width="1000"                 height="500"></canvas>
</center>

<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

var w = canvas.width
var h = canvas.height

var ball = []

var gravity = 0.3
var force = 0.2

var mouse = {
d: false,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
}




window.onmousedown = function(e) {
mouse.d = true
mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
window.onmousemove = function(e) {
if (mouse.d) {
    mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
    mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
} else {
    mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
    mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
}
window.onmouseup = function() {
if (mouse.d) {
    mouse.d = false

    var dx = (mouse.x1 - mouse.x2);
    var dy = (mouse.y1 - mouse.y2);
    var mag = Math.sqrt(dx * dx + dy * dy);

    ball.push({
        x: mouse.x1,
        y: mouse.y1,
        r: Math.floor(Math.random() * 20) + 10,
        vx: dx / mag * -(mag * force),
        vy: dy / mag * -(mag * force),
        b: 0.7,
    })
}
}
document.onselectstart = function() {return false}
document.oncontextmenu = function() {return false}


setInterval(update, 1000 / 60)
function update() {
ctx.clearRect(0, 0, w, h)

ctx.beginPath()
ctx.moveTo(mouse.x1, mouse.y1)
ctx.lineTo(mouse.x2, mouse.y2)
ctx.stroke()
ctx.closePath()

for (i = 0; i < ball.length; i++) {
    ball[i].vy += gravity
    ball[i].x += ball[i].vx
    ball[i].y += ball[i].vy

    if (ball[i].x > w - ball[i].r) {
        ball[i].x = w - ball[i].r
        ball[i].vx *= -ball[i].b
    }
    if (ball[i].x < ball[i].r) {
        ball[i].x = ball[i].r
        ball[i].vx *= -ball[i].b
    }
    if (ball[i].y > h - ball[i].r) {
        ball[i].y = h - ball[i].r
        ball[i].vy *= -ball[i].b
    }
    if (ball[i].y < ball[i].r) {
        ball[i].y = ball[i].r
        ball[i].vy *= -ball[i].b
    }

    for (j = i + 1; j < ball.length; j++) {
        var dx = ball[i].x - ball[j].x
        var dy = ball[i].y - ball[j].y
        var dist = Math.sqrt(dx * dx + dy * dy)
        if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r) {
            var angle = Math.atan2(dy, dx)

            var sp1 = Math.sqrt(ball[i].vx*ball[i].vx + ball[i].vy*ball[i].vy);
            var sp2 = Math.sqrt(ball[j].vx*ball[j].vx + ball[j].vy*ball[j].vy);

            var dir1 = Math.atan2(ball[i].vy, ball[i].vx);
            var dir2 = Math.atan2(ball[j].vy, ball[j].vx);

            var vx1 = sp1 * Math.cos(dir1 - angle);
            var vy1 = sp1 * Math.sin(dir1 - angle);
            var vx2 = sp2 * Math.cos(dir2 - angle);
            var vy2 = sp2 * Math.sin(dir2 - angle);

            var fvx1 = ((ball[i].r - ball[j].r) * vx1 + (2 * ball[j].r) * vx2) / (ball[i].r + ball[j].r);
            var fvx2 = ((2 * ball[i].r) * vx1 + (ball[j].r - ball[i].r) * vx2) / (ball[i].r + ball[j].r);
            var fvy1 = vy1;
            var fvy2 = vy2;

            ball[i].vx = Math.cos(angle) * fvx1 + Math.cos(angle + Math.PI/2) * fvy1;
            ball[i].vy = Math.sin(angle) * fvx1 + Math.sin(angle + Math.PI/2) * fvy1;
            ball[j].vx = Math.cos(angle) * fvx2 + Math.cos(angle + Math.PI/2) * fvy2;
            ball[j].vy = Math.sin(angle) * fvx2 + Math.sin(angle + Math.PI/2) * fvy2;
        }
    }


    ctx.beginPath()
    ctx.arc(ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, false)
    ctx.fillStyle = "black"
    ctx.fill()
    ctx.closePath()
}
}
</script>

当你产生了很多球并且它们的速度很快时，就会发生这种情况：

为什么？有谁知道我该如何解决这个问题？

4

2 回答 2

2

您的解决方案似乎仅基于速度具有惩罚力。这允许球体穿透，并且当任何球体中没有速度时，它们都不会尝试修复穿透。要解决此问题，您需要添加基于位置的惩罚。一个非常简单的解决方案是使用弹簧。使用胡克定律计算穿透长度并推动相交的球体。

最好的解决方案是使用隐式接触求解算法。这允许更硬的接触，但算法要复杂得多。我建议您使用 2D 物理引擎以获得快速和良好的结果：Box2D 的 JavaScript 端口似乎是最常用的。

于 2013-06-27T12:18:48.873 回答
0

我非常赞同@schteppe 上面的回答。只是想在这里告诉你这个链接：http: //www.paulirish.com/2011/requestanimationframe-for-smart-animating/

查看“我为什么要使用它？” 部分。它可能证明对您的问题的答案有一些暗示，即您的代码到底有什么问题。

顺便说一句，我也一直试图让你的代码工作，但没有实质性的结果。你可以在这里查看我的小提琴（我从你那里复制的）：http: //jsfiddle.net/sukhmeetsd/joqpqp49/ 

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

var w = canvas.width
var h = canvas.height

var d = 5; //distance to move on collision

var ball = []

var gravity = 0.3
var force = 0.2

var mouse = {
    d: false,
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
}




window.onmousedown = function (e) {
    mouse.d = true
    mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
    mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
window.onmousemove = function (e) {
    if (mouse.d) {
        mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
        mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
    } else {
        mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
        mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
    }
}
window.onmouseup = function () {
    if (mouse.d) {
        mouse.d = false

        var dx = (mouse.x1 - mouse.x2);
        var dy = (mouse.y1 - mouse.y2);
        var mag = Math.sqrt(dx * dx + dy * dy);

        ball.push({
            x: mouse.x1,
            y: mouse.y1,
            r: Math.floor(Math.random() * 20) + 10,
            vx: dx / mag * -(mag * force),
            vy: dy / mag * -(mag * force),
            b: 0.7,
        })
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

document.onselectstart = function () {
    return false
}
document.oncontextmenu = function () {
    return false
}


setInterval(update, 1000/60)

function update() {
    ctx.clearRect(0, 0, w, h)

    ctx.beginPath()
    ctx.moveTo(mouse.x1, mouse.y1)
    ctx.lineTo(mouse.x2, mouse.y2)
    ctx.stroke()
    ctx.closePath()

    for (i = 0; i < ball.length; i++) {
        ball[i].vy += gravity
        ball[i].x += ball[i].vx
        ball[i].y += ball[i].vy

        if (ball[i].x > w - ball[i].r) {
            ball[i].x = w - ball[i].r
            ball[i].vx *= -ball[i].b
        }
        if (ball[i].x < ball[i].r) {
            ball[i].x = ball[i].r
            ball[i].vx *= -ball[i].b
        }
        if (ball[i].y > h - ball[i].r) {
            ball[i].y = h - ball[i].r
            ball[i].vy *= -ball[i].b
        }
        if (ball[i].y < ball[i].r) {
            ball[i].y = ball[i].r
            ball[i].vy *= -ball[i].b
        }

        for (j = i + 1; j < ball.length; j++) {
            var dx = ball[i].x - ball[j].x
            var dy = ball[i].y - ball[j].y
            var dist = Math.sqrt(dx * dx + dy * dy)
            if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r) {

                var angle = Math.atan2(dy, dx)

                var sp1 = Math.sqrt(ball[i].vx * ball[i].vx + ball[i].vy * ball[i].vy);
                var sp2 = Math.sqrt(ball[j].vx * ball[j].vx + ball[j].vy * ball[j].vy);

                var dir1 = Math.atan2(ball[i].vy, ball[i].vx);
                var dir2 = Math.atan2(ball[j].vy, ball[j].vx);

                d = Math.ceil(ball[i].r+ball[j].r-dist)/2;

                //moving them back
                ball[i].x = ball[i].x - Math.cos(dir1)*d-1;
                ball[i].y = ball[i].y - Math.sin(dir1)*d-1;
                ball[j].x = ball[j].x + Math.cos(dir2)*d+1;
                ball[j].y = ball[j].y + Math.sin(dir2)*d+1;

                //Checking for distance again
                /*dx = ball[i].x - ball[j].x;
                dy = ball[i].y - ball[j].y;
                dist = Math.sqrt(dx * dx + dy * dy);
                if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r){
                      ball[i].x = ball[i].x + Math.cos(dir1)*2*d;
                        ball[i].y = ball[i].y + Math.sin(dir1)*d*2;
                        ball[j].x = ball[j].x - Math.cos(dir2)*d*2;
                      ball[j].y = ball[j].y - Math.sin(dir2)*d*2;
                }*/

                var vx1 = sp1 * Math.cos(dir1 - angle);
                var vy1 = sp1 * Math.sin(dir1 - angle);
                var vx2 = sp2 * Math.cos(dir2 - angle);
                var vy2 = sp2 * Math.sin(dir2 - angle);

                var fvx1 = ((ball[i].r - ball[j].r) * vx1 + (2 * ball[j].r) * vx2) / (ball[i].r + ball[j].r);
                var fvx2 = ((2 * ball[i].r) * vx1 + (ball[j].r - ball[i].r) * vx2) / (ball[i].r + ball[j].r);
                var fvy1 = vy1;
                var fvy2 = vy2;

                ball[i].vx = Math.cos(angle) * fvx1 + Math.cos(angle + Math.PI / 2) * fvy1;
                ball[i].vy = Math.sin(angle) * fvx1 + Math.sin(angle + Math.PI / 2) * fvy1;
                ball[j].vx = Math.cos(angle) * fvx2 + Math.cos(angle + Math.PI / 2) * fvy2;
                ball[j].vy = Math.sin(angle) * fvx2 + Math.sin(angle + Math.PI / 2) * fvy2;
            }
        }


        ctx.beginPath()
        ctx.arc(ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, false)
        ctx.fillStyle = getRandomColor();
        ctx.fill();
        ctx.closePath();
    }
}

我的代码不会让球粘住，但它们处于不断的搅动状态。我正要按照@schteppe 的建议实施胡克定律，但后来我听说了 Box2d 及其魔力。

于 2015-12-11T08:14:52.827 回答