# How do I calculate the x,y of the rectangle after rotating?

I'm using SDL2. I want to draw a textured rectangle and I'd like it rotated so I'm using SDL_RenderCopyEx. However SDL2 doesn't give me the option of repeating texture so I need to manually do it myself. The problem is I have no idea how to do the math.

My texture us 20x20, so I make the rects 20x20, I chosen a fixed angle of 45, my rotation point is 10,5 which appears to make the left middle of the rect the point it rotates from. I can see the two rects aren't touching if the second rect is (firstX+15,firstY+15). However if I change one of them to 14 they touch and it looks solid

I don't understand how to find the numbers. I'm finding the angle but doing

double angle = atan2(mouseX - x, mouseY - y) * 180 / PI;


Making the second rect relative to the first by +15,+14 only works if it's a 45 deg angle but is complete wrong for other angles.

How do I figure out the x,y the subsequent rect based on the angle?

The unit vector along the x+ axis (x, y) = (1, 0), after rotation counter-clockwise by a given angle, changes to a new unit vector ( cos(angle), sin(angle) )

Similarly, the unit vector along the y+ axis (0, 1) rotates to ( -sin(angle), cos(angle) )

Multiplying these values by 20 gives you the displacement between your 20x20 tiles after rotation.

So at 45 degrees you get a shift of about (14.14214, 14.14214) between tiles in the same row, and (-14.14214, 14.14214) between tiles in the same column.

At 30 degrees, it's (17.32051, 10) and (-10, 17.32051), etc.

• Thank you. Your math definitely checks out because trying your values gives me good results. However I have no math knowledge. What does the notation (cosVal, sinVal) mean? I don't understand how to multiple them to get 14.14214, 14.14214 or (for 30deg) 17.32051, 10. I'll come back to this tonight Nov 4, 2020 at 15:35
• @EricStotch - the notation (x, y) just means a vector starting at the point (0, 0) and ending up on coordinates (x, y). If you then set x = cos(angle) and y = sin(angle), you get the vector (cos(angle), sin(angle)), that is, the coordinates are the values that those functions return. That particular vector is the unit vector (which just means of length 1) that was rotated from is original position pointing to the right (x+ axis), by the given angle. Similar story for the y axis. 1/2 Nov 5, 2020 at 8:25
• @EricStotch - Now, since your angle is fixed to 45, when you plug in 45 (but in radians: PI * angle/180) it gives you vectors (their coordinates) that sort of "represent" the rotated x and y axes (we call these basis vectors), but the vectors are of length 1. Since your tiles are 20x20, when you multiply those components individually by 20, you get vectors of length 20, and the values (14.14214, 14.14214) for the rotated x basis, and (-14.14214, 14.14214) for the rotated y basis. 2/2 Nov 5, 2020 at 8:25
• @EricStotch - Once you have these two vectors, you can get to any rectangle in the rotated grid (if you draw it on paper, you can see why - it literally allows you to take steps in terms of the sides of your rotated rectangle); e.g. if right.x = cos(...)*width; right.y = sin(...)*width; up.x = -sin(...)*height; up.y = cos(...)*height, then any rectangle located at i, j in the grid is i * right + j * up, where you just multiply each component, and then add them componentwise: x = i * right.x + j * up.x; y = i * right.y + j * up.y Also, i and j can be negative (left and down). Nov 5, 2020 at 17:24
• You need two numbers to move the rectangle in one direction (eg. along a row of tiles), and two numbers to move the rectangle in the perpendicular direction (eg. along a column of tiles). They're the same two numbers really, just swapped with one negated. When moving along a row, you should multiply both x & y by width, not width & height. When moving along a column, you should multiply both x & y by height. Nov 5, 2020 at 17:24