gravity fall

by Mert Ener

HTML

<article id="box">
</article>

CSS

div {
  position: absolute;
  aspect-ratio:1;
  transform: translate(-50%, -50%);
  background-color: #777;
  border-radius: 50%;
  display: inline-block;
}

#box {
  position: relative;
  padding:0;
  margin:0;
  min-width: 100%;
  min-height: 100% !important;
  height: auto;
  }
  body {
    padding:0;
    margin:0;
    background-color: rgb(30,31,31);
  }

JavaScript

const N = 40;
let c=0;
let objs = [];
const G = 0.00001;
let divs = [];
function getPosition(r) {
  function setPosition() {
    const position = {
      x: Math.random() * (800 - 50) + 50,
      y: Math.random() * (800 - 50) + 50,
    };
    for (let i = 0; i < objs.length; i++) {
      const dx = objs[i].x - position.x;
      const dy = objs[i].y - position.y;
      const d = (dx ** 2 + dy ** 2) ** (1 / 2);
      if (d < r + objs[i].r) {
        return;
      }
    }
    return position;
  }
  let position;
  while (typeof position === "undefined") {
    position = setPosition();
  }
  return position;
}
function addObj() {
  let r = Math.random() * (56 - 8) + 8;
  let position = getPosition(r);
  let obj = {
    x: position.x,
    y: position.y,
    vx: (Math.random() * (Math.round(Math.random()) ? 1 : -1) * 50) / r ** 2,
    vy: (Math.random() * (Math.round(Math.random()) ? 1 : -1) * 50) / r ** 2,
    m: (4 / 3) * 3.14 * r ** 3,
    r: r,
  };

  let node = document.createElement("div");
  document.getElementById("box").appendChild(node);
  node.style.left = obj.x + "px";
  node.style.top = obj.y + "px";
  node.style.height = obj.r * 2 + "px";
  node.style.backgroundColor ='#' + Math.floor(Math.random()*16777215).toString(16);
  divs.push(node);
  return obj;
}

for (let n = 0; n < N; n++) {
  objs.push(addObj());
}

function simulate() {
  c++;
  function collision(A, B) {
    const dx = objs[B].x - objs[A].x;
    const dy = objs[B].y - objs[A].y;
    const d = (dx * dx + dy * dy)**(1/2);

    if (d <= objs[A].r + objs[B].r) {
      const nx = dx / d;
      const ny = dy / d;

      const v1N = objs[A].vx * nx + objs[A].vy * ny;
      const v2N = objs[B].vx * nx + objs[B].vy * ny;

      const v1NA =
        (v1N * (objs[A].m - objs[B].m) + 2 * objs[B].m * v2N) /
        (objs[A].m + objs[B].m);

      objs[A].vx += (v1NA - v1N) * nx;
      objs[A].vy += (v1NA - v1N) * ny;
  
    }...