Simple Rotation question

#1

I was just wondering if there’s a simple way to rotate a shape?

I’ve made a really simple octagon using;

  
  
//--------------------------------------------------------------  
void testApp::setup(){  
	ofSetCircleResolution(8);  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
	//————————————— Octagon  
	ofSetColor(0,0,0);  
	ofFill();  
	ofCircle(100,400,50);  
}  
  

And that all works fine, but it seems to be off. I’d really like the bottom edge to be flat to the bottom of the window. That’s a 22.49 angle (I could be wrong, I’m terrible at math). I’m using the Circle Resolution to make the sides as drawing each point using Vertex was going to take forever.

I tried using ofRotate(); to get some results but it just kept skewing the image rather than rotating it.

Any help is greatly appreciated! Thanks! :slight_smile:

#2

all transformations (ofTranslate, ofRotate) work around 0,0, so the trick is to:

a) translate to the center of the object (ie, move 0,0 to that point)
b) rotate
c) draw the object with position 0,0 (ie, centered at 0,0)

the only thing is to understand that a transformation effects everything that is drawn after it. for example:

  
ofTranslate(100,400,0);  
ofCircle(0,0,50);  
ofRect(0,0,20,20);  

you can see that the rectangle is now located at 100,400 as well as the circle.

the best way to visualize this is the idea of a piece of graph paper which is the coordinate system. by saying translate, you are moving the graph paper (and everything that get’s drawn afterwards now uses that graph paper as a reference).

to fix that, we use push and pop (which is like taking a snapshot of where the graph paper was):

  
ofPushMatrix();  
ofTranslate(100,400,0);  
ofCircle(0,0,50);  
ofPopMatrix();  
ofRect(0,0,20,20);  

ok, now we are fine to do rotation:

  
ofPushMatrix();  
ofTranslate(100,400,0);  
ofRotateZ(22.49);  // <- rotate the circle around the z axis by some amount.   
ofCircle(0,0,50);  
ofPopMatrix();  
ofRect(0,0,20,20);  

hope this helps!

take care,
zach

1 Like
#3

Sir, your a star. Thanks again, that worked perfectly. :smiley:

#4

For anyone finding this now (almost 10 years later!), the rotation code has changed a little bit.

Zach’s final snippet would now read:

ofPushMatrix();  
ofTranslate(100,400,0);  
ofRotateZDeg(22.49);  // <- rotate the circle around the z axis by some amount.   
ofCircle(0,0,50);  
ofPopMatrix();  
ofRect(0,0,20,20);

You can find the updated documentation here.