Archives par mot-clé : tableau

Les Arrays… premier pas vers les objets

Les tableaux, listes ou arrays font partis des fondamentaux des langages de programmation. Il s’agit d’une «variable» nous permettant de stocker plusieurs variables auxquelles on aura accès via un numero d’index. Sur le papier cela peut faire peur mais par un exemple c’est tout de suite plus simple.

Prenons une classe d’étudiants, chaque étudiant a un prénom. Nous avons donc un tableau d’étudiant de ce type

Je pourrai donc alors dire que le nom de l’étudiant 1 = Pierre, le nom de l’étudiant 2 = Paul et le nom de l’étudiant 3 = Jacques

À quoi ça sert?

En premier lieux à nous simplifier la vie. C’est le premier pas avant le développement orienté objet. Les tableaux vont nous permettre de stocker des valeurs « communes » pour les traiter plus facilement et par groupe.

Imaginons que nous voulions faire un sketch de 100*100 avec 3 balles sur scène. Nous aimerions qu’en fonction des touches du clavier a, z ou e cela change la couleur de la balle 1, 2 ou 3 et restore la couleur des autres balles à leur valeur d’origine. Pour cela, sans tableau nous aurions écris :

ixd_array_00-01

Le résultat fonctionne mais si nous voulons appliquer cela à 10, 50, ou 200 balles alors cela devient très vite laborieux d’écrire 10, 50 ou 200 variables. C’est là où nos tableaux deviennent plus pratiques.

Utilisation d’un tableau

Comme nous l’avons vu plus haut un tableau est une variable, nous verrons donc qu’il n’est pas très différent dans sa déclaration. Quand à son utilisation, nous verrons aussi qu’il nous faudra utiliser notre vieille amie, la boucle for().

Un tableau se déclare assez facilement, très proche de la variable, nous devrons utiliser les [] pour déclarer notre tableau puis les {} pour en déclarer des éléments. Par exemple, pour déclarer les lettres avec lesquelles nous pourrons changer de couleurs, nous écrirons

Dans le cas où nous voudrions déclarer des éléments identiques dans notre tableau, ou de façon dynamique, notre syntaxe changera. Il nous faudra toujours déclarer notre tableau avec nos [] mais nous déclarons les éléments dans une boucle for(). Cela nous facilite la vie, comme dans le cas de nos balles où nous voulons qu’elles soient toute blanche dès les départ.

Nous avons donc créé deux tableaux, nous allons maintenant les appliquer à notre Sketch de 100*100. Commençons par dessiner nos ellipses et définir leur remplissage. Dans mon premier skecth, nous avions écris 3 valeurs fill() et 3 ellipses, ce qui était assez laborieux. Maintenant toute ces lignes peuvent se résumer comme il suit :

Appliquons maintenant cette même méthode à la partie interactive. La seule différence ici c’est qu’il va nous falloir savoir sur quelle touche nous avons appuyé. Précédemment nous utilisions des condition if(key == ‘a’). Nous allons faire la même chose mais de manière dynamique à l’aide de notre boucle for

Nous obtenons alors le même résultat pour moins de ligne et surtout en étant plus flexible. Il nous sera facile de créer 100 balles et les rendre interactive.
ixd_array_00-01

Application à des random walker?

Nous avons vu comment faire des tableaux sur 3 balles mais allons plus loin en appliquant ces nouvelles connaissances à des random walkers.

Un random walker ou marcheur aléatoire est un objet, ici un cercle, se déplaçant de manière aléatoire. Imaginons le sketch suivant :

Nous aimerions avoir plusieurs cercles (50), effectuant un déplacement du bas vers le haut à une vitesse aléatoire et un déplacement latéral aléatoire entre -1 et 1 pixel. Nous aimerions aussi que nos cercles aient une taille aléatoire et que cette même taille varie de manière aléatoire. Enfin nous aimerions que le contour de nos cercles soit plus ou moins noir en fonction de leur distance avec la souris.

Si nous étudions un peu ce que nous devons faire nous nous rendons compte qu’il nous faut des valeurs différentes mais commune à tous tel que :

  • La position en x d’un cercles
  • La position en y d’un cercles
  • La taille minimale d’un cercle
  • La taille maximale d’un cercle
  • la vitesse en y d’un cercle

Nous avons donc besoins de 5 tableaux. Commençons par déclarer nos tableaux et le nombre de nos particules

Nos tableaux étant créés il va nous falloir les remplir. Là encore regardons ce que nous voulons faire.
Nous voulons que nos cercles soit placés les un à coté des autres en x. Cela veut donc dire que chaque cercle sera placé à équidistance les un des autres au départ.Nous savons aussi qu’au départ ils seront tous positionnés en bas de notre skecth. Enfin nous savons qu’ils auront une vitesse aléatoire et des tailles variantes et aléatoires entre eux. Nous aurons donc dans notre setup()

Il nous faut maintenant dessiner nos cercles. Là encore regardons ce que nous voulons faire.
Nous aimerions que la couleur de contour de nos cercles dépendent de leur distance avec la souris. Pour cela attardons nous un peu sur deux fonctions de processing dist() et map().

Pour réaliser cela nous avons besoins de connaitre la distance entre la souris et un cercle. On pourrait entrer dans des calculs plus ou moins complexe avec des x et des y ou nous pouvons profiter d’une des fonctions de processing nous permettant de calculer la distance entre deux points. Pour cela il nous suffit d’appeler la méthode dist().

Nous obtenons alors une distance comprise entre 0 et 860 pixels environs (diagonale du skecth).
On pourrait dire que le contour de notre cercle est égale à cette valeur mais nous savons que le mode de colorimétrie de processing fonctionne sur des valeur RVB comprissent entre 0 et 255. Il nous faut donc appliquer une règle de proportionnalité afin de dire que les valeur 0-255 de notre contour sont proportionnelles à la distance d. Une fois de plus processing nous propose une méthode très simple nous permettant de réaliser cette règle de 3, la méthode map().

Maintenant que nous savons comment faire varier notre couleur de contour essayons de déplacer nos cercles. Nous savons qu’ils doivent de déplacer en latérale de manière aléatoire entre -1 et 1. il nous faut donc la valeur x suivante

Pour le mouvement vertical, nos cercles doivent se déplacer à des vitesses différentes et oscillent entre le haut et le bas. Nous allons donc incrémenter notre y de la valeur de notre vitesse et inverser cette valeur lorsque y attendra ses limites haute et basse

Nous avons alors tout ce dont nous avons besoins pour la boucle for() de notre draw.

Si nous observons notre code dans la globalité et le résultat nous obtenons alors

 Array