Rotating a rectangle-shaped Polygon around it's center. (Java)

Question

I have this code to draw a rectangle (Polygon object), and then draw another rectangle which is the original one, rotated 90 degrees, using the rotation matrix.

public class DrawingPanel extends JPanel{

    public void paintComponent(Graphics g){

        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g;

        Point p1,p2,p3,p4;
        p1 = new Point(50,50);
        p2 = new Point(200,50);
        p3 = new Point(200,100);
        p4 = new Point(50,100);

        int[] x = {(int) p1.getX(), (int) p2.getX(), (int)p3.getX(), (int) p4.getX()};
        int[] y = {(int) p1.getY(), (int) p2.getY(), (int)p3.getY(), (int) p4.getY()};

        Polygon poly = new Polygon(x, y, x.length);
        g2d.draw(poly);

        p1.setLocation(p1.getX() * Math.cos(Math.toRadians(90)) - p1.getY() * Math.sin(Math.toRadians(90)),
                p1.getX() * Math.sin(Math.toRadians(90)) + p1.getY() * Math.cos(Math.toRadians(90)));
        p2.setLocation(p2.getX() * Math.cos(Math.toRadians(90)) - p2.getY() * Math.sin(Math.toRadians(90)),
                p2.getX() * Math.sin(Math.toRadians(90)) + p2.getY() * Math.cos(Math.toRadians(90)));
        p3.setLocation(p3.getX() * Math.cos(Math.toRadians(90)) - p3.getY() * Math.sin(Math.toRadians(90)),
                p3.getX() * Math.sin(Math.toRadians(90)) + p3.getY() * Math.cos(Math.toRadians(90)));
        p4.setLocation(p4.getX() * Math.cos(Math.toRadians(90)) - p4.getY() * Math.sin(Math.toRadians(90)),
                p4.getX() * Math.sin(Math.toRadians(90)) + p4.getY() * Math.cos(Math.toRadians(90)));

        int[] x2 = {(int) p1.getX(), (int) p2.getX(), (int)p3.getX(), (int) p4.getX()};
        int[] y2 = {(int) p1.getY(), (int) p2.getY(), (int)p3.getY(), (int) p4.getY()};

        Polygon poly2 = new Polygon(x2, y2, x2.length);
        g2d.draw(poly2);

    }

}

Currently, the second rectangle doesn't show up. When I asked about this in a different question, someone answered that that's because it draws outside the screen.

I asked how to rotate the rectangle around it's center, so the new drawing will appear in the screen, and he answered but I didn't really understand how to implement what he said in the code (tried different things that didn't work).

Could you show me exactly in the code, how to rotate the rectangle around it's center?

(Of course this isn't actual rotating of an object. It's making a rotated-duplicate of an object).

Help would be appreciated. Thanks

Answer 1

Since you are trying to rotate around the rectangle's center, first you need to translate the rectangle to the origin , then apply the rotation and finally translate back. See the following code (adapted to your case) from this answer in another post.

//TRANSLATE TO ORIGIN
double x1 = p1.getX() - center.x;
double y1 = p1.getY() - center.y;

//APPLY ROTATION
double temp_x1 = x1 * Math.cos(angle) - y1 * Math.sin(angle));
double temp_y1 = x1 * Math.sin(angle) + y1 * Math.cos(angle));

//TRANSLATE BACK
p1.setLocation(temp_x1 + center.x, temp_y1 + center.y);

You have to do this for each point. Also you will need to find the center of the rectangle center.x and center.y .

Explanation When you directly apply the rotation, you are rotating it around the origin (0,0) (you can easily see this when you change the angle rotation in your code). If you want to rotate around the center of the rectangle, you have to follow the steps described above.

• Translate the shape (rectangle) to origin , this can be accomplished by substracting the center components to the point's components.
• Apply rotation to the translated points around the origin (0,0) .
• Translate back each point to the original position , by adding the center components (the ones you substracted in the first step).

Edit 1:

Let's say we have a Rectangle (Square) which vertex are:

p1: (2, 2)
p2: (3, 2)
p3: (3, 3)
p4: (2, 3)

For point p2 :

In first step:

center: (2.5, 2.5)
x1 = 3 - 2.5 = 0.5
y1 = 2 - 2.5 = -0.5

Doing this for each point:

new_p1: (-0.5, -0.5)
new_p2: (0.5, -0.5)
new_p3: (0.5, 0.5)
new_p4: (-0.5, 0.5)

Then you apply the rotation...

Edit 2: I hope it gets clearer with this image, sorry if I'm bad with Paint.

Answer 2

Rotations always happen around 0,0.

In order to rotate around the center of the object you need to move the points so the center of the object is at 0,0; then rotate them; then afterwards move them back again:

So if cx and cy are your center:

    p1.setLocation((p1.getX()-cx) * Math.cos(Math.toRadians(90)) - (p1.getY()-cy) * Math.sin(Math.toRadians(90))+cx,
            (p1.getX()-cx) * Math.sin(Math.toRadians(90)) + (p1.getY()-cy) * Math.cos(Math.toRadians(90))+cy);

And do the same for the other points too.