planck sample demo

by Scott Vandervort

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/planck-js/0.1.37/planck-with-testbed.js"></script>
<canvas id="stage"></canvas>

CSS

body,
html {
  margin: 0;
  padding: 0;
  /*   height: 100%;
  width: 100%; */
  font-family: sans-serif;
}

body {
  background: #f4f4f4;
  font-family: Ubuntu, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: #1c83eb;
}

a:hover {
  text-decoration: underline;
}

.center {
  margin: 0 auto;
  max-width: 900px;
  position: relative;
}

.header {
  padding: 25px 0 15px;
}

.title {
  color: #444;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  margin: 3px 0 0;
}

.title a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

.title a:hover {}

.control {
  float: right;
  margin: 0;
}

.github a {
  font-size: 0.95em;
  margin-right: 1em;
  color: #888;
}

.github iframe {
  display: inline-block;
  margin-right: 10px;
}

@media screen and (max-width: 600px) {
  .github {
    display: none;
  }
}

table.control td {
  vertical-align: center;
}

table.control tr,
table.control td {
  margin: 0;
  padding: 0;
  border: 0 none;
  border-spacing: 0;
}

select {
  vertical-align: top;
  line-height: 26px;
  height: 26px;
}

select {
  padding-left: 0.4em;
}

button {
  height: 26px;
  width: 1.7em;
  padding: 0 0;
  text-align: center;
}

button.narrow {
  width: 1.3em;
}

button:before {}

button.icon-small:before {
  vertical-align: 20%;
  font-size: 0.7em;
}

.links {
  margin: 1em 0;
  text-align: justify;
}

.links a {
  font-size: 0.8em;
  margin: 0 0.5em;
}

#stage {
  display: block;
  width: 100%;
  height: 600px;
  background: #222;
  border-radius: 2px;
}

#status {
  font-family: monospace;
  color: #333;
  margin: 1em 0;
}

#info {
  font-family: monospace;
  color: #333;
  margin: 1em 0;
}

#code {
  padding: 9px;
  border-radius: 2px;
  background: #f8f8f8;
  font-family: monospace;
  font-size: 0.9em;
}

#stage,
#code {
  display: block;
  width: 100%;
  height: 600px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:...

JavaScript

planck.testbed('PolyShapes', function(testbed) {
  var pl = planck, Vec2 = pl.Vec2;
  var world = new pl.World(Vec2(0, -9.8));

  var e_maxBodies = 10;

  var ground = world.createBody({
    position: Vec2(0, -10.0)
  });

  ground.createFixture(pl.Edge(Vec2(-40.0, 0.0), Vec2(40.0, 0.0)), {
    userData: null,
    friction: 0.2,
    restitution: 0.5,
    density: 0.0,
    isSensor: false,

    filterGroupIndex: 0,
    filterCategoryBits: 0x0001,
    filterMaskBits: 0xFFFF
  });
  var bodyDef0 = {};
  bodyDef0.type = 'dynamic';
  var x = Math.random() * 0.4 - 2.0;
  bodyDef0.position = Vec2(x, 10.0);
  bodyDef0.angle = Math.random() * 2 * Math.PI - Math.PI;

  bodyDef0.position = Vec2(10, 10.0);
  var body0 = world.createBody(bodyDef0);

  var polygon0 = pl.Polygon([
    Vec2(-0.1, 0.0),
    Vec2(0.1, 0.0),
    Vec2(0.0, 1.5)
  ]);
  var w = 1.0;
  var b = w / (2.0 + Math.sqrt(2.0));
  var s = Math.sqrt(2.0) * b;
  var vertices = [];
  vertices[0] = Vec2(0.5 * s, 0.0);
  vertices[1] = Vec2(0.5 * w, b);
  vertices[2] = Vec2(0.5 * w, b + s);
  vertices[3] = Vec2(0.5 * s, w);
  vertices[4] = Vec2(-0.5 * s, w);
  vertices[5] = Vec2(-0.5 * w, b + s);
  vertices[6] = Vec2(-0.5 * w, b);
  vertices[7] = Vec2(-0.5 * s, 0.0);
  var polygon1 = pl.Polygon(vertices);

  var fixdef0 = {};
  fixdef0.density = 1.0;
  fixdef0.friction = 0.3;
  body0.createFixture(polygon1, fixdef0);


  var circle = pl.Circle(0.8);

  function Create() {

    var bd = {};
    bd.type = 'dynamic';

    var x = Math.random() * 0.4 - 2.0;
    bd.position = Vec2(x, 20.0);
    bd.angle = Math.random() * 2 * Math.PI - Math.PI;
    bd.angularDamping = 0.02;
    body = world.createBody(bd); {
      var fd = {};
      fd.density = 1.0;
      fd.friction = 0.3;
      fd.restitution = 0.5;

      body.createFixture(circle, fd);
    }
  }

  testbed.keydown = function(code, char) {
    Create();
  };
  
  testbed.mousedown = function(code, char) {
    Create();
  };  
  

  return world;
});