p5.js圆形碰撞检测在两圆未接触时提前触发问题咨询

你遇到的问题根源是对p5.js的circle()函数参数理解有误：p5.js中circle(x, y, d)的第三个参数是直径，而非半径。

你代码里将r1、r2作为半径计算碰撞阈值（r1 + r2），但实际绘制时这两个值被用作直径，两个圆的真实半径分别为35、45，真实碰撞触发阈值应该是80，和你当前计算的160差了一倍，自然会出现两圆还未接触就提前触发变色的情况。

修复方案 #

任选以下一种方案修改即可：

• 方案1：保持半径计算逻辑不变，绘制圆形时把半径乘以2作为circle()的第三个参数

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 * 2); // 半径转直径
  let distance = sqrt((x2 - mouseX)*(x2 - mouseX) + (y2 - mouseY)*(y2 - mouseY));
  push();
  if (distance <= r1 + r2) {
    fill(56, 45, 78);
  }
  circle(x2, y2, r2 * 2); // 半径转直径
  pop();
}

• 方案2：保持绘制逻辑不变，调整碰撞判断的阈值为直径和的一半

// 仅修改碰撞判断条件即可
if (distance <= (r1 + r2) / 2) {
  fill(56, 45, 78);
}

内容的提问来源于stack exchange，提问作者Omar El Atyqy