Rotating a rectangle using the matrix

[PhatPeterParticipant]

The following example shows how to rotate a rectangle without any trigonometry.

It uses only matrix hardware commands (translate & rotate) and can be used to rotate sprites drawn using DrawRect, which has no inbuilt rotation parameter.

Monkey

[crayon-5cb9cc1cc52c3666947540 inline="true" ] Namespace Myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Myapp Extends Window Method New() Super.New("Window",1920,1080,WindowFlags.Resizable) End Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() ' ************************************************************** ' Using matrix to rotate rectangle ' ' Rectangle (x,y,w,h) x,y refers to the middlepoint Local r:Float = Millisecs()*.0003 ' Rotation in radians Local x:Float = App.MouseLocation.x ' x position of rectangle Local y:Float = App.MouseLocation.y ' y position of rectangle Local w:Int = 500 ' Width of rectangle Local h:Int = 100 ' Height of rectangle Local rx :Float = -(w * 0.5) ' Calculate the handle for x (0.5 = middle) Local ry :Float = -(h * 0.5) ' Calculate the handle for y (0.5 = middle) canvas.PushMatrix() canvas.DrawLine(x,0,x,1080-1) canvas.DrawLine(0,y,1920-1,y) ' canvas.Translate((-x-w)/2.0,(-y-h)/2.0) ' canvas.Rotate(r) ' canvas.Translate((x+w)/2.0,(y+h)/2.0) ' canvas.DrawRect(0,0,w,h) canvas.Translate(x,y) canvas.Rotate(r) canvas.DrawRect(rx,ry,w,h) canvas.PopMatrix() ' ************************************************************** End Method End Function Main() New AppInstance New Myapp App.Run() End Function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

[crayon-5cb9cc1cc52c3666947540 inline="true" ] Namespace Myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Myapp Extends Window Method New() Super.New("Window",1920,1080,WindowFlags.Resizable) End Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() ' ************************************************************** '  Using matrix to rotate rectangle ' ' Rectangle (x,y,w,h) x,y refers to the middlepoint Local r:Float = Millisecs()*.0003 ' Rotation in radians Local x:Float = App.MouseLocation.x ' x position of rectangle Local y:Float = App.MouseLocation.y ' y position of rectangle Local w:Int = 500 ' Width of rectangle Local h:Int = 100 ' Height of rectangle Local rx :Float  = -(w * 0.5) ' Calculate the handle for x (0.5 = middle) Local ry :Float = -(h * 0.5) ' Calculate the handle for y (0.5 = middle) canvas.PushMatrix() canvas.DrawLine(x,0,x,1080-1) canvas.DrawLine(0,y,1920-1,y) ' canvas.Translate((-x-w)/2.0,(-y-h)/2.0) ' canvas.Rotate(r) ' canvas.Translate((x+w)/2.0,(y+h)/2.0) ' canvas.DrawRect(0,0,w,h) canvas.Translate(x,y) canvas.Rotate(r) canvas.DrawRect(rx,ry,w,h) canvas.PopMatrix() ' ************************************************************** End Method End Function Main() New AppInstance New Myapp App.Run() End Function

[/crayon]

[nerobotParticipant]

The same result via canvas extension:

Monkey

Class Canvas Extension ' func - is a function that will do needed drawing stuff ' it is affected with translate/rotate/scale Method DrawFunc( func:Void(canvas:Canvas),x:Float,y:Float,rot:Float=0,sx:Float=1,sy:Float=1 ) Local canvas:=Self canvas.PushMatrix() canvas.Translate( x,y ) canvas.Rotate( rot ) canvas.Scale( sx,sy ) ' call our drawing function func( canvas ) canvas.PopMatrix() End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Class Canvas Extension ' func - is a function that will do needed drawing stuff ' it is affected with translate/rotate/scale Method DrawFunc( func:Void(canvas:Canvas),x:Float,y:Float,rot:Float=0,sx:Float=1,sy:Float=1 ) Local canvas:=Self canvas.PushMatrix() canvas.Translate( x,y ) canvas.Rotate( rot ) canvas.Scale( sx,sy ) ' call our drawing function func( canvas ) canvas.PopMatrix() End End

