Translating, rotating, and scaling a rectangle

Question

Translating, rotating, and scaling a rectangle

Navigation

#1 by (1 votes)

0

Imagine the following rectangle A and B lozenge:

Rectangle A has the dimensions 4200 by 3000. The B lozenge has the maximum dimensions of 167 by 167, its sides having 98 by 98.

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

Considering the translation, rotation and scale between A and B. If possible using JavaSript in the formula;

For the scale I am using a simple 3 rule.

I found this formula for rotation:

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 do not know how to put it all together and give the exact point.

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

javascript geometria

asked by anonymous 11.03.2017 / 16:15

1 answer

JAVA Attributes Handling Video Background takes time to load (wordpress)

score 1 · Answer 1

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

If you apply the rotation formula as it is, the rectangle will rotate around the origin and not its center as you wish.

Then to rotate something you must translate the axis of rotation to the origin, rotate and return to the place. The formula looks like this:

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 case the center of the rectangle)
(xf, yf) = The new location of the rotated point
@ = Rotation angle

This site has what it needs

But my suggestion is not to waste your time programming all this math in the hand because you may end up finding the Quaternions. You could use the excellent Box2D . I use it in C ++ and it works perfectly.