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 = [];

var COLOR_0 = Math.pow(2,0);
var COLOR_1 = Math.pow(2,1);
var COLOR_2 = Math.pow(2,2);
var COLOR_3 = Math.pow(2,3);

var COLOR_0_w = Math.pow(2,4);
var COLOR_1_w = Math.pow(2,5);
var COLOR_2_w = Math.pow(2,6);
var COLOR_3_w = Math.pow(2,7);

var collisionList = [
	{
  	collisionGroup:COLOR_0,
    collisionMask:COLOR_0|COLOR_1|COLOR_2|COLOR_3|COLOR_1_w|COLOR_2_w|COLOR_3_w
  },
  {
  	collisionGroup:COLOR_1,
    collisionMask:COLOR_0|COLOR_1|COLOR_2|COLOR_3|COLOR_0_w|COLOR_2_w|COLOR_3_w
  },
  {
  	collisionGroup:COLOR_2,
    collisionMask:COLOR_0|COLOR_1|COLOR_2|COLOR_3|COLOR_0_w|COLOR_1_w|COLOR_3_w
  },
  {
  	collisionGroup:COLOR_3,
    collisionMask:COLOR_0|COLOR_1|COLOR_2|COLOR_3|COLOR_0_w|COLOR_1_w|COLOR_2_w
  },
]

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]
  });
  
  var ww = sw / 4;
  var hh = 20;
  createWall(ww / 2 * 1, sh / 2, ww, hh, 0, colorList[0], COLOR_0_w, COLOR_1|COLOR_2|COLOR_3|COLOR_0_w|COLOR_1_w|COLOR_2_w|COLOR_3_w);
  createWall(ww / 2 * 3, sh / 2, ww, hh, 0, colorList[1], COLOR_1_w, COLOR_0|COLOR_2|COLOR_3|COLOR_0_w|COLOR_1_w|COLOR_2_w|COLOR_3_w);
  createWall(ww / 2 * 5, sh / 2, ww, hh, 0, colorList[2], COLOR_2_w, COLOR_0|COLOR_1|COLOR_3|COLOR_0_w|COLOR_1_w|COLOR_2_w|COLOR_3_w);
  createWall(ww / 2 * 7, sh / 2, ww, hh, 0, colorList[3], COLOR_3_w, COLOR_0|COLOR_1|COLOR_2|COLOR_0_w|COLOR_1_w|COLOR_2_w|COLOR_3_w);
  
  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;
      }
    }
  }
  
  renderer.render(stage);
}

function createBall() {
	var colorID = Math.floor(Math.random() * colorList.length);
  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 collisionData = collisionList[colorID];
  var ballShape = new p2.Circle({
  	radius:pixiToP2Value(radius),
    collisionGroup:collisionData.collisionGroup,
    collisionMask:collisionData.collisionMask
  });
  var ballBody = new p2.Body({
  	mass:1.0, 
    position: [xx, yy]
  });
  
  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, color, collisionGroup, collisionMask) {
	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,
    collisionGroup: collisionGroup,
    collisionMask: collisionMask
  });
  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(color);
  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;
}