and adapted buildable example:

Monkey

Namespace Myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Myapp Extends Window Method New() Super.New( "Window",800,600,WindowFlags.Resizable ) End Method OnRender( canvas:Canvas ) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() Local x:Float = App.MouseLocation.x ' x position of rectangle Local y:Float = App.MouseLocation.y ' y position of rectangle Local r:Float = Millisecs()*.0003 ' Rotation in radians Local sx:Float = Cos( Millisecs()*.0003 ) ' x scale Local sy:Float = Sin( Millisecs()*.0003 ) ' y scale ' draw cross at cursor canvas.DrawLine( x,0,x,Self.Height ) canvas.DrawLine( 0,y,Self.Width,y ) ' use our extension function here canvas.DrawFunc( DrawAll,x,y,r,sx,sy ) App.RequestRender() End ' all our drawing logic that will be translated/rotated/scaled ' here: draw single rectangle Method DrawAll( canvas:Canvas ) Local w:Int = 500 ' Width of rectangle Local h:Int = 100 ' Height of rectangle Local rx :Float = -(w * 0.5) ' Calculate the handle for x (0.5 = middle) Local ry :Float = -(h * 0.5) ' Calculate the handle for y (0.5 = middle) canvas.DrawRect(rx,ry,w,h) End End Class Canvas Extension ' func - is a function that will do needed drawing stuff ' it is affected with translate/rotate/scale Method DrawFunc( func:Void(canvas:Canvas),x:Float,y:Float,rot:Float=0,sx:Float=1,sy:Float=1 ) Local canvas:=Self canvas.PushMatrix() canvas.Translate( x,y ) canvas.Rotate( rot ) canvas.Scale( sx,sy ) ' call our drawing function func( canvas ) canvas.PopMatrix() End End Function Main() New AppInstance New Myapp App.Run() End Function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

Namespace Myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Myapp Extends Window Method New() Super.New( "Window",800,600,WindowFlags.Resizable ) End Method OnRender( canvas:Canvas ) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() Local x:Float = App.MouseLocation.x ' x position of rectangle Local y:Float = App.MouseLocation.y ' y position of rectangle Local r:Float = Millisecs()*.0003 ' Rotation in radians Local sx:Float = Cos( Millisecs()*.0003 ) ' x scale Local sy:Float = Sin( Millisecs()*.0003 ) ' y scale ' draw cross at cursor canvas.DrawLine( x,0,x,Self.Height ) canvas.DrawLine( 0,y,Self.Width,y ) ' use our extension function here canvas.DrawFunc( DrawAll,x,y,r,sx,sy ) App.RequestRender() End ' all our drawing logic that will be translated/rotated/scaled ' here: draw single rectangle Method DrawAll( canvas:Canvas ) Local w:Int = 500 ' Width of rectangle Local h:Int = 100 ' Height of rectangle Local rx :Float  = -(w * 0.5) ' Calculate the handle for x (0.5 = middle) Local ry :Float = -(h * 0.5) ' Calculate the handle for y (0.5 = middle) canvas.DrawRect(rx,ry,w,h) End End   Class Canvas Extension ' func - is a function that will do needed drawing stuff ' it is affected with translate/rotate/scale Method DrawFunc( func:Void(canvas:Canvas),x:Float,y:Float,rot:Float=0,sx:Float=1,sy:Float=1 ) Local canvas:=Self canvas.PushMatrix() canvas.Translate( x,y ) canvas.Rotate( rot ) canvas.Scale( sx,sy ) ' call our drawing function func( canvas ) canvas.PopMatrix() End End     Function Main() New AppInstance New Myapp App.Run() End Function

[AdamStrangeParticipant]

mmmm.
The first example, nice simple readable code
The second ‘extension’ code is really (sorry to say it) horrible. much more complex, going into the ‘information hiding’ territory.

I would have thought that code should be simple (for those) to understand?

[nerobotParticipant]

I just shown another point of view. I don’t use such code in my projects.

[Author]

Posts