Audoballs: The circle is Bouncing!

So as you can see here we now have a bouncing ball :D Result! The code is:

float xpos, ypos;
int Size = 60;
float xspeed = 3.5;
float yspeed = 3.2;

int xdirection = 1;
int ydirection = 1;

void setup() {
size(320, 240);
background(255);
smooth();
noStroke();
frameRate(30);

xpos = width/2;
ypos = height/2;
}

void draw() {
background(255);

xpos = xpos + (xspeed * xdirection);
ypos = ypos + (yspeed * ydirection);

if (xpos > width-Size || xpos < 0) { xdirection *= -1;} if (ypos > height-Size || ypos < 0) {
ydirection *= -1;
}

fill(144);
ellipse(xpos+Size/2, ypos+Size/2, Size, Size);
}

So as you (We, I) can see we have created a few more float's representing various numbers. (size, xspeed, yspeed, x/ypos)

We have told it the size of the ellipse and the x and y location to draw it: ellipse(xpos+Size/2, ypos+Size/2, Size, Size);

Then we make the xpos and ypos move by making a calculation that changes the value. So each run through the draw() command changes the value of the xpos to xpos + (xspeed * xdirection).

Therefore on initialising the xpos value is the width/2 (320/2 = 160). Then the draw command will run the lines "xpos = xpos + (xspeed * xdirection)

So the first time it runs will be something like xpos(currently 160) = 160(xpos) + (3.5 * 1). The same applies for ypos.

xpos = xpos + (xspeed * xdirection);
ypos = ypos + (yspeed * ydirection);

The other part that has been added in is the "if".

Essentially this means that if the statements in the brackets are true then the direction is multiplied by -1. This has the effect of reversing the direction. (so rather than it being 160 + (3.5 * 1), which would cause the ball to move along the x axis at a rate of 3.5 pixels per run through (the xpos value increases by 3.5) it is xpos + (3.5 * -1) which causes the xpos value to decrease by 3.5 each run through (xpos + -3.5). This has the effect of making the circle reverse.

A few of the other commands:
smooth() makes the sketch draw shapes with smooth edges.
noStroke() stops the sketch from drawing an outline.
frameRate() specifies the speed of the sketch.

So there we have a moving circle :D