Rotating Java 2D Graphics Around Specified Point

Question

I'm trying to write a program that will draw several shapes rotated around a center point. The result should be something like a Spirograph. I'm trying to test it using rectangles but I can only get two of them to appear in the window. One of them is where it should be, but then after the first rotation it throws the other square way up in the top left corner of the window. It should be rotated and drawn around the center point. Here is a portion of my code.

import java.awt.*;
import java.awt.geom.Ellipse2D;

import javax.swing.JPanel;

public class Shapes extends JPanel
{
private double angle;
private int type;
private int radius;
private int repeats;

public Shapes(int t, int r, int z)
{
   type = t;
   radius = r;
   repeats = z;      
   angle = 360 / repeats;
}

public void paintComponent( Graphics g )
{
  super.paintComponent( g );
  Graphics2D g2d = (Graphics2D)g;

  g.setColor(Color.red);

  int centerX = getWidth()/2;
  int centerY = getHeight()/2;

  double curAngle = 0;

  for(int i=0; i<=repeats; i+=1)
  {
      g.setColor(Color.blue);

      Rectangle tangle = new Rectangle(0, 0, radius, radius);
      g2d.rotate(Math.toRadians(curAngle));
      g2d.translate(centerX, centerY);
      g2d.draw(tangle);
      curAngle += angle;
  }

}

Something like [this](http://stackoverflow.com/questions/12964983/rotate-image-around-character-java/12971987#12971987)? — MadProgrammer, Sep 11 '15 at 00:10
If I just have Rectangle(centerX, centerY, radius, radius); and omit the translate, weird stuff happens too. — Scott Sinischo, Sep 11 '15 at 00:14
You might need to reset the transform before you apply the next one, basically, each time you call translate, the `Graphics` context is moved AGAIN by that amount, so it's progressively moving. The same thing goes with rotate, each time you call rotate, that is added to the `Graphics` context's current rotation — MadProgrammer, Sep 11 '15 at 00:18
Now I have this and it will only draw one square: `Rectangle tangle = new Rectangle(centerX, centerY, radius, radius); g2d.rotate(Math.toRadians(angle)); //g2d.translate(centerX, centerY); g2d.draw(tangle); //curAngle += angle;` — Scott Sinischo, Sep 11 '15 at 00:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89335/discussion-between-scott-sinischo-and-madprogrammer). — Scott Sinischo, Sep 11 '15 at 00:27

MadProgrammer · Accepted Answer · 2015-09-11T00:48:59.963

Remember, translate and rotate are compounding, that is, each time you apply them, they add to the current transformation.

There are a number of ways you might be able to achieve this, but first, we need to make a copy of the Graphics context. It's kind of important any time you mess with the transform in particular, you do so with a copy of the Graphics context, as this will leave the original unaffected (and won't effect anything that might be painted after)

Graphics2D g2d = (Graphics2D) g.create();
//...
g2d.dispose();

So anything you do to g2d now, won't affect the state of g

Now, we can use the "compounding" effect of a transform to our advantage

Rectangle tangle = new Rectangle(0, 0, radius, radius);
//g2d.translate(centerX, centerY);
g2d.rotate(Math.toRadians(angle), centerX, centerY);
g2d.draw(tangle);

So, all this does is applies the value of angle to the copy of the Graphics context on each loop. The anchor point is set to the centerX and centerY points

Okay, that looks okay, but what happens if I resize the window?

Okay, not really what I was expecting. This occurs for a combination of reasons, the size of the shape, the anchor point, the rotation, the translation offset, these are all compounding to produce the effect (cool though).

Okay, so, instead, we can simply create a new transform for each loop instead, supplying the exact parameters we want, for example...

Graphics2D g2d = (Graphics2D) g.create();
g2d.setColor(Color.blue);

Rectangle tangle = new Rectangle(0, 0, radius, radius);
g2d.translate(centerX, centerY);
g2d.rotate(Math.toRadians(curAngle));
g2d.draw(tangle);
curAngle += angle;
g2d.dispose();

This now produces...

While playing around with the code, I noticed that as I increased the number of repeats, I wasn't getting the desired results.

After same digging, I changed

angle = 360 / repeats;

to

angle = 360.d / repeats;

which stopped the integer division issue (and truncating of the decimal values) and started to produce the desired results

A simple before and after comparison...

Rotating Java 2D Graphics Around Specified Point

1 Answers1

Linked

Related