Processing.js array of pictures not showing properly

Question

I am trying to take picture path data from my database and show it on the processing sketch like so this is Javascript file:

Answer 1

Think about it this way: you only have one img variable, so you're only ever showing a single image!

Take a closer look at your loop:

 for(int i = 0; i <list.length; i++){    
        pic = list[i];
        img = loadImage(pic);
        println(pic);
    }

You're looping through list and getting the images from it, but you're just constantly setting the img variable over and over again. At the end of this loop, img will just equal the last image in the list.

Instead of using a single img variable, you probably want to use an array or an ArrayList. Here's a basic start:

PImage[] images;

void draw(){
    for (int i = 0; i < images.length ; i++){ 
        x = pad + (bs+pad)*i;
        y = pad;
        image(images[i],x,y,bs,bs);
    }
}

void change(String val){
    list = split(val," ");
    images = new PImage[list.length];
    for(int i = 0; i < list.length; i++){    
        images[i] = loadImage(list[i]);
    }
}