Matrix rotation of a rectangle to "face" a given point in 2d

Posted by justin.m.chase on Game Development See other posts from Game Development or by justin.m.chase
Published on 2012-03-30T16:09:10Z Indexed on 2012/03/30 17:44 UTC
Read the original article Hit count: 389

Filed under:
|
|
|

Suppose you have a rectangle centered at point (0, 0) and now I want to rotate it such that it is facing the point (100, 100), how would I do this purely with matrix math?

To give some more specifics I am using javascript and canvas and I may have something like this:

var position = {x : 0, y: 0 };
var destination = { x : 100, y: 100 };
var transform = Matrix.identity();

this.update = function(state) {

  // update transform to rotate to face destination

};

this.draw = function(ctx) {
  ctx.save();
  ctx.transform(transform); // a helper that just calls setTransform()      
  ctx.beginPath();
  ctx.rect(-5, -5, 10, 10);
  ctx.fillStyle = 'Blue';
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.stroke();
  ctx.restore();
}

Feel free to assume any matrix function you need is available.

© Game Development or respective owner

Related posts about JavaScript

Related posts about matrix