Collision with Chipmunk JS failing

Question

http://videobin.org/+70a/8wi.html

You can see what's happening there, and a demo to try it here: http://student.dei.uc.pt/~drgomes/carry/index.html.

So, I'm using Chipmunk JS demos to get an idea of how it works (see https://github.com/josephg/Chipmunk-js). The simple demo starts alright but then things start jumping crazily and I've been trying to figure out this with no luck so far.

var radToDeg = 180 / Math.PI;

function PlayState() {
  this.blocks = [];

  this.setup = function() {
    space.iterations = 100;
    space.gravity = new cp.Vect(0, 150);
    space.game = this;

    this.ground = space.addShape(new cp.SegmentShape(space.staticBody, new cp.v(0, 480), new cp.v(640, 480), 0));
    this.ground.setElasticity(0);
    this.ground.setFriction(1);
  };

  this.update = function() {
    space.step(this.dt);

    for (var i = 0; i < this.blocks.length; i++) {
      var block = this.blocks[i];
      block.sprite.x = block.body.p.x;
      block.sprite.y = block.body.p.y;
      block.sprite.angle = block.body.a * radToDeg;
    }

    if (isMouseDown("left")) {
      if (this.canAddBlock) {
        this.canAddBlock = false;
        this.addBlock(mouseX, mouseY);
      }
    } else {
      this.canAddBlock = true;
    }
  };

  this.draw = function() {
    clearCanvas();

    for (var i = 0; i < this.blocks.length; i++) {
      this.blocks[i].sprite.draw();
    }

    // this.ground.sprite.draw();
  };

  this.addBlock = function(x, y) {
    width = 64;
    height = 64;

    var newBlock = new Block(x, y, width, height);

    newBlock.body = space.addBody(new cp.Body(1, cp.momentForBox(1, width, height)));
    newBlock.body.setPos(new cp.v(x, y));
    newBlock.shape = space.addShape(new cp.BoxShape(newBlock.body, width, height));
    newBlock.shape.setElasticity(0);
    newBlock.shape.setFriction(1);
    this.blocks.push(newBlock);
  };
}

desiredFPS = 60;
switchState(new PlayState());

The source code is pretty straightforward, I have my doubts about the way I'm creating the ground since I can't really tell in what position it actually is. The cubes seem to find it and collide against it though.

The other source file is a little Block class to help me organize things:

Block = (function() {
  function constructor(x, y, width, height) {
    this.sprite = new Sprite("res/block.png", x, y);

    this.width = width;
    this.height = height;

  }

  constructor.prototype = {
    update: function() {

    }
  };

  return constructor;
})();

Answer 1

From watching the behavior, I think it is as simple as the sprites and the chipmunk bodies not rotating around the same point. I believe chipmunk rotations are around the center of mass. It looks like the sprites are rotating around the upper left corner. In fact, they may be drawing from that corner too, which explains why they stack funny, and intersect the bottom plane.

I think you need something like this in the update function. (pseudocode):

offset = Vector(-width/2,-height/2) 
offset.rotate_by(block.body.a)

block.sprite.x = block.body.p.x + offset.x
block.sprite.y = block.body.p.y + offset.y