Billard simplifié : analyse du script processing

Les variables utilisées

Pour modéliser notre balle et ses mouvements, nous avons besoin des variables suivantes :

• l'abscisse et l'ordonnée de la balle (x et y)
• la vitesse de déplacement horizontale et verticale de la balle (vitesseX et vitesseY)

Nous aurons aussi besoin de stocker le rayon de la balle. Nous le fixons arbitrairement à un trentième de la largeur du canevas.

Par ailleurs, nous utiliserons les variables width et height qui représentent la largeur et la hauteur du canevas.

Le détail du script

Déclaration des variables

Dans la première partie du script, nous déclarons les variables globales.

var x, y;
    var rayon; 
    var vitesseX,vitesseY;

Initialisation du script

Lors de l'initialisation, voici les différentes étapes :

• création d'un canevas qui occupe 90% de la largeur de la div parente
• assignation du canevas à la div parente
• initialisation des variables :
  • x et y placent la boule au centre du billard
  • le rayon est un trentième de la largeur
  • la vitesse est définie aléatoirement

// Initialisation du canevas

var maDiv=document.getElementById('p5js0');
myCanvas = createCanvas(maDiv.offsetWidth*0.9,maDiv.offsetWidth*2/3*0.9);
myCanvas.parent('p5js0');

// rayon de la boule de billard

rayon=width/30;

// position initiale de la boule de billard

x = width/2;
y = height/2

// vitesse initiale

vitesseX=random(-width/100,width/100);
vitesseY=random(-height/150,height/150);

La fonction principale de dessin

C'est dans la fonction principale que vont avoir lieu les tests nécessaires pour effectuer les déplacements de la balle et les rebonds. Le principe est le suivant :

• La balle est à la position x,y.
• la position de la balle à l'étape suivante devrait être x+vitesseX , y+vitesseY
• on vérifie que x+vitesseX n'est pas à l'extérieur du plateau. Si on a dépassé le bord du plateau, on effectue le rebond : on prend l'opposé de vitesseX comme vitesse horizontale

  // est on arrivé au bord ? si c'est le cas, on rebondit
  if ( x+vitesseX > 0.9 * width ) {
    vitesseX = -vitesseX;
  }
  if ( x+vitesseX < 0.1 *width ) {
    vitesseX = -vitesseX ;
  }

• on fait la même chose avec le déplacement vertical

  // même chose pour les bords haut et bas
  if ( y + vitesseY > 0.9 * height  || y + vitesseY < 0.1 * height) {
    vitesseY = -vitesseY ;
  }

  notons bien qu'ici les deux tests ont été regroupé en un seul. L'opérateur || est un ou logique. On teste donc que l'on est en dessous du bas ou au dessus du haut
• on calcule les nouvelles coordonnées effectives et on dessine la boule de billard.

  // deplacement de la boule
  x += vitesseX ;
  y += vitesseY ;
  // dessin de la boule de billard
  fill(200);
  ellipse(x,y,rayon,rayon);