sleekweasel/planets.html

## planets.html
<html>
<head>
<script>
var next_tick = null;
var ease = 0.05;
var body = [
  { l: 's', x: 0,  y: 0,  vx: 0,  vy: 0,  m: 10000 },
  { l: 'o', x: 0,  y: 120+5, vx: 50+2, vy: 0,  m: 20 },
  { l: 'm', x: 0,  y: 120-5, vx: 50-2, vy: 0,  m: 1 },
];

// s   m=.4 v=.72 e=1 m~1.5     j~5  s~10  u~20  n~30  p~40

  function tick() {
    var pull = '';
    body.forEach((b1, i1) => {
      body.slice(i1+1).forEach((b2,i2) => {

      pull = pull + ` ${b1.l}-${b2.l}`;

      var dx = b1.x - b2.x;
      var dy = b1.y - b2.y;

      var rr = (dx*dx)+(dy*dy)

      var th = Math.atan2(dx, dy);

// f = ma = G m1 m2 / rr
// a = m1 m2 / rr * m

      var f = (b1.m * b2.m) / rr;
      var a1 = f / b1.m;
      var a2 = f / b2.m;

      b1.vx -= a1 * Math.sin(th);
      b1.vy -= a1 * Math.cos(th);

      b2.vx += a2 * Math.sin(th);
      b2.vy += a2 * Math.cos(th);
      });
    });

    body.forEach((b, i) => {
      put(b);
      document.body.appendChild(b.b.cloneNode(true));
      b.x += b.vx * ease;
      b.y += b.vy * ease;
    });

    document.getElementById("grav").innerText =
      pull;
      //body.map((e) => JSON.stringify(e)).join("\n");

    next_tick = setTimeout(tick, 50);
  }

  function put(body) {
    body.b.style.left = `${Math.ceil(window.innerWidth / 2) + body.x}px`;
    body.b.style.top  = `${Math.ceil(window.innerHeight / 2) + body.y}px`;
  }

  function planets() {
    var span = document.getElementById("body");
    console.log(body);
    body.forEach((e) => {
      e.b = span.cloneNode();
      e.b.innerHTML = e.l;
      document.body.appendChild(e.b);
      put(e);
    });
    tick()
  }
</script>
</head>
<body onload="planets()">
<span id="body" style="position: fixed; top: 0; left: 0;">Multi-body gravity</span>
<br><button onClick="clearTimeout(next_tick)"></button>
<div id='grav'></div>
</body>
</html>
	<html>
	<head>
	<script>
	var next_tick = null;
	var ease = 0.05;
	var body = [
	{ l: 's', x: 0, y: 0, vx: 0, vy: 0, m: 10000 },
	{ l: 'o', x: 0, y: 120+5, vx: 50+2, vy: 0, m: 20 },
	{ l: 'm', x: 0, y: 120-5, vx: 50-2, vy: 0, m: 1 },
	];

	// s m=.4 v=.72 e=1 m~1.5 j~5 s~10 u~20 n~30 p~40

	function tick() {
	var pull = '';
	body.forEach((b1, i1) => {
	body.slice(i1+1).forEach((b2,i2) => {

	pull = pull + ` ${b1.l}-${b2.l}`;

	var dx = b1.x - b2.x;
	var dy = b1.y - b2.y;

	var rr = (dxdx)+(dydy)

	var th = Math.atan2(dx, dy);

	// f = ma = G m1 m2 / rr
	// a = m1 m2 / rr * m

	var f = (b1.m * b2.m) / rr;
	var a1 = f / b1.m;
	var a2 = f / b2.m;

	b1.vx -= a1 * Math.sin(th);
	b1.vy -= a1 * Math.cos(th);

	b2.vx += a2 * Math.sin(th);
	b2.vy += a2 * Math.cos(th);
	});
	});

	body.forEach((b, i) => {
	put(b);
	document.body.appendChild(b.b.cloneNode(true));
	b.x += b.vx * ease;
	b.y += b.vy * ease;
	});

	document.getElementById("grav").innerText =
	pull;
	//body.map((e) => JSON.stringify(e)).join("\n");

	next_tick = setTimeout(tick, 50);
	}

	function put(body) {
	body.b.style.left = `${Math.ceil(window.innerWidth / 2) + body.x}px`;
	body.b.style.top = `${Math.ceil(window.innerHeight / 2) + body.y}px`;
	}

	function planets() {
	var span = document.getElementById("body");
	console.log(body);
	body.forEach((e) => {
	e.b = span.cloneNode();
	e.b.innerHTML = e.l;
	document.body.appendChild(e.b);
	put(e);
	});
	tick()
	}
	</script>
	</head>
	<body onload="planets()">
	<span id="body" style="position: fixed; top: 0; left: 0;">Multi-body gravity</span>
	<br><button onClick="clearTimeout(next_tick)"></button>
	<div id='grav'></div>
	</body>
	</html>