Le dernier blog

Processing, onzième cours

Nous avons déjà rencontré des variables au fil des scripts, il est temps de faire le point à leur sujet. Il s’agit d’un des concepts clé de la programmation.

Une variable est un mot qui est associé à une valeur. Je peux par exemple décréter que j’utilise une variable nommée compteur (c’est moi qui ai choisi le nom) et qui est associée à la valeur 0 (zéro). Puis, au cours de mon animation je peux imaginer d’incrémenter ce compteur en fonction d’un évènement, par exemple à chaque fois qu’un clic de souris est effectué. Au premier clic, la variable compteur sera alors incrémentée de 1 et verra sa valeur passer de zéro à un, puis au second clic elle sera à nouveau incrémentée et prendra donc la valeur de deux, et ainsi de suite.
Les applications pratiques des variables sont infinies, puisqu’elles permettent de faire évoluer une valeur dans le temps. Par exemple si je souhaite faire bouger un objet sur l’écran, il faudra que ses coordonnées soient stockées dans des variables afin que je puisse changer la position de l’objet en tenant compte de son état antérieur. Nous alons voir un cas pratique plus loin.

Le principe de fonctionnement des variables n’est pas très difficile à comprendre mais le débutant peut être dérouté par un certain nombre de pré-requis que je vais énumérer ici :

• Les variables s’écrivent en un seul mot et ne contiennent donc aucune espace. Elles ne peuvent contenir que des lettres et des chiffres (mais ne peuvent pas commencer par un chiffre) et le caractère underscore (_). Les variables suivantes sont valides : compteur, a, _test. Les variables suivantes ne sont pas valides : mon compteur, 2test, bidule>truc.
• Les noms des variables sont sensibles à la casse des caractères. Ainsi monCompteur, Moncompteur et moncompteur sont trois variables différentes.
• Sous Processing, les variables sont soumises à ce que l’on nomme un « typage fort », ce qui signifie que le programme a besoin de savoir quelle type de données contient la variable (nombre entier, nombre décimal, caractère, valeur booléenne,…), et qu’il refuse de modifier ce type en cours d’exécution du programme.
• Une variable créée par le programmeur ne doit pas avoir le même nom qu’une variable système existante. Par exemple mouseY (l’ordonnée de la souris) est une variable système qui ne peut pas être modifiée.
• Avant de se voir attribuer une valeur, les variables doivent être déclarées (nous y reviendrons).
• Sous Processing, l’accès à une variable dépend du niveau auquel elle a été déclarée (nous y reviendrons en pratique).

Voici un exemple très basique de manipulation d’une variable :

float couleur;

void setup(){
  couleur=0;
  background(couleur);
}

void draw(){
  if(mousePressed){
    couleur=couleur+0.5;
    couleur=couleur*1.05;
  } else {
    couleur=couleur*0.9;
  }
  background(couleur);
}

Ici la variable se nomme couleur. On remarque que sur la première ligne de mon programme, en marge (c’est à dire à un niveau supérieur) des gestionnaires d’évènement setup() et draw(), je déclare ma variable en commençant par indiquer son type, suivi de son nom. Ainsi en écrivant float couleur;, j’avertis Processing que je vais manipuler une variable de type nombre décimal (float) nommée couleur et que cette variable pourra potentiellement être manipulée par n’importe quelle fonction du programme (c’est le fait d’être déclarée en dehors des fonctions qui lui donne cette propriété). Sans cette déclaration, Processing refuserait d’utiliser la variable couleur.
Dans notre setup() (fonction lancée une unique fois au début de l’exécution du programme), nous associons une valeur (zéro) à notre variable en écrivant ceci : couleur=0. L’opérateur « = » (égal) sert donc à affecter une valeur à une variable.
A=1 signifie donc : A prend la valeur de 1.
Dans notre fonction draw() (qui est lancée de manière régulière), nous faisons un test (if (mousePressed)) qui, on l’a vu précédemment, permet de vérifier si le bouton de la souris est enfoncé. Dans le cas où le bouton de la souris est effectivement enfoncé, la variable couleur se voit appliquer deux traitements. Tout d’abord elle est incrémentée de 0.5 (zéro virgule cinq). Si par exemple elle vaut 100, après ce premier traitement sa valeur sera de 100.5. Ensuite nous multiplions couleur par 1.05. Multiplier par 1.05 (un virgule zéro-cinq) équivaut à ajouter 5% à une valeur. Ainsi, 100*1.05 = 105 ; 200*1.05 = 210; etc. Cette multiplication permet à ma variable couleur de connaître une accélération. Elle connaîtra ces états successifs (que j’arrondis à trois décimales pour ne pas rendre l’énumération de ces états successifs trop indigeste ou trop illisible) : 0.0 ; 0.525 ; 1.076 ; 1.655 ; 2.262 ; 2.900 ; 3.571 ; 4.274 ; 5.013 ; 5.788 ; 6.603 ; 7.458 ; 8.356 ; 9.299 ; 10.289 ; 11.328 ; 12.420 ; 13.566 ; 14.769 ; 16.032 ; 17.359 ; 18.752 ; 20.215 ; 21.750 ; 23.363 ; 25.056 ; 26.834 ; 28.701 ; 30.661 ; 32.719 ; 34.880 ; 37.149 ; 39.531 ; 42.033 ; 44.660 ; 47.418 ; 50.314 ; 53.354 ; 56.547 ; 59.899 ; 63.419 ; 67.115 ; 70.996 ; 75.071 ; 79.349 ; 83.842 ; 88.559 ; 93.512 ; 98.713 ; 104.173 ; 109.907 ; etc. On peut voir sur l’image reproduite au dessus que notre chiffre augmente avec une accélération et non de manière rectiligne.
La condition if (si…) est ici suivie d’une alternative else (sinon – c’est à dire, dans ce cas, si le bouton de la souris n’est pas enfoncé). Dans cette alternative, je multiplie ma variable couleur par 0.9, c’est à dire que je lui ôte 10% (multiplier par 0.9 revient à enlever dix pour cent).
Enfin, après avoir procédé à tous ces calculs, je « repeins » la fenêtre avec la couleur qui correspond au chiffre contenu dans ma variable couleur. Si couleur a la valeur de 10, écrire background(couleur) revient à écrire background(10).

