Edit in JSFiddle

var world;
var sw;
var sh;
var renderer;
var stage;

var fixedTimeStep = 1 / 60;
var colorList = [
	0xf64c4c,
  0xf6844c,
  0xd0f64c,
  0x4cc8f6
]
var itemList = [];

function main() {
	sw = window.innerWidth;
  sh = window.innerHeight;
  
	renderer = new PIXI.CanvasRenderer({
  	width: sw,
    height: sh,
	  autoResize:true
  });
  renderer.backgroundColor = 0xffffff;
  document.getElementById('stage').appendChild(renderer.view);
  stage = new PIXI.Container();
  
  world = new p2.World({
  	gravity: [0, -9.82]
  });
  
  createWall(sw / 2 - 150, sh / 2, 200, 20, Math.PI / 4);
  createWall(sw / 2 + 150, sh / 2, 200, 20, -Math.PI / 4);
  
  window.addEventListener('resize', resize);
  resize();
  
  requestAnimationFrame(animate);
}

function animate(time) {
	requestAnimationFrame(animate);
  world.step(fixedTimeStep);
  render();
}

function render() {
  createBall();
  
  for (var i = itemList.length - 1; i >= 0; i--) {
  	var graphic = itemList[i];
    if (graphic.body.world && graphic.shape.type == p2.Shape.CIRCLE) {
    	var x = p2ToPixiX(graphic.body.position[0]);
    	var y = p2ToPixiY(graphic.body.position[1]);
      if (y > sh + 50) {
      	world.removeBody(graphic.body);
        stage.removeChild(graphic);
        itemList.splice(i, 1);
        graphic.destroy();
      } else {
      	graphic.x = x;
        graphic.y = y;
      }
    }
  }
  
  /**
  for (var i = world.bodies.length - 1; i >= 0; i--) {
  	var body = world.bodies[i];
    var shape = body.shapes[0];
    if (shape.type == p2.Shape.CIRCLE) {
    	var bodyY = body.position[1] * -100;
    	if(bodyY > sh+50) {
      	world.removeBody(body);
      } else {
      	drawCircle(body, shape);
      }
    } else if (shape.type == p2.Shape.BOX) {
    	drawBox(body, shape);
    }
  }
  */
  
  renderer.render(stage);
}

function createBall() {
  var randX = sw / 2 + (Math.random() * 100 - 50);
  var randY = Math.random() * 50 - 50;
  var xx = pixiToP2X(randX);
  var yy = pixiToP2Y(randY);
  var radius = 20;
  var ballShape = new p2.Circle({radius:pixiToP2Value(radius)});
  var ballBody = new p2.Body({
  	mass:1.0, 
    position: [xx, yy]
  });
  var colorID = Math.floor(Math.random() * colorList.length);
  var color = colorList[colorID];
  ballBody.color = color;
  ballBody.addShape(ballShape);
  world.addBody(ballBody);
  
  var graphic = new PIXI.Graphics();
  graphic.beginFill(color);
  graphic.drawCircle(0, 0, radius);
  graphic.endFill();
  graphic.pivot.set(0.5, 0.5);
  graphic.x = randX;
  graphic.y = randY;
  stage.addChild(graphic);
  graphic.body = ballBody;
  graphic.shape = ballShape;
  itemList.push(graphic);
}

function createWall(x, y, w, h, rotation) {
	var p2X = pixiToP2X(x);
  var p2Y = pixiToP2Y(y);
  var p2W = pixiToP2Value(w);
  var p2H = pixiToP2Value(h);
  var shape = new p2.Box({
  	width:p2W, 
    height:p2H,
  });
  var body = new p2.Body({
  	mass:0,
    position:[p2X, p2Y],
    angle:-rotation
  });
  body.addShape(shape);
  world.addBody(body);
  
  var graphic = new PIXI.Graphics();
  graphic.beginFill(0x666666);
  console.log('x:' + x + ' y:' + y + ' w:' + w + ' h:' +h);
  graphic.drawRect(-w/2, -h/2, w, h);
  //graphic.drawCircle(0, 0, 10);
  graphic.endFill();
  graphic.pivot.set(0.5, 0.5);
  graphic.x = x;
  graphic.y = y;
  graphic.rotation = rotation;
  stage.addChild(graphic);
  graphic.body = body;
  graphic.shape = shape;
}

function resize(evt) {
	sw = window.innerWidth;
  sh = window.innerHeight;
}

function drawCircle(body, shape) {
  
}

function drawBox(body, shape) {
	
}

 // p2→pixi
function p2ToPixiX(p2X) {
  return p2X * 100;
}
function p2ToPixiY(p2Y) {
  return -(p2Y * 100);
}
function p2ToPixiValue(p2Value) {
  return p2Value * 100;
}

// pixi→p2
function pixiToP2X(pixiX) {
  return pixiX / 100;
}
function pixiToP2Y(pixiY) {
  return -(pixiY / 100);
}
function pixiToP2Value(pixiValue) {
  return pixiValue / 100;
}


main();


<div id="stage"></div>
html, body {
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
  overflow: hidden;
}

External resources loaded into this fiddle: