ok, code comes below.
Question added: I understood that the variable mousePressed is defined in Processing, thus I do not need to declare it, correct?
int x1, y1;
int x2, y2;
int x3, y3;
int x4, y4;
/*
* We define the speed variables here. Speed variables are
* just integer values we add to or take from the coordinates.
* The larger we add or take, the faster balls will move.
* That's whe we call them speed.
*/
int b1Speed=4;
int b2Speed=1;
int b3Speed=6;
int b4Speed=2;
/*
* We also set the rgb values for each ball as variables
* here. Note that if we ever want to change the color of an
* object, this is how we can achieve that.
*/
int b1r=255, b1g=120, b1b=200;
int b2r=0, b2g=220, b2b=0;
int b3r=30, b3g=150, b3b=110;
int b4r=50, b4g=100, b4b=75;
void setup() {
size(500, 500);
// Call the method that sets the starting points (see below).
setStartingPoints();
}
void draw() {
// Set the background to white at each loop, so that
// balls doesn't leave a mark behind.
background(255);
// Set the strokes of the ball to black
stroke(0);
// Set the ellipseMode to CENTER so all the balls could
// be aligned from the center.
ellipseMode(CENTER);
// Here, we set the fill of a ball and draw it. Next line,
// we repeat the process, set the color of the next ball and
// draw it again. We give the global color and coordinate
// varaiables instead of plain integer values like in the examples.
fill(b1r, b1g, b1b);
ellipse(x1, y1, 20, 20);
fill(b2r, b2g, b2b);
ellipse(x2, y2, 20, 20);
fill(b3r, b3g, b3b);
ellipse(x3, y3, 20, 20);
fill(b4r, b4g, b4b);
ellipse(x4, y4, 20, 20);
// The lines in the if block are the ones that moves the ball.
// This if says, "if mouse is not in a clicked state, move the
// ball". That's why the balls freezes when the mouse is clicked.
if (!mousePressed) {
// These lines makes the balls move. It adds the speed variables
// to relevant coordinates. When the coordinates change, the balls
// location changes. Note that whichever direction the ball goes when
// when we add the speed, it will go to the oposite direction when we subtract
// the speed.
x1+=b1Speed;
y1+=b1Speed;
x2-=b2Speed;
y2+=b2Speed;
x3+=b3Speed;
y3-=b3Speed;
x4-=b4Speed;
y4-=b4Speed;
}
}
// This method fires when the mouse is released.
void mouseReleased() {
// This method call sets the balls position to its initial.
setStartingPoints();
}
/*
* Here, we defined a method for setting the starting points
* of the balls to their initial position. We could have used
* these codes instead of defining a method and calling it,
* but this a better practice because there are multiple places we
* set the balls coordinates to their initial values, at the
* setup and after mouse button is released. And we don't want
* code duplication.
*/
void setStartingPoints() {
/*
* Note that 'width' and 'height' are global variables that
* stores the size of the container. In this case, both are 500
*/
x1=0;
y1=0;
x2=width;
y2=0;
x3=0;
y3=height;
x4=width;
y4=height;
}
