Nooblard Académie
1re année
Processing – Interface graphique
1 Coordonnées
Le système de coordonnées en processing (et en général en informatique) fonctionne de cette
manière :
Exemple : pour mettre un point en (4,5) :
Exemple : pour faire une ligne de (1,2) à (5,2) :
Pour faire un rectangle, il faut le construire à partir du coin en haut à gauche et ensuite mettre ses
dimensions.
Exemple : pour faire un rectangle du point (1,2) et de largeur 4 et de hauteur 3 :
Il existe une multitude de forme :
2 Interface graphique
Pour créer une fenêtre aux dimensions voulues, on utilise size(x, y) dans void setup() {…} :
Ensuite, la valeur de la largeur et de la hauteur de la fenêtre sont stockées dans des variables int qui
sont respectivement width et length.
On peut s’en servir comme dans cet exemple :
3 Interactions
void draw()
Pour l’instant nos programmes n’étaient pas animés. On utilisait alors void setup(), qui est une
fonction qui exécute une seule fois le code écrit à l’intérieur.
Pour faire un programme dynamique, on doit utiliser void draw(). Cette fonction s’exécute après le
void setup et ne s’arrête jamais : elle exécute en boucle le programme écrit à l’intérieur.
Exemple : un programme qui compte les chiffres :
Le programme ne s’arrêtera pas tant qu’on ne clique pas sur le bouton « Arrêter » :
Remarque : le programme utilise une variable i, qui est en dehors du void draw(). On appelle une
variable comme ça une variable globale. On fait ainsi car si on crée la variable à l’intérieur du void
draw(), elle serait continuellement créée et donc on n’avancerait pas.
mouseX et mouseY
On peut utiliser la position de la souris sur la fenêtre avec mouseX et mouseY :
Remarque : on voit sur cet exemple que les nouveaux cercles dessinés le sont par dessus les anciens
Pour enlever ça, on peut enlever l’ancienne image on remplissant le fond par une couleur, on utilise
pour ça background().
Interactions avec la souris et le clavier
On peut exécuter du code lorsque certaines action sont effectuées.
Pour pouvoir exécuter du code lorsqu’on clique sur la souris on peut utiliser mouseClicked() ou
mouseDragged() ou mousePressed() ou mouseReleased().
Exemple avec mouseClicked() :
Voilà une liste de tout ce qu’on peut utiliser :
4 Couleurs
Il existe un type en processing pour pouvoir utiliser les couleurs : le type color.
Le type color a besoin de 3 chiffres pour représenter le rouge, le vert et le bleu.
Chaque chiffre qui code la couleurs doit être entre 0 et 255. 0 étant le noir et 255 la couleur.
Différentes fonction ont besoin d’une couleur, comme fill(), background(), stroke()…
Exemple : pour faire un cercle rouge, on utilise fill().
Tout ce qui suivra fill(255, 0, 0); sera en rouge :
Exemple : on peut faire varier les couleurs en fonction de la position de la souris :
