Sites


Processing

La méthode draw

Jusqu'ici, nous avons créé ce que nous pouvons appeler des programmes linéaires : on démarre le programme, celui-ci exécute notre dessin, et tout s'arrête à la fin des instructions de notre sketch, en bas de la fenêtre d'édition.

Mais Processing n'est pas uniquement un environnement de dessin écrit, c'est également un environnement interactif. Et pour qu'il y ait interactivité, il nous faut du temps, en d'autres termes, un moyen de prolonger notre dessin pour que celui-ci puisse se modifier en suivant chronologiquement certaines étapes, selon différents facteurs et conditions. C'est le rôle de la boucle infinie, appelée en permanence par la machine pour réactualiser notre dessin. Dans Processing, cette boucle infinie s'écrit draw(). Elle est souvent accompagnée par la méthode setup() qui permettra de préparer la fenêtre de visualisation (l'espace de dessin), par exemple en lui donnant une taille au départ.

C'est l'absence de ces deux méthodes qui rend Processing inerte. Si votre code ne dispose pas de méthode draw(), l'exécution du programme s'arrêtera à la fin du code de votre programme.

draw()

Commencez un nouveau programme Processing vide, tapez les lignes suivantes dans la fenêtre d'écriture et appuyez sur le bouton run :

 void draw() {
    background( random(255) );
}

Ça y est, vous avez activé l'animation dans Processing. Vous devriez maintenant voir une fenêtre qui clignote 30 fois par seconde avec une couleur grise aléatoire quelque part entre le noir et le blanc. C'est la méthode random(255) qui donne en retour une valeur aléatoire entre 0 et 255. C'est cette valeur qui est ensuite récupérée par les parenthèses de la méthode background() et appliquée sur le fond de la fenêtre de visualisation de l'espace de dessin. Comme le tout se passe de manière répétée, on a l'impression d'assister à une animation.

Sketch rand

Par défaut, les instructions qui se trouvent entre les deux accolades de la méthode draw() seront appelées 30 fois par seconde. 30 fois par seconde Processing ouvrira cette méthode et regardera ce qui est écrit dedans pour l'exécuter. Nous pouvons mettre autant d'instructions que nous voulons à l'intérieur de cette méthode. Ces instructions seront jouées par Processing de manière cyclique, tel un métronome.

Attention aux erreurs d'écriture, car dès que Processing en rencontrera une, votre programme s'arrêtera net — c'est la fin de votre animation. En revanche, si vous avez écrit une méthode draw() sans erreurs, elle sera appelée en boucle, 30 fois par seconde, jusqu'à ce que l'utilisateur arrête le programme, qu'une panne d'électricité arrive, ou que la fin du monde se produise. C'est donc grâce à cette méthode exécutant du code en répétition que nous allons pouvoir créer des animations.

Fréquence d'exécution

Il est possible de spécifier une valeur différente à notre métronome en utilisant la méthode frameRate().

Si vous modifiez l'exemple précédent comme suit, vous remarquerez que la vitesse de l'animation a été diminuée (divisée par 3).

void draw() {
   frameRate(10);
   background( random(255) );
}

Nombre de fois où draw() a été appelée

Processing peut aussi compter le nombre de fois que cette méthode draw() a été appelée, depuis le lancement du programme via la variable frameCount. 

sketch_frameCount_1.png 

setup()

Souvent, voire la plupart du temps, il est nécessaire de placer certaines instructions au tout début du programme. C'est la nature et la portée de ces instructions sur le programme qui nous incitent à les placer à cet endroit. Par exemple, dans Processing, la taille de la fenêtre de visualisation du dessin ne peut être définie qu'une seule fois dans un sketch ; ce paramétrage de l'espace de dessin ne peut donc être placé à l'intérieur de la méthode draw() car cette méthode s'exécute plusieurs fois durant le déroulement du programme.

A moins de se satisfaire de la dimension par défaut de 100x100 pixels, définir la taille de la fenêtre de visualisation peut s'avérer très utile. C'est pour toutes ces raisons qu'une deuxième méthode complémentaire a été créée : la méthode setup().

void setup() {
 
}

Les subtilités des différents signes qui composent cette méthode sont pour l'instant sans importance. Sachez simplement qu'il faut écrire void setup() tout au début, suivi d'une ouverture d'accolades, saisir ensuite les instructions que vous voulez exécuter, et enfin terminer avec la fermeture des accolades.

void setup() {
  size(500, 500);
}

void draw() {
  background(random(255));
}

Lorsque ce sketch est lancé, Processing exécute tout d'abord les instructions qui se trouvent à l'intérieur de la méthode setup(). Ensuite, la méthode draw() commencera à être appelée de manière répétée, telle un métronome.

Ce principe de fonctionnement est illustré par le schéma suivant :

illustration_draw.png

Background()

Voici un programme qui remplit progressivement l'écran avec des ellipses.

sketch_background.png

void setup() {
  size(200, 200);
  fill(0);
}

void draw() {
   ellipse(random(200), random(200), 20, 20);
}

Comme vous pouvez le constater dans les captures d'écran, cette animation finira par remplir notre espace de dessin complètement par du noir. C'est peut-être l’œuvre conceptuelle ultime de toute notre carrière artistique ; néanmoins il serait bien utile d'apprendre à animer une seule ellipse, la voir évoluer dans l'espace ou changer de forme, sans que ses positions antérieures soient affichées en même temps.

Dans ce cas, il suffit d'ajouter un nettoyage de fond de l'espace de dessin à l'aide de la méthode background(). Celle-ci prend une à trois valeurs de couleur, comme pour la méthode fill() ou stroke().

Voici une modification du programme qui permettra d'afficher maintenant une seule forme animée :

void setup() {
  size(200, 200);
  fill(0);
}

void draw() {
  background(255);
  ellipse( 100, 100, random(100), random(100));
}

En réalité, ce que nous demandons au programme, c'est 30 fois par seconde d'effacer l'intégralité de notre dessin et de tracer une nouvelle forme par dessus avec un nouveau fond blanc.

Ajouter un fondu

Il existe une astuce, souvent utilisée dans la communauté des utilisateurs de Processing, qui consiste à effacer le fond de l'image à l'aide d'un rectangle semi-transparent plutôt qu'avec l'instruction  background(). Ce procédé permet d'obtenir un effet d'effacement graduel, de fondu.

Sketch Background Flou 

void setup() {
  size(200,200);
  background(0);
  noStroke();
}

void draw() {
  fill(0, 0, 0, 20);
  rect(0, 0, 200, 200);
  fill(255);
  ellipse(100 + random(-20,20), 100 + random(-20,20), random(50), random(50));
}

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.