Les arrays

Une array est une liste de variables qui portent le même nom. Les arrays sont pratiques car elles permettent d’utiliser beaucoup de variables sans être obligé de les nommer chacune. Par exemple lorsque nous avons plusieurs dizaines d’images dans une base de données.

var numbers = [46,450,800];

function setup() {
  createCanvas(900,600);
}

function draw() {
  background(0);
  stroke(255);
  numbers[0];
  line(numbers[0],0, numbers[0], height);
  line(numbers[1],0, numbers[1], height);
  line(numbers[2],0, numbers[2], height);
}

Dans cet exemple nous stockons 3 variables dans notre array : 46, 450, 800
46 est la première valeur de variables [0], 450 la deuxième [1] et 800 la troisième [2].

var mouseXPositions = [];
var current = 0;
var total = 100;

function setup() {
createCanvas(900,600);  
}

function draw() {
  background(0);
  stroke(255);
  for (var i=0; i<mouseXPositions.length; i++ ){
  line(mouseXPositions[i],0, mouseXPositions[i], height);
  }
  
  mouseXPositions[current] = mouseX;
  current++;
  if(current > total){
    current = 0;
  }
}

Ici nous demandons à l’array de stocker la position en x de la souris.

var mouseXPositions = [];

Dans la boucle for la valeur i devient la valeur de la variable.

Ma petite fabrique à histoires

var ph1 = ["Sur une île déserte pas pire","Dans un vaisseau spatial cabossé",
"Dans le parc d'attraction bondé","Dans une forêt profonde","Au pôle Nord",
"Sur la lune", "Dans le métro", "Dans l'avion", "Dans la jungle","Sur une île déserte", 
"En forêt", "À l'école", "Au zoo", "Sur le toit", "Dans la cuisine", "Au fond de la mer", 
"À Paris", "Sous la terre", "En ville", "La nuit", 
"Sur la banquise", "En hiver", "Le matin", "À la télé", "Pour mon anniversaire", 
"Au jardin", "Dans la boue", "Au supermarché", "Sur l'autoroute", "Tous les jeudis"];

var ph2 = ["le détective coquet","le culturiste dijoncté","le cow-boy recyclé",
"l'astrophysicien relatif","le magicien nul","le plombier rutilant","le martien sexy",
"l'orage qui gronde", "madame Germaine", "Raymond l'ourang-outan", "le père Noël", 
"ma maman si gentille", "le requin émouvant", "Jean le hardi", "le monstre gentil", 
"le ver luisant", "le pingouin ébouriffé", "la neige extra moelleuse", "le bon gros chat", 
"un basque avec un chapeau", "mamie Zinzin", "papi Lucien", "le cochon cochon", 
"la vendeuse", "le chien caractériel", "un papillon incrédule", "l'avocat vitaminé",
"un boucher végétarien","le roi des aulnes", "un joueur de golf boute-en-train"];

var ph3 = ["mange","surveille","observe","étudie","aide","promène", "arrose", 
"dessine", "imite", "m'offre", "fait cuire", "dévore", "visite", "bécote", "transporte", 
"éclaire", "découvre", "fait disparaître","chatouille", "coiffe", "découpe", "cueille",
"mâche", "décore", "renifle", "survole"];

var ph4 = ["une étoile filante libérée.", "les feuilles mortes ambitieuses.", 
"la carte du monde maussade.", "un caniche rose anxieux.", "un grand livre futuriste.",
"deux croque-mitaines enragés.", "trois petites sardines.", 
"la tour Eiffel déçue.", "la sorcière amicale.", "mille pensées désolées.", 
"le ciel campagnard.", "un bel igloo songeur.", "six citrouilles snobes", 
"mon papa généreux.", "l'indien placide.", "quatre dindes rôties.",
"un bouquet de roses grognon", "un vieux pneu torturé.", "l'été impulsif.", 
"mon nez clownesque.", "un vélomoteur ambitieux.","une paire de monocle désapprobateur",
"une chaise longue paresseuse"];

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(RGB, 255, 255, 255, 255);
  background (76,204,164);
  fill (255);
  textFont("Arial");
  textSize(100);
  textAlign(CENTER);
  text("Ma petite fabrique", width/2, height/2);
  text("à histoires", width/2, height/2+100);
  textSize(20);
  text("Utiliser la flèche droite pour créer une nouvelle histoire", width/2, height/2+140)
  smooth();
  fill (255);
  textSize(100);
}

function draw() {
}

function keyPressed () {
  background (76,204,164);
  if (keyCode == RIGHT_ARROW) {
    var lieux = int(random(0, ph1.length))
    var ph1Lieux =ph1[lieux] ;
    text(ph1Lieux, width/2, height/2-150);
    
    var perso1 = int(random(0, ph2.length))
    var ph2Perso1 =ph2[perso1] ;
    text(ph2Perso1, width/2, height/2-50);
    
    var verbe = int(random(0, ph3.length))
    var ph3Verbe= ph3[verbe];
    text(ph3Verbe, width/2, height/2+50);
    
    var perso2 = int(random(0, ph4.length))
    var ph4Perso2 = ph4[perso2];
    text(ph4Perso2, width/2, height/2+150);
      }
}

L’affiche générative

var a = 2; // nombre d'images pour l'array fond
var b = 2; // nombre d'image pour l'array motif
var c = 2; / nombre d'image pour l'array texte

var fond = [];
var motif = [];
var texte = [];

function preload(){
/* preload des images de notre base de données, elles sont rangées dans le dossier "data". 
Les images pour le fond sont des "jpg", les autres des "png".
    for ( var i = 0; i<a; i++ ) {
      fond[i] = loadImage("data/" + i +"_fond"+ ".jpg" );
  }
    for ( var i = 0; i<b; i++ ) {
      motif[i] = loadImage("data/" + i +"_motif"+ ".png" );
  }
      for ( var i = 0; i<c; i++ ) {
      texte[i] = loadImage("data/" + i +"_texte"+ ".png" );
  }
}


function setup(){
  createCanvas(1000,1414); // proportion d'un A3
  background(255);
  imageMode(CENTER);
  }

function draw(){
}

function keyTyped() {
    if (key == 0) {
      save("affiche.png");
      background(255);
    }
  
      if (key == 1) {
      var s = int(random(0,a));
      image (fond[s], width/2, height/2,width,height);
  }
  
     if (key == 2) { 
      var s = int(random(0,b));
      var x = random(0,width);
      var y = random(0,height);
      image (motif[s], x, y,100,100);
      }
      
    if (key == 3) {
      var s = int(random(0,c));
      image (texte[s], width/2, height/2,width,height);
  }
}