Adding images is a great way to add to a program. But there are some things to keep in mind:

• Your project must be saved!
• Your image must be saved in the same directory as your project
• Your image must be saved as one of the following formats: GIF, JPG, TGA, or PNG

If we wanted to use an image called turtle.jpg in a program called TurtleImage, we would save it into the same directory as the program.

When we use an image in a program, we must first load the image into a variable with the datatype of PImage. We load the image inside the setup() function because loading the image elsewhere will reduce the speed of the program.

To add an image to your project you must first save your project somewhere on your computer. Then you must save the images you want to use to the same directory as the project the image is being used in

int xPos = 100;
int yPos = 100;
int xSpeed = 2;
int ySpeed = 3;
PImage turtle;
int turtleImageHeight = 80;
int turtleImageWidth = 125;
void setup() {
 size(500, 300); turtle = loadImage(“turtle.jpg”);
}
void draw() {
 background(255, 255, 255); 
// Check if turtle hit right wall 
if (xPos > width - (turtleImageWidth / 2)) { 
xSpeed *= -1; 
} 
// Check if turtle hit left wall 
if (xPos < 0 + (turtleImageWidth / 2)) { 
xSpeed *= -1; 
}
 // Check if turtle hit bottom wall 
if (yPos > height - (turtleImageHeight / 2)) {
 ySpeed *= -1; 
} 
// Check if turtle hit top wall
 if (yPos < 0 + (turtleImageHeight / 2)) {
 ySpeed *= -1; 
} 
/* Adjust the x and y-coordinates of the center of the circle */
 xPos += xSpeed;
 yPos += ySpeed;
 imageMode(CENTER);
 image(turtle, xPos, yPos);
} 

For loops do the exact same thing as while loops except they are formatted differently. Just like while loops, we use for loops to make the boring, repetitive tasks of programming a lot easier. Some programmers like for loops better than while loops because they are more readable, while other programmers like while loops better because they are easier to understand.

We are using the variable “count” to count the number of times we will repeat the block of code. There are three parts to the for loop, the first part,

Lets say we want to sum all the integers from 1 to 10 (e.g. 1 + 2 + 3 +… + 9 + 10). An easy way to do this would be to use a for loop.

int sum = 0;
for (int count = 1; count <= 10; count++) {
sum += count;
}
println(“The sum of all integers from 1 to 10 is: “ +
sum);

Lets examine what is happening in this loop. We start at 1 (count = 1), and end at 11 (count <= 10). First, Processing checks to see if 1 is less than or equal to 11. Since it is, Processing executes the code in the loop body. In the loop body we do a simple math operation, which is adding the current count to the sum. When the loop is finished, which means that it reaches the closing curly bracket ( } ), the count is incremented by 1. Processing then checks to see if the count is less than or equal to 10, if so, it executes the code in the loop body. It will keep looping until the count is greater than 10.

When the loop is finished, Processing will print:

int xPos = 50;
int yPos = 50;
void setup() {
 size(500, 300);
}
void draw() {
 background(255, 255, 255); fill(39, 58, 150); ellipse(xPos, yPos, 100, 100); xPos += 1; yPos += 1;
}

int xPos = 50;
int yPos = 50;
int xSpeed = 2;
int ySpeed = 3;
void setup() {
size(500, 300);
}
void draw() {
background(255, 255, 255);
fill(39, 58, 150);
// Check if ball hit right wall
if (xPos > width) {
xSpeed *= -1;
}
// Check to see if ball hit left wall if (xPos < 0) { xSpeed *= -1; }
// Check to see if ball hit bottom wall if (yPos > height) { ySpeed *= -1; }
// Check to see if ball hit top wall
if (yPos < 0) { ySpeed *= -1; }
/* Adjust the x and y-coordinates of the center of the circle */
xPos += xSpeed; yPos += ySpeed;
ellipse(xPos, yPos, 100, 100);
}

int yPos = 50;
int xSpeed = 2;
int ySpeed = 3;
void setup() {
size(500, 300);
}
void draw() {
background(255, 255, 255);
fill(39, 58, 150);
// Check if ball hit right wall
//subtract 1/2 of the width of the ball from the width of the screen
if (xPos > width - (100 / 2)) {
xSpeed *= -1;
}
// Check if ball hit left wall
if (xPos < 0 + (100 / 2)) { xSpeed *= -1; }
// Check if ball hit bottom wall
if (yPos > height - (100 / 2)) { ySpeed *= -1; }
// Check if ball hit top wall if (yPos < 0 + (100 / 2)) { ySpeed *= -1; }
/* Adjust the x and y-coordinates of the
center of the circle */ xPos += xSpeed; yPos += ySpeed; ellipse(xPos, yPos, 100, 100);
}</div>
<img src="http://cs4all.cs.mtu.edu/wordpress/wp-content/uploads/2016/07/double-back-circles.jpg" />
<div class="divide">4</div>
Finally, we want to change the color of the ball whenever it bounces off a wall. In order to do this we will need to store the color of the ellipse in a variable. To store a color we will need to use a data type that we haven’t seen before called “color.” To change the color when the ball bounces off the wall we will use the random function to generate a random number between 0 and 255 (Remember that each part of a RGB value must be a value between 0 and 255).
<div class="code">int xPos = 50;
int yPos = 50;
int xSpeed = 2;
int ySpeed = 3;
color circleColor = color(39, 58, 150);
void setup() {
size(500, 300);
}
void draw() {
background(255, 255, 255); // Check if ball hit right wall if (xPos &gt; width - (100 / 2)) {
xSpeed *= -1;
circleColor = color(random(255), random(255), random(255));
}
// Check if ball hit left wall
if (xPos &lt; 0 + (100 / 2)) {
xSpeed *= -1; circleColor = color(random(255), random(255), random(255));
}
// Check if ball hit bottom wall
if (yPos &gt; height - (100 / 2)) {
ySpeed *= -1;
circleColor = color(random(255), random(255), random(255));
} // Check if ball hit top wall if (yPos &lt; 0 + (100 / 2)) { ySpeed *= -1;
circleColor = color(random(255), random(255), random(255));
}
/* Adjust the x and y-coordinates of the center of the circle */
xPos += xSpeed;
yPos += ySpeed;
fill(circleColor);
noStroke();
ellipse(xPos, yPos, 100, 100);
}