Grilles et répétitions de motifs (Structures itératives & conditionnelles)

On appelle structure iterative une structure qui permet de répéter un certain nombre de fois une série d’instructions simples ou composées. Celle-ci permet notamment d’effectuer une grand nombre d’actions ou de calculs simultanés. On appelle structure conditonnelle une structure permettent de tester si une condition est vraie ou non. Cette structure est souvent utilisée afin d’attibuer une valeur à une variable booléenne.

Les structures itératives et conditionnelles sont deux grande bases de la programmation. Ici nous verrons comment les utiliser afin de créer une série de motifs génératifs.

Structure itérative : construction

La structure itérative permet d’executer plusieurs fois une ou des instructions. Elle peut s’écrire de plusieurs manières différentes. Ici nous nous concenterons sur la plus connue : La boucle for(). Celle-ci s’écrit de la manière suivante :

Où i est le compteur; i est inferieur au nombre maximum de répétitions et i s’incrémente de 1. On peut alors traduire cette phrase de la manière suivante : Pour i = 0; i étant toujours inférieur à une valeur maximum
et i s’incrémentant de 1 à chaque boucle alors…
Appliquons cela à un exemple concret. Ici je souhaite déssiner un motif composé de cercles de diamètre 30 pixels et se répétant tout les 40 pixels.

ixd_grille_00

On peut alors traduire cette phrase de la manière suivante : Pour i=0; i étant toujours inférieur à la largeur de mon sketch; et i incrémentant de 40 pixels (0, 40, 80…) je dessine des cercles dont x = i, y = moitié de la hauteur de mon skecth et de diamètre 30 pixels.

Dans notre premier exemple nous avons utilisé une structure itérative pour répéter notre visuel sur l’axe de x. Dans le cadre d’un motif nous aurons besoins de la répéter à la fois sur les x et les y. Pour cela nous allons utiliser une double boucle for.

ixd_grille_01

Structure conditionnelle : construction

La structure conditionnelle est la structure la plus basique en programmation. Elle permet d’exécuter une instruction
si un condition est validée. Il existe plusieurs structures conditionnelles :

  • If (si…)
  • If else (si… sinon…)
  • If else if (si… sinon si…)
  • switch (Dans le cas où …)

Dans un premier temps nous nous concentrerons sur les 3 premières structures. Reprenons notre première itération et
ajoutons la condition suivante : Si i est supérieur à la moitié de la largeur de la scène alors
mes cercles sont bleu. Il s’agit ici d’une condition simple if(). Elle se traduira par :

ixd_grille_02

Ajoutons maintenant une second condition à notre phrase : Si i est supérieur à la moitié de la largeur de la scène alors mes cercles sont bleu, sinon, il sont rouge. Il s’agit ici d’une condition if()…else{}. Elle se traduira de la manière suivante :

ixd_grille_03

Enfin complexifions un peu plus notre phrase de la manière suivante : Si i est supérieur à 1/3 de la largeur de la scène alors mes cercles sont vert, sinon si i est supérieur a 2/3 de la largeur de la scène alors mes cercles sont bleu, sinon il sont rouge. Il s’agit ici d’une condition multiple if()…else if(). Elle se traduira
de la manière suivante :

ixd_grille_04

Il est est possible de définir plusieurs conditionnelles de type OU ou ET à l’aide des opérateurs logique || et &&.
Ainsi nous pourrions dire : Si la position Y de la souris est supérieur à la moitié de la hateur de la scène ET que i est paire alors nos cercles sont bleu, sinon il sont rouge. Cela se traduirai par l’utilisation de l’opérateur logique && dans notre condition.

NB : Pour savoir si i est paire ou impaire nous utiliserons le modulo %. Cette opérateur
permet de connaitre la valeur résiduelle d’une division, c’est à dire son reste. Or si on
divise un nombre paire par 2 sont reste nulle. Cela se traduira en code par if(i%2 == 0).

ixd_grille_05

De la même manière que la double condition (&&) il est possible de réaliser une condition OU à l’aide de ||.
Ainsi nous pourrions dire : Si la position Y de la souris est supérieur à la moitié de la hateur de la scène OU que i est paire alors nos cercles sont bleu, sinon il sont rouge. Cela se traduirai par l’utilisation de l’opérateur logique || dans notre condition.

ixd_grille_06

La dernière structure conditionnelle est la structure switch. Son fonctionnement est très proche de la structure if()…else if() mais celle-ci est plus pratique dans le cas où nous avons deux ou trois cas/condition à vérifier. Celle-ci fonctionne de la manière suivante :

Elle se traduit de la manière suivante : Pour la variable entière i. Si celle ci est égale à 0 alors on effectue l’action println(«Zero»), si elle est égale à 1 alors on effectue l’action println(«Un»).

Prenons la en main de la manière suivante : Pour une variable entière «pattern», si celle-ci est égale à 0 alors mes cercle seront rouge, si celle-ci est égale à 1 alors mes cercles seront vert, enfin, si celle-ci est égale à 2 alors mes cercles seront bleu.

NB : Ici nous utiliserons de nouveau le modulo. En effet dans le cas d’une boucle de nombreux calculs à l’aide de modulo permettent de créer des suites.Ici nous définirons pattern à l’aide de i%3 = 0,1,2,0,1,2,0,1,2…

ixd_grille_07

Un exemple de motif utilisant les structures conditionnelles et itératives

Dans cette exemple nous verrons comment utiliser les itérations afin de réaliser une motif composé de triangles.

motif_1_00111_2

Nous allons dans une premier temps définir la composition de notre motif. Ici nous souhaitons obtenir un motif à l’aide de superposition de triangles de teinte proche et ayant suffisamment de transparence pour laisser apparaitre leurs superpositions. Nous aurons aussi besoins de créer une grille à l’aide d’une double boucle for et d’en définir la résolution. Enfin nous utiliserons la méthode colorMode() pour travailler en teinte saturation et luminosité.

info

Dans un premier temps nous allons devoir définir les variables dont nous aurons besoins :

  • – Position x y des sommest A, B, C, D
  • – Teinte et incrément de teinte pour ne pas uniformiser les couleurs
  • – Résolution de la grille
  • – Random Seed (permettant de définir une constante à une méthode aléatoire)

Nous définissons ensuite le constructeur de notre skecth

Enfin nous définissons notre boucle draw(). Nous utiliserons la méthode randomSeed() afin de définir une constante pour tout les nombre aléatoire que nous générerons. Nous créons ensuite notre double boucle for afin d’établir notre grille de motif de résolution «Spacing».

Enfin dans notre double boucle for() nous définissons les position de nos sommets où :

  • xA = gridX*Spacing;
  • yA = gridY*Spacing;
  • xB = xA+Spacing;
  • yB = yA;
  • xC = xA;
  • yC = yA+Spacing;
  • xD = xA+Spacing;
  • yD = yA+Spacing;

Afin de créer un dégradé de couleur nous utiliserons la méthode map() afin de définir la teinte gloable de nos triangles en fonction de leur position sur l’axe Y. La méthode map() permet de réaliser une règle de trois afin de mapper une valeur d’un rang de valeurs à un autre rang de valeurs.

Enfin, notre dernière étape consistera à dessiner nos triangles. Afin d’obtenir des triangles de teinte et d’opacité différentes nous utiliserons la méthode random() afin de celle-ci soit défini de manière aléatoire.

Ce qui nous donnera au final

ixd_grille_08