How To rotate a image on a different image center

[espruino-discuss]

Posted at 2020-03-09 by @MaBecker

This might be helpful if design own hour and minutes hands for a watch.

Having a green laser sword and want to rotate it on my Bangle.js around xm=120 and ym=120.

// width : 15, height : 106, bpp : 8,
var greenLaser = 
require("heatshrink").decompress(atob("h9qxH+AAvW1my64KGAAXX1eGwwOK2NasFaw3WBxVhsAOe2QOI1dgsI7BBxHWByIsKDqeFBxOHBwNhBxodK2WGO4QOaHZgOF1gOMsOxBzdgBxOFBwZKJByVaBzJYCrRKJBoQOLOwYOKYIIOR1YOO64ON6wOLsAONDpOrNAYdJ2IOM6+xHYmHByvW1YOEwwOOcIwOQLIgdXw7vEBxodI2WGB0WFBxBZEBx+sFhoOIDodhBxGFDoYABBzlgBxtaNA4YBBxg6FBxNgrQADfxGr2QAEBwoAO6+sAAvXBo1WAAeBqwQBBwmBgAAFqweCFIVWBw4vCBgUrBw0rlYQBFI4AFwIPBIgIACJIRODJgJlGAAqEQCQIsDAAodCM5BaCByIPBFhLQSM5S0DwKbBAAxZEWQ4ACBwaeEDpA8KK6R1JUobvOfx4OqNgIO/B34O/Bx7gClYOLwIdOwNWDxFWq2s/3X69WF4gDBBgINBAAPXF4+B64NCAAIvBAAobD"));

const p180 = Math.PI/180;
// three o'clock : 90°
var a = 90;
g.drawImage(greenLaser,120,120,{rotate:a*p180});

As the image center is not the center you like as center for your rotation it it necessary to add some corrections . The new center in this case is centerX/Y =121 which is a rotation on a circle xm=120, ym=120, r=21

const p180 = Math.PI/180;
var a = 90;
var r =21; 
var x = r * Math.sin(a*p180);
var y = r * Math.cos(a*p180);
g.drawCircle(120,120,21);
g.drawImage(greenLaser,120+x,120+y,{rotate:a*p180});

---

Attachments:

• green-laser-small.png
  
• screenshot_2.png
  
• screenshot_1.png

[gfwilliams]

Posted at 2020-03-09 by @gfwilliams

Nice - thanks!