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:

<script type="text/javascript">
        function send() {
            function  setPath(d) {
                var s = d;
                var processingInstance;
                if (!processingInstance) {
                    processingInstance = Processing.getInstanceById('canvas');
                }
                processingInstance.change(s);
            }
            var variable = 2;
            $.ajax({
                method: "POST",
                tupe: "POST",
                url: "take.php",
                data: ({val: variable}),
                success: function (data) {
                    $('#msg').html(data);
                    setPath(data);
                },
            });
        }</script>

this is PHP file:

<?php

$con = mysqli_connect('localhost', 'Admin', 'xkmpfg3t', 'test');

if (!$con) {
   echo mysqli_errno($con);
}

if ($_POST) {
    $temp = $_POST['val'];
    $query = mysqli_query($con, "SELECT* FROM `pictures` WHERE `user_id` = $temp");
    if (!$query) {
        mysqli_errno($con);
    }
    $im = array();
    $i = 0;
    $img;
    while ($image = mysqli_fetch_assoc($query)) {
        $img = $image['picture_name'];
        $im[$i] = "$img";
        $i += 1;
    }
    foreach ($im as $i => $value) {
        echo " $value";
    }
  // echo $im;
}
?>

and this is my Processing.js code here:

String pic ;
PImage img;
int x;
int y;
int pad = 10;
int bs = 50;
String[] list = new String[0];

void setup(){
  size(500,500);
  background(150);
  //img = loadImage(pic);
}

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

}

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

The problem is that when I run the sketch, it shows me one image more and only the last element of the array. If I have 5 elements, in the skatch area, I have 6 same images with the fifth element of the array. How can I fix this and to see 5 different images instead?

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]);
    }
}