Introduction à la programmation avec Processing

TP2 : Hexagones



Lancement

Lancez Processing et créez un nouveau projet. Vous pouvez l'enregistrer dans votre dossier Documents, par exemple sous le nom Hexagones. Vous remarquez que Processing crée un nouveau dossier dans document, qu'il appelle Hexagones, avec dedans un unique fichier Hexagones.pde.

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.

Voici le code pour déclarer ces deux fonctions et afficher une fenêtre grise, de la taille de l'écran.

	void setup(){
	size(displayWidth,displayHeight);
	background(20,20,20);
	}

	void draw(){
	}
	

Pour rappel :

Premier hexagone

Tout ça, c'est bien gentil, mais le sujet de ce TP reste quand même les hexagones, et il est temps de poser la question qui fâche : comment trace-t-on un hexagone ? Alors d'abord, pour ceux qui ne s'en souviendraient pas, voici l'animal :

Hexagone

Si vous regardez un peu les propriétés de cette figure, vous allez vous rendre compte de deux choses qui vont nous permettre de le dessiner très simplement :

Et comme un dessin vaut mieux que de longs discours : Hexagone

Pour tracer notre hexagone, nous allons simplement nous déplacer sur le cercle et ses arrêtes au fur et à mesure :

Hexagone

Exercice 1

Nous allons maintenant donner les coordonnées de deux sommets consécutifs et tracer l'arrête qui les relie. Des années de recherches laborieuses ont permis à l'humanité de découvrir que les coordonnées d'un point situé sur un cercle de rayon R et de centre (centreX,centreY) selon un angle theta peuvent se calculer de la manière suivante :

Pour notre problème nous avons déjà R et theta, il ne nous manque que le centre du cercle. Je vous propose de le placer au centre de notre écran. A l'intérieur de votre boucle, vous allez donc pouvoir ajouter les deux lignes suivantes :

	float x0=(displayWidth/2) + cos(theta)R;
	float y0=(displayWidth/2) + sin(theta)R;
	

Voilà, pour notre premier sommet. Pour tracer une arrête, il nous faut un deuxième sommet, décalé par rapport au premier d'un angle de 60 degrés. Dans un monde parfait nous pourrions simplement augmenter la valeur de notre variable theta de 60. Sauf que les fonctions cosinus et sinus ne fonctionnent pas avec des degrés mais avec des radians. Pour convertir un degré en radian, il vous faut le multiplier par 2*PI/360. Donc, notre angle doit être mis à jour de la manière suivante :

	theta = theta + 60(2PI/360);
	

Nous pouvons calculer le deuxième sommet, de la même manière que le précédent et, enfin, tracer une ligne blanche entre les deux sommets. Pour la couleur blanche utilisez la fonction stroke et pour tracer la ligne la fonction line.

Si vous avez tout fait correctement, votre programme devrait tracer un hexagone.

Exercice 2 : pleins d'hexagones !

Pour le moment chaque fois que la fonction draw s'exécute, le même hexagone est tracé. Ce que nous allons faire, c'est simplement changer le rayon, en rajoutant la ligne suivante à la fin de la fonction draw :

	R=R+10;
	
Rien de bien compliqué : on se contente augmenter le rayon de 10, chaque fois qu'on a fini de tracer un hexagone.

Le résultat obtenu n'est pas très esthétique et surtout, nous avons vite fait d'atteindre la taille maximale pour un hexagone. Nous allons faire juste deux petites modifications qui vont considérablement améliorer le dessin produit par notre programme.

Au début de la fonction draw, ajoutez la ligne suivante qui calcule la distance maximale pour le rayon :

	float maxR=sqrt(displayWidth*displayWidth + displayHeight*displayHeight)/2;
	

Exercice 3 : de la couleur

Jusqu'à présent tous nos hexagones sont tracés de la même couleur. Nous allons faire en sorte que chaque fois que notre programme atteint le rayon maximal (maxR) il change la couleur des hexagones. Nous allons seulement utiliser deux couleurs :

Nous avons obtenu un processus intéressant, mais très vite l'écran est saturé de couleur. La modification qui suit va nous permettre d'avoir un programme qui s'autorégule, en traçant régulièrement des hexagones opaques de la couleur du fond : stroke(20,20,20)

L'astuce est la suivante :

Pour obtenir ce comportement :