Introduction à la programmation avec Processing

TP1 : Découverte de processing



Lancement

Si vous ne l'avez pas déjà fait, téléchargez processing. Vous devriez obtenir une archive qu'il vous faut décompresser. Pour démarrer processing, il suffit de lancer le programme processing, soit dans le terminal, soit en double cliquant dessus (c'est selon votre système d'exploitation). Normalement l'éditeur de processing devrait s'ouvrir :

Processing

Si vous avez déjà utilisé un éditeur pour programmer ou même un logiciel de traitement de texte quelconque vous devriez être en terrain connu : la majeur partie de l'éditeur de processing, se compose d'une zone blanche où vous allez écrire votre programme. En haut, vous avez un ensemble de menus :

Enfin deux boutons très importants : le gros triangle qui vous permet de lancer un programme et le carré qui vous permet de l'arrêter.

Créez un nouveau projet en le sauvegardant : Fichier -> enregistrer. Vous pouvez l'enregistrer dans votre dossier Documents, par exemple sous le nom tp1. Vous remarquez que Processing crée un nouveau dossier dans document, qu'il appelle tp1, avec dedans un unique fichier tp1.pde.

Exercice 1 : premier programme

Dans la suite de ces tps nous allons systématiquement utiliser deux fonctions de base de processing : la fonction setup et la fonction draw. Le code contenu dans la première est exécuté une seule fois, au lancement du programme. Le code contenu dans la seconde est exécuté en boucle, plusieurs fois par seconde, jusqu'à l'arrêt du programme.

Commençons avec la fonction setup. Nous allons débuter par la création d'un programme très simple : une fenêtre gris foncé, de largeur 500 pixels et de hauteur 250 pixels.

	void setup(){
	size(500,250);
	background(20,20,20);
	}
	

Vous pouvez le tester en cliquant sur le triangle. Notre programme utilise deux fonctions disponibles dans le langage processing :

Nous indiquons à la fonction size la largeur puis la hauteur de notre fenêtre. Ensuite, nous donnons à la fonction background la couleur souhaitée, sous la forme de trois entiers : un pour la quantité de rouge, un pour la quantité de vert et un pour la quantité de bleu. Il existe de nombreuses manières de préciser la couleur (code hexadécimal, simple nuance de gris etc.). Pour le moment je m'en tiendrai à celle-ci. Pour connaître les quantités de rouge, de vert et de bleu pour une couleur particulière, je vous recommande d'utiliser le sélecteur de couleur de processing : Outils -> Sélecteur de couleurs.

Quelques fonctions

L'objectif de ce TP est de créer un programme générant des carrés de tailles et de couleurs aléatoires. Processing offre un grand nombre de fonctions permettant de créer rapidement des affichages à partir de formes géométriques. Nous procèderons toujours de la même façon :

Nous allons avoir besoin des fonctions suivantes:

Avec la fonction stroke nous indiquons la couleur pour le contour. Par exemple pour un contour rouge :

	stroke(255,0,0);
	

Avec la fonction noStroke nous indiquons que le contour de la forme tracée sera transparent.

	noStroke();
	

Avec la fonction fill nous indiquons la couleur de l'intérieur de la forme. Par exemple pour une forme jaune avec un contour rouge :

	fill(255,255,0);
	stroke(255,0,0);
	

Avec la fonction noFill nous indiquons que l'intérieur de la forme sera transparent.

	noFill();
	

Avec la fonction rect nous dessinons un rectangle. Nous commençons par donner les coordonnées de son coin supérieur gauche puis sa largeur et enfin sa hauteur. Par exemple pour un rectangle rouge dont le coin supérieur gauche se situe aux coordonnées (10,20), de largeur 100 et de hauteur 50, on écrira :

	noStroke();
	stroke(255,0,0);
	rect(10,20,100,50);
	

Avec la fonction random nous obtenons un nombre aléatoire situé dans un intervalle donné. Par exemple pour un nombre entre 1 et 6, on écrira :

	float n = random(1,6);
	

Par ailleurs, nous utiliserons deux variables fournies par Processing :

Ces variables sont à votre disposition, vous n'avez pas à leur donner de valeurs, simplement à les utiliser

Enfin vous voudrez peut être sauvegarder les résultats obtenus. Vous pouvez utiliser la fonction save.

Exercice 2 : rectangles

	 void setup() {
	    fullScreen();
	    background(20,20,20);
	    stroke(0,0,0);
	    float rouge=255;
	    float vert=255;
	    float bleu=0;
	    fill(rouge,vert,bleu);
	    float largeurRect=100;
	    float hauteurRect=random(10,100);
	    float xRect=width/2;
	    float yRect=height/2;
	    rect(xRect,yRect,largeurRect,hauteurRect);
	  }
	  
	  //Pour sauvegarder
	  void keyPressed() {
	    save("tp0_result.png");
	  }
	 

