Rotating a 2D shape from an array of points.

Dev Shed Forums Sponsor:

November 1st, 2012, 07:49 PM

Shaun_B

Contributing User

Join Date: Sep 2012

Posts: 62

Time spent in forums: 1 Day 52 m 17 sec
Reputation Power: 2

Swing - Rotating a 2D shape from an array of points.

Hi folks,

I'm looking into shape rotations around the centre point of a wire-frame shape to try and improve my understanding of mathematics. Unfortunately, I'm not getting very far...!

Here's the shape that I want to rotate:

Java Code:

Original - Java Code
private static int star[] = { /** co-ordinates in array read as * x0, y0 to x1, y1. -1 terminates */ 0, 28, 30, 28, 30, 28, 39, 0, 39, 0, 50, 28, 50, 28, 79, 28, 79, 28, 55, 46, 55, 46, 64, 73, 64, 73, 40, 57, 39, 57, 15, 73, 15, 73, 23, 45, 23, 45, 0, 28, -1, -1 };

    private static int star[] = 
    {
        /** co-ordinates in array read as
         * x0, y0 to x1, y1. -1 terminates */
         0, 28, 30, 28,
        30, 28, 39,  0,
        39,  0, 50, 28,
        50, 28, 79, 28,
        79, 28, 55, 46,
        55, 46, 64, 73,
        64, 73, 40, 57,
        39, 57, 15, 73,
        15, 73, 23, 45,
        23, 45,  0, 28,
        -1, -1
    };

and I'm drawing it like this:

Java Code:

