SVG Windmill animation, rotation around z-axis

Hi,

I am trying to get a loaded svg to rotate around its z-axis. It’s actually a windmill blade. I m trying to animate it for a project. The code I m using:

void ofApp::setup(){

    // loading the blades svg
svg.load("dyn_windmill_blades.svg");

    // Background image with the windmill building
img = ofImage("bg_1024_768_map.jpg");
  	
   //parameter to increment rotation angle
x = 0;

}


void ofApp::update(){
    x += 1;
}

void ofApp::draw() {

img.draw(0,0);

    // placing the image on the windmill building
ofTranslate(655,17,0);

ofRotate(x,0,0,1);
windmill_blades_svg.draw();
}

The problem is that the svg rotates with its center of axis as one of the corners. I have checked the svg file and made sure that it is cropped perfectly to just the blades image. Thus, ideally the svg should rotate around its center, if I m not wrong about what the z-axis means for ofRotate.

Can someone help me out with this please? Help me make my windmill come to life :slight_smile:

i think you have to do something like this

float deg = 0;
int rectW = 200;
int rectH = 50;

void ofApp::setup(){

}

void ofApp::draw(){
    deg++;
    ofPushMatrix();
    ofTranslate(mouseX, mouseY);
    ofRotateZ(deg);
    ofTranslate(-rectW/2, -rectH/2);
    ofRect(0, 0, rectW, rectH);
    ofPopMatrix();
}

In addition to stephanshulz answer, usually you can set the anchor point of images (or else), using the following functions:

setAnchorPercent(float xPct, float yPct)
setAnchorPoint(float x, float y)

By setting the anchor percent value to 0.5 for x and for y, when performing rotations, it would rotate around the center of the image.

Thank you guys.

Meach what you are suggesting should work ideally. I tried both, also tried both methods of rotation :

ofPushMatrix();
//windmill_blades.setAnchorPercent(0.5,0.5);
windmill_blades.setAnchorPoint(windmill_blades.width / 2, windmill_blades.height / 2);
//ofRotate(deg, 0,0,1);
ofRotateZ(deg)
windmill_blades.draw(655,17);
    
ofPopMatrix();

Still rotates the same way… The axis is somewhere towards the left of the image. What do you think might be wrong? Why isn’t the axis getting modified?

If I am not mistaken, you would only need to change once the anchor point.
Something like this should work I think:

void ofApp::setup(){
   windmill_blades.load("dyn_windmill_blades.svg");
   windmill_blades.setAnchorPercent(0.5, 0.5);
}

void ofApp::draw(){
    ofPushMatrix();
    ofTranslate(655, 17);
    ofRotateZ(deg);
    windmill_blades.draw(0, 0);
    ofPopMatrix();
}

Just got it to work, needed in depth knowledge about 2D transformations and the grid system:

ofPushMatrix();
  ofTranslate(windmill_blades.width/2 , windmill_blades.height/2 , 0);//move pivot to centre
  ofRotate(deg, 0, 0, 1);//rotate from centre
  ofPushMatrix();
      ofTranslate(-windmill_blades.width/2,-windmill_blades.height/2,0);//move back by the centre offset	  
      windmill_blades.draw(0,0);
  ofPopMatrix();
ofPopMatrix();

I guess I needed a more in my face explanation, thanks guys.

Here, this helped me understand rotation and placement. Kinda tricky… but easy once you get it.

http://stackoverflow.com/questions/12516550/openframeworks-rotate-an-image-from-its-center-through-opengl-calls

1 Like