1) Commencer avec Processing

Processing est une surcouche par dessus Java, ce qui signifie que le code est du java. Il est un peu plus strict par certains aspects que le php et le javascript, par exemple, mais on s’y fait vite.

Précédent | 2/16 | Suivant

Dans la fenêtre de Processing, on peut écrire du code simplement et directement. Il va s’exécuter une fois, et arrivé à la fin des instructions, il s’arrêtera.
Ici on dessinera juste une ligne. La fonction line(), comme son nom l’indique, dessine une ligne. Les deux premiers chiffres sont les coordonnées en x et y du début de la ligne, et deux suivantes celles de la fin de la ligne.

line(10,10,100,100);

Si on veut bénéficier de la puissance de feu de Processing, on utilisera la fonction draw. Cette fonction réservée à Processing répète en continu le code qui est entre les accolades. La vitesse de répétition est par défaut de 60 fois par seconde. On dit que le programme opère une boucle (loop en anglais).

// ceci dessine des lignes de manière aléatoire
void draw(){
   line(random(200),random(200),random(200),random(200));
}

Notez au passage que l’on peut (et doit, pour être un bon codeur) commenter son code avec un double slashe. Un commentaire est un texte libre qui ne sera pas ni lu ni inclus dans le programme exécuté. On peut donc en mettre autant que l’on veut sans alourdir le programme.

En utilisant l’autre fonction réservée de Processing, setup(), on peut paramétrer un peu mieux notre animation minimale. Ici, on va décider que la taille de l’animation sera de 200 pixels sur 200 pixels.
La fonction setup() s’execute une seule fois, au lancement du script, juste avant la lecture en boucle de draw().

void setup() {
 size(300,200);
}

void draw(){
   line(random(300),random(200),random(300),random(200));
}

Ici, nous utilisons la fonction "random()" pour générer un chiffre aléatoire entre 0 et la valeur indiquée entre parenthèses, entre 0 et 200 donc.

Width et height

Il existe en Processing des constantes, c’est à dire des mots qui se voient assigner une valeur en début de programme, et que l’on consulte ensuite. width et height dans processing désignent ainsi la largeur et la hauteur de la fenêtre d’affichage. On dit aussi dans ce cas que ce sont des "variables réservées"
Dans notre cas, on peut donc remplacer les chiffre 300 et 200 de notre script par width et height, ce qui permet à ce code de s’adapter automatiquement à la taille de l’animation définie par size().

void setup() {
 size(300,200);
}

void draw(){
   line(random(width),random(height),random(width),random(width));
}

Le fait d’employer width et height nous permettra dans le futur de changer la taille de l’animation sans devoir répercuter ce changement dans le reste du script, qui s’adapte automatiquement.

Background() et stroke()

L’animation minimale que nous venons d’écrire permet de dessiner à chaque boucle une ligne. Les lignes s’accumulent, après quelques minutes la surface de l’animation se sature. Si l’on veut obtenir un effet différent, on peut décider que l’animation s’effacera à chaque boucle.
Il suffit pour ça d’ajouter l’instruction background(255) qui aura pour effet de remplir la surface de la couleur donnée entre parenthèses, ici 255 pour blanc. l’instruction stroke permet quand à elle de définir la couleur du trait des lignes (et des autres formes dessinées). Comme j’ai besoin d’une seule couleur, j’ai placé l’instruction dans le setup, qui ne s’exécute qu’une seule fois. Inutile de re-définir cette couleur à chaque boucle si la valeur ne change pas.

void setup() {
 size(300,200);
 stroke(204,102,0);
}

void draw(){
   background(255);
   line(random(width),random(height),random(width),random(width));
}

mousePressed mousX, mouseY et if...else

Pour rendre l’animation un peu plus interactive, nous allons ajouter quelques lignes de code supplémentaires :

void setup() {
 size(300,200);
 stroke(204,102,0);
}

void draw(){
 background(255);
 if (mousePressed == true) {
   line(mouseX,mouseY,random(width),random(width));
 }
 else {
   line(random(width),random(height),random(width),random(width));
 }
}

l’instruction "if" fonctionne comme dans tous les langages de programmation vus : elle évalue ce qui se trouve entre parenthèses et si l’évaluation est positive (donne comme résultat oui, true, 1) elle exécute le code entre accolades. Else permet d’executer une autre portion de code si le résultat est au contraire faux, false, 0.

Ici, il est demandé à if de comparer l’état du bouton gauche de la souris par le biais de la variable mousePressed. Si le bouton est enfoncé au moment où la question est posée, mousePressed vaut 1, sinon 0.

Remarquez que la comparaison se fait avec un double =, ce qui distingue une instruction d’assignation (x=4, je stocke 4 dans x) d’une comparaison (x==4, je demande si x est égal à 4). Dans un if, on compare, donc on écrit "==".

Le code entre accolades qui s’exécute dans le cas où la souris est bien enfoncée utilse deux autres variables, mouseX et mouseY qui seront remplacées par la coordonnée en x (horizontale), et en y (vertical) du pointeur de la souris. On a remplacé un des points de la ligne par ces coordonnées, ce qui signifie que lorsque je clique, la ligne créé aura une de ses extrémités qui touchera la souris, l’autre restant une coordonnée aléatoire.

Variable et keyPressed

Pour terminer ce premier didacticiel, nous allons permettre à l’utilisateur de choisir entre accumulation de lignes ou effacement du dessin à chaque boucle, grâce à la fonction keyPressed().

int efface=0;

void setup() {
 size(300,200);
 stroke(204,102,0);
}

void draw(){
 if (efface==1){
   background(255);
 }
 if (mousePressed == true) {
   line(mouseX,mouseY,random(width),random(width));
 }
 else {
   line(random(width),random(height),random(width),random(width));
 }
}

void keyPressed() {
 if (efface==0){
   efface=1;
 }
 else {
   efface=0;
 }

}

Nous avons d’abord créé une variable, du nom de efface, qui est destinée à stocker des chiffres, ce qui est spécifié à processing en précédant efface par int.

Dans la boucle draw, nous comparons ensuite cette variable. Si elle est égale à un, la fonction background() efface la fenêtre. Si elle est égale à 0, le code entre accolade n’est pas exécuté et donc les lignes s’accumulent.

La fonction keyPressed se déclare hors de la boucle, elle est précédée de "void" (vide) qui l’identifie clairement comme fonction. La fonction est appellée si on appuie sur une touche, comme son nom l’indique. Une fois là, notre script simple ne fera pas la différence entre les touches.
Avec l’instruction "if", on va tester unela valeur de efface dans le but de l’inverser. Si elle vaut 1, on lui assigne zéro et inversément.

Aller plus loin avec ce script

On peut par la suite tester quelle touche a été appuyée pour décider d’autres actions. Changement de couleur et d’épaisseur du trait, de couleur du fond, effacement unique du fond, etc.