Mache verschiedene Bildobjekte in processing.js

Question

Ich versuche einige Bilder im Browser anzuzeigen und wenn du auf das Bild klickst, bekommst du das Bild, das du an der Mausposition drückst, aber wenn ich das erste Element im Array drücke Es ist nichts passiert, aber wenn ich das zweite Element drücke, wird es angezeigt, aber wenn ich das erste Mal drücke, wird das zweite wieder angezeigt. Ich nehme an, dass es ein Problem mit dem Wert des Arrays gibt, es ändert sich nur einmal und nicht mehr. Hier ist mein Code:

ArrayList<Object> objects = new ArrayList(); 

String pic ; 
PImage images []; 
PImage image; 
int x; 
int y; 
int pad = 10; 
int bs = 70; 
String val ="index.jpg images.jpg"; 
String[] list; 

void setup() { 
    size(500, 500); 
    change(val); 
} 

void draw() { 
background(150); 
    for (int i = 0; i < images.length; i++) { 
    x = pad + (bs+pad)*i; 
    y = pad; 
    image(images[i], x, y, bs, bs); 
    over(); 
    } 
    for (Object o : objects) { 
    o.show(); 
    } 
} 

void over() { 
    for (int i = 0; i < images.length; i++) { 
    if (mouseX >= x && mouseX <= x+width/x+bs*i && 
     mouseY > y && mouseY <= pad+bs) { 
     fill(255); 
     println(images[i]); 
     image = images[i]; 
     rect(x, y, bs, bs); 
    } 
    } 
} 
void mousePressed() { 
    for (int i = 0; i < images.length; i++) { 
    if (mouseX >= x && mouseX <= x+width/x+bs*i && 
     mouseY > y && mouseY <= pad+bs) { 
     float xpos = mouseX; 
     float ypos = mouseY; 
     objects.add(new Object(xpos, ypos, image)); 
    } 
    } 
} 

void mouseDragged() { 
    for (Object o : objects) { 
    o.moove(); 
    } 
} 


/* ---------------------------------------------*/ 

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

Und das Objekt hier:

class Object{ 
float x; 
float y; 
PImage img; 
int block = 50; 

    Object(float tmpx, float tmpy, PImage tmpimg){ 
    x = tmpx; 
    y = tmpy; 
    img = tmpimg; 
    } 

void show(){ 
    image(img,x,y,block,block); 
} 

    void moove() { 
     x = mouseX - block/2; 
     y = mouseY - block/2; 
    } 

} 

Answer 1

Zeit Code zu debuggen.

Ich würde mit dem Zeichnen von Kreisen an Punkten von Interesse beginnen. Beispielsweise zeigt das Zeichnen eines Kreises bei x,y, dass x,y auf die obere linke Ecke des zweiten Bildes zeigt. Bist du sicher, dass du das willst?

Es ist wahrscheinlich nicht, weil Sie in der Lage sein möchten, beide Bilder separat zu überprüfen. Um das zu beheben, würde ich ehrlich gesagt nur x und y als globale Variablen loswerden und nur die Berechnungen in jeder Ihrer for Schleifen für jedes Bild durchführen.

Beachten Sie auch, dass es eine ziemlich schlechte Übung ist, eine Klasse namens Object zu haben. Dies kann nichts kaputt machen (besonders wenn Sie den JavaScript-Modus verwenden), aber im besten Fall wird es verwirrend sein. Es ist besser, aussagekräftigere Klassennamen zu verwenden, wie ImageAtPoint oder so.