Need to rotate and move images in processing?

Question

I am fast approaching several deadlines for my highschool graduation project so any advice you can give would be great. My project is to code a movie. The idea is to use processing to move the characters like tokens and also use code to animate things like rain and fire. Right now I am finding it very difficult to move images and/or rotate them. This is a big hurtle for my project. The current code I have for this is butchered and complicated but here it is. Image of leading lady, Radial: https://www.dropbox.com/s/x3gvendnaeftapj/radialoutlinel.png

/*
Radialrolling
*/
 PImage img;  // Declare variable "a" of type PImage
float ballX = 10;
float ballY = 200;
float h = 300;
//create a variable for speed
float speedY = 2; // spped set to 0 in order to test rotating. Necessary for rolling motion
 float speedX = 0.;
void setup() {
  size(800,800);
  smooth();

  noStroke();
background(0, 0, 0);// Load the image into the program  
  // change the mode we draw circles so they are
  // aligned in the top left
  ellipseMode(CORNER);
   img = loadImage("radialoutlinel.png");



}

 void RadialRoll(){

  rotate(0);//if this is anything but 0 ball will appear of screen
      image(img, ballX, ballY, h, h);  //create a continuos rotation using the new fun

 //nctions in the draw things
 }

void draw() {

  //clear the background and set the fill colour
  background(0);
  fill(255);





  //draw the circle in it's current position
//  ellipse(ballX, ballY, h,h);

  //add a little gravity to the speed
  speedY = speedY + 0; 
     speedX = speedX + .02; 
      ballX = ballX + speedX;


 RadialRoll();




  if (ballX > width - h) {
    // set the position to be on the floor
    ballX = width - h;
    // and make the y speed 90% of what it was,
    // but in the opposite direction
    speedX = speedX * -1;

    //switch the direction
    //speedY = speedY;
  }

  if (ballX > width - h) {
    // set the position to be on the floor
    ballX = width - h;
    // and make the y speed 90% of what it was,
    // but in the opposite direction
    speedX = speedX * -1;

    //switch the direction
    //speedY = speedY;
  }
  else if (ballX <= 0) {
    // if the ball hits the top,
    // make it bounce off
    speedX = -speedX;
  }
  if (ballY > height - h) {
    // set the position to be on the floor
    ballY = height - h;
    // and make the y speed 90% of what it was,
    // but in the opposite direction
    speedY = speedY * -1;

    //switch the direction
    //speedY = speedY;
  }
  else if (ballY <= 0) {
    // if the ball hits the top,
    // make it bounce off
    speedY = -speedY;
  }

}

How can I move images on screen and rotate them with little hassle? Thank you very much. -TheIronHobo

Answer 1

First when you look at rotate() function it take radians (values from 0 to TWO_PI) as argument so when you want fluent rotation use something like this

rotate(counter*TWO_PI/360);

Where counter could be integer value increased in every draw() loop. But if you just add this to you code image will be rotating around point [0,0] (upper left corner) and you will not see image for 1/4 of the rotation. To better understanding this you should read this TUTORIAL then you could start with basic rotation:

PImage img;
int counter = 1;

void setup() {
  size(800, 800);
  smooth();
  background(0, 0, 0);
  img = loadImage("radialoutlinel.png");
  imageMode(CENTER); //you can change mode to CORNER to see the difference.
}

void draw() {
  background(0);
  fill(255);

  counter++;

  translate(width/2, height/2);
  rotate(counter*TWO_PI/360);
  image(img, 0, 0, 300, 300);
}

Then if you want also move image from left to right side you will just adjust translate() first parameter.