Original - Java Code
public void drawImage(int x, int y) { backg.setColor(Color.black); // This will step through the array points to draw // the star object: while(star[index]>=0) { int x0 = x+(star[index+0]); int y0 = y+(star[index+1]); int x1 = x+(star[index+2]); int y1 = y+(star[index+3]); backg.drawLine( x0, y0, x1, y1 ); index += 4; } // Resets index to zero: index = 0; }

    public void drawImage(int x, int y)
    {
        backg.setColor(Color.black);
        // This will step through the array points to draw
        // the star object:
        while(star[index]>=0)
        {
            int x0 = x+(star[index+0]);
            int y0 = y+(star[index+1]);
            int x1 = x+(star[index+2]);
            int y1 = y+(star[index+3]);
            backg.drawLine( x0, y0, x1, y1 );
            index += 4;
        }
        // Resets index to zero:
        index = 0;
    }

It draws fine until I try to rotate the points; x and y are used to offset the position accordingly.

Anyway, my rotate method is:

Java Code:

Original - Java Code

    public void rotate()
    {
        // Divides width and height in half
        double px=widthOfStar>>>1;
        double py=heightOfStar>>>1;
        // Sets up variables for the maths:
        double x2=0.00;
        double y2=0.00;
        double x1=0.00;
        double y1=0.00;
        // Degrees to turn object in radians:
        double degrees = Math.toRadians(6);
        while(star[index]>=0)
        {
            x1 = star[index+0];
            y1 = star[index+1];
            x2 = px+(px-x1)*Math.cos(degrees)-(py-y1)*Math.sin(degrees);
            y2 = py+(px-x1)*Math.sin(degrees)+(py-y1)*Math.cos(degrees);
            star[index+0]=(int)x2;
            star[index+1]=(int)y2;
            index += 2;
        }
        index = 0;
    }

It definitely rotates something, and it is rotating around the centre of the object, but the shape is not keeping its' err... shape, or at least not for me :-\

There's either something that I've misunderstood, or my code is rubbish. Can anyone help please?

Many thanks,

Shaun.

November 1st, 2012, 09:39 PM

Corpsecreate

Contributing User

Join Date: Oct 2010

Posts: 38

Time spent in forums: 1 Day 2 h 7 m 3 sec
Reputation Power: 3

OH MY GOD are you seriously trying to draw stars and rotate them? I tried to do this for my assignment in first year. I got it working and I'll post the code below but please for the love of god dont ask me to explain it. Somehow, back when I was smart, I managed to calculate all the required maths to rotate it. It was HELL.

java Code:

Original - java Code

import java.awt.*;
import java.applet.Applet;
public class StarsRotation extends Applet
{
    public void paint (Graphics page)
    {
        setBackground(Color.black);
        double angle = 180/Math.PI;
        int stars = 100;
        for (int i = 0; i < stars ; i++)
        {
            int theta = (int) (73 * Math.random());
            int randomX = (int) (1463 * Math.random()) + 72;
            int randomY = (int) (940 * Math.random()) + 100;
            int [] xCoords, yCoords;
            int radius = (int) ( 50 * Math.random()+5);
            int X1 = (int) (Math.round(randomX + radius*Math.sin(theta/angle)));
            int X2 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((36+theta)/angle))/Math.sin(126/angle)));
            int X3 = (int) (Math.round(randomX + radius*Math.sin((108-theta)/angle)));
            int X4 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((72-theta)/angle))/Math.sin(126/angle)));
            int X5 = (int) (Math.round(randomX - radius*Math.sin((theta-36)/angle)));
            int X6 = (int) (Math.round(randomX - (radius*Math.sin(theta/angle)*Math.sin(18/angle))/Math.sin(126/angle)));
            int X7 = (int) (Math.round(randomX - radius*Math.sin((36+theta)/angle)));
            int X8 = (int) (Math.round(randomX - (radius*Math.sin(18/angle)*Math.sin((108-theta)/angle)/Math.sin(126/angle))));
            int X9 = (int) (Math.round(randomX - radius*Math.sin((72-theta)/angle)));
            int X10 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((theta-36)/angle))/Math.sin(126/angle)));
            int Y1 = (int) (Math.round(randomY-radius*Math.cos(theta/angle)));
            int Y2 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((36+theta)/angle))/Math.sin(126/angle)));
            int Y3 = (int) (Math.round(randomY + radius*Math.cos((108-theta)/angle)));
            int Y4 = (int) (Math.round(randomY + (radius*Math.sin(18/angle)*Math.cos((72-theta)/angle))/Math.sin(126/angle)));
            int Y5 = (int) (Math.round(randomY + radius*Math.cos((theta-36)/angle)));
            int Y6 = (int) (Math.round(randomY + (radius*Math.cos(theta/angle)*Math.sin(18/angle))/Math.sin(126/angle)));
            int Y7 = (int) (Math.round(randomY + radius*Math.cos((36+theta)/angle)));
            int Y8 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((108-theta)/angle)/Math.sin(126/angle))));
            int Y9 = (int) (Math.round(randomY - radius*Math.cos((72-theta)/angle)));
            int Y10 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((theta-36)/angle))/Math.sin(126/angle)));
            xCoords = new int[] {X1, X2 , X3, X4 , X5 , X6 , X7 , X8 , X9 , X10};
            yCoords = new int[] {Y1, Y2 , Y3, Y4 , Y5 , Y6 , Y7 , Y8 , Y9 , Y10};
            int randomRed = (int) (225 * Math.random()+30);
            int randomGreen = (int) (225 * Math.random()+30);
            int randomBlue = (int) (225 * Math.random()+30);
            int randomTrans = (int) (225 * Math.random()+30);
            page.setColor(new Color(randomRed, randomGreen, randomBlue, randomTrans));
            page.drawPolygon (xCoords, yCoords, xCoords.length);
            page.fillPolygon (xCoords, yCoords, 10);
            page.drawPolygon (xCoords, yCoords, xCoords.length);
        }
    }
}

