Richard Serra, Verb List, 1967→ Ouvrir le lien

Introduction aux tableaux (arrays) et à leur manipulation avec Javascript (ou P5.js).

Un tableau (ou liste) est une suite de variables. Vous croiserez souvent sa syntaxe lors de vos recherches. Il est extrêmement utile de savoir repérer un tableau dans un programme et de savoir les manipuler un minimum. Vous pouvez avoir différents types de variables dans un tableau. (EN fait, les tableaux sont des objets JS. Nous verrons cela plus tard). Chaque item du tableau est accessible via son index (0, 1, 2, 3, ..), entouré de crochets []. Nous verrons, avec javascript, que tout peut être variable (fonctions, nombres, chaînes de caractères, objets, ... )

Fonctions spécifiques: push(), pop(), indexOf(), forEach(), etc.

Au programme

• On revoit: fonctions + conditions + boucles for + valeurs aléatoires (Math.random() ou random() (P5))
• Les tableaux (Arrays)
• La concaténation (on en reparle..)
• Exports et sauvegardes
• XR6 Arrays: Cadavre exquis
• XR6 Arrays: Stocker la position de la souris
• push("test") : ajoute "test" à la fin du tableau
• pop() : supprime le dernier élément du tableau
• shift() : supprime le premier élément du tableau
• **unshift("test") **: ajoute "test" au début du tableau

Déclarer un tableau

let monTableau = [];

Il peut être vide, ou contenir déjà une ou plusieurs valeurs.

let prenoms = ["Saskia", "John", "Venkat"];

Remplir un tableau

Dès que l'on travaille avec un grand nombre de données, les boucles for s'avèrent vite indispensables pour gérer les tableaux (ou d'autres méthodes dédiées comme forEach() par exemple..) La propriété length correspond au nombre d'éléments qui composent le tableau, le premier occupant la position 0.

L'exemple ci-dessous définit la valeur qui doit être associée à tel ou tel index du tableau, en utilisant la bracket notation.

let monTableau = [];

for (let i = 0; i < 50; i++) {
  let rand = Math.random(100);
  monTableau[i] = rand;
}
console.log("Il y a "+ monTableau.length + " éléments dans mon tableau"); // Affiche: Il y a 50 éléments dans mon tableau

On peut également remplir un tableau en utilisant la méthode (fonction) push().

let monTableau = [];

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 50; i++) {
    let rand = random(100);
    monTableau.push(rand);
  }
  console.log("Il y a "+ monTableau.length + " éléments dans mon tableau"); // Affiche: Il y a 50 éléments dans mon tableau
}

Accéder aux éléments du tableau:

On accède aux différents éléments du tableau en notant leur position entre crochets. On appelle cette position l'index de l'élément:

console.log(monTableau[0]); // Affichera la position 0

Parcourir le contenu d'un tableau

Il existe différentes façons de parcourir le contenu d'un tableau.

La boucle for()

