tableau d'image p5.js

Question

J'ai créé des tableaux imbriqués pour afficher tableau d'images, une chose que je ne peux pas obtenir le droit, il répète la même image au lieu de dessiner un nouveau dans chaque boucle.

ici est mon code exemple simule mon problème

var images = []; 

function preload() { 
    for (var i = 0; i< 3; i++) { 
    images[i] = loadImage("img/img" + i + ".jpg"); 
    } 
} 

function setup() { 
    createCanvas(900, 900); 
    background(0); 
    preload(); 
} 

function draw() { 
    //image(images[0],0,0); 
    for (var y= 0; y < height; y=y+300) { 
    for (var x =0; x < width; x=x+300) { 
     for (var z = 0; z < 3; z++) { 
     image(images[z], x, y); 
     } 
    } 
    } 
} 

sous forme d'images, je viens d'utiliser 300x300 jpgs 3 d'entre eux pour tester.

Answer 1

Je peux me tromper, mais en lisant rapidement votre code, il vous semble dessinez 3 images sur le dessus de l'autre:

image(images[z], x, y); 

Vous pouvez ajouter console.log(x,y); avant ou après cette ligne à double contrôle.

vous faire ensemble une grille, où vous voudrez peut-être chaque élément de cette grille pour être les images que vous préchargées, mais vous devez les espacer un peu:

image(images[z], x + images[z].width * z, y); 

C'est rapide et hacky , mais vous pouvez réellement savoir combien l'espacement vous avez besoin: total width/(image width + image spacing) = spacing per image, en supposant que les images chargées sont de la même taille

Une autre option pourrait consister à faire défiler les images du tableau:

function draw() { 
    var i = 0; 
    //image(images[0],0,0); 
    for (var y= 0; y < height; y=y+300) { 
    for (var x =0; x < width; x=x+300) { 
     //using % to loop back to the first element after the array length 
     image(images[i % images.length], x, y); 
     i++ 
    } 
    } 
} 

Notez que le code ci-dessus n'a pas été testé, mais j'espère qu'il sera assez compréhensible pour s'adapter