How to rotate an image like in graphic apps

[RatchetParticipant]

I got kind of a graphical app where the user can add images and can place it on the screen with drag and drop anywhere. Simple stuff, guess I don’t have to explain, how it works.
Now I want let the user to rotate the image like you can so in most graphical apps. See the attached GIF/MP4, please.

First problem: I can’t select the image anymore just by checking if the mouse position inside the image’s rect. Now the rect might be rotated and is more like an polygon. Ok, I know how to check the if a point inside a polygon, BUT

Second problem: How to rotate a polygon?

Then more you think about it, then more problems are coming out.

Does anyone got a good idea how to do this rotation stuff?

Attachments:

1. 

   ezgif-1-5d37bebd98.gif
   

1. rotate.mp4

[abakoboParticipant]

The most common way to do this is to use matrix transform. It’s what mojo uses. There is an affineMat3 class wich is usable for rotate/size/translate transforms. Matrices are your friends, this is the most usefull Math stuff you can have for video games after trigonometry..

[abakoboParticipant]

here’s a little example of a transformable poly that can be enhanced to get what you need, you can add size too..

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Struct TransformablePoly 'I'll assume here that center of polys are [0,0] so I'll wrap arround origin while creating them Field transfoMat:AffineMat3f Private Field _nbVertices:int Field _vertices:Vec2f[] Public Method New(verts:Vec2f[]) _vertices=verts _nbVertices=_vertices.GetSize(0) 'getting the number of vec2f in the array transfoMat=New AffineMat3f() End Method GetTransformedXYArray:Float[]() 'to be used with DrawPoly (it does not accepts vec2f!) Local outputArray:=New Float[_nbVertices*2] Local TranformedVec2:=GetTransformedVec2fPoly() 'getting the tranformed poly in a Vec2f array For Local i:=0 Until _nbVertices outputArray[2*i]=TranformedVec2[i].x outputArray[2*i+1]=TranformedVec2[i].y Next Return outputArray 'ouputing transformed poly in a x/y Float array (for drawpoly) End Method GetTransformedVec2fPoly:Vec2f[]() 'Transforms all the vertices with the AffineMat3 Local outputArray:=New Vec2f[_nbVertices] For Local i:=0 Until _nbVertices outputArray[i]=transfoMat.Transform(_vertices[i]) Next Return outputArray End End Class MyWindow Extends Window Field poly1:TransformablePoly Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) ' The polys are initialised with (0,0) as their (rotation and scale) center, it the easiest way to "view" with matrix poly1=New TransformablePoly(New Vec2f[](New Vec2f(-10.0,-10.0), New Vec2f(10.0,-10.0), New Vec2f(10.0,10.0), New Vec2f(-10.0,10.0))) 'a square in polygon format (center at 0,0) ' Here is the interresting stuff !!! ' The order of the transforms has it's importance! ' It looks like we first translate then rotate BUT NOT!!!!!!!! ' Think it as a stack: Last in = First out ' ' Having the rotation as the first transform is more intuitive because ' the center of the poly will have the corresponding translate position poly1.transfoMat=poly1.transfoMat.Translate(100,100) 'second transform poly1.transfoMat=poly1.transfoMat.Rotate(Pi/4) 'rotation arrond (0,0)! , first transform ' this should be implemented into the struct to have something like "poly1.Translate(100,100)" ' and voilà! you have a transformable poly... End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawPoly(poly1.GetTransformedXYArray()) End End Function Main() New AppInstance New MyWindow App.Run() End

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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Struct TransformablePoly  'I'll assume here that center of polys are [0,0] so I'll wrap arround origin while creating them   Field transfoMat:AffineMat3f Private Field _nbVertices:int Field _vertices:Vec2f[]   Public Method New(verts:Vec2f[]) _vertices=verts _nbVertices=_vertices.GetSize(0) 'getting the number of vec2f in the array transfoMat=New AffineMat3f() End Method GetTransformedXYArray:Float[]()  'to be used with DrawPoly (it does not accepts vec2f!)   Local outputArray:=New Float[_nbVertices*2] Local TranformedVec2:=GetTransformedVec2fPoly() 'getting the tranformed poly in a Vec2f array For Local i:=0 Until _nbVertices outputArray[2*i]=TranformedVec2[i].x outputArray[2*i+1]=TranformedVec2[i].y Next Return outputArray 'ouputing transformed poly in a x/y Float array (for drawpoly) End Method GetTransformedVec2fPoly:Vec2f[]() 'Transforms all the vertices with the AffineMat3 Local outputArray:=New Vec2f[_nbVertices] For Local i:=0 Until _nbVertices outputArray[i]=transfoMat.Transform(_vertices[i]) Next Return outputArray End End   Class MyWindow Extends Window Field poly1:TransformablePoly   Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )   Super.New( title,width,height,flags ) ' The polys are initialised with (0,0) as their (rotation and scale) center, it the easiest way to "view" with matrix poly1=New TransformablePoly(New Vec2f[](New Vec2f(-10.0,-10.0), New Vec2f(10.0,-10.0), New Vec2f(10.0,10.0), New Vec2f(-10.0,10.0))) 'a square in polygon format (center at 0,0)     ' Here is the interresting stuff !!! ' The order of the transforms has it's importance! ' It looks like we first translate then rotate BUT NOT!!!!!!!! ' Think it as a stack: Last in = First out ' ' Having the rotation as the first transform is more intuitive because ' the center of the poly will have the corresponding translate position   poly1.transfoMat=poly1.transfoMat.Translate(100,100) 'second transform poly1.transfoMat=poly1.transfoMat.Rotate(Pi/4) 'rotation arrond (0,0)! , first transform ' this should be implemented into the struct to have something like "poly1.Translate(100,100)" ' and voilà! you have a transformable poly...   End   Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawPoly(poly1.GetTransformedXYArray()) End End   Function Main()   New AppInstance New MyWindow App.Run() End