Dans un tableau d'une longueur de 50, il n'y a donc aucun élément occupant la 50e position. La dernière position du tableau étant la 49e (vu que l'on commence à compter à 0). C'est un élément à prendre en compte lorsque l'on utilise les boucles for.

let monTableau = ['Olivia', 'Romane', 'Nathan', 'Khorshyyd', 'Marion'];

for (let i = 0; i < monTableau.length; i++) {
  console.log(monTableau[i]);
}

Les boucles for ... in

la boucle for..in s'utilise pour boucler à travers les propriétés d'un objet. Et comme nous l'avons peut-être déjà dit, les tableaux sont, sous le capot, des objets. Donc nous pouvons en profiter.

Dans l'exemple ci-dessous, la variable idx (appeler-la comme vous voulez) contient le nom de la propriété courante. Dans le cas d'un tableau, ce sera l'index de l'élément (0, 1, 2, 3, etc.). Nous pouvons donc l'utiliser pour accéder au éléments de notre tableau en utilisant la bracket notation.

let monTableau = ['Olivia', 'Romane', 'Nathan', 'Khorshyyd', 'Marion'];

for (const idx in monTableau) {
  console.log(monTableau[idx]);
}

La méthode forEach()

La méthode forEach() est à la fois plus simple (moins de lignes) et plus complexe (parce que plus condensée). A vous d'utiliser celle qui vous convient le mieux.

let monTableau = ['Olivia', 'Romane', 'Nathan', 'Khorshyyd', 'Marion'];

monTableau.forEach((prenom) => console.log(prenom));

La fonction forEach() exécutée dans la console (Chrome)→ Ouvrir le lien

Avec d'autres types d'éléments:

let monTableau = ["Un texte", 12, 489.569802456874, false, "Mais encore", {nom: "Dupont", prenom: "Nicolas"}];

monTableau.forEach((item) => console.log(item));

L'exemple ci-dessus peu être écrit comme ceci également (nous reparlerons des fonctions fléchées..):

let monTableau = ['Olivia', 'Romane', 'Nathan', 'Khorshyyd', 'Marion'];

monTableau.forEach((prenom) => {
  console.log(prenom);
})

---

Un tableau peut contenir des données de types différents, comme ici:

let monTableau = ["Un texte", 12, 489.569802456874, false, "Mais encore", {nom: "Dupont", prenom: "Nicolas"}];

console.log(monTableau[4]); // Affiche Mais encore

push : Ajouter des éléments à un tableau

Pour ajouter des éléments à un tableau, utilisez la méthode push.

Comme dans l'exemple ci-dessous, pour stocker la position de la souris:

let positions = [];

function setup() {
  createCanvas(800, 800);
  background(220);
}

function draw() {
  if(mouseIsPressed) {
    positions.push(mouseX, mouseY);
  }
  if(keyIsPressed) {
    console.log(positions);
    for(let i=0;i<positions.length-1; i+=2) {
        line(positions[i], positions[i+1], positions[i+2], positions[i+3]);
    }
  }
}

Modifier le contenu d'un tableau

La méthode splice() modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments à même le tableau.On peut ainsi vider ou remplacer une partie d'un tableau.

let mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];

// supprime 0 élément à partir de l'index 2, et insère "tambour"
let enleves = mesPoissons.splice(2, 0, "tambour");
// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
// enleves est [], aucun élément supprimé

// supprime 1 élément à partir de l'index 3
enleves = mesPoissons.splice(3, 1);
// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
// enleves est ["mandarin"]

// supprime 1 élément à partir de l'index 2, et insère "trompette"
enleves = mesPoissons.splice(2, 1, "trompette");
// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
// enleves est ["tambour"]

// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
// enleves est ["scalaire", "clown"]

// supprime 2 éléments à partir de l'indice 2
enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
// mesPoissons est ["perroquet", "anémone", "chirurgien"]
// enleves est ["bleu", "trompette"]

var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
// on retire trois éléments à partir de l'indice 2
enleves = mesPoissons.splice(2);
// mesPoissons vaut ["perroquet", "anémone"]
// enleves vaut ["bleu", "trompette", "chirurgien"]

var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
enleves = mesAnimaux.splice(-2, 1);

// mesAnimaux vaut ["cheval", "chien", "dauphin"]
// enleves vaut ["chat"]

Exercices

Générateur de phrases

• Créez un générateur de phrases à partir de différents tableaux (sujets, verbes, compléments). Une phrase doit apparaître à chaque clic de souris, à l'enroit du clic. Le rendu visuel est laissé à votre libre appréciation.

Dessin invisible

Faire un dessin qui n'apparaît qu'une fois la barre d'espace pressée. Créer un outil de dessin aveugle. Vous dessinez dans la page sans que rien ne se passe puis, dès que vous appuyez sur une touche, votre dessin apparaît.

Générateur de formes

Créer un générateur de formes qui n'utilise qu'une liste prédéfinie de couleurs. Les formes doivent être toutes différentes, mais toutes semblables. Un fichier JPG doit s'exporter après chaque génération de forme (probablement à chaque boucle).

Liens

1. Cheval vert
2. Exemples P5js (Lauren McCarthy)