Make an Object Move

First lets draw a green ball in the middle of a black box. The code below would be a good way to do this. There's some new code here I haven't talked about yet. Setup and Draw are special functions in Processing. Setup runs one time when the program starts. So, anything in between the curly braces { } will be executed in the order they appear. Draw will loop over and over again until we stop it. So the code in Draw will be executed line after line till we get to the close curly brace and then we star over at the open curly brace.

void setup()
{
  size (400,400);
  smooth();
  background(0);
  noStroke();
  fill(0,255,0);
}

void draw()
{
  ellipse(200, 200, 40, 40);
}

Now we'll want to move our ball so we should probably use a variable to keep track of our ball's position. For this we'll use:

int xPos=200;

Simply add this line to the top of your program. Basically we're declaring a variable. It will be an integer (int), meaning whole numbers only. xPos is just a name. It could really be anything. It's a good idea to make your variables descriptive. I'm using xPos for x-position. I've set the value to 200. As far as Processing is concerned any time I use the word xPos now it means 200. Now in our Draw change the ellipse() function:

  ellipse(xPos, 200, 40, 40);

Note, it does exactly the same thing. We haven't told it how to change xPos yet. Add this line to your draw just below your ellipse() and then run your sketch.
  ellipse(xPos, 200, 40, 40);
  xPos=xPos+1;

Notice, the ball drew a thick green line across the screen. Why? Well, xPos started at 200 and we drew a circle at 200. Then we increased xPos to 201 and then drew a circle at 201 and then at 202 and so on. Unfortunately we never told it to erase the original circle. To do this we need to redraw the background each time through the loop. This will erase everything that has gone before.

void draw()
{
  background(0);
  ellipse(xPos, 200, 40, 40);
  xPos=xPos+1;
}

This will allow the ball to move across the screen, but it will vanish off the side. We can change it by adding to our Draw.

void draw()
{
  background(0);
  ellipse(xPos, 200, 40, 40);
  xPos=xPos+1;
  if (xPos>width+20)
  {
    xPos=-20;
  }
}

if () asks if the conditions in the parenthesis is true. If it is then the code in the curly braces will be executed. If not the code will be skipped.

If we want the the ball to bounce rather than wrap we need to add a bit more.
int xPos=200;
int xDir=1;

void setup()
{
  size (400,400);
  smooth();
  background(0);
  noStroke();
  fill(0,255,0);
}

void draw()
{
  background(0);
  ellipse(xPos, 200, 40, 40);
  xPos=xPos+xDir;
  if (xPos>width-20 || xPos<20)
  {
    xDir=-xDir;
  }
}

I added a new variable for direction, xDir, and I changed our if(). Now rather than adding one to xPos each time we add xDir. When xDir is negative we're actually subtracting one from xPos. The || in the if() means OR. So if either condition is true the code in the curly braces will be executed.

Comments