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.
IndexProgramming Questions & HelpSyntax Questions › Silly newbie can't center rotate picture
Page Index Toggle Pages: 1
Silly newbie can't center rotate picture (Read 394 times)
Silly newbie can't center rotate picture
Oct 18th, 2006, 5:46pm
 
Hi all-

I need some help...

Below my first coding attempt in processing.  I'm trying to rotate a picture and gradually decelerate the rotation to a stop.

What I want to do is to rotate it in the center of the frame so that it looks like it is spinning in place (like a wheel). I searhced on this board and found a posting in 2004 that used translate and image. I copied that code but can't seem to figure the details.

Any help would be appreciated. Thanks, Mike

void setup()
{
 size(600,427);
 PImage img;  
 img = loadImage("103_0283.JPG");
 frameRate(60);
 step=1;
 }

float angle;
float step;

void draw()
{
 background(00);
 angle = angle+0.2/step;
 rotate(angle);
 PImage img;  
 img = loadImage("103_0283.JPG");
 translate(320,215);
 image (img,-320, -215);
 step = step*1.03;
 if (step>100)
   {print ("Done");
   noLoop();
   }
}

void mousePressed()
{
 step = 0;
}
Re: Silly newbie can't center rotate picture
Reply #1 - Oct 18th, 2006, 7:39pm
 
Okay, a few things.

You might want to get into the habit of declaring your variables before you call setup.  In your example, you declared your img variable in setup which scopes it to setup and nowhere else.  This means you can only use it in setup because the rest of the sketch doesnt know what 'img' is. This is probably why you also declared it in your draw method as well.  So a good thing to get used to is to declare your PImage outside of setup and then handle loadImage inside of setup.

Also, you dont want to constantly call loadImage.  You only need to call it once.

So, all I am doing here is translating to the center of the screen with translate(300,200) and rotating around that point with rotate(angle).  Then I draw the image but since it draws from the upper left corner by default, I offset the image to minus half its width and minus half its height.  This places the center of the photo at the translate point and voila, image rotates around its center point.

Make sense?

Code:

PImage img;
float step;
float angle;

void setup()
{
 size(600,400);
 frameRate(60);
 img  = loadImage("1154.jpg");
 step = 1;
}

void draw(){
 background(0);
 angle = angle+0.2/step;
 
 translate(300,200);
 rotate(angle);
 image(img, -img.width/2, -img.height/2);
 
 step = step*1.03;
 if (step > 100){
   print("Done");
   noLoop();
 }
}

void mousePressed(){
 step = 0;
}
Page Index Toggle Pages: 1