I have some hard time making the rotation of an image equal to the rotation object that the image belongs to. Simply put it, I don't know how to do it properly but i am not asking for a how-to guide but for some tips/hint and/or infos that i am not aware of...

I was able to align perfectly the image with the object, and so if the object moves in a linear fashion the image is at all times on top of the object and everything is smooth and perfect. But how is it possible to make the rotation of the image be the same as of the object it belongs to.

No-matter what i tried it is always somewhat off or the rotation of the image behaves weird when in the end the object stops rotating. I tried using using GetAngle(), GetAngularVelocity(), combinations of both, but never succeeded.

function Draw_and_Rotate(){
   for (b = world.GetBodyList() ; b; b = b.GetNext()){
      var angle = ((b.GetAngle()*180)/(Math.PI))/SCALE;
      var angle_vel = ((b.GetAngularVelocity()*180)/(Math.PI))/SCALE;
      var pos = b.GetPosition();
      if (b.GetUserData() == "bo_img"){
         ctx.save();//save the ctx state prior changing it.This method pushes the current state onto the stack.
         ctx.translate(pos.x*SCALE , pos.y*SCALE );
         ctx.drawImage(box_img, - (box_img.width / 2), - (box_img.height / 2));
         ctx.restore();//restoring ctx state.This method pops the TOP state on the stack, restoring the context to that state.


this is the part that deals only with one body and its image. If someone needs some more clarification please ask....


replace this line: var angle = ((b.GetAngle()*180)/(Math.PI))/SCALE; with this: var angle = b.GetAngle();

the input parameter in ctx.rotate should be in radians, so there is no need to convert it in your code in any way. The output of b.GetAngle() is in radians.

| improve this answer | |
  • \$\begingroup\$ I don't know how could i missed such a thing.... rotate is in radians!!!! \$\endgroup\$ – Anamed Dec 9 '14 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.