How to move items AND how to use conditional statements

Let's start by comparing two different modes of drawing shapes. The FIRST is what we did in tutorial one - repeatedly drawing a shape where we see its previously drawn frame, as we additively draw over it. That looks like this:

Now lets compare that with method two...an ANIMATED or moving shape. The difference is that on each frame the background redraws and wipes out the old shapes. The still image below doesn't show this very well, but simply imagine that a clean slate of black is drawn at the beginning of each frame
.

The ONLY difference between these two programs (at least as far as coding goes) is that the first one defines the background() in the setup() function, and the second one does it in the draw() function.

Method 1:

Method 2:

Check out the difference for yourself in the Processing program.

There have been some questions about creating FADES, so objects in the screen fade away after the shapes are drawn. To do that, we will do something similar to what is happening with Method 2 above, except that we will be drawing a semi-transparent box in the draw() function. This way, in every FRAME the background will closer and closer the the full opacity and color of the box being drawn.

See what I mean below:

Below is the code. Try testing out the variables and make sure you understand what is happening:
//***************************************************
void setup(){
size(450,350);
background(0);
smooth();
stroke(0,0,250,90);
noFill();
}
void draw(){
fill(0,9);
rect(0,0, width, height);
noFill();
ellipse(mouseX, mouseY, 50, 90);
}
//*************************************************

By changing the fill value (the one above the rect();) from fill(0,9); to fill(0,4); you will see that the fade effect is SLOWER.

WHY?

This is because the rectangle being drawn is black, hence the 0 value, and has an alpha transparency of 4. The lower the second value is, the less opaque the rectangle is, and therefore the longer it will take to make shapes underneath it get covered up with black color.

Why 255 values for each channel? 256 is 2^8 (or two to the eighth power). A computer can handle numeric values faster if they are a power of 2.

I want to make a sketch of a ball that moves throughout the screen. I will start by making a ball that moves once through the screen with the below code:

//**********************
// Below two values are variables that I will use later

float xPosition = 0;
float yPosition ;

void setup(){
size(450,350);
smooth();
noStroke();
yPosition = height/2;
}

void draw(){
background(0);
fill(0,20,220);
ellipse(xPosition,yPosition,50,50);
// The below line says that the value of xPosition will grow by 2 every frame
xPosition += 2;
}

//**********************

Copy and paste the above code in the Processing program and make sure you understand what's happening.

What is this FLOAT stuff about?

Float is one kind of data type. A float value can hold REAL numbers, meaning positive or negative numbers with decimal point values. Examples of float values are 1.4, -4255.22, 19.14125462, 0.

Other data types are INTs (whole number integers), Strings (text), etc.

What does: xPosition += 2; mean?

If you want to increment a value that a variable is holding, there are some shorthand ways to do it.
For example, if you want a number to get larger by one you could write the longhand or the shorthand ways:

i = i + 1;
is the same as
i++;

The above two lines are synonymous.

i = i + 3;
is the same as
i += 3;

i = i * 1.5;
is the same as
i *= 1.5;

i = i / 1.1;
is the same as
i /= 1.1;

This means that in our program, if you want the ball to move across the screen SLOWER, then lower the value 2 to a smaller number such as .75
xPosition += .75;

This will make the ball move slower.

Now let's keep that ball from leaving the screen along the RIGHT wall. What we want is for the ball to have a speed, a new variable called xSpeed. When this value is positive, the ball will move to the right in the X axis. When it is negative, the ball will move to the LEFT in the X axis.

If the ball hits the right wall, we want to tell the ball to change directions (make xSpeed negative). The NEW PROGRAMMING COCEPT here is the Conditional Statement...also called an IF...THEN statement.

The syntax looks like this:

if(a condition is true){

then do stuff

}

If the condition is not true, then the lines of code never get executed.
a real world application:

if(xPosition > width){
xSpeed += -1;
}

Here is the code to make the ball change directions. Try to figure it out and test it out.

// Below two values are variables that I will use later
float xPosition = 0;
float yPosition;
float xSpeed = 3;
float ySpeed = 3;

void setup(){
size(450,350);
smooth();
noStroke();
yPosition = height/2;
}

void draw(){
background(0);

// checks to see if ball position is larger than width of sketch
if(xPosition>width){
xSpeed = -3;
}

// checks to see if ball position is smaller than 0 (left wall)
if(xPosition<0){
xSpeed = 3;
}

fill(0,20,220);
ellipse(xPosition,yPosition,50,50);
// The below line says that the value of xPosition will grow by 2 every frame
xPosition += xSpeed;
}

SEE THE ABOVE SKETCH RUNNING HERE

Now we will add IF statements to cover all four walls. We will also choose a random value for the xSpeed and ySpeed and change the background color when the ball hits a wall. This way the ball can have initial speeds that unexpected (diagonal direction). Here is the CODE:

// Below two values are variables that I will use later
float xPosition = 0;
float yPosition;
float xSpeed;
float ySpeed;
color backColor = color(0,0,0);

void setup(){
size(450,350);
smooth();
noStroke();
yPosition = height/2;
ySpeed = random(-8,8);
xSpeed = random(-8,8);
}

void draw(){
background(backColor);

// checks to see if ball position is larger than width of sketch
if(xPosition>width){
xSpeed *= -1;
backColor = color(random(255),random(255),random(255));
}

// checks to see if ball position is smaller than 0 (left wall)
if(xPosition<0){
xSpeed *= -1;
backColor = color(random(255),random(255),random(255));
}
if(yPosition<0){
ySpeed *= -1;
backColor = color(random(255),random(255),random(255));
}
if(yPosition>height){
ySpeed *= -1;
backColor = color(random(255),random(255),random(255));
}

fill(0,20,220);
ellipse(xPosition,yPosition,50,50);
// The below line says that the value of xPosition and yPosition
// will grow by the value currently held in the speed variables
xPosition += xSpeed;
yPosition += ySpeed;
}