planckJS + pixi

by realhunts

HTML

<script src="https://pixijs.download/v4.5.5/pixi.min.js"></script>
<script src="https://rawgit.com/shakiba/planck.js/master/dist/planck.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<div id = "ballCount">

</div>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
}

JavaScript

/** 
 * A Box2D / Planck.js demo
 *
 **/

const pscale = 30;
var stats;
function mpx(m) {
  return m * pscale;
}

function pxm(p) {
  return p / pscale;
}

const global = {
  gameWidth: 700,
  gameHeight: 700
};

const renderOptions = {
  backgroundColor: 0x000000,
  autoResize: true,
  resolution: window.devicePixelRatio,
  antialias: true
}
const app = new PIXI.Application(0, 0, renderOptions);
app.renderer.autoResize = true;
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.resize(global.gameWidth, global.gameHeight);
document.body.appendChild(app.view);

app.stage.interactive = true;
app.stage.hitArea = app.screen;

app.stage.scale.x = 1;
app.stage.scale.y = 1;


	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	stats.domElement.style.zIndex = 100;
	document.body.appendChild( stats.domElement );
  
const {
  Vec2,
  World,
  Edge,
  Circle
} = planck;
let world;
let gp;
const group = new PIXI.Container();
app.stage.addChild(group);
const boundaries = [];


const radius = 0.2; //meters!
const ballCanvas = document.createElement('canvas');
ballCanvas.width = mpx(radius) * 2;
ballCanvas.height = mpx(radius) * 2;

const ctx = ballCanvas.getContext('2d');
ctx.beginPath();
ctx.arc(mpx(radius), mpx(radius), mpx(radius), 0, Math.PI * 2);
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 1;
ctx.stroke();

let balls = 0;

const ballFixtureDef = {};
ballFixtureDef.density = 10.0;
ballFixtureDef.position = Vec2(0.0, 0.0);

function addBall() {
	document.getElementById("ballCount").innerText = balls;
  ++balls;

  const body = world.createBody().setDynamic();
  body.setPosition(Vec2(4, 0));
  /*const fd = {};
  fd.density = 10.0;
  fd.position = Vec2(0.0, 0.0);*/
  body.createFixture(Circle(radius), ballFixtureDef);

  const pos = body.getPosition();
  const circle = addCircle(pos.x, pos.y);
  circle.body = body;

  group.addChild(circle);
}

function...