title: Why is my image rotating off center?
body: <p>I'm using Java/Slick 2D to play with graphics and using the mouse to rotate an image. Something strange happens though: the image doesn't necessarily face the mouse. At 45 degrees from the normal line it does, but the further you get, the further your are off. See the images below (the white circle being the mouse, the text being the angle):
  <img src="https://i.stack.imgur.com/tjDKz.png" alt="Image at 80 degrees">
  <img src="https://i.stack.imgur.com/6xtGS.png" alt="Image at 45 degrees"></p>
  
  <p>Here is the rotation code I used:</p>
  
  <pre><code>int mX = Mouse.getX();
          int mY = HEIGHT - Mouse.getY();
          int pX = sprite.x;
          int pY = sprite.y;
          int tempY, tempX;
          double mAng, pAng = sprite.angle;
          double angRotate=0;
  
          if(mX!=pX){
              mAng = Math.toDegrees(Math.atan2(mY - pY, mX - pX));
              if(mAng==0 &amp;&amp; mX&lt;=pX)
                  mAng=180;
          }
          else{
              if(mY&gt;pY)
                  mAng=90;
              else
                  mAng=270;
          }
  
          sprite.angle = mAng;
          sprite.image.setRotation((float) mAng);     
  </code></pre>
  
  <p>Any ideas what's going on? I'm assuming it has something to do with the fact that the image coordinates come from the top left, but I don't know how to counter it. FYI: screen 640x460, image 128x128 and centered in window.</p>
  
  <p>EDIT: Unfortunately, nothing there really worked. Here is a picture with some more information:</p>
  
  <p><img src="https://i.stack.imgur.com/fhlrM.png" alt="Arrow at 35 degrees"></p>
  
  <p>EDIT2: Found the answer! had to change: int px/py = sprite.x/y to </p>
  
  <pre><code>        int pX = sprite.x+sprite.image.getWidth()/2;
      int pY = sprite.y+sprite.image.getHeight()/2;
  </code></pre>