JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.js"></script>

JavaScript

let ap = [150, 150],
    av = [1.5, -1],
    am = 5;

let bp = [240, 240],
    bv = [-0.15, 0.1],
    bm = 50;
    
const G = 9;

const app = new PIXI.Application({ width: 480, height: 480 });
document.body.appendChild(app.view);

const a = new PIXI.Graphics();
a.beginFill(0xFFFFFF);
a.drawCircle(0, 0, am/2);
a.endFill();
a.x = ap[0];
a.y = ap[1];
app.stage.addChild(a);

const b = new PIXI.Graphics();
b.beginFill(0x0000FF);
b.drawCircle(0, 0, bm/2);
b.endFill();
b.x = bp[0];
b.y = bp[1];
app.stage.addChild(b);

app.ticker.add(dt => {
  const dp = bp.map((x, i) => x - ap[i]);
	const distsq = dp[0]**2 + dp[1]**2;
	const f = am * bm / distsq;
  const dist = Math.sqrt(distsq);
  const norm = dp.map((x, i) => x / dist);
  av = av.map((x, i) => x + G*norm[i]*f/am);
  bv = bv.map((x, i) => x - G*norm[i]*f/bm);

	ap = ap.map((x, i) => x + av[i]);
  a.x = ap[0];
  a.y = ap[1];
  
	bp = bp.map((x, i) => x + bv[i]);
  b.x = bp[0];
  b.y = bp[1];
});