Rotate a drawing using atan2

[Scott Ferguson]

We can rotate ImageSprites by changing the Heading or using PointInDirection or PointTowards.

But what about rotating a drawing?

 

This project provides one method of rotating a drawn arrow using the atan2 Math block and was inspired by this YouTube video.

The process is basically to call a procedure that clears the canvas, then draws the arrow pointing at a touched or dragged position.

The atan2 function is used to get the angle between the drawing's x,y and the touched or dragged x,y positions.

That angle is then used by the procedure DrawArrow to draw the arrow.

The procedure MoveXYH moves a specified Distance and at a specified angle, optionally drawing a line as well using the sin and cos Math blocks.

Four calls to MoveXYH result in the arrow being drawn at the specified angle.

A stack is used to save and recall the X, Y and H (heading) values when drawing the arrow to simplify the process.

Pseudocode for drawing the arrow:

(assume H = 0)

clear the canvas

save x,y,h (starting position of the arrow)

move -25 px at the current angle (shift arrow 25 px to the left so when the arrow rotates it will rotate in the center of the 50 px shaft)

draw a line 50 px long at the current angle (main shaft of the arrow)

save x,y,h (remember this position and heading at the end of the drawn shaft)

draw a line 10 px long at 150 degrees (counter-clockwise) relative to this point (top of arrow point)

restore the saved x,y,h values (back at the end of the shaft again)

draw a line 10 px long at -150 degrees (clockwise) relative to this point (bottom of arrow point)

restore the saved x,y,h values (back at the end of the shaft again)

restore the saved x,y,h values (back at the starting position)