# Rotation of rectangles offsets render position

I have an unknown number "Bricks" that must follow a straight, but not always level, path. Each brick is rotated around one central point properly to form a shape of intersecting paths. My problem arises when rendering an image for a rotated brick. By rotating an image the width and height are changed thus altering the relative render point (top left, x/y). I need to find out what render offset would be necessary to make sure each brick is an equal relative distance from the center rotation point. I am using MonoGame (XNA) if that matters, but I don't currently have any code worth sharing (I need to understand this concept before anything else is worth coding). I hope the following image helps to visualize my problem. The example uses 3 bricks but that won't always be the case. https://i.stack.imgur.com/rO4IT.png

• I'm a bit confused how you're rendering the bricks. Are they pre-rendered sprites of the box rotated to the correct orientation—or are they procedurally generated?
– Anko
Sep 14, 2015 at 11:27

I haven't tried monogame yet, and mostly work in XNA. However, I'm still pretty sure this also applies to monogame.

Consider the following function (It's built into XNA and monogame):

public void Draw (
Texture2D texture,
Vector2 position,
Nullable<Rectangle> sourceRectangle,
Color color,
float rotation,
Vector2 origin,
float scale,
SpriteEffects effects,
float layerDepth
)


As you can see, this function takes a float for rotation (in radians) and a vector2 for origin, as well as a texture2D and position. Of course, some other things like potential effects, but those are not important right now.

Using this function you can draw a texture2D. Let's say this texture2D of a brick is 20 pixels wide and 10 pixels high. You want to rotate your brick 60 degrees (or 1/3 * Pi), so that's what you fill in for "rotation". The vector2 "Origin" determins the point around which you'll rotate your texture. If you fill in new Vector2(10,10), the rotation point will be the bottom center of the brick. The fun thing about a vector2 for position is that the ORIGIN of the texture2D will be drawn at this position. So you won't have to worry about finding the topleft coordinate.

You can find this function in the spritebatch class.

• Thank you very much! This will work beautifully. I am still curious as to what the math is, so if anybody does figure that out I would be interested to hear it. Sep 14, 2015 at 11:21