processing.js에서 다른 이미지 객체 만들기

Question

브라우저에서 일부 이미지를 표시하려고하는데 이미지를 클릭하면 마우스 위치에서 눌려진 이미지가 표시되지만 배열의 첫 번째 요소를 누르면 아무 일도 일어나지 않았지만 두 번째 요소를 누르면 표시되지만 두 번째를 다시 누르면 두 번째 요소가 다시 표시됩니다. 배열의 가치에 문제가 있다는 사실을 단지 한 번만 변경하고 더 이상은 아닙니다. 다음은 내 코드입니다 :

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

그리고 목적은 여기에 있습니다 : 코드를 디버깅 할 수

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

시간.

관심 지점에서 원을 그리기 시작합니다. 예를 들어, x,y에 동그라미를 그리면 x,y은 두 번째 이미지의 왼쪽 상단 모서리를 가리 킵니다. 그게 니가 원하는거야?

두 이미지를 개별적으로 확인할 수 있기를 원하기 때문일 수 있습니다. 이를 해결하기 위해 나는 글로브 변수로 x과 y을 제거하고 각각의 이미지에 대해 각각 for 루프의 계산을 수행합니다.

또한, Object이라는 클래스를 갖는 것은 매우 나쁜 습관입니다. 이것은 (특히 자바 스크립트 모드를 사용하는 경우) 아무 것도 깨뜨리지 않을 수도 있지만 기껏해야 혼란 스러울 것입니다. ImageAtPoint 또는 뭔가와 같이 더 자세한 설명이 포함 된 클래스 이름을 사용하는 것이 좋습니다.