I'm doing some game programming and I have a texture (image) being rendered to a square. I can rotate the image on the square because the texture wraps infinitely in all directions.
Let's say that the image has texture coordinates that go from (0,0) in one corner to (1,1) in the opposite corner, and same with the square.
In fact I am dealing with an image that is not 1 x 1 in ratio of length and width. Let's say that my image is 4 times as long (in the x direction) as it is tall (in the y direction).
I don't want the full image to display all at once on the square at the same time. What's important is that when looking at the square, a flower (for example) looks like a flower—thus, I should not simply stretch the image to fit it all on the square.
Therefore, the image being 4 times longer than it is wide, I use a scaling factor when the texture is rendered. Effectively I divide the texture coordinates by 4 in the x direction before rendering.
Thus, a space that goes from (0,0) to (0.25, 1.00) will get mapped to the square from (0,0) to (1,1) in the squares coordinate system.
Now I add rotation, because in fact this is a game world and the player can move around and change orientation in this 2D space. Therefore, my scaling needs to adjust as the player rotates.
I use a 2x2 matrix for rotation that looks like this:
[cosr -sinr]
[sinr cosr]
where r is the angle of rotation of the player. I multiply this matrix times a vector that represents the texture coordinates.
I'm really at a bit of a loss as to what to do with adjusting the scaling. After a 90 degree rotation, my scaling factor should be changed to 1/4 instead of 4. Thus, I need an equation that varies between 1/4 and 4 depending on the angle. Should I simply interpolate a scale factor linearly between these 2 values? I wasn't sure if the scale factor should be interpolated linearly or with trigonometric functions, etc. Remember that the goal is to avoid making things look like they are stretching in strange ways as the player is rotating.
Sorry if this question belongs in other stack exchanges like stackoverflow or gamedev, but I felt like this question was mainly about math more so than about coding or game development.
Edit: (Adding some photos)(The scale factor is in fact 10 here rather than 4)
Here is how it looks. I am doing nothing to match the scaling factor with the orientation of the image. This means that the image is divided 10 times more in 1 direction than the other, and then the image simply gets rotated and multiplied times the same scaling factor regardless of orientation, thus the image becomes extremely mis-matched with the scaling and warps extremely.
Without rotation (this is how the image should be scaled):
With a little rotation:
With a lot of rotation: (what are actually green circles are getting complete crushed here)
The solution was to use 3x3 augmented matrices.
transform_matrix = (position_matrix) x (scale_matrix) x (orientation matrix)
Then transform_matrix x Point_in_vector_form
and then to extract the texture positions from the [0][2] and [1][2] elements of the transform matrix.
One would use 4x4 augmented matrices like this for 3D transformations. I didn't realized that I should do a similar thing with 3x3 augmented matrices in order to manipulate the 2D textures.