Rotating and Scaling a Picture in Opengl ES 2.0

Question

I am trying to rotate a picture around its center and scale it to the screen resolution of the phone (in android).

Here is my code:

// ----------------------------------------
// Scaling:
float scaleWidth = 2/screenWidth;
float scaleHeight = 2/screenHeight;

// ----------------------------------------
// Start position of the picture
int x = 60;
int y = 60;
float startX = x*scaleWidth;
float startY = y*scaleHeight;
// End position of the picture
float endX = (x + bmpWallSize) * scaleWidth;
float endY = (y + bmpWallSize) * scaleHeight;
// Center of the bitmap:
float midX = (x + (bmpWallSize/2)) * scaleWidth;
float midY = (y + (bmpWallSize/2)) * scaleHeight;

// ----------------------------------------
// Rotating:
gl.glTranslatef(midX, midY, 0f);
gl.glRotatef(r,0, 0,-1 );
gl.glTranslatef(-midX, -midY, 0);

r++; if (r > 360) r = 1;

Without rotating the picture looks fine, but as soon as it rotates it changes size (the square becomes a rectangle). I think its because i need to scale the vertices of the picture after the rotation and not before, but i dont know how. I googled alot but couldn't find an answer. Thanks for any help

Answer 1

I found a solution:

This function can calculate the rotated corner points of the cube:

public Point GetRotatedRecPoint(int degree, int cubeSize, Point centerPoint) {
    degree = 360 - degree;
    float length = (float) Math.sqrt(((cubeSize/2)*(cubeSize/2)) + ((cubeSize/2)*(cubeSize/2)));
    float x = Math.cos(Math.toRadians(degree));
    float y = Math.sin(Math.toRadians(degree))
    return new Point(x*length + centerPoint.x, y*length + centerPoint.y);
}

like this:

// The degrees of each Corner of the Cube
int topLeftDegree = r+45;
int topRightDegree = r+135;
int botRightDegree = r+225;
int botLeftDegree = r+315;

Point topLeftPoint = new Point(GetRotatedRecPoint(topLeftDegree, cubeSize, centerPoint));
Point topRightPoint = new Point(GetRotatedRecPoint(topRightDegree, cubeSize, centerPoint));
Point botRightPoint = new Point(GetRotatedRecPoint(botRightDegree, cubeSize, centerPoint));
Point botLeftPoint = new Point(GetRotatedRecPoint(botLeftDegree, cubeSize, centerPoint));

after that, i scale it:

topLeftPoint.x = topLeftPoint.x * widthScale;
topLeftPoint.y = topLeftPoint.y * heightScale;
topRightPoint.x = topRightPoint.x * widthScale;
.....

add it to the verticeBuffer and then draw it. This works without using glTranslatef() or glRotatef(). I am sure its not the best solution but it works fine for me ^^