int step = 1;
int position;

void setup() {
  size(500, 600);
  background(#299598);
}

void draw() {
// couleur de fond
  background(#299598);
// couleur de forme, ici l'ellipse
  fill(#F0DA0F);
// On enlève le contour de la forme
  noStroke();
  //   Position en X, Position en Y, largeur du rect(); , auteur rect();
  ellipse(width/2, height/2, 52, 52);
// On indique la couleur de la seconde ellipse qui se superpose à la première
  fill(#0CEA97);
// On déclare la position + l'incrémentation de 1
  position = position + step;
// On décale de 25px pour que le bord de l’ellipse rebondisse bien sur le bord de la fenêtre 
  translate(25, 0);
// On crée la condition pour faire grossir l'ellipse jaune 
  if (position > 175 && position < 275) {
    fill(#F0DA0F);
    ellipse(width/2-25, height/2, 60, 60);
  }
// On crée les deux condition pour les rebonds
  if (position > 500 - 50) {
    step = -1 * step;
  }
  if (position < 0) {
    step = -1 * step;
  }
// On affiche un texte de 16pt, avec la position de l'ellipse grise ( oui c'est la lune :D )
  textSize(16);
  text(position, 0, 20);
// On donne une valeur de gris (entre 0 et 255) et on donne une transparence de 200 ( là aussi entre 0 et 255 )
  fill(100, 200);
// On crée l'ellipse
  ellipse(position, height/2, 50, 50);
}