AffineTransform Rectangle2D

[Mathias Nilsson]

Hi!

I'm trying to rotate a Rectangle2D with some angles. I need draw a rectanglebox and in there a rotate rectangle from x,y to x + width , y+height. How can I do this. The rotate takes an angle and I don't know how to calculate the angle between my rectangles x,y and x + width , y + height

// Mathias

[Craig Wood]

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;
 
public class RectRotation extends JPanel {
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        double w = getWidth();
        double h = getHeight();
        Rectangle2D.Double rect = new Rectangle2D.Double(w/16, h*7/64, w/4, h/4);
        g2.setPaint(Color.blue);
        g2.draw(rect);
        // Rotate rect 30/45/60 degrees cw about its se corner.
        // Use transformed shape.
        AffineTransform at = AffineTransform.getRotateInstance(Math.PI/6,
                                 rect.x+rect.width, rect.y+rect.height);
        g2.setPaint(Color.red);
        g2.draw(at.createTransformedShape(rect));
 
        // Transform the graphics context.
        rect = new Rectangle2D.Double(w*9/32, h*27/64, w/4, h/4);
        g2.setPaint(Color.blue);
        g2.draw(rect);
        AffineTransform orig = g2.getTransform();
        at.setToRotation(Math.PI/4, rect.x+rect.width, rect.y+rect.height);
        g2.transform(at);
        g2.setPaint(Color.red);
        g2.draw(rect);
        g2.setTransform(orig);
 
        // Use a copy for the transform;
        rect = new Rectangle2D.Double(w*31/64, h*47/64, w/4, h/4);
        g2.setPaint(Color.blue);
        g2.draw(rect);
        at.setToRotation(Math.PI/3, rect.x+rect.width, rect.y+rect.height);
        Graphics2D copy = (Graphics2D)g.create();
        copy.transform(at);
        copy.setPaint(Color.red);
        copy.draw(rect);
        copy.dispose();
    }
 
    public static void main(String[] args) {
        RectRotation panel = new RectRotation();
        panel.setPreferredSize(new Dimension(400,400));
        JOptionPane.showMessageDialog(null, panel, "", -1);
    }
}

[Mathias Nilsson]

Thanks but how do you know when to use Math.PI/4 , 6 and 3. is there somewhere I can calculate this during mousedrag?

[Campbell Ritchie]

PI / 4 is 45� PI / 3 is 60� and PI / 6 is 30�.

[Craig Wood]

is there somewhere I can calculate this during mousedrag?
Probably, depends on what you are trying to do. If you wanted to click on a rectangle with
the mouse and drag so as to rotate the rectangle about a given point, eg, the center of
the rectangle, then you could calculate the initial angle of the line between the
mousePressed location and the rotation center, then calculate the angular change for each
mouseDragged event, pass this to the graphic component and add it to the last/current
rotation angle of the rectangle, compute an updated AffineTransform for the rotation and
call repaint to show the new rotation.

[J.J. Zing]

I have a similar problem. For a school project I'm writing a 2D Rigid Body Physics Engine in Java.

