He configurado un programa p5.js simple donde se dibujan dos círculos en la pantalla, la deposición de uno de los cuales está determinada por el cursor, y cuando entran en contacto, el inmóvil cambia de color. El código es el siguiente:

 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(); }

La forma en que estoy haciendo la detección de colisión es comparando la distancia entre los dos círculos con la suma de sus radios. Si el primero es inferior o igual al segundo, normalmente debería registrarse como una colisión y cambiar el color del círculo inmóvil. Sin embargo, eso no es lo que sucede:

Como puede ver, la detección de colisiones se activa mucho antes de que haya contacto, y no tengo idea de por qué.