mercredi 8 novembre 2017

Bases de l'animation sous Processing (partie 1)

Processing facilite la création des animation. Il implémente les notions de base de toute animation. Dans cet article (sur deux parties), je vais brièvement présenter la différence entre un script de dessin et un script d'animation sous Processing.
Pour dessiner une forme, aucune condition préalable est nécessaire sauf la taille de la fenêtre. Cette taille peut être définie par la fonction "size". Elle respecte la norme en prenant le premier paramètre comme la largeur de la fenêtre et le deuxième paramètre comme sa hauteur. Par exemple :


size(600, 400);

Nous donne la fenêtre suivante :


Et puisque Processing cache la complexité liée à la programmation Orientée Objet en Java, la ligne de code précédente est tout ce que nous allons mettre dans le script.


Pour dessiner une forme donnée, il faut appeler la fonction adéquate. Une ligne est dessinée grâce à la fonction "line()" et une rectangle est dessiné en appelant la méthode "rect()". Chaque fonction nécessite des paramètres selon la forme que nous voulons dessiner. Par exemple, le code suivant :

size(600, 400);
rect(100, 100, 400, 200);

Nous donne la forme suivante :


Nous pouvons appeler plusieurs fonctions de dessin comme toutes les autres fonctions. Par exemple, le code suivant :

size(600, 400);
rect(100, 100, 400, 200);
line(100, 100, 500, 300);
line(100, 300, 500, 100);

Nous donne la forme suivante :


Il est possible de modifier l'ensemble des paramètres des dessin par appeler les fonctions adéquates avant d'appeler la fonction de dessin. Parmi ces paramètres, nous pouvons préciser la présence ou bien l'absence d'une ligne qui délimite la forme, la couleur de cette ligne et la couleur de remplissage. Par exemple, dans ce code :


size(600, 400);
noStroke();
fill(0, 200, 130);
rect(100, 100, 400, 200);

Nous avons demandé à Processing de ne pas dessiner une ligne autour de notre rectangle comme nous avons demandé que le remplissage aura la couleur 0 pour le rouge, 200 pour le vert et 130 pour bleu (un codage de 0 à 255 pour chaque couleur, d'autres modes existent sous Processing). Le résultat est :


Cela est concernant le dessin, comment créer des animations ? Voir partie 2.