Point.rotate() confusion - results not what I expect

[robotron9000]

Hi there. I'm new here.

In the game I'm working on I've got an "arm" with an upper portion that rotates around from its shoulder, and then a second sprite that is the lower part of the arm that connects at the "elbow". I'm using Point.rotate() to find the location of the "elbow" (the end of the sprite for the upper arm), so I can set that as the spot for the anchor of the lower arm sprite

I think I don't really understand how it works, because for some reason I need to subtract about 0.27 radians from the upper arm's angle in order to get the two to meet at the elbow... Why would this be? It doesn't really matter, since I have the result that I want, but I just want to know why it is. 

Arm = function () {
    this.group = game.add.group();
    this.upper_arm = game.add.sprite(1200, 300, 'arm_segment');
    this.upper_arm.anchor = new Phaser.Point(1, 0.5);
    this.lower_arm = game.add.sprite(0, 0, 'arm_segment');
    this.lower_arm.anchor = new Phaser.Point(1, 0.5);

    this.update = function(dt) {
        this.upper_arm.rotation += 0.4 * dt;
        var lower_arm_pos = new Phaser.Point();
        // Angle offset needed of -0.27 to make the lower arm and upper arm meet. Why??
        lower_arm_pos.rotate(this.upper_arm.x, this.upper_arm.y, this.upper_arm.rotation - 0.270, 
            false, this.upper_arm.width);
        this.lower_arm.pos = lower_arm_pos;
    };
};

P.S. I failed high school math. Go easy on me 

[samme]

Try game.debug.pixel(x, y) on every relevant point.

[samid737]

Should be the extra rotation required to align the two arms (height offset):

about 15 degrees ~= 0.25 rad--->  you can check this with  

 

Phaser.Math.angleBetweenPoints(lower_arm_pos,this.upper_arm)

If you want them to meet exactly use that result:

[robotron9000]

Thanks so much for your advice both of you.

I played about with it a bit and figured it out. I was missing something very obvious. When you create a Point and rotate it, it seems it rotates around the spot it was created at. To get the behaviour I wanted, I should have been creating the point at the elbow. So my code should have been like:

this.update = function(dt) {
  this.upper_arm.rotation += 0.4 * dt;
  var lower_arm_pos = new Phaser.Point(this.upper_arm.x, this.upper_arm.y);
  lower_arm_pos.rotate(this.upper_arm.x, this.upper_arm.y, this.upper_arm.rotation, 
    false, this.upper_arm.width);
  this.lower_arm.pos = lower_arm_pos;
};  

 

Here's a simple version working like it should:

 

https://jsfiddle.net/robotron9000/vktsouot/