# Draw chained rotated rectangles next to each other

This topic is 384 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi!

I am developing a 2D game in Java where top-left corner is (0,0) and bottom-right is (max x, max  y).

I want to render rotated rectangles next to each other. Say I have the following image(rotation 0):

If I wanted to draw an other one of this next to this one so that the green line connects(or "chains"), I would simply draw it at previous rectangle position + rectangle with. Easy.

If it however was rotated, like this(30 degrees):

Then I would somehow have to recalculate both the x and y coordinate. Not sure how to do this.

Any help would be appropriated.

##### Share on other sites

Edited by Inphinitii

##### Share on other sites

You'll need to shift the position of the rectangle, and the amount depends on the angle, the center of rotation, and the length of the side.

The math is your basic trig operations of sine and cosine. For a unit of 1 from the rotation's center, the shift up/down is the sine and the shift to the side is the cosine.  Multiply by your actual length from the center by that value to get the scaled distance.  Use one minus that value to get the amount to shift the sprite.

Edited by frob
Remove possibly confusing example.

##### Share on other sites
1 hour ago, P0jahn said:

If it however was rotated, like this(30 degrees):

You need a hook. So if your image is (0,0)(maxX,maxY) then the middle point is (maxX /2, maxY/2).

Move the sprite next to the other using the position + position. Then also rotate the second sprite.

Rotate it around the other sprites middle point using this:  xrot=cos(θ)⋅(x−cx)−sin(θ)⋅(y−cy)+cx   and yrot=sin(θ)⋅(x−cx)+cos(θ)⋅(y−cy)+cy Important this is for radians, degree to radian.

#This is mock code so you can adapt it.

angleInRad = (angleInDeg ) * (Math.PI/180);
Sprite1Cen = (Sprite1.x/2, Sprite1.y/2);
Sprite2Cen = (Sprite2.x/2, Sprite2.y/2)

Sprite2Cen.x = cos(angleInRad) * (Sprite2Cen.x - Sprite1Cen.x) -Math.sin(angleInRad ) * (Sprite2Cen.y-Sprite1Cen.y) + Sprite1Cen.x;

Sprite2Cen.y= Math.sin(angleInRad) * (Sprite2Cen.x - Sprite1Cen.x) +Math.cos(angleInRad) * (Sprite2Cen.y - Sprite1Cen.y) + Sprite1Cen.y;

This is the same answer @frob gave just a small bit different. In fact depending on your engine there will always be small differences.

Edited by Scouting Ninja

##### Share on other sites

Removed my possibly confusing example.

##### Share on other sites
13 hours ago, Scouting Ninja said:

Rotate it around the other sprites middle point

Cleaver and simple solution. Thanks!

Edited by P0jahn

##### Share on other sites

Back again. So I got it to work. Here is the method I use to rotate points:

    public static Vector2 rotatePoint(final float x, final float y, final float cx, final float cy, final float rotation) {
if (rotation % 360 == 0)
return new Vector2(x, y);

final float angleInRadians = (float) (rotation * (Math.PI / 180));

return new Vector2(
(cosTheta * (x - cx) - sinTheta * (y - cy) + cx),
(sinTheta * (x - cx) + cosTheta * (y - cy) + cy));
}

Now I want to draw a small ball between these rectangles. They are like connectors. The thing that keeps the parts together. I did in a similar way, but they are slightly of.

How do I get the correct position for these connectors?

Edited by P0jahn
Correction

##### Share on other sites

You'll be better off understanding the math rather than asking people to spoon-feed you answers.

When you rotate things, points of the object are shifted based on the angle.  Sine and cosine of the angle tell you the new positions as they move around a circle.  The sine tells the vertical shift, the cosine tells the horizontal shift for an item of distance 1.0. You need to multiply that result by the actual distance from the rotation point, which may be in pixels or meters or whatever units you are using.

All the positions of rotated objects follow from that.

##### Share on other sites

The method above works fine, I just posted it for the sake of completeness. Am actually trying to learn the math and not to get spoon feed.

Anyway I resolved this by giving this unit its own camera/matrix, which I rotate and apply to the sprite batch before render and clear afterwards.

1. 1
2. 2
Rutin
19
3. 3
4. 4
5. 5

• 9
• 9
• 9
• 14
• 12
• ### Forum Statistics

• Total Topics
633302
• Total Posts
3011272
• ### Who's Online (See full list)

There are no registered users currently online

×