Environnement

Quelques mots d’abord, sur l’environnement. Une fois que vous avez lancé le programme et fermé la fenêtre d’accueil, la fenêtre principale affiche un éditeur de texte pour saisir votre programme.

Cet éditeur affiche un onglet portant le nom du programme par défaut. Ce nom pourra être modifié au moment de l’enregistrement du fichier. Mais avant cela, il peut être intéressant de savoir où ce programme sera enregistré sur votre disque dur.

Définir le dossier d’enregistrement des programmes

Pour connaitre le dossier d’enregistrement des programmes vous devrez afficher la fenêtre des préférences. Pour cela, allez dans l’option de menu Fichier → Préférences pour afficher la fenêtre suivante :

Le premier champ permet de visualiser et modifier si vous le désirez, le dossier qui servira de racine à tous vos projets.

Sauvegarde du programme

Pour sauvegarder le programme, il suffit d’aller dans l’option de menu Fichier → Enregistrer sous… et de donner un nom au fichier et de valider.

Une fois sauvegardé, l’onglet doit porter le nom du fichier. Dans l’exemple suivant, j’ai nommé le fichier PremierProgramme

Le nom de l’onglet c’est mis à jour et l’on peut voir dans le gestionnaire de fichier que Processing a créé un répertoire et dans ce répertoire un fichier portant le même nom mais avec l’extension .pde. Le nom du premier fichier créé correspond également au nom du projet.

Remarque : Lors de l’installation Processing a créé un dossier nommé "sketchbook" qui sera par défaut la racine de tous vos projets. Dans le langage Processing, un sketch correspond à un programme.

Ecrire, exécuter et stopper le programme

Remarque : Le langage utilisé par défaut est Java mais en cachant certaines subtilités du langage. Nous n’avons pas à créer la fameuse classe de démarrage avec Processing par exemple.

Nous allons d’abord écrire le premier programme qui se contentera d’afficher le fameux message "Hello World !".

Ce programme sera composé de la seule ligne suivante :

Remarque : En Java cette fonction affiche le texte spécifié avec retour à la ligne.

Pour exécuter le programme, cliquez sur le bouton suivant :

Vous devriez voir le résultat suivant :

Nous voyons que le message s’affiche en bas dans la console et qu’une fenêtre supplémentaire c’est affichée. Cette fenêtre aura pour but d’afficher toutes les commandes graphiques de notre programme.

Stoppons maintenant le programme en cliquant sur le bouton :

Comme le but de Processing est de réaliser des programmes graphiques, voyons maintenant comment réaliser nos premiers dessins.

 Premier programme graphique

Processing fourni plein de fonctions graphiques que vous pourrez retrouver dans l’aide en ligne accessible à partir du menu Aide → Documentation.

Mode 2D et 3D

Processing permet à la fois de définir des formes dans un espace 3D ou 2D. Par défaut, c’est le mode 2D qui est actif. C’est ce dernier que nous utiliserons au départ.

L’origine du système de coordonnées se trouve en haut à gauche de l’écran avec l’axe des x orienté vers la droite et celui des y vers le bas.

Dessiner des rond et des carrés

Nous allons voir maintenant comment définir une taille qui nous convient pour la fenêtre d’affichage, choisir des couleurs et comment afficher une figure géométrique.

Voici le programme :

Explication

Ce programme suit la syntaxe du langage Java. Tout texte qui suit les // est un commentaire et n’est donc pas exécuté. Dans ces commentaires, j’ai expliqué le rôle de chaque ligne.

L’éditeur vous aide à la saisie des fonctions grâce à la complétion automatique. L’action sur les touches [CTRL]+[ESPACE] vous permet d’afficher des propositions.

Pour les fonctions fill() et stroke(), nous devons passer la couleur en valeur numérique. Il est possible de passer à ces fonctions 3 valeurs numériques correspondant aux composantes rouge, verte et bleue mais dans ce cas j’ai passée une seule valeur en hexadécimale. C’est ce qu’indique le #. Cela peut sembler compliqué mais en fait, Processing vous permet de définir cette valeur à partir d’une palette de couleur. Pour l’afficher, utilisez l’option de menu Outils → Sélecteur de couleurs…, choisissez une couleur puis, il suffit de réaliser un copier, coller dans le code.

Une fois le code saisi, exécutez le programme, ce qui doit donner :

Si vous désirez sauvegarder votre programme un [CTRL]+[S] fera l’affaire comme sur la plupart des logiciels. (Sur Mac ce sera [Cmd]+[S] selon le standard Apple).

Les variables de Processing

Dans Processing, nous pouvons définir des variables. La syntaxe pour les définir et les manipuler sont celles de Java. Vous pourrez donc utiliser la documentation officielle du langage pour plus d’explications.

Processing propose également un certain nombre de variables globales pré initialisées qui pourront être très utiles dans les programmes.

Pour utiliser le principe de variables, nous allons réaliser un programme qui affichera un cercle qui devra se trouver au centre de la fenêtre quelque soit la taille de cette dernière.

Voici le code :

J’ai défini 3 variables de type entier pour les paramètres du cercle. J’ai calculé les coordonnées en utilisant des variables nommées width et height. Ces variables sont initialisées par Processing et renvoient la largeur et la hauteur de l’écran.

Si vous décidez de donner d’autres dimensions à la fenêtre, le cercle sera toujours centré.

Exemple :

Modifions la première ligne uniquement comme suit :

exécutons à nouveau le programme :

 Conclusion

Nous venons de voir le principe de base pour réaliser des graphiques. Je vous laisse le soin de découvrir les autres fonctions graphiques à partir de l’aide. Dans un prochain article, nous verrons comment réaliser une petite animation sans avoir à apprendre beaucoup plus de fonctionnalités.