Vous devriez obtenir quelque chose dans ce goût-là :

Exercice 3 : boucle de dessin

Nous allons mainteant utiliser la fonction draw et y déplacer le code pour dessiner nos rectangles. La principale conséquence sera que notre programme ne va plus tracer un mais plusieurs rectangles.

	void setup() {
	  fullScreen();
	  background(20, 20, 20);
	}
	void draw() {
	  float rouge=255;
	  float vert=255;
	  float bleu=0;
	  stroke(0, 0, 0);
	  fill(rouge, vert, bleu);
	  float largeurRect=100;
	  float hauteurRect=random(10, 100);
	  float xRect=random(0,width);
	  float yRect=random(0,height);
	  rect(xRect, yRect, largeurRect, hauteurRect);
	}
	
	
	//Pour sauvegarder
	void keyPressed() {
	  save("tp0_result.png");
	}
	

Pour le moment, nous nous contentons de donner des couleurs parfaitement opaques. Il est cependant possible d'indiquer à processing la transparence d'une couleur, grâce un quatrième paramètre : alpha. Le paramètre alpha prend une valeur entre 0 (invisible) et 255 (opaque). Par exemple pour un jaune transparent, on écrira :

	
	  float rouge=255;
	  float vert=255;
	  float bleu=0;
	  float alpha=50;
	  fill(rouge,vert,bleu,alpha);
	

Vous devriez obtenir quelque chose dans ce goût-là :

Exercice 4 : Une autre manière de définir la couleur.

Si vous ouvrez le sélecteur de couleurs (Outils -> Sélecteur de couleurs), vous remarquez qu'une couleur peut être soit définie par sa quantité de rouge, de vert et de bleu, soit par sa teinte H, sa saturation S et sa luminosité B

En vous aidant de l'outil sélecteur de couleur, répondez aux questions suivantes :

Dans la fonction setup ajoutez la ligne suivante, qui permet de générer les couleurs en mode teinte, saturation, luminosité :

	  colorMode(HSB,360,100,100,255);
	

Vous devriez obtenir quelque chose dans ce goût-là :

Exercice 5 : de nouvelles formes

Processing ne permet pas seulement de tracer des rectangles, mais aussi des lignes, des ellipses, des triangles etc. Pour terminer ce tp, nous allons voir comment remplacer nos carrés par des cercles et des lignes. Mais n'hésitez pas à parcourir la documentation pour aller un peu plus loin. Vous verrez qu'il est même possible de faire des formes 3D.

Cercles

La fonction ellipse permet de tracer des ellipses et donc des cercles, qui ne sont rien d'autre que des ellipses pour lesquelles le plus petit diamètre est égal au plus grand diamètre. Il existe plusieurs manières de décrire une ellipse. Processing se sert du rectangle qui englobe l'ellipse. Vous allez fournir les quatre paramètres suivants :

Dans votre code, remplacez la fonction rect par la fonction ellipse et assurez-vous que la largeur et la hauteur du rectangle soient identiques.

Vous devriez obtenir quelque chose dans ce goût-là :

Lignes

Pour Processing une ligne est un segment qui part d'un premier point et s'arrête à un second. Pour tracer une ligne, on utilise la fonction line et on lui passe les quatre paramètres suivants :

Nous allons tracer un faisceau de droite qui parcourt l'écran colonne par colonne et dont la teinte dépend de la position horizontale. Ce qui veut dire que nos lignes feront toujours la largeur de l'écran, donc que l'ordonnée du premier point sera toujours égale à 0, tandis que l'ordonnée du second point sera toujours égale à height. De plus l'abscisse du second point sera toujours égale à celle l'abscisse du premier point. Comme nous commençons à tracer nos lignes à partir de la gauche, la première valeur de l'abscisse pour nos deux points sera 0. Nous avons donc trois variables, initialisées de la manière suivante :

	float y0;
	float y1;
	float x;
	void setup() {
	  fullScreen();
	  background(20, 20, 20);
	  colorMode(HSB,360,100,100,255);
	  y0=0;
	  y1=height;
	  x=0; 
	}
	

J'ai déclaré ces trois variables en dehors de la fonction setup en tout début de mon fichier. Ainsi elles sont accessibles dans toutes les fonctions. Cela va me permettre de faire évoluer la valeur de x dans la fonction draw et d'accéder à cette valeur mise à jour à chaque appel de la fonction draw.

Dans la fonction draw, on va écrire le code pour tracer les lignes. Une ligne n'a qu'une couleur de contour et pas de couleur interne. Il est donc inutile d'utiliser la fonction fill.

	x=(x+1)%width;
	

Vous devriez obtenir quelque chose dans ce goût-là :