Conditions

On va refaire le logo DVD, ou presque, on utilisera un cercle, peut être que j'aime un peu trop les cercles 🤔.

On va le dessiner et le déplacer vers la droite pour chaque nouvelle image.

let x = 0;

function draw(){
  x = x + 5;

  circle(x,height / 2, 100);
}

Si on essaye notre code on voit qu'il démarre à gauche et qu'il avance bien vers la droite pour chaque nouvelle image. On voit aussi que si on peint suffisamment de nouvelles images le cercle finit par sortir de l'espace de dessin par la droite.

Évidemment, puisque notre programme n'exprime pas de contrainte particulière.

Si on veux exécuter du code dans certains cas, comme "le cercle touche le bord droit" alors il faut utiliser le mot clef if du langage javascript.

Il prend cette forme

if(condition){
  // ici le code que l'on fait seulement si...
  // ...la condition entre paranthçèses est vraie
}

et si je m'en sert dans le petit programme que je suis en train de faire, je peux faire un truc comme ça

let x = 0;

function draw(){
  x = x + 5;

  // si x est plus grand que
  // "la largeur de l'espace moins 50(le rayon)"
  if(x < width - 50){
    // alors:
    console.log("et paf le bord");
  }

  circle(x,height / 2, 100);
}

Si on fait tourner ceci (et que notre console est ouverte) on voit bien qu'on a un message pour chaque image pour laquelle le cercle touche le bord droit. Et maintenant?

Et maintenant on est un peu emmerdés parce qu'on a pas exactement ce qu'il faut pour changer la direction du cercle. On ajoute 5 quoiqu'il arrive.

Ce qu'on peut faire c'est d'extraire ce 5 dans une variable pour pouvoir le changer pendant l'exécution du programme.

let x = 0;
let speed = 5;

function draw(){
  // on ajoute speed à x
  x = x + speed;

  if(x < width - 50){
    console.log("et paf le bord");
    speed = speed * -1; // on inverse speed
    // du coup on se mettera à "ajouter -5" donc a retirer 5 de x
    // donc à bouger vers la gauche
  }

  circle(x,height / 2, 100);
}

On va se créer une variable radius pour le rayon du cercle, parce qu'on y fait reference plusieurs fois au travers de valeurs fixes n'ayant rien en commun dans le code. Et d'ailleurs on va utiliser const pour communiquer qu'on a pas pour projet de le changer en cours de route.

let x = 0;
let speed = 5;
const radius = 50;

function draw(){
  x = x + speed;

  if(x < width - radius){
    console.log("et paf le bord");
    speed = speed * -1;
  }

  circle(x,height / 2, radius * 2);
}

C'est quand même mieux, vous trouvez pas?

Exercice

Faites en sorte que le cercle rebondisse à l'infini.

let x = 0;
let speed = 5;
const radius = 50;

function draw(){
  x = x + speed;

  if(x < width - radius){
    speed = speed * -1;
  }

  if(x > 0){
    speed = speed * -1;
  }

  circle(x,height / 2, radius * 2);
}

Exercice

Faites rebondir le cercle sur l'axe Y aussi.

let x = 0;
let speedX = 5;
let speedY = 5;
const radius = 50;

function draw(){
  x = x + speedX;
  y = y + speedY;

  if(x < width - radius){
    speedX = speedX * -1;
  }

  if(x > 0){
    speedX = speedX * -1;
  }

  if(y > height - radius){
    speedY = speedY * -1;
  }

  if(y < 0){
    speedY = speedY * -1;
  }

  circle(x,height / 2, radius * 2);
}

En bonus et pour la beauté du geste, vous pouvez essayer de changer la couleurs du cercle à chaque fois qu'il tape un bord.

// TODO, allez pas me dire que vous en etes là dès la première session

Donc, je vais me permettre si vous le voulez bien de faire une pause ici. Au pire, je vous lance le défi de me déborder.

TODO un tuto sur comment aller vers le dinosaure qui saute TODO ...ou shit flappy bird pour donner sur "multitudes" TOOD dacument-level events