you can extract translate,rotate and size from a AffineMat3 too if you need. see http://monkeycoder.co.nz/forums/topic/matrix-scale/

[abakoboParticipant]

Here is a much more intuitive form of Tpoly.. It’s using position, angle and scale fields instead of affineMat3. But is of course internally using an affineMat3 to transform the original poly (centered at the origin, you could add a center/handle field too and make one more translation to center it to the origin before rotating/scaling).

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Struct TransformablePoly 'I'll assume here that center of polys are [0,0] so I'll wrap arround origin while creating them Field position:=New Vec2f() Field scale:=1.0 Field angle:=0.0 Private Field _nbVertices:int Field _vertices:Vec2f[] Public Method New(verts:Vec2f[]) _vertices=verts _nbVertices=_vertices.GetSize(0) 'getting the number of vec2f in the array End Method GetTransformedVec2fPoly:Vec2f[]() 'Transforms all the vertices with AffineMat3 ' creating a transformation matrix Local transfo:=New AffineMat3f() transfo=transfo.Translate(position) 'third transform transfo=transfo.Scale(scale,scale) 'around (0,0) , second transform transfo=transfo.Rotate(angle) 'rotation arrond (0,0)! , first transform 'transforming the vertices Local outputArray:=New Vec2f[_nbVertices] For Local i:=0 Until _nbVertices outputArray[i]=transfo.Transform(_vertices[i]) Next Return outputArray End Method GetTransformedXYPoly:Float[]() 'to be used with DrawPoly (it does not accepts vec2f!) Local outputArray:=New Float[_nbVertices*2] Local TranformedVec2:=GetTransformedVec2fPoly() 'getting the tranformed poly in a Vec2f array For Local i:=0 Until _nbVertices outputArray[2*i]=TranformedVec2[i].x outputArray[2*i+1]=TranformedVec2[i].y Next Return outputArray 'ouputing transformed poly in a x/y Float array (for drawpoly) End End Class MyWindow Extends Window Field poly1:TransformablePoly Field count:=0 Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) poly1=New TransformablePoly(New Vec2f[](New Vec2f(-10.0,-10.0), New Vec2f(10.0,-10.0), New Vec2f(10.0,10.0), New Vec2f(-10.0,10.0))) 'a square in polygon format (center at 0,0) End Method OnRender( canvas:Canvas ) Override App.RequestRender() count+=1 If count>400 Then count=10 poly1.angle=count/100.0 poly1.position=New Vec2f(count,count) poly1.scale=1.5-Sin(count/60.0) canvas.DrawPoly(poly1.GetTransformedXYPoly()) End End Function Main() New AppInstance New MyWindow App.Run() End

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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Struct TransformablePoly  'I'll assume here that center of polys are [0,0] so I'll wrap arround origin while creating them   Field position:=New Vec2f() Field scale:=1.0 Field angle:=0.0 Private Field _nbVertices:int Field _vertices:Vec2f[]   Public Method New(verts:Vec2f[]) _vertices=verts _nbVertices=_vertices.GetSize(0) 'getting the number of vec2f in the array   End Method GetTransformedVec2fPoly:Vec2f[]() 'Transforms all the vertices with AffineMat3 ' creating a transformation matrix Local transfo:=New AffineMat3f() transfo=transfo.Translate(position) 'third transform transfo=transfo.Scale(scale,scale) 'around (0,0) , second transform transfo=transfo.Rotate(angle) 'rotation arrond (0,0)! , first transform 'transforming the vertices Local outputArray:=New Vec2f[_nbVertices] For Local i:=0 Until _nbVertices outputArray[i]=transfo.Transform(_vertices[i]) Next Return outputArray End Method GetTransformedXYPoly:Float[]()  'to be used with DrawPoly (it does not accepts vec2f!)   Local outputArray:=New Float[_nbVertices*2] Local TranformedVec2:=GetTransformedVec2fPoly() 'getting the tranformed poly in a Vec2f array For Local i:=0 Until _nbVertices outputArray[2*i]=TranformedVec2[i].x outputArray[2*i+1]=TranformedVec2[i].y Next Return outputArray 'ouputing transformed poly in a x/y Float array (for drawpoly) End End   Class MyWindow Extends Window Field poly1:TransformablePoly Field count:=0   Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )   Super.New( title,width,height,flags )   poly1=New TransformablePoly(New Vec2f[](New Vec2f(-10.0,-10.0), New Vec2f(10.0,-10.0), New Vec2f(10.0,10.0), New Vec2f(-10.0,10.0))) 'a square in polygon format (center at 0,0)     End   Method OnRender( canvas:Canvas ) Override App.RequestRender() count+=1 If count>400 Then count=10 poly1.angle=count/100.0 poly1.position=New Vec2f(count,count) poly1.scale=1.5-Sin(count/60.0) canvas.DrawPoly(poly1.GetTransformedXYPoly()) End End   Function Main()   New AppInstance New MyWindow App.Run() End

[nerobotParticipant]

You can rotate images by canvas.DrawImage( image:Image,tx:Float,ty:Float,rz:Float ) where rz is rotation angle.

Also you need to use image.Handle property to setup rotation anchor for image.

For detection images by click you can use polygon / rect function like that  or even chipmunk physics collider (I want to use it for complex shapes, but didn’t try yet).

[abakoboParticipant]

Now the rect might be rotated and is more like an polygon. Ok, I know how to check the if a point inside a polygon, BUT

Second problem: How to rotate a polygon?

If you only want rotated rects then nerobot’s solution is probably better (more monkeyish)

[RatchetParticipant]

Great, thank you so much. That will do it.

I thought about Chipmunk, too. But I guess it’s way oversized for that “simple” stuff I need it for.

[Author]

Posts