toptal-p5-example.pde

/* 
 * We define coordinate variables first. We define them
 * here because we want them to be global.
 */
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;
}

@pmsoares Looks good!