{"id":2744,"date":"2008-12-08T00:57:00","date_gmt":"2008-12-07T23:57:00","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2744"},"modified":"2008-12-08T00:57:00","modified_gmt":"2008-12-07T23:57:00","slug":"processing-douzieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2744","title":{"rendered":"Processing, douzi\u00e8me cours"},"content":{"rendered":"

Apr\u00e8s les variables, les tableaux, parfois appel\u00e9s listes. Ce sujet n’est pas toujours le plus simple \u00e0 comprendre ou en tout cas \u00e0 faire comprendre (peut-\u00eatre est-ce juste moi qui l’explique mal). Il faut dire que le tableau est un type de donn\u00e9e dont l’usage est assez abstrait, rien \u00e0 voir avec les commandes de dessin g\u00e9om\u00e9trique de Processing dont l’utilit\u00e9 est imm\u00e9diate et \u00e9vidente.
\nUn tableau est tout b\u00eatement un ensemble de variables (qui doivent imp\u00e9rativement \u00eatre du m\u00eame type, dans le cas de Processing). Cet exemple le montre de mani\u00e8re simple :<\/p>\n

\n
String[] animaux = {\"chat\", \"chien\", \"cheval\", \"lapin\", \"souris\"};\nprint (animaux[2]);<\/pre>\n<\/div>\n
Si vous lancez ce programme, vous verrez ceci :<\/p>\n
\"\"<\/p>\n
Tout d’abord, une fen\u00eatre d’affichage de la taille et de la couleur par d\u00e9faut s’ouvre, mais elle ne contient rien, puisque nous ne l’utilisons pas.
\nDans la zone noire, qui est la zone dite \u00ab\u00a0de texte\u00a0\u00bb et qui permet \u00e0 Processing de nous adresser des messages sollicit\u00e9s (en gris) ou des messages d’erreur (en orange), on peut voir \u00e9crit le mot \u00ab\u00a0cheval\u00a0\u00bb. La commande print()<\/strong> sert en effet \u00e0 afficher quelque chose dans la zone de texte \u2014 si j’\u00e9cris print(\u00ab\u00a0bonjour\u00a0\u00bb)<\/em> dans le programme, le mot bonjour <\/em>s’affichera dans la zone de texte.
\nIci nous avons demand\u00e9 \u00e0 Processing de nous donner le troisi\u00e8me \u00e9l\u00e9ment (la num\u00e9rotation commence \u00e0 z\u00e9ro) de la liste animaux<\/em>, cr\u00e9\u00e9e sur la ligne du dessus.
\nRevenons un peu en arri\u00e8re.
\nEn \u00e9crivant String[] animaux<\/em>, je d\u00e9clare un \u00ab\u00a0tableau\u00a0\u00bb de cha\u00eenes de caract\u00e8re dont le nom est \u00ab\u00a0animaux\u00a0\u00bb. Ce sont les deux crochets qui suivent le type qui signifient qu’il s’agit d’un tableau et non d’une variable isol\u00e9e. Tout en d\u00e9clarant ce tableau, je lui ai attribu\u00e9 un contenu entre accolades, contenu qui est une suite de cha\u00eenes de caract\u00e8res s\u00e9par\u00e9es par des virgules. Son premier \u00e9l\u00e9ment est le mot \u00ab\u00a0chat<\/em>\u00ab\u00a0, le second est le mot \u00ab\u00a0chien<\/em>\u00ab\u00a0, et ainsi de suite.
\nPour Processing (comme pour de nombreux langages), ma liste contient cinq \u00e9l\u00e9ments, num\u00e9rot\u00e9s 0, 1, 2, 3 et 4. Si je souhaite acc\u00e9der au premier \u00e9l\u00e9ment je demanderais animaux[0]<\/em>.
\nSi je souhaite remplacer le mot \u00ab\u00a0lapin<\/em>\u00a0\u00bb par le mot \u00ab\u00a0li\u00e8vre<\/em>\u00a0\u00bb j’\u00e9crirais animaux[3]=\u00a0\u00bbli\u00e8vre\u00a0\u00bb<\/em>. Pour ajouter un sixi\u00e8me animal, par exemple l’\u00e9l\u00e9phant, \u00e0 ma liste, c’est un peu plus compliqu\u00e9, je dois \u00e9crire ceci :<\/p>\n
\n
animaux = append (animaux, \"\u00e9l\u00e9phant\");<\/pre>\n<\/div>\n
(la commande append(tableau, valeur) <\/strong>signifie que l’on ajoute une valeur \u00e0 la fin d’un tableau).
\nPour ajouter une valeur \u00e0 un emplacement pr\u00e9cis du tableau on utilise la commande splice(liste, valeur, position). La ligne qui suit intercalera le mot \u00ab\u00a0toucan\u00a0\u00bb entre les mots \u00ab\u00a0chien\u00a0\u00bb et \u00ab\u00a0cheval\u00a0\u00bb, c’est \u00e0 dire \u00e0 la place 2.<\/p>\n
\n
animaux = splice(animaux , \"toucan\", 2);<\/pre>\n<\/div>\n
Pour enlever sa derni\u00e8re valeur \u00e0 un tableau, la commande est shorten(tableau)<\/strong>, comme ceci :<\/p>\n
\n
animaux = shorten(animaux);<\/pre>\n<\/div>\n
La syntaxe que j’ai utilis\u00e9 plus haut pour d\u00e9clarer mon tableau tout en lui donnant un contenu n’est pas typique. G\u00e9n\u00e9ralement, on \u00e9crit plus laborieusement ceci :<\/p>\n
\n
int[] maListeDeChiffres = new int[12];<\/pre>\n<\/div>\n
qui signifie que je d\u00e9clare un tableau de 12 chiffres entiers, auxquels je pourrais donner des valeurs par la suite, par exemple comme ceci :<\/p>\n
\n
maListeDeChiffres[0] = 128;\nmaListeDeChiffres[1] = 256\nmaListeDeChiffres[2] = 64;<\/pre>\n
etc. <\/em><\/div>\n
ou pourquoi pas \u00e0 l’aide d’une boucle, de cette mani\u00e8re :<\/p>\n
\n
for(int a=0;a<12;a++){\n  maListeDeChiffres[a]=a*10;\n}<\/pre>\n<\/div>\n
… Dans ce cas, ma liste contiendra les valeurs {0,10,20,30,40,50,60,70,80,90,100,110}<\/p>\n
On peut, par ailleurs, cr\u00e9er des tableaux de tableaux, comme ceci :<\/p>\n
\n
int[][] monTableauAdeuxDimensions = new int[4][2];\nmonTableauAdeuxDimensions[0][0]= 10;\nmonTableauAdeuxDimensions[0][1]= 20;\nmonTableauAdeuxDimensions[1][0]= 15;\nmonTableauAdeuxDimensions[1][1]= 25;\nmonTableauAdeuxDimensions[2][0]= 143;\nmonTableauAdeuxDimensions[2][1]= 321;\nmonTableauAdeuxDimensions[3][0]= -10;\nmonTableauAdeuxDimensions[3][1]= 28;<\/pre>\n<\/div>\n
Ici je dis que je cr\u00e9e un tableau de type entier nomm\u00e9 monTableauAdeuxDimensions qui contient quatre \u00e9l\u00e9ments dont chacun est un tableau de deux \u00e9l\u00e9ments. Si je demande \u00e0 savoir quel est l’\u00e9l\u00e9ment monTableauAdeuxDimensions[2][1]<\/em>, il me sera r\u00e9pondu 321. En revanche, contrairement \u00e0 Java, C++, Php ou Javascript, Processing ne g\u00e8re pas les tableaux dits \u00ab\u00a0associatifs\u00a0\u00bb (o\u00f9 chaque valeur du tableau est associ\u00e9e \u00e0 une cl\u00e9), sujet sur lequel je ne m’\u00e9tendrais donc pas bien qu’il \u00e9tait important que je le signale.<\/p>\n
\"\"<\/p>\n
Pour conna\u00eetre le nombre d’\u00e9l\u00e9ments d’un tableau, on utilise la propri\u00e9t\u00e9 length<\/strong><\/code>. Ainsi, dans l’exemple qui se trouve ci-dessus,\u00a0monTableauAdeuxDimensions.length<\/strong><\/code> a la valeur de 4 (il y a quatre \u00e9l\u00e9ments dans\u00a0monTableauAdeuxDimensions<\/strong><\/code>) et\u00a0monTableauAdeuxDimensions[0].length<\/strong><\/code> a la valeur de 2 car il y a deux \u00e9l\u00e9ments dans le premier \u00e9l\u00e9m\u00e9nt (num\u00e9rot\u00e9 z\u00e9ro) de\u00a0monTableauAdeuxDimensions<\/strong><\/code>.
\nUn exemple pratique.:<\/p>\n
\n
int[] mesPositions = {1,3,6,11,17,24,32,41,51,62,73,84,95};\nfor(int i=0;i<mesPositions.length;i++){\n\u00a0\u00a0line (0, mesPositions[i],100,mesPositions[i]);\n}<\/pre>\n<\/div>\n
\"\"Avec ces quelques lignes, nous commen\u00e7ons par d\u00e9clarer une liste de type entier (int[]<\/code>), nomm\u00e9e mesPositions<\/code> et contenant treize \u00e9l\u00e9ments num\u00e9riques : 1, 3, 6, 11, 17, etc.
\nNous ex\u00e9cutons ensuite une boucle qui utilise une variable nomm\u00e9e i<\/strong><\/code> dont la valeur va passer de 0<\/strong><\/code> (z\u00e9ro) \u00e0 mesPositions.length<\/strong><\/code>, c’est \u00e0 dire 13, puisque la liste mesPositions contient treize \u00e9l\u00e9ments.
\n\u00c0 chaque passe de cette boucle, une ligne est trac\u00e9e entre les points (0, mesPositions[i]) et (100, mesPositions[i]). Lors du premier passage, i sera \u00e9gal \u00e0 0, donc mesPositions[i] aura la valeur de mesPositions[0] c’est \u00e0 dire 1. Ma premi\u00e8re ligne sera donc trac\u00e9e entre (0, 1) et (100,1). Au second passage, mesPositions[i] aura la valeur 3, donc la ligne sera trac\u00e9e entre (0,3) et (100,3). Et ainsi de suite. On peut le voir avec l’illustration qui se trouve \u00e0 droite et qui est le produit ce programme : treize lignes sont trac\u00e9es, chacune commence \u00e0 gauche (abscisse : 0) et se termine \u00e0 droite (abscisse : 100) et a pour ordonn\u00e9e les chiffres contenus dans notre liste, \u00e0 savoir 1, 3, 6, 11, 17, etc.<\/p>\n
\"\"<\/p>\n
Tr\u00e8s rapidement et \u00e0 l’attention des programmeurs habitu\u00e9s \u00e0 manipuler des listes, quelques commandes utiles (cliquer sur leur nom pour obtenir la page correspondante dans la documentation de processing) :<\/p>\n