JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<!DOCTYPE html>
<html>
<head>
<title>gravity fall</title>
</head>
<body>
<article id="box">
</article>
</body>
</html>

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 = 5;
let objs = [];
const G = 0.00001;
let divs = [];
function getPosition(r) {
  function setPosition() {
    const position = {
      x: Math.random()*(700-50)+50,
      y: Math.random()*(700-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,
    c : {x:position.x+r,y:position.y+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";
  divs.push(node);
  return obj;
}



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

function simulate() {
  for (let i=0;i<N;i++) {
    for (let n=i+1;n<N+i;n++) {
      j = n%N
      
    
    }
  }
}
setTimeout(simulate, 20);