我使用画布制作了这段代码来描绘一些争夺指定颜色的粒子。目前我已经制作了粒子" put"它们在其他粒子上的颜色,如果它们发生碰撞,我也会让它们“吮吸”#34;其他粒子'质量,如果在一定范围内。我想把它带到一个新的水平,当一个球击中另一个球时,让它们彼此反弹,通过某种方式否定速度,与某个与另一个粒子的相对角度有关。如何实现这一点?虽然我在高中学习科学,但我无法完全理解这一点。
Codepen:http://codepen.io/dremp/pen/fzxvK?editors=001
这是检测粒子是否相互碰撞的片段。
function update() {
paintCanvas();
for(var i = 0; i < Particles.length; i++) {
p = Particles[i];
p.x += p.vx;
p.y += p.vy;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0 * Math.PI, 2 * Math.PI, false);
var drawMethod = (fillParticles === true) ? 'fill':'stroke';
ctx[drawMethod]();
ctx[drawMethod+"Style"] = p.color;
if (p.x + p.radius > W || p.x - p.radius < 0) p.vx = p.vx * - 1 + 0.05;
if (p.y + p.radius > H || p.y - p.radius < 0) p.vy = p.vy * - 1 + 0.05;
if (p.x + p.radius > W) p.vx -= 0.05;
else if (p.x - p.radius < 0) p.vx += 0.05;
if (p.y + p.radius > H) p.vy -= 0.05;
else if (p.y - p.radius < 0) p.vy += 0.05;
for(var j = i + 1; j < Particles.length; j++) {
p2 = Particles[j];
var disance,
distanceX = p.x - p2.x,
distanceY = p.y - p2.y,
color;
distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
if(distance <= p.radius + p2.radius) {
p2.color = p.color;
color = p.color;
var ax = distanceX / 1000,
ay = distanceY / 1000;
p.x += ax;
p.y += ay;
}
else if(distance <= p.radius * 2 + 50) {
ctx.lineWidth = 2;
ctx.strokeStyle = p.color;
ctx.beginPath();
ctx.moveTo(p.x,p.y);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();
ctx.beginPath();
p.radius += 0.005;
p2.radius -= 0.005;
if(p.radius > 50) p.radius -= 0.01;
if(p2.radius < 5) p2.radius += 0.01;
}
}
}
requestAnimationFrame(update);
}
答案 0 :(得分:2)
你需要计算冲动:
// Find normal from other to me
normX = p.x - p2.x;
normY = p.y - p2.y;
// make into unit vector
normLength = Math.sqrt( normX * normX + normY * normY);
normX = normX / normLength;
normY = normY / normLength;
// Get projection of movement vectors onto normal
// (Dot prod each with norm)
myProj = (p.vx * normX) + (p.vy * normY);
otherProj = (p2.vx * normX) + (p2.vy * normY);
// Now, factor in impulse, derived from
// Conservation of Energy / Conservation of Momentum
impulse = ( 2 * (myProj - otherProj) );
p.mass = 1; // Replace with "mass" calculation (based on area?)
p2.mass = 1;
impulse = impulse / (p.mass + p2.mass);
p.vx = p.vx - (impulse * p2.mass * normX);
p.vy = p.vy - (impulse * p2.mass * normY);
p2.vx = p2.vx + (impulse * p.mass * normX);
p2.vy = p2.vy + (impulse * p.mass * normY);
演示:http://codepen.io/gengel/pen/pFHGa
如果你有不同大小的不同球飞来飞去,你应该改变那些p.mass线来反映(区域可能会起作用 - (pi * r)^ 2)
(编辑以便在拍摄P之后将“P”替换为“冲动”)