Circle/circle 碰撞在圆圈碰撞之前发生

Question

我设置了一个简单的p5.js程序，在屏幕上画了两个圆圈，其中一个的沉积由光标决定，当它们接触时，不动的那个改变颜色.代码如下：

let r1 = 70;
let r2 = 90;

let x2;
let y2;

function setup() {
  createCanvas(400, 400);
  x2 = width/2;
  y2 = height/2;
}

function draw() {
  background(220);
  
  circle(mouseX, mouseY, r1);
  let distance = sqrt((x2 - mouseX)*(x2 - mouseX) + (y2 - mouseY)*(y2 - mouseY));
  push();
  if (distance <= r1 + r2) {
    fill(56, 45, 78);
  }
  circle(x2, y2, r2);
  pop();
}

我进行碰撞检测的方法是将两个圆之间的距离与它们的半径之和进行比较。如果前者低于或等于后者，通常应记录为碰撞并改变固定圆圈的颜色。然而，事实并非如此：

如您所见，碰撞检测在有任何接触之前就启动了，我不知道为什么。

Answer 1

circle函数的第三个参数是直径，不是半径。将半径乘以 2。

使用dist函数计算两点之间的距离。

let r1 = 70;
let r2 = 90;

let x2;
let y2;

function setup() {
    createCanvas(400, 400);
    x2 = width/2;
    y2 = height/2;
}

function draw() {
    let distance = dist(mouseX, mouseY, x2, y2);

    background(220);
    circle(mouseX, mouseY, r1*2);
    push();
    if (distance <= r1 + r2) {
        fill(56, 45, 78);
    }
    circle(x2, y2, r2*2);
    pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

Circle/circle 碰撞在圆圈碰撞之前发生

Circle/circle collision fires up before the circles are colliding

javascript

collision-detection

collision

p5.js