import java.awt.*;
import java.applet.Applet;
public class StarsRotation extends Applet
{
    public void paint (Graphics page)
    {
        setBackground(Color.black);
        double angle = 180/Math.PI;
        int stars = 100;
        for (int i = 0; i < stars ; i++)
        {
            int theta = (int) (73 * Math.random());
            int randomX = (int) (1463 * Math.random()) + 72;
            int randomY = (int) (940 * Math.random()) + 100;
            int [] xCoords, yCoords;
            int radius = (int) ( 50 * Math.random()+5);
            int X1 = (int) (Math.round(randomX + radius*Math.sin(theta/angle)));
            int X2 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((36+theta)/angle))/Math.sin(126/angle)));
            int X3 = (int) (Math.round(randomX + radius*Math.sin((108-theta)/angle)));
            int X4 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((72-theta)/angle))/Math.sin(126/angle)));
            int X5 = (int) (Math.round(randomX - radius*Math.sin((theta-36)/angle)));
            int X6 = (int) (Math.round(randomX - (radius*Math.sin(theta/angle)*Math.sin(18/angle))/Math.sin(126/angle)));
            int X7 = (int) (Math.round(randomX - radius*Math.sin((36+theta)/angle)));
            int X8 = (int) (Math.round(randomX - (radius*Math.sin(18/angle)*Math.sin((108-theta)/angle)/Math.sin(126/angle))));
            int X9 = (int) (Math.round(randomX - radius*Math.sin((72-theta)/angle)));
            int X10 = (int) (Math.round(randomX + (radius*Math.sin(18/angle)*Math.sin((theta-36)/angle))/Math.sin(126/angle)));
            int Y1 = (int) (Math.round(randomY-radius*Math.cos(theta/angle)));
            int Y2 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((36+theta)/angle))/Math.sin(126/angle)));
            int Y3 = (int) (Math.round(randomY + radius*Math.cos((108-theta)/angle)));
            int Y4 = (int) (Math.round(randomY + (radius*Math.sin(18/angle)*Math.cos((72-theta)/angle))/Math.sin(126/angle)));
            int Y5 = (int) (Math.round(randomY + radius*Math.cos((theta-36)/angle)));
            int Y6 = (int) (Math.round(randomY + (radius*Math.cos(theta/angle)*Math.sin(18/angle))/Math.sin(126/angle)));
            int Y7 = (int) (Math.round(randomY + radius*Math.cos((36+theta)/angle)));
            int Y8 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((108-theta)/angle)/Math.sin(126/angle))));
            int Y9 = (int) (Math.round(randomY - radius*Math.cos((72-theta)/angle)));
            int Y10 = (int) (Math.round(randomY - (radius*Math.sin(18/angle)*Math.cos((theta-36)/angle))/Math.sin(126/angle)));
            xCoords = new int[] {X1, X2 , X3, X4 , X5 , X6 , X7 , X8 , X9 , X10};
            yCoords = new int[] {Y1, Y2 , Y3, Y4 , Y5 , Y6 , Y7 , Y8 , Y9 , Y10};
            int randomRed = (int) (225 * Math.random()+30);
            int randomGreen = (int) (225 * Math.random()+30);
            int randomBlue = (int) (225 * Math.random()+30);
            int randomTrans = (int) (225 * Math.random()+30);
            page.setColor(new Color(randomRed, randomGreen, randomBlue, randomTrans));
            page.drawPolygon (xCoords, yCoords, xCoords.length);
            page.fillPolygon (xCoords, yCoords, 10);
            page.drawPolygon (xCoords, yCoords, xCoords.length);
        }
    }
}

Last edited by Corpsecreate : November 1st, 2012 at 09:43 PM.

November 1st, 2012, 09:57 PM

slink

Contributing User

Join Date: Nov 2010

Posts: 73

Time spent in forums: 1 Day 17 h 10 m 20 sec
Reputation Power: 14

Hi Shaun_B

This is a bit of a guess but should it be:

Code:

x2 = px + (x1 - px) * Math.cos(degrees) + (y1 - py) * Math.sin(degrees);
y2 = py + (y1 - py) * Math.sin(degrees) - (x1 - px) * Math.cos(degrees);

A good approach to fixing sticky bits of code is to break them out into a function

Code:

private double[] rotate(x1, y1, px, py, degrees) {...}

That way you can test it to death in isolation, then use it in your code once you are confident it is working.

Hope this helps,
slink

November 2nd, 2012, 02:08 AM

Shaun_B

Contributing User

Join Date: Sep 2012

Posts: 62

Time spent in forums: 1 Day 52 m 17 sec
Reputation Power: 2

It's okay, I think that I've worked out the solution last night, or at least I think I did when I was trying to sleep after being in some discomfort. Basically, it's the way I've got my points in my array: there's repeating points which isn't a very good idea.

I'll have a solution shortly,

Shaun.

PS, You should always try to understand your homework, however, I'm doing this for a laugh.

November 2nd, 2012, 07:15 AM

Shaun_B

Contributing User

Join Date: Sep 2012

Posts: 62

Time spent in forums: 1 Day 52 m 17 sec
Reputation Power: 2

The solution that I thought up is better, but it's not as perfect as I'd hoped. Although I got a simple rhombus to rotate around its' centre point, but not the star - okay, it is rotating, but it's not keeping it's shape.

Perhaps I need an identity matrix or something, or I'll probably have to speak to some games programmers as they really do understand this stuff.

Regards,

Shaun.

Swing - Rotating a 2D shape from an array of points.

Developer Shed Advertisers and Affiliates