# Defining a rotation point for images

hi,
i want to make an 4x4 array of images and then
rotate every image in their center.

is there a way to define the rotation point to the center (or a custom point)
of an image?

sorry if this sounds simple for you, but i just made my first steps in c++

thanks for any hint,
daniel

here’s an example of drawing an image, in this case “bikers” at point 200,200, with a rotation of 45 degrees around the z-axis, rotated around the center point. you have to use opengl commands (like translate, pushMatrix, and popMatrix):

glPushMatrix();
glTranslatef(200,200,0);
glRotatef(45,0,0,1);
bikers.draw(-bikers.width/2.0,-bikers.height/2.0);
glPopMatrix();

to explain:

1. glPushMatrix() ---- take a copy of the current transformation matrix
2. glTranslatef() ---- change the 0,0 position
3. glRotatef() ---- rotate 45 degrees (note in opengl it’s degrees, not radians) around the z axis
4. since 0,0 is the bottom left corner of the image, offset by 1/2 the width and 1/2 the height. Now the 0,0 point is the center
5. glPopMatrix() ---- get back to the regular transformation matrix – (0,0) in lower left corner.

for a more general solution, you can adjust these values:

bikers.draw(-bikers.width/2.0,-bikers.height/2.0);

based on where you want that point to be:

0,0 = lower left
-bikers.width, -bikers.height = top right

I hope that helps!

• zach

cool, that was exactely what i have searched.

i try now to get it working with an image array.

when lucky i post my code here again

dan

hi,
i tried and tried but i did not find out how to do
the centered rotation on each image of an array.

here is what i play with:

for (int i=0; i<2; i++) {
for (int j=0; j<3; j++){
glPushMatrix();
glTranslatef(bikers.width/2,bikers.height/2,0);
glRotatef(counter/10,0,1,0);
bikers.draw((-bikers.width/2)*i,(-bikers.height/2)*j);
//		glPopMatrix();
}
}

what i want is this:
XX
XX

and each X should rotate around its center. i just do not get the point
where i am making something wrong. the push/pop matrix thing is
also something i have to study more, but maybe it is also a problem
about “where” to place the push/pop (before the loop, in the loop
or a part in and a part out of the loop.

any shedding light on this is very appreciated

dan

hi -

should be both in the loop -
maybe try this:

for (int i=0; i<2; i++) {
for (int j=0; j<3; j++){
glPushMatrix();
glTranslatef(i*100,j*100,0);
glRotatef(counter/10,0,1,0);
bikers.draw((-bikers.width/2),(-bikers.height/2));
glPopMatrix();
}
}

• zach

muchos gracias!!!

this was exactely the thing i wanted. now i have to study the
differences between my and your version to learn how to use
pushNpop with translations.

but as promised here the result i wanted. the goal here was also
to get independend of the screenresolution and imagesize.

for (int i=0; i<2; i++) {
for (int j=0; j<2; j++){
glPushMatrix();
glTranslatef(i*bikers.width+(bikers.width/2),(ofGetHeight()-bikers.height/2)-(j*bikers.height),0);
glRotatef(counter/10,1,1,0.5);
bikers.draw((-bikers.width/2),(-bikers.height/2));
glPopMatrix();
}
}

i used ofGetWidth and ofGetHeight to read out the actual screen/window
size. then by using imagename.width and imagename.heigth i can calculate
the starting positions. hope this helps other people.

many thanks to zach for helping me,
dan

and here the complete independent solution (i think
this can be the point to make a function of it):

you need to declare following variables in testApp.h:
ofImage img;
int arrayX;
int arrayY;

now you are able to change the array resolution and the
imagename as you want without editing the loop itself.

// edit these variables to controll the look
img=gears; // choose an image file or video
arrayX=5;  // set the number of repetitions in the x axis
arrayY=3;  // set the number of repetitions in the y axis

for (int i=0; i<arrayX; i++) {
for (int j=0; j<arrayY; j++){
glPushMatrix();
glTranslatef(i*img.width+(img.width/2),(ofGetHeight()-img.height/2)-(j*img.height),0);
glRotatef(counter/10,1,1,1);
img.draw((-img.width/2),(-img.height/2));
glPopMatrix();
}
}

the next challenge can be to find out on how to set different or random
rotationspeed for each image in the array. i do not know if this can work
as easy as inserting new values in this loop or if for that a complete new