We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › Question about PShape and rotation
‹ Previous Topic | Next Topic ›
Pages: 1 2 
Question about PShape and rotation (Read 2147 times)
jlowgren
Question about PShape and rotation
Jan 23rd, 2009, 5:05pm  
Hi!

I am curious as to how I go about rotating a shape around its center point rather than its top left corner? Setting shapeMode(CENTER) draws the shape as expected, but when it rotates it does so along the top left corner.

Code:

import processing.opengl.*;

PShape s;

void setup() {
  size(800, 600, OPENGL);
  //shapeMode(CENTER);
  s = loadShape("blob.svg");
}

void draw() {
  background(0);
  shape(s, mouseX, mouseY);
  s.rotate(0.1);
}
Back to top
 
 
Lorion84
Re: Question about PShape and rotation
Reply #1 - Feb 5th, 2009, 9:26pm  
I have the same problem. How to rotate something around its center?
I am trying to get rid of the problem by changing the position of the rotated shape, but it's not exactly the center...
There must be a formular to calculate the new center of the rotated shape...
Back to top
 
 
PhiLho 
Re: Question about PShape and rotation
Reply #2 - Feb 5th, 2009, 10:14pm  
How do you define the "center" of a complex shape? Of course, you can still get the center of the bounding box.
Beside, to get this "rotate on a point" effect, you do the rotation then translate the shape by "dist between corner and center".
Back to top
« Last Edit: Feb 22nd, 2009, 1:20pm by PhiLho  »  
WWW  
sonomute
Re: Question about PShape and rotation
Reply #3 - Feb 22nd, 2009, 11:38am  
So, what's the solution? It will be nice to know how to do it, my first day in Processing, stuck with this problem:) "dist between corner and center" sounds nice, but how it looks like in real code?

Thanx!
Back to top
 
 
PhiLho 
Re: Question about PShape and rotation
Reply #4 - Feb 22nd, 2009, 1:23pm  
Non tested code:

// Put in place
translate(mouseX, mouseY);
// Do the rotation around the top-left corner
rotate(angle);
// Re-center the shape
translate(-s.width / 2, -s.height / 2);
// Draw it
shape(s, 0, 0);
Back to top
 
WWW  
sonomute
Re: Question about PShape and rotation
Reply #5 - Feb 22nd, 2009, 4:53pm  
here is my code:


PShape bot;

void setup()
{
 size(500,500);
 noStroke();
 fill(255);
 smooth();
 frameRate(30);
 bot = loadShape("pum.svg");
}


void draw()
{
 background(200);
 
 translate(width/2, height/2);
 
 shapeMode(CENTER);
 
 shape(bot, 0, 0,100,100);
 bot.rotate(radians(1));
 
}


object rotating like it was described, not around it's center for sure:)

i've tried to add:

bot.translate(-bot.width/2,-bot.height/2);

and...it's flew away like crazy!!! Smiley)))

Any other ideas?

Thank you!

By the way, how can i create class from this code? I mean i think i know all constructions u need, but something not working for me...

i need class with methods like .load, .rotate, .scale ...

thank you very much, this is very interesting language, i'm not programmer myself, moving from Nodebox, which is also very cool but quite limited for the moment...
Back to top
 
 
PhiLho 
Re: Question about PShape and rotation
Reply #6 - Feb 22nd, 2009, 5:58pm  
You don't use the code I shown (which I tested later).
Note I don't use bot.rotate but instead apply transforms on the whole system (on further drawings). The scope of these transformations can be limited by using pushMatrix / popMatrix.
Back to top
 
WWW  
sonomute
Re: Question about PShape and rotation
Reply #7 - Feb 22nd, 2009, 6:37pm  
yes, i'm trying to rotate only one object, without rotating anything else, i need more object-oriented solution, later i want to rotate a lot of those objects with different speed/direction at the same time, don't think it is good idea to rotate everything:)

Thanx anyway...
Back to top
 
 
PhiLho 
Re: Question about PShape and rotation
Reply #8 - Feb 23rd, 2009, 7:58am  
Please, look at pushMatrix() and its companion popMatrix: they allow you to rotate each object independently, as I wrote.
In a sketch (at 2 things rotate around 2 separate centers) I illustrate the technique. It doesn't use SVG but the idea is the same.

Now, I checked PShape, it has translate method as well as rotate, so you can try and apply my sequence to each shape without even using matrix, I suppose.
Back to top
 
WWW  
sonomute
Re: Question about PShape and rotation
Reply #9 - Feb 23rd, 2009, 8:25am  
Thank you. Can i ask why you using this particular numbers for rotating objects? Why they different for each one?

translate(width*0.325, height*0.325);

translate(width*0.68, height*0.68);

as i understand you positioning objects on different coordinates, but i still don't get the logics of what happening, it's pure mathematics for me, and even if my grandmother was teacher of mathematics i'm pretty dump in it,sorry...

So, what's the formula of translating object to keep it at place?

Thank you.
Back to top
 
 
PhiLho 
Re: Question about PShape and rotation
Reply #10 - Feb 23rd, 2009, 8:29am  
Oh, these translates are to position the sketches on the window, I use sketch height and width to follow size changes. These numbers are semi-random, I fear, perhaps adjusted to fit the graphics.
Back to top
 
WWW  
sonomute
Re: Question about PShape and rotation
Reply #11 - Feb 23rd, 2009, 8:44am  
it was fast:)

I even didn't have time to edit my post...

in basic example of rotation thy using this simple formula:

translate(width/2, height/2);

you using:

translate(width*0.325, height*0.325);

...

i don't see any logics, though i'm sure that it's here...

sorry for my stupidity...
Back to top
 
 
sonomute
Re: Question about PShape and rotation
Reply #12 - Feb 23rd, 2009, 9:21am  
may be it has something to do with the particular library? For example, if i want to rotate the whole matrix, i must increase the argument, but if i'm rotating Pshape, it will take the same number every time:  bot.rotate(radians(1));

and it works...

may be in case of translate method i need to act like this also...

still don't get how it works...
Back to top
 
 
sonomute
Re: Question about PShape and rotation
Reply #13 - Feb 23rd, 2009, 10:21am  
okey, now i starting to understand something:))

formula will be: to rotate top left corner of shape around center of the shape and then shift left top point of shape half of size to the left/up...

sorry, this is the only way to think for me:)

now i need to realize how to draw circle from points for example, and i'm almost done!

c'mon grandma, there must me some of your mathematical thinking in my head...or not?
Back to top
 
 
sonomute
Re: Question about PShape and rotation
Reply #14 - Feb 23rd, 2009, 11:04am  
this is code where i rotating my shape(round kind of face) four times to 90 degrees...

PShape bot;

void setup()
{
 size(500,500);
 noStroke();
 fill(255);
 smooth();
 frameRate(30);
 bot = loadShape("pum.svg");
 noLoop();

}


void draw()
{
 background(200);
 
 point(height/2,width/2);
 

 bot.translate(-bot.width/2,-bot.height/2);
bot.rotate(radians(90));
bot.translate(0,-bot.width);
 shape(bot, width/2, height/2);  

bot.rotate(radians(90));
bot.translate(0,-bot.width);
 shape(bot, width/2, height/2);
 
 bot.rotate(radians(90));
bot.translate(0,-bot.width);
 shape(bot, width/2, height/2);
 
 bot.rotate(radians(90));
bot.translate(0,-bot.width);
 shape(bot, width/2, height/2);

}

but this is for now the best i can do Smiley)

help me, i'm sure there are a lot of people for who it is very simple task..
Back to top
 
 
Pages: 1 2 
‹ Previous Topic | Next Topic ›