• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

[SOLVED]How to rotate and scale the canvas at the center point?

ddabrahim

Active member
Tutorial Author
Joined
May 3, 2020
Messages
289
Hi.

I'm trying to implement a 2D camera in mojo2 and manipulate it using the PushMatrix, PopMathix methods of the Canvas, it is works okay if all I want is change the position because I can easily apply offset to the position to keep it centered, however when I rotate and scale the render I noticed it is being rotated scaled at the top left corner. What I would like to do is rotate and scale it around the center instead but can't really find any obvious way to do this. Could anyone please give me some hints how to go about rotating and scaling the render around the center point instead of the top left corner of the screen?

Thank you.
 
Last edited:
I think you have to use Translate() to shift the origin to where you want it first. If I remember correctly there is a best order of translate, rotate, scale to avoid funny surprises.
 
Thank you for the reply however I don't think I understand how to change the origin exactly. Regardless where I shift the render using Translate(), when I rotate, it is rotate within the top left corner.

I have 1 image drawn on the screen at position 0,0

And this is my code:

Cerberus:
Method OnUpdate()
    camRotation += 0.5
End

Method OnRender()
    myCanvas.Clear(0,0,1,1)
  
    myCanvas.PushMatrix()
  
    myCanvas.Translate(myCanvas.Width/2, myCanvas.Height/2)
    myCanvas.Rotate(camRotation)
  
    myCanvas.DrawImage(boxImg,0,0) 

    myCanvas.PopMatrix()
  
    myCanvas.Flush()
End

This is the result (GIF):
result.gif


If it was rotating at the center the box should stay at the middle of the screen but it is not. It is rotating at the op left corner.
I'm not sure how and what am I supposed to do :confused:

I also don't really want to screw up the coordinate system so if I set an object to position 0,0 I expect it to be at the top left part of the screen while the camera still rotating at the center point but as you can see on the gif, I got the image drawn at the center when I set the position to 0,0..etc I'm not sure how to use Translate() right.
 
Thanks. But changing the order still did not work, it is now looks like rotating at bottom left corner instead? I can't tell, looks different but still not what I'm looking for.

What I'm after really is to be able to draw the image at position 320, 240 which is the center of the screen and being able to rotate the camera while the image remain at the center and basically just spinning but this time I don't rotate the image but I rotate the render/camera instead.

I did play around with the order but no luck.
 
Did you see the example named jump_rotate?

It's located in the examples/mojo/hitoro/jump_rotate folder.

www.github.com/MikeHart66/cerberus/blob/develop/examples/mojo/hitoro/jump_rotate/jump_rotate.cxs

Cerberus:
' -----------------------------------------------------------------------------
' RotateDisplay: rotates view around x, y by angle...
' -----------------------------------------------------------------------------

    Function RotateDisplay (X:Float, Y:Float, angle:Float)
        PushMatrix                ' Store current rotation, scale, etc
        Translate X, Y            ' Shift origin across to here
        Rotate angle            ' Rotate around origin
        Translate -X, -Y        ' Shift origin back where it was
    End

And there's another Hitoro example: examples/mojo/hitoro/matrixrocks

www.github.com/MikeHart66/cerberus/blob/develop/examples/mojo/hitoro/matrixrocks/matrixrocks.cxs

These are Mojo examples... I didn't try them with Mojo2 but I expect "Push, Translate, Rotate" code to work the same.
 
Looks interesting. I haven't thought of shifting the render only for the time of rotation and then reset. I'll give this a try when I get home later today. Thank you.
 
Back
Top Bottom