In order to simulate torque, I'm using AffineTransform.setToRotation(). Torque spins around the center-point, so I have

 .setToRotation(angRotate, pos.x, pos.y; 

pos being a Point2D object, and .x and .y being the x and y coordinates of the rectangles center-point (found using getCenterX() and getCenterY().

This all works fine right up to the point where I assign a velocity vector to the rectangle, i.e. change pos.x and pos.x each time-step. As soon as I do this the rotation goes loopy, it doesn't rotate around the center-point anymore, but only close to the center-point.

I can't test whats going wrong because I use a Shape object to allow for AffineTransform.createTransformedShape();, and there are no getCenter() methods for Shape objects.

I tried using getRotateInstance to hopefully keep my rectangles as Rectangle2D objects and so be able to see whats happening with the center-point, but when I use getRotateInstance, rotation gets even loopier.

Here's my code, just to get a better idea of what I'm talking about. I have two rectangles, RectA and RectB, and hence two of each variable. To witness the loopiness, simply change any of the velocityA/B values to anything other than 0, positive or negative. 3 shows it pretty well.

 import java.awt.*;
import java.awt.geom.*;
 
public class RectangleRotateDemo4 extends javax.swing.JFrame 
{
    public RectangleRotateDemo4() 
    {
        initComponents();
    } 
    
    private void initComponents() 
    {
    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
        setTitle("2D Rigid Body Physics Engine");
 
        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup
        (
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 800, Short.MAX_VALUE)
        );
        layout.setVerticalGroup
        (
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 600, Short.MAX_VALUE)
        );
pack();
    }
 
    public void paint(Graphics g) 
    {
        //variable declaration
        boolean done=false;
        
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); //makes edges smoother
        
        //instantiate rectangles
        Rectangle2D.Double myRectA = new Rectangle2D.Double(100, 100, 25, 100);
        Rectangle2D.Double myRectB = new Rectangle2D.Double(250, 100, 25, 100);
        
        //convert rectangles into shapes to allow AffineTransform editing
        Shape myShapeA = myRectA;
        Shape myShapeB = myRectB;
        
        //instantiate AffineTransform
        AffineTransform rotateA = new AffineTransform();
        AffineTransform rotateB = new AffineTransform();
        
        //instantiate position vector
        Point2D.Double posA = new Point2D.Double();
        Point2D.Double posB = new Point2D.Double();
        
        //instantiate velocity vector
        Point2D.Double velocityA = new Point2D.Double();
        Point2D.Double velocityB = new Point2D.Double();
        
        //instantiate angular velocity
        double angRotateA = 0.1;
        double angRotateB = 0.2;
        
        long tm = System.currentTimeMillis();
        int i;

BasicStroke stroke = new BasicStroke(2.0f);
        g2.setStroke(stroke);
        
        //set RectA velocity vector
        velocityA.x = 0;
        velocityA.y = 0;
        
        //set RectB velocity vector
        velocityB.x = 0;
        velocityB.y = 0;

//set RectA position vector
posA.x = myRectA.getCenterX();
posA.y = myRectA.getCenterY();

//set RectB position vector
posB.x = myRectB.getCenterX();
posB.y = myRectB.getCenterY();

while(!done) //and !CollisionDetection. If CollisionDetection == true, use CollisionHandling (each in seperate files).
{//After CollisionHandling is done, CollisionDetection == false, loop continues.
//gravity
posA.y = posA.y + 1; //only y value as gravity only pulls down.
posB.y = posB.y + 1; //addition as on computer screens, top left is (0,0) and the y-axis is positive going down.

//redraw screen
g2.setPaint(Color.white);//Fills window with a white rectangle.
g2.fillRect(0,0,this.getWidth(),this.getHeight());//Better would be a JCanvas or JPanel
g2.setPaint(Color.black);//which is repainted every timestep

//move RectA
rotateA.setToRotation(angRotateA, posA.x, posA.y);
myShapeA = rotateA.createTransformedShape(myShapeA);
g2.draw(myShapeA);
posA.x = posA.x + velocityA.x; //Moves RectA by its velocity. Unfortunately, causes strange behaviour.
posA.y = posA.y + velocityA.y; //Unable to verify center-point coordinates as there are no getCenter methods for Shape.

//move RectB
g2.setPaint(Color.blue);
rotateB.setToRotation(angRotateB, posB.x, posB.y);
myShapeB = rotateB.createTransformedShape(myShapeB);
g2.draw(myShapeB);
posB.x = posB.x + velocityB.x; //Moves RectA by its velocity. Unfortunately, causes strange behaviour.
posB.y = posB.y + velocityB.y; //Unable to verify center-point coordinates as there are no getCenter methods for Shape.

//Attempt to use a diff. AffineTransform method (getRotateInstance()) which lets me keep RectA/B as Rectangle2D's and not shapes
//resulted in even stranger behavious when given a velocity.
 
//delay code
try
{
tm += 50;
Thread.sleep(Math.max(0, tm - System.currentTimeMillis())); //ensures each timestep is the same, to avoid any possible
            }//irregularity caused by the processor trying to keep up.
            catch (InterruptedException ie)
            {
break;
            }
}
    }
 
    public static void main(String args[]) 
    {
        java.awt.EventQueue.invokeLater(new Runnable() 
        {
            public void run() 
            {
                new RectangleRotateDemo4().setVisible(true);
            }
        });
    }
} 

Thanks in advance for your support. Should I post what I tried to do with getRotateInstance?

[ October 21, 2008: Message edited by: J.J. Zing ]
[ October 21, 2008: Message edited by: J.J. Zing ]

[Brian Cole]

Originally posted by J.J. Zing:
Here's my code, just to get a better idea of what I'm talking about. I have two rectangles, RectA and RectB, and hence two of each variable. To witness the loopiness, simply change any of the velocityA/B values to anything other than 0, positive or negative. 3 shows it pretty well.

