collision of Circles with different sizes

Question

I am facing issue with circles collision of two different sizes but i don't understand what exactly i am doing wrong.

Right now for referece i post code of same circle sizes, you can run and test its working fine.

but when you change size of circle2 from css (440px) collision will not work anymore.

Looking forward for help if someone can help me to solve this issue.

const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');
const square1 = document.getElementById('square1');

const circle1_w = circle1.offsetWidth / 2;
const circle1_h = circle1.offsetHeight / 2;

const circle2_w = circle2.offsetWidth / 2;
const circle2_h = circle2.offsetHeight / 2;

const square_w = square1.offsetWidth / 2;
const square_h = square1.offsetHeight / 2;

document.addEventListener('mousemove', (e) => {
  circle2.style.left = e.clientX - circle2_w + 'px';
  circle2.style.top = e.clientY - circle2_h + 'px';
  square1.style.left = e.clientX - square_w + 'px';
  square1.style.top = e.clientY - square_h + 'px';
  collideCircle();
});

console.log(circle2);

function collideCircle() {
  var circle1Bounding = circle1.getBoundingClientRect();
  var circle2Bounding = circle2.getBoundingClientRect();

  const circle1_x = circle1Bounding.x;
  const circle1_y = circle1Bounding.y;

  const circle2_x = circle2Bounding.x;
  const circle2_y = circle2Bounding.y;

  /* first we get the x and y distance between the two circles. */
  let distance_x = circle1_x - circle2_x;
  let distance_y = circle1_y - circle2_y;

  /* Then we get the sum of their radii. */
  let radii_sum = circle1_w + circle2_w;

  let sideA = Math.abs(circle1_y - circle2_y);
  let sideB = Math.abs(circle1_x - circle2_x);
  let distance = Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));
  if (distance <= (circle1Bounding.width + circle2Bounding.width) / 2) {
    circle1.innerHTML = 'Collision occured';
    circle1.style.backgroundColor = 'pink';
  } else {
    circle1.innerHTML = '';
    circle1.style.backgroundColor = 'yellow';
  }
}

body {
  margin: 0;
  padding: 0;
}

#circle1 {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 50vw;
  top: 50vh;
  background-color: rgb(255, 233, 36);
  border-radius: 50%;
}

#circle2 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: rgb(255, 80, 80);
  font-size: 1.5em;
  z-index: 1;
  border-radius: 50%;
}

#square1 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: transparent;
  border: 1px solid blue;
  font-size: 1.5em;
  z-index: 1;
}

<div id="circle1"></div>
<div id="circle2"></div>
<div id="square1"></div>

Any idea what exactly i am doing wrong?

Answer 1

For circle collision detection, you want to measure the distance between their center points and see if that distance is less than the sum of the circles' radii.

getBoundingClientRect returns a rectangle whose X, Y values denote the upper-left corner. Your mistake was continuing the calculations with that value.

I updated your code so circle1_x (and y, for circle 1 and 2) account for the circle's center position relative to the bounding rectangle's corner.

Also, assuming they are circles and not ovals, you can grab the width and ignore the height, to determine the radius. I updated your code to derive circle1_r and circle2_r instead of h/w for each circle respectively.

const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');
const square1 = document.getElementById('square1');

// assume circle H=W and just get its radius
const circle1_r = circle1.offsetWidth / 2;
const circle2_r = circle2.offsetWidth / 2;

const square_w = square1.offsetWidth / 2;
const square_h = square1.offsetHeight / 2;

document.addEventListener('mousemove', (e) => {
  circle2.style.left = e.clientX - circle2_r + 'px';
  circle2.style.top = e.clientY - circle2_r + 'px';
  square1.style.left = e.clientX - square_w + 'px';
  square1.style.top = e.clientY - square_h + 'px';
  collideCircle();
});

console.log(circle2);

function collideCircle() {
  var circle1Bounding = circle1.getBoundingClientRect();
  var circle2Bounding = circle2.getBoundingClientRect();

  // get *center* position for circles
  const circle1_x = circle1Bounding.x + circle1_r;
  const circle1_y = circle1Bounding.y + circle1_r;

  const circle2_x = circle2Bounding.x + circle2_r;
  const circle2_y = circle2Bounding.y + circle2_r;

  /* first we get the x and y distance between the two circles. */
  let distance_x = circle1_x - circle2_x;
  let distance_y = circle1_y - circle2_y;

  /* Then we get the sum of their radii. */
  let radii_sum = circle1_r + circle2_r;

  let sideA = Math.abs(circle1_y - circle2_y);
  let sideB = Math.abs(circle1_x - circle2_x);
  let distance = Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));
  if (distance <= (circle1Bounding.width + circle2Bounding.width) / 2) {
    circle1.innerHTML = 'Collision occured';
    circle1.style.backgroundColor = 'pink';
  } else {
    circle1.innerHTML = '';
    circle1.style.backgroundColor = 'yellow';
  }
}

body {
  margin: 0;
  padding: 0;
}

#circle1 {
  width: 210px;
  height: 210px;
  position: absolute;
  left: 50vw;
  top: 50vh;
  background-color: rgb(255, 233, 36);
  border-radius: 50%;
}

#circle2 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: rgb(255, 80, 80);
  font-size: 1.5em;
  z-index: 1;
  border-radius: 50%;
}

#square1 {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: transparent;
  border: 1px solid blue;
  font-size: 1.5em;
  z-index: 1;
}

<div id="circle1"></div>
<div id="circle2"></div>
<div id="square1"></div>