p2.js soft wheel vehicle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p2.js/0.7.1/p2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p2.js/0.7.1/p2.renderer.min.js"></script>
<!--

Read the tutorial in the blog post:

http://steffe.se/?p=1737

-->

CSS

html,body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow: hidden;
}

JavaScript

var N = 16, // Number of capsules in a wheel
    r = 1, // Radius of the wheel
    thickness = 0.18; // Thickness of the wheel capsules

var app = new p2.WebGLRenderer(function(){

  // Create the world
  var world = new p2.World({
    gravity : [0,-5]
  });
  this.setWorld(world);

  // Create a contact material between ground and wheels
  // We need to do this to add some extra friction
  var groundMaterial = new p2.Material();
  var wheelMaterial = new p2.Material();
  var groundWheelContactMaterial = new p2.ContactMaterial(groundMaterial, wheelMaterial, {
    friction: 30
  });
  world.addContactMaterial(groundWheelContactMaterial);

  // Create wheels
  var wheelBodyA = createWheel(world, [-2.2 * r, 0], wheelMaterial);
  var wheelBodyB = createWheel(world, [2.2 * r, 0], wheelMaterial);

  // Create chassis
  var chassisBody = new p2.Body({ mass : 1, position:[-0.3 * r, 2.2 * r] });
  chassisBody.addShape(new p2.Capsule({ // Capsule below the chassis
    length: 1.8 * r,
    radius: r * 0.6
  }), [r * 0.5,-r * 0.4], -0.1);
  chassisBody.addShape(new p2.Capsule({ // First capsule above the trunk
    length: 1.8 * r,
    radius: r * 0.1
  }), [-r*0.4,r*0.6], Math.PI/2);
  chassisBody.addShape(new p2.Capsule({ // Second capsule above the trunk
    length: 1.8 * r,
    radius: r * 0.1
  }), [-r*0.2,r*0.6], Math.PI/2);
  chassisBody.addShape(new p2.Capsule({ // Inclined capsule above the trunk
    length: 1.8 * r,
    radius: r * 0.1
  }), [-r*1.4,r*1], Math.PI/7);
  chassisBody.addShape(new p2.Convex({ // Main chassis shape
    vertices: [
      [3.5*r, -0.6*r],
      [3.7*r, -0.4*r],
      [3.6*r, 0.5*r],
      [3.3*r, 0.6*r],
      [-3.5*r, 0.6*r],
      [-3.55*r, -0.1*r],
      [-3.4*r, -0.6*r]
    ],
    width: 3.5*r*2,
    height: 0.6 * r * 2
  }));
  chassisBody.addShape(new p2.Convex({ // Top "window"
    vertices: [
      [r, -0.5 * r],
      [0.3 * r, 0.5 * r],
      [-r, 0.5 * r],
      [-r * 1.1, -0.5 * r]
    ]
  }), [r,0.55 * r * 2], 0);
 ...