Proper use of Physics.aabb.union()

Question

I'm learning PhysicsJS, and I tried using union like so:

// Window bounds
var rect1 = Physics.aabb(0, 100, 300, 200);
var rect2 = Physics.aabb(100, 0, 200, 300);
var viewportBounds = Physics.aabb.union(rect1, rect2);

// Constrain bodies to these bounds
world.add(Physics.behavior('edge-collision-detection', {
  aabb: viewportBounds,
  restitution: 0.99,
  cof: 0.99
}));

but the ball just falls through the bottom.

Physics(function(world){

  var viewWidth = 300;
  var viewHeight = 300;

  var renderer = Physics.renderer('canvas', {
    el: 'viewport',
    width: viewWidth,
    height: viewHeight,
    meta: false
  });

  // add the renderer
  world.add(renderer);
  // render on each step
  world.subscribe('step', function(){
    world.render();
  });

  // Window bounds
    var rect1 = Physics.aabb(0, 100, 300, 200);
    var rect2 = Physics.aabb(100, 0, 200, 300);
    var viewportBounds = Physics.aabb.union(rect1, rect2);
  
  // Constrain bodies to these bounds
  world.add(Physics.behavior('edge-collision-detection', {
      aabb: viewportBounds,
      restitution: 0.99,
      cof: 0.99
  }));

  // Add the ball
  world.add(
      Physics.body('circle', {
        x: 0, // x-coordinate
        y: 0, // y-coordinate
        vx: 0.2, // x-velocity
        vy: 0.01, // y-velocity
        radius: 2.0
      })
  );

  // ensure objects bounce when edge collision is detected
  world.add( Physics.behavior('body-impulse-response') );

  // add some gravity
  world.add( Physics.behavior('constant-acceleration') );

  // subscribe to ticker to advance the simulation
  Physics.util.ticker.subscribe(function( time, dt ){

      world.step( time );
  });

  // start the ticker
  Physics.util.ticker.start();

});

body {
  /*background: #121212;*/
}
.pjs-meta {
  display: none;
}

#viewport {
  border: 1px solid #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js'></script>

<canvas id="viewport" width="300" height="300"></canvas>

I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?

Answer 1

Figured it out. I was working with a super old version (physicsjs-0.5.0). I linked to the latest version (physicsjs-0.7.0), which has much more functionality (4,088 new lines of code between those two versions). I had to refactor my code a bit to match the updated spec, but it's all good!

Answer 2

I can't find any code on GitHub or anywhere using it. Can someone lend some guidance, please?

You might try reading the unit tests in the .spec, on Github.

Sample test, which should look very readable even if barely know Javascript:

it("should initialize provided a width/height and point", function() {
    var aabb = Physics.aabb( 4, 5, { x: 20, y: 9 } );
    matches( aabb, { x: 20, y: 9, hw: 2, hh: 2.5 });
});

spec.js looks to be the test code. Test actually doubles as documentation, and libraries like spec serve to make test code read like documentation. Additionally, test code is, of course, a collection of examples of how to use the code. Enjoy.

Try reading other test code.