Animation

So far any motion in our Processing sketches has been controlled by the user. In this lesson we will learn how to have Processing update the position of objects automatically. You can see more on how to do this in Chapter 7 of Getting Started with Processing.

Basically what we do is use variables for the x and y positions of our object then we have the program change those variables. The code example below is the code from the video.

int xPos=10;                    //Inital x position
int xDir=2;                     //Initial x direction and speed
int yPos=10;                    //Initial y position
int yDir=2;                     //Initial y direction and speed

void setup()
{
  size(600, 400);
  smooth();
}

void draw ()
{
  background(124);               //Erases the last frame and gets ready for the new one
  ellipse(xPos, yPos, 20, 20);   //Draws our object
  xPos=xPos+xDir;                //Updates the x position
  if (xPos>width-10 || xPos<10)  //Checks to see if we hit a side
  {
    xDir=xDir*-1;                //Reverses the x direction
  }
  yPos=yPos+yDir;                //Updates the y position
  if (yPos>height-10 || yPos<10) //Checks to see if we hit top or bottom
  {
    yDir=yDir*-1;                //Reverses the y direction
  }
}

Comments