# Processing style &quot;rotate&quot;

I’m trying to convert an old Processing app and I want to replicate the rotate() function (http://www.processing.org/reference/rotate-.html)

I know how to do rotateX, rotateY, rotateZ via opengl (http://www.processing.org/reference/rotateX-.html).
However in the Processing docs it says:

“Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the pushMatrix() and popMatrix()”.

I thought rotate() was just rotateZ() but I’m not getting the results I want. Any suggestions?

hey grimus, maybe take the code straight from the processing sources.

rotate is implemented in PApplet like this:

``````

public void rotate(float angle) {
if (recorder != null) recorder.rotate(angle);
g.rotate(angle);
}

``````

g is probably a PGraphics2D (could also be a PGraphics3D) where rotate is implemented like this:

``````

public void rotate(float angle) {
ctm.rotate(angle);
//      float c = (float) Math.cos(angle);
//      float s = (float) Math.sin(angle);
//      applyMatrix(c, -s, 0,  s, c, 0);
}

``````

ctm is a PMatrix2D where rotate is implemented like this:

``````

// Implementation roughly based on AffineTransform.
public void rotate(float angle) {
float s = sin(angle);
float c = cos(angle);

float temp1 = m00;
float temp2 = m01;
m00 =  c * temp1 + s * temp2;
m01 = -s * temp1 + c * temp2;
temp1 = m10;
temp2 = m11;
m10 =  c * temp1 + s * temp2;
m11 = -s * temp1 + c * temp2;
}

``````

Hope this helps,

Hey,
yeah I should have looked at the sources.
However I was also hoping someone might already have an OF example…
I don’t have a great love of matrices but this should be enough for me to solve the problem. Thanks!

Actually, all I want to do is spin a textured quad around the Z-axis. However I think due to the way the OF texture vertex coordinates are set up I can’t do this properly…because they are defined as:

``````
px0 = 0;
py0 = 0;
px1 = width;
py1 = height;

``````

when what I (think) I want is something like:

``````
px0 = -width/2;
py0 = -height/2;
px1 = width/2;
py1 = height/2;

``````

EDIT: I suspect that the above matrix rotation code would probably still solve my problem…

you should just be able to glRotatef( angle, x, y, z ) where angle is in degrees for some godbeknown reason and x,y,z specify a vector to rotate around ( eg 0,0,1 to rotate around Z axis).

if you want to rotate your quad around its centre point - eg to rotate an ofImage - call ofSetRectmode( OF_RECTMODE_CENTER )

d (is this for the Flab?)

surely there’s an easier way to do this, but i usually use:

to rotate around the center:

``````
glPushMatrix();
glTranslatef(width/2 + x,height/2 + y, 0);
glRotatef(angle,0,0,1);
glTranslatef(-width/2 - x,-height/2 - y,0);
tex.draw(x,y);
glPopMatrix();

``````

to rotate around it’s upper left:

``````
glPushMatrix();
glTranslatef( x, y, 0);
glRotatef(angle,0,0,1);
tex.draw(0,0);
glPopMatrix();

``````

where x and y is where you want to draw your texture

damian’s right on, I usually do this

``````

ofSetRectMode(OF_RECTMODE_CENTER)

``````

then

``````

glPushMatrix();
glTranslatef(x,y, 0);
glRotatef(angle,0,0,1);
tex.draw(0,0);
glPopMatrix();

``````

take care!
zach

Hey everyone,

Before my last post I had already tried ofSetRectMode(OF_RECTMODE_CENTER) and did a glTranslate + glRotate but I still wasn’t getting rotation around the centre of a texture. I must have missed something…I’ll go back and give it another try.

One thing that I noticed is that there is no Rotate() function that is compatible with the standard ofImage/ofTexture draw functions, as they both call glTranslate() in the OF code, meaning that any rotate will always happen before a translate which is often not what you want…of course if you break out into regular opengl and access the texture draw directly this isn’t a problem. I suppose I’m thinking about beginners who might want access to a Rotate() function before delving into openGL…which is what Processing offers and I think is quite useful. I’m intrigued by the Processing code Stefanix referred to…does anyone know if this is just replicating an opengl style matrix rotate, or could this be a solution to the Rotate() and then Draw() problem? (hope I’m making myself clear)

My next problem in converting my Processing code is to mimick the PImage mask() function (which I have done but I’m not sure the blending function is right, so this time I’m going to dig through the P5 code!)…and then try and replicate this:
http://dev.processing.org/bugs/show-bug.cgi?id=958
because I actually like the darker rendering…damn!

@Damian - no this is just an old project of mine that I want to record to a video with the higher FPS that c++ offers…

grimus

can you post maybe a short P5 example and OF example, and explain in more detail what you mean, or what the specific problem is ?

not to defend the OF texture, but I don’t see a difference between:

``````

glPushMatrix();
glTranslated(x, y, 0);
// draw at 0,0
glPopMatrix();

``````

and

``````

// don't translate and
// draw at x,y

``````

As you describe it, I think you might have been messed up by not drawing from 0,0 after the rotation and not using center mode, but posting a small code example would help clarify what you mean.

take care!
zach

Pffff, I’m not sure what went wrong in my initial attempt. I think I had a modified ofTexture.cpp, so anyway I replaced my file with the original and did the following:

``````
ofSetRectMode(OF_RECTMODE_CENTER);
glPushMatrix();
glTranslatef(pos.x,pos.y,0);
glRotatef(rotation,0,0,1);
sprite->draw(0,0,sizex,sizey);
glPopMatrix();

``````

And this worked fine…

The other thing I was wondering was whether there’s a way to do the following:

``````
image.rotate(angle);
image.draw(100,100);

``````

where rotate() rotates an image clockwise or anti-clockwise. The rotations would need to be accumulated and then applied after the translation in the draw() function. I guess this would require some non-opengl-api affine matrix transformations.

I usually extend ofImage (or any other drawable class) with an interface like this:

``````
class ofPositionableImage: public ofImage{
int drawWidth, drawHeight;
int x,y,z;
float rX, rY, rZ;
float anchorX, anchorY, anchorZ;
void draw();
}

``````

where anchorX,anchorY and anchorZ is the coordinate origin for rotations relative to the image 0,0.

you can set x,y,z, rX, rY, rZ… and then call draw to draw it in the position, rotation, width, height… indicated by the properties so you don’t need any matrix calculation in cpu, just do the indicated transformations before drawing.

That way you can have a class (or several) that affects all that parameters independently, something like a transformation strategy (easing equation, perlin noise, vector field…) that gets called on update, and when you draw the image it will draw with the right transformations applied.

If you need to accumulate transformations, you can create methods like incrX, incrY… that change that parameters by adding the new rotation, position, size… to the previous value.

Hey, I like this…

I was thinking of a modification to the core that would allow beginners to rotate without knowing too much about opengl. Maybe it could be along these lines?

my initial concern about adding something like that to the core is – you would want the same functionality for drawing anything (not just images), and I think it could be hypothetically more confusing if you can rotate an image in that specific way, and not, let’s say, a rectangle. what do you think?

yeah it would definitely have to be for both, otherwise it would be confusing, but I think using a variant of arturo’s method this would be possible, for example if both rectangles and images derived from some ofDrawable. Sorry I should have posted to the dev-list I guess…

no, the forum is good for this kind of stuff !

thanks !! it’s def worth kicking around a bit…

take care,
zach

Yes, i also don’t think something like that will fit in the core. Perhaps a function that makes rotating easier but uses more or less the same paradigm as that in opengl.

Also accumulating transformations can be tricky, you can use something like my example for specific cases but at some point it will be problematic and you’ll need to do transformations the opengl way.

The thing with ofDrawable is the drawing primitives are not objects. Also don’t like the idea of having functionality implemented in that base classes as it can be problematic (for example with multiple inheritance) and confusing having a method that you can call in say ofImage but if you go to ofImage the code isn’t there.