Processing.js Array von Bildern nicht richtig

Question

zeigt Ich versuche Bild Pfaddaten aus meiner Datenbank zu nehmen und es auf die Verarbeitung Skizze zeigen wie so ist diese Javascript-Datei:

<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> 

diese PHP-Datei ist:

<?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; 
} 
?> 

und das ist mein Processing.js Code hier:

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

Das Problem ist, dass, wenn ich Führe die Skizze aus, es zeigt mir ein Bild mehr und nur das letzte Element des Arrays. Wenn ich 5 Elemente im Skatbereich habe, habe ich 6 gleiche Bilder mit dem fünften Element des Arrays. Wie kann ich das beheben und stattdessen 5 verschiedene Bilder sehen?

Answer 1

Denken Sie darüber nach: Sie haben nur eine img Variable, so dass Sie nur ein einziges Bild anzeigen!

Nehmen Sie einen näheren Blick auf Ihre Schleife:

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

Du Schleifen list und bekommen die Bilder von ihm, aber Sie sind nur ständig die img Variable über Einstellung und immer wieder. Am Ende dieser Schleife entspricht img nur dem letzten Bild in der Liste.

Anstatt eine einzige Variable img zu verwenden, möchten Sie wahrscheinlich ein Array oder eine ArrayList verwenden. Hier ist eine grundlegende 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]); 
    } 
}