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;
}

Hi.
I've implemented this code with OOP.

class Ball {
   color c;
   float x, y, w, h;
   float s;

   Ball(color c, float w, float h, float s) {
      this.c = c;
      this.w = w;
      this.h = h;
      this.s = s;
   }

   void setX(float x) {
      this.x = x;
   }

   void setY(float y) {
      this.y = y;
   }

   float getX() {
      return x;
   }

   float getY() {
      return y;
   }

   float getSpeed() {
      return s;
   }

   void drawBall() {
      stroke(0);
      fill(c);
      ellipse(x, y, w, h);
   }
}

Ball b1 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b2 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b3 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));
Ball b4 = new Ball(color(random(255), random(255), random(255)), 20, 20, random(10));

void setup() {
   size(500, 500);
   reset();
}

void draw() {
   background(255);
   b1.drawBall();
   b2.drawBall();
   b3.drawBall();
   b4.drawBall();

   if (!mousePressed) {
      b1.setX(b1.getX()+b1.getSpeed());
      b1.setY(b1.getY()+b1.getSpeed());

      b2.setX(b2.getX()-b2.getSpeed());
      b2.setY(b2.getY()+b2.getSpeed());

      b3.setX(b3.getX()+b3.getSpeed());
      b3.setY(b3.getY()-b3.getSpeed());

      b4.setX(b4.getX()-b4.getSpeed());
      b4.setY(b4.getY()-b4.getSpeed());
   }
}

void mouseReleased() {
   reset();
}

void reset() {
   b1.setX(0);
   b1.setY(0);
   b2.setX(width);
   b2.setY(0);
   b3.setX(0);
   b3.setY(height);
   b4.setX(width);
   b4.setY(height);
}

@pmsoares Looks good!