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: 416
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