Translation, rotation and scale of a rectangle

Question

Imagine the following rectangle A and rhombus B:

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)

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.