# Rotating a Quad around it center

How can you rotate a quad around its center?

This is what I am trying to do but it is not working:

    GL11.glTranslatef(x-getWidth()/2, y-getHeight()/2, 0);
GL11.glRotatef(30, 0.0f, 0.0f, 1.0f);
GL11.glTranslatef(x+getWidth()/2, y+getHeight()/2, 0);
DRAW


my main problem is that it renders it off the screen..

draw code:

    GL11.glBegin(GL11.GL_QUADS);
{
GL11.glTexCoord2f(0, 0);
GL11.glVertex2f(0, 0);
GL11.glTexCoord2f(0, getTexture().getHeight());
GL11.glVertex2f(0, height);
GL11.glTexCoord2f(getTexture().getWidth(), getTexture().getHeight());
GL11.glVertex2f(width,height);
GL11.glTexCoord2f(getTexture().getWidth(), 0);
GL11.glVertex2f(width,0);
}
GL11.glEnd();

• That looks mostly correct except that the first translation needs to be negated ie GL11.glTranslatef(-(x-getWidth()/2), -(y-getHeight()/2), 0); – Michael Slade Nov 16 '12 at 13:44
• doesn't work it renders it somewhere off the screen – Trixmix Nov 16 '12 at 13:52
• Michael Slade comments seems right, but just remove the parenthesis. Like: GL11.glTranslatef(-x-getWidth()/2, -y-getHeight()/2, 0); – Allan Hasegawa Nov 16 '12 at 15:10

The quad's center is the position (0, 0, 0) in local space. Local space is the space in which you define your vertex positions.

For instance, if you draw your quad using the opengl glvertex* commands, you should specify each vertex relative to (0, 0, 0):

glBegin(GL_QUADS);                  // Draw A Quad
glVertex3f(-1.0f, 1.0f, 0.0f);      // Top Left
glVertex3f( 1.0f, 1.0f, 0.0f);      // Top Right
glVertex3f( 1.0f,-1.0f, 0.0f);      // Bottom Right
glVertex3f(-1.0f,-1.0f, 0.0f);      // Bottom Left
glEnd();                            // Done Drawing The Quad


The code was taken from the NeHe website: Your First Polygon

If you draw your quad like this, each rotate command will rotate the quad around it's center. That's because the rotation matrix will be multiplied with each vertex position, which will result in the vertex being rotated around (0, 0, 0).

You should have a look at the NeHe article, it's a good starting point. Also have a look at the other articles there: http://nehe.gamedev.net/tutorial/lessons_01__05/22004/ ( there's one dealing with rotations in particular ).

EDIT:

You're drawing the quad relative to the lower left corner, so in order to match the center of the quad with the object space origin, you should first translate it by ( -width()/2, -height()/2, 0 ). Keeping in mind that matrices are multiplied in the reverse order, I would try something like:

GL11.glTranslatef(x+getWidth()/2, y+getHeight()/2, 0); // M1 - 2nd translation
GL11.glRotatef(30, 0.0f, 0.0f, 1.0f);                  // M2
GL11.glTranslatef( -getWidth()/2, -getHeight()/2, 0);  // M3 - 1st translation


Matrices are multiplied in order, and then multiplied on the left side with the vertex. So the resulting formula would be M1 * M2 * M3 * V. Notice that V is first multiplied by M3, so that's the matrix we use to translate the quad into the origin.

I'm not sure what x & y do in your code, you just need;

GL11.glTranslatef(-getWidth()/2, -getHeight()/2, 0);
GL11.glRotatef(30, 0.0f, 0.0f, 1.0f);
GL11.glTranslatef(+getWidth()/2, +getHeight()/2, 0);
DRAW


Looking at your drawing code, the centre of the quad seems to be [getWidth()/2, getHeight()/2], so you need to translate the centre to the origin, rotate, and translate back again

If you don't want to use glRotatef(), you can use this method with x,y the coordinates of quad(top-left) and sx : the weight and sy : the height.

rotation+=45;

float cx = x+sx/2;
float cy = y+sy/2;

float x1 = cx-(float)Math.cos(rot)*sx;
float y1 = cy-(float)Math.sin(rot)*sy;

float x2 = cx-(float)Math.cos(rot2)*sx;
float y2 = cy-(float)Math.sin(rot2)*sy;

float x3 = cx-(float)Math.cos(rot3)*sx;
float y3 = cy-(float)Math.sin(rot3)*sy;

float x4 = cx-(float)Math.cos(rot4)*sx;
float y4 = cy-(float)Math.sin(rot4)*sy;


• This is a little wasteful, since you compute the same two values 8 times combined. cos(rot2) = -sin(rot) and sin(rot2) = cos(rot) and this pattern repeats for the rest. So you can cut your trig operations down to a quarter of what you have here. – DMGregory May 31 '17 at 19:40