Hey there, JJ,

I think you need to do a little better job telling the details here. In particular:

(A) How exactly do I set one of the velocityA/B values to 3?
I tried changing velocityA = new Point2D.Double() to velocityA = new Point2D.Double(3,0) but I didn't see anything obviously loopy, which brings me to

(B) Can you describe how the actual behaviour differs from the expected
behaviour? I can see some rectangles flipping around. They look fine to
my untrained eye. How exactly are they flipping incorrectly? Presume I have no idea what your goals are. (Because I don't.)

Also, while I'm here, I feel I really need to point out that this isn't the proper way to do animation in Java. You have a loop in paint() that essentially never terminates. This results in bad things. For example have you noticed that you can't really quit your app?
What you should be doing is drawing one single frame in paint() that terminates quickly. Then elsewhere repeatedly call update() so that multiple calls to paint() will be scheduled.

[J.J. Zing]

Thanks for the quick response.
Sorry, I realise my info is a bit sparse and my post a bit cluttered.
If you change the values here:

  //set RectA velocity vector
        velocityA.x = 0;
        velocityA.y = 0;
        
        //set RectB velocity vector
        velocityB.x = 0;
        velocityB.y = 0;  

the 'loopiness' should be visible. velocityA.y = 3; makes the rectangle move down 3 pixels each time-step, and you might be able to see that it doesn't rotate around its center anymore. When you changed velocityA = new Point2D.Double() to velocityA = new Point2D.Double(3,0) the change was undone later by velocityA.x = 0 etc.

The aim of this app is to realistically simulate physical interactions between rigid bodies. This means that when I'm done, the bodies will ideally be bouncing physically correctly off the walls and off each other. This 'physically correctly' is gonna be supplied by a few physics calculations, supplied to me by my friend doing physics and our school's physics text book. Each time a collision occurs, the velocity info is sent to the CollisionHandling (not yet written) class, which performs the necessary calculations to determine what changes need to be made to the velocities of the two bodies. For rectangles, this includes torque, or rotation around the center-point. Hence, its essential that the rectangles actually rotate around the center-point determined by me.

I realize I'm probably violating a whole slew of unwritten rules, and I would appreciate any guidance. This is the first time I'm writing Java outside of the classroom (I take Comp Sci in high-school) and there is a lot I have to learn.
The while (!done) loop will be made to end when a Collision is detected, and I was planning on making done = true; when the close button is clicked, which should solve the unquittable problem.

Would you care to elaborate on this paint() and update() method? I saw examples of it while browsing through tutorials, but never really looked into it / understood it. I understand the logic behind it, but am unsure as how to go about implementing it.

As the deadline is getting closer, I have decided to move from simulating rectangles to simply simulating circles, as my planned collision detection would only be able to tell me whether a collision had occured, but not where specifically (coordinates) this collision occurred, essential info if taking torque into account. Torque isn't important when simulating circles however, cause the spinning isn't visible. This gets rid of the loopiness problem (I'll see if I can't figure it out myself once I know more, and know better how to approach something like this). The assignment assess the 'journey of learning' rather than the end-product alone, so this shouldn't cost me any marks.

While I've gotten rid of one problem, I would still be grateful for any pointers as to animation etc. You also may have noticed that each time-step I g2.fillRect(0,0,this.getWidth(),this.getHeight()); to erase the previously drawn rectangles, and I realize this is also a horrible method, which the method mentioned by you seems to be able to fix.

Thanks again for your time and the quick response.
[ October 22, 2008: Message edited by: J.J. Zing ]

[Craig Wood]

Here's a comparison of the accuracy of two ways of animating a geom primitive.
Storing the location of the primitive in a Shape that is animating leads to
errors that compound. Another way is to keep the original primitive and draw it
as a transformedShape for animation.
To detect collision with this you can use the transformedShape with the Shape
intersects method. For circles you can use the Ellipse2D class and its
intersects method. For more complex shapes you can try the Area, Path2D
or Polygon classes.
Overriding the (Container) paint method in a JFrame is AWT drawing as
opposed to Swing drawing. Swing is double–buffered by default and makes
animations easier than they are in AWT drawing.
Using a separate JComponent extension, eg, JPanel, for drawing allows for Swing
drawing and for encapsulating graphics code in its own class.
There are different ways to do animation and everyone seems to have their
favorite/preferred idiom. Here's one way to approach it in Swing.

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;
 
public class Moving2D extends JPanel implements Runnable {
    Rectangle2D.Double red  = new Rectangle2D.Double(50, 50, 25, 100);
    Shape blue = new Rectangle2D.Double(50, 200, 25, 100);
    Point2D.Double redCenter = new Point2D.Double();
    double blueCy;
    double theta = 0;
    double thetaInc = Math.toRadians(5.0);  // angular velocity
    double speed = 1.0;
    Thread thread;
    boolean running = false;
 
    public Moving2D() {
        redCenter.x = red.getCenterX();
        redCenter.y = red.getCenterY();
        blueCy = blue.getBounds().getCenterY();
    }
 
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        // Draw some reference lines.
        int w = getWidth();
        int h = getHeight();
        g2.setPaint(Color.pink);
        g2.draw(new Line2D.Double(0, redCenter.y, w-1, redCenter.y));
        g2.draw(new Line2D.Double(0, blueCy, w-1, blueCy));
        g2.draw(new Line2D.Double(redCenter.x, 0, redCenter.x, h-1));
        // Draw red and blue.
        g2.setPaint(Color.red);
        AffineTransform at =
            AffineTransform.getRotateInstance(theta, redCenter.x,
                                                     redCenter.y);
        at.translate(redCenter.x - red.getCenterX(), 0);
        g2.draw(at.createTransformedShape(red));
        g2.setPaint(Color.blue);
        g2.draw(blue);
        // Mark centers.
        g2.setPaint(Color.green.darker());
        g2.fill(new Ellipse2D.Double(redCenter.x-1.5,
                                     redCenter.y-1.5, 4, 4));
        Rectangle r = blue.getBounds();
        double x = r.getCenterX();
        double y = r.getCenterY();
        g2.fill(new Ellipse2D.Double(x-1.5, y-1.5, 4, 4));
    }
 
    private void step() {
        theta += thetaInc;
        redCenter.x += speed;
        Rectangle2D r = blue.getBounds2D();
        double x = r.getCenterX();
        double y = r.getCenterY();
        AffineTransform at =
            AffineTransform.getRotateInstance(thetaInc, x, y);
        double dy = //rightCx - x;
                    0;
        at.translate(speed, dy);
        blue = at.createTransformedShape(blue);
        repaint();
    }
 
    private void reset() {
        Rectangle2D r = blue.getBounds2D();
        System.out.printf("redCenter   = [%5.1f, %5.1f]%n" +
                          "center blue = [%5.1f, %5.1f]  blueCy = %.1f%n",
                           redCenter.x, redCenter.y,
                           r.getCenterX(), r.getCenterY(), blueCy);
        theta = 0;
        redCenter.x = red.getCenterX();
        blue = new Rectangle2D.Double(50, 200, 25, 100);
        repaint();
    }
 
    public void run() {
        long delay = 40;
        while(running) {
            try {
                Thread.sleep(delay);
            } catch(InterruptedException e) {
                running = false;
            }
            step();
        }
    }
 
    private void start() {
        if(!running) {
            running = true;
            thread = new Thread(this);
            thread.setPriority(Thread.NORM_PRIORITY);
            thread.start();
        }
    }
 
    private void stop() {
        running = false;
        if(thread != null) {
            thread.interrupt();
        }
        thread = null;
    }
 
    public static void main(String[] args) {
        Moving2D test = new Moving2D();
        test.addMouseListener(test.ma);
        JFrame f = new JFrame("left click to start/stop  " +
                              "right click to reset");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(test);
        f.setSize(600,400);
        f.setLocation(100,100);
        f.setVisible(true);
    }
 
    /** Control app from here with mouse. */
    private MouseAdapter ma = new MouseAdapter() {
        public void mousePressed(MouseEvent e) {
            if(SwingUtilities.isRightMouseButton(e)) {
                reset();
            } else {
                if(running) {
                    stop();
                } else {
                    start();
                }
            }
        }
    };
}

[J.J. Zing]

Another quick reply! Thank you.
Holidays have ended and its back to other school work so im kinda rushing right now. But, I'll respond to this in greater length eventually.

I'm impressed at your coding skills: what I posted is the fruits of about 5 solid days of labor, and you did what i did better than i did it, overnight. This explains a lot, like why assigning velocity vectors to circles works (no need for AffineTransform, just paint new). Thanks!