Search code examples
javaswinggraphicsrotationgraphics2d

Rotate two parallel lines to create an X

The following code is the code that I am using to rotate two rectangles is below

Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2d.setColor(Color.WHITE);

//r1
Rectangle2D r1 = new Rectangle2D.Double(0, 0, 50, 4);
g2d.rotate(Math.toRadians(45));
g2d.fill(r1);

//r3
Rectangle2D r3 = new Rectangle2D.Double(0, 25, 50, 4);
g2d.rotate(Math.toRadians(-90));
g2d.fill(r3);

This create something which looks like this

enter image description here

Whereas I am trying to create something which looks like this

enter image description here

This occurs since when the rectangles are rotated, they are both rotated around the point 0,0. To fix that I tried using rotate(double theta, double x, double y). However I am having trouble using that correctly. For example when I have tried

Rectangle2D r3 = new Rectangle2D.Double(0, 25, 50, 4);
g2d.rotate(Math.toRadians(-90), 25, 25);

or

Rectangle2D r3 = new Rectangle2D.Double(0, 25, 50, 4);
g2d.rotate(Math.toRadians(-90), 0, 25);

I get similar undesired results when both the rectangles were being rotated around the point 0,0. I would appreciate any help if fixing my problem.

If you are wondering why I have done it like this, it is because I am hoping to make a effect similar to when you click on the 3 parallel lines seen here by the time I finish coding the graphic

Solution

  • So it turns out that this can be done with some relatively simple maths. As the shape I am trying to make is a perfect X.

    To work out the position for the rectangle we can use Pythagorean theorem.

    enter image description here

    The image above shows two steps.

    Translation [2√2, 0] from the point [0, 0]
Rotate 45deg from the point [2√2, 0]

    Next we need to work out the minimum point of this rectangle. Again we can use Pythagorean theorem.

    enter image description here

    This tells us where the top point of the second rectangle will be

    Difference in height: 4 - 2√2
Bottom of line when straight: [0, 27√2 + (4 - 2√2)] = [0, 4 + 25√2]
Top of line when straight: [0, 25√2]

    Finally we can put in the last rectangle starting at [0, 0]

    Translation [0, 25√2] from the point [0, 0]
Rotate -45deg from the point [0, 25√2]

    Now that the theory is out of the way, what does this look like in code? It looks similar to the code below

    //Values
final static double[] r1Points = {2.828427125, 0}; //Equivilant 2√2
final static double[] r3Points = {0, 35.35533906}; //Equivilant 25√2
final static int[] widthNHeight = {50, 4}; //Width then height
final static double angle = 45.0; //Angle to rotate lines

//Declaring the rectangles
Rectangle2D r1 = new Rectangle2D.Double(r1Points[0], r1Points[1], widthNHeight[0], widthNHeight[1]);
Rectangle2D r3 = new Rectangle2D.Double(r3Points[0], r3Points[1], widthNHeight[0], widthNHeight[1]);

//r1
g2d.rotate(Math.toRadians(angle), r1Points[0], r1Points[1]); //Rotates graphic for first rectangle
g2d.fill(r1);

//r3
g2d.rotate(Math.toRadians(-angle), r1Points[0], r1Points[1]); //Rotates the graphic back to straight
g2d.rotate(Math.toRadians(-angle), r3Points[0], r3Points[1]); //Rotates graphic for second rectangle
g2d.fill(r3);