​

var speed = 2;//variable vitesse

​

​

var xpos2 = 0;//variable 2 position x (pour la lettre)

​

//la configuration de départ. Sert à lister les éléments qui sont nécessaires au départ. Ce code ne va s’exécuter qu’une seule fois.

function setup() {

  createCanvas(800, 900);//largeur et hauteur du canvas

  noStroke();//pas de contour

}

​

​

//tout ce qui se trouve ici est « dessiné » en boucle par le programme.

function draw() {

  background('#dff0ea');//la couleur du fond

  xpos = xpos + speed;//incrémenter la variable xpos

​

  //la condition : si le cercle sort du canvas, changer la polarité de la vitesse

  if ((xpos > width) || (xpos < 100)) {

    speed = speed * -1;

  }

  //LES CERCLES QUI BOUGENT

  fill('#574f7d');//couleur du fond du cercle

  ellipse(xpos, 100, 140, 140); //le cercle qui bouge horizontal

  fill('#f3826f');//couleur du fond du cercle

  ellipse(height/2, xpos, 140, 140);//le cercle qui bouge vertical

  fill('#ffb961');//couleur du fond du cercle

  ellipse(xpos, xpos, 140, 140);//le cercle qui bougediagonal

  //LA LETTRE QUI BOUGE

  xpos2 = xpos2 + 2;//incrémenter la variable xpos2

  //la condition : si la lettre sort du canvas, elle retourne à la position 0

   if(xpos2 > width)

  {

    xpos2 = 0;

  }

  textSize(200);//la taille du texte

  fill('#574f7d');//la couleur du texte

  noStroke();//on enlève le contour 

  text('B', xpos2, 600);//le texte ainsi que sa position

}