Au passage, revoyons la structure des conditions if :
if ( condition ) { actions à réaliser si la condition est remplie } else { actions à réaliser si la condition n’est pas remplie }
On peut imbriquer des conditions dans les conditions, comme ceci : if (a<10){ if (a<5){ … }}. Il est à noter que dans Processing, toute accolade, tout crochet, toute parenthèse ou toute guillemet ouvertes ( {[(«  ) doivent finir par être fermés ( }]) » ).

void draw(){
  float x = random(100);float y = random(100);
  float rouge = 0; float vert = 0; float bleu = 0;
  if(x<33)
    {rouge=255;}
  else {
    if(x<66)
      {vert=255;}
    else {
      {bleu=255;}
    }
  }
 fill(rouge, vert, bleu);
 ellipse(x,y,10,10);
}

Dans l’exemple ci-dessus, les variables, toutes de type nombre décimal (float) et nommées x, y, rouge, vert et bleu, sont déclarées à l’intérieur de la fonction draw(), ce qui signifie qu’elles seront oubliées sitôt que la fonction aura été exécutée et ne seront pas lisibles par d’autres fonctions. Les variables x et y se voient chacune attribuer une valeur au hasard entre 0 et 100 (random(100)), et les autres (rouge, vert, bleu) se voient attribuer la valeur 0 (zéro).
Nous effectuons ensuite une batterie de tests disant que si x est inférieur à 33 alors rouge prend la valeur de 255. Sinon, si x est inférieur à 66 alors vert prend la valeur de 255. Dans tous les autres cas, bleu prend la valeur de 255. Afin de ne pas faire un script trop long, je n’ai pas fait d’opérations de ce genre se rapportant à la valeur de la variable y, mais on pourrait tout à fait imaginer une telle chose.
Pour finir, nous décrétons que la couleur de remplissage des formes sera fill(rouge,vert,bleu), c’est à dire que le « canal » RGB des rouges sera égal à la valeur de la variable nommée rouge, que le « canal » des verts sera égal à la valeur de vert et que le canal bleu sera égal à la valeur de la variable bleu. Dans la pratique, la couleur sera donc (255,0,0), (0,255,0) ou (0,0,255).
Pour finir, je dessine une ellipse de 10 pixels de diamètre vertical et autant de diamètre horizontal à la position (x, y) que nous avons obtenue au hasard hasard. Le résultat est l’affichage apparemment anarchique de cercles dont la couleur dépend cependant de la position horizontale.
Cette page est consacrée aux variables et il m’a semblé logique d’en utiliser beaucoup, mais j’aurais pu écrire le script ci-dessus en me passant des variables rouge, vert, bleu, comme ceci :

void draw(){
  float x = random(100);float y = random(100);
  if(x<33)
    {fill(255,0,0);}
  else {
    if(x<66)
      {fill(0,255,0);}
    else {
      {fill(0,0,255);}
    }
  }
 ellipse(x,y,10,10);
}

Finissons avec ce sujet extrêmement abstrait en évoquant les types les plus courants de variables que Processing traite :

• int : les nombres entiers 32 bits compris entre -2147483647 et +2147483647 (0, 10, 121, -15,…).¹
• float : les nombres décimaux (0.129432, 12.1, 145.9999, -0.1,…)² .
• boolean : valeur binaire qui a la valeur true ou la valeur false.
• char : caractère (‘a’, ‘b’, ‘z’, ‘3’). Les caractères s’écrivent entre des apostrophes droites (‘)
• String : chaîne de caractères (« bonjour »). Les chaînes de caractères s’écrivent entre des doubles-guillemets (« )
• color : cet objet assez spécifique à processing (tous les langages de programmation n’ont pas une variable de ce type) permet, comme son nom l’indique, de stocker des couleurs pour y accéder ensuite avec diverses fonctions. Je peux par exemple écrire color c = color (255,0,0) au début d’un programme puis, plus tard décider de peindre la scène avec cette couleur c, comme ceci : background(c).
• enfin, tout objet créé par le programmeur (nous aborderons la programmation « orientée objet » un peu plus tard) peut être utilisé par Processing.

Nous allons voir dans le prochain article comment on peut stocker des variables sous forme de listes (ou tableaux).

1. Ceux qui savent quel parti en tirer seront heureux d’apprendre qu’il existe aussi des entiers de type byte, codés sur 8 bits (2 puissance 8, donc entre -127 et 127) et des entiers de type long (64 bits, soit 2 puissance 64 nombres différents) [↩]
2. Il existe aussi des nombres décimaux de type double, codés sur 64 bits [↩]