Translation, rotation and scale of a rectangle

Asked

Viewed 620 times

0

Imagine the following rectangle A and rhombus B:

inserir a descrição da imagem aqui

Rectangle A has dimensions 4200 by 3000. Rhombus B has the maximum dimensions of 167 by 167, its sides have 98 by 98.

Rectangle A is equivalent to rhombus B, so I would like to know (a generic formula) how to pass any point of A, ex: P(500, 400) to B.

Taking into account the translation, rotation and scale between A and B. If possible using Javasript in the formula;

For the scale I’m using a simple rule of 3.

I found this formula for the spin:

function rotacionar(x, y, radianos) {
    var graus  = radianos * Math.PI / 180;
    var seno   = Math.sin(graus);
    var coseno = Math.cos(graus);

    x += 98;

    return {
        x: parseInt(x * coseno + y * seno),
        y: parseInt(y * coseno - x * seno)
    }
}

I just don’t know how to put it all together.

Note: It is to use in Phaser.IO for the user to walk through the map (A = pixels and B = places where he can walk)

javascript geometry rotation

  • I don’t think that question is part of scope of the site.

  • Exactly. The way the question is, it’s not part of the scope because it’s essentially a math problem. Try to at least provide example of Javascript code that you have already done and tried, which then maybe more easily enter the scope of the site.

  • That’s better?

  • The additional correct tag for your question would be computer graphics.

  • I didn’t find this tag to add

1 answer

1

If I remember well the books of computer graphics that I read you have to translate the center of the rectangle to the origin (0,0) and everything connected to it, rotate to the desired angle and translate to the old point.

If you apply the rotation formula of the shape as this, the rectangle will rotate around the origin and not its center as you wish.

So to rotate something you have to move the axis of rotation to the origin, rotate it and go back to the location. The formula stays that way:

xf = (Xo - Xr) * cos (@) - (yo - yr) * sin (@) + Xr

yf = (yo - yr) * cos (@) + (Xo - Xr) * sin (@) + yr

Where:

  • (Xo,yo) = Point you want to rotate
  • (Xr,yr) = Point at which you will rotate the point above (in your if the centre of the rectangle)
  • (xf,yf) = The new rotated point location
  • @ = Angle of rotation

This site has what you need

But I suggest you don’t waste your time programming all this math because you might end up finding the Quaternions. You could use the excellent Box2d. I use it in C++ and it works perfectly.

  • What do you call that in math? If you remember I can run after how to do it.

  • We got negative but what matters is the work flow. Thanks for reminding me of this subject.

  • How would you wear the Quaternions? I never used it

  • Neither did I. I’ve always used some 3D/2D engine to avoid this.

  • Dude, this formula ai (even if I think q is right) did not give the result q I expected, Ex.: if I take the rectangle A the point (0,0) and try to pass to a point of the diamond B, in no time I have something like a point (98,0) or (0,98), know pq?

  • The only flaw and already corrected is that it does not bring back to the point of origin. So just add the point of rotation again to the result. I made a notebook explaining and showing this: https://github.com/kernill/Notebooks/blob/master/Rotação.ipynb

Show 1 more comment

Browser other questions tagged javascript geometry rotation

You are not signed in. Login or sign up in order to post.