Processing에서 부울 배열로 버튼을 만드는 방법?

Question

저는 Java 기반 환경 인 "Processing"에서 프로그래밍 과정을 수강 중입니다. 하나의 과제는 3 개의 버튼 (검정색)을 표시하는 프로그램을 작성하는 것입니다. 버튼을 클릭하면 해당 버튼이 다른 색상 (회색)으로 변경됩니다. 우리는 부울 [] 배열을 사용해야합니다. 내 코드는 다음과 같습니다 :

boolean[] button = new boolean[3]; 

void setup(){ 
    size(300,300); 
    button[0] = false; 
    button[1] = false; 
    button[2] = false; 
} 

void draw(){ 
    int x = (width/(button.length+1)); 
    int y = height/2; 
    int ellipseSize = 50; 
    int radius = ellipseSize/2; 
    background(255); 
    noStroke(); 
    fill(0); 
    for(int i = 1; i <= button.length; i++){ 
     ellipse(i*x, y, ellipseSize, ellipseSize); 
    } 
} 

//shifting array values upon mouse pressing 
void mousePressed(){ 


    int x = (width/(button.length+1)); 
    int y = height/2; 
    int ellipseSize = 50; 
    int radius = ellipseSize/2; 

    for(int i = 1; i <= button.length; i++){ 
     button[i] = !button[i]; 
     if (mouseX > i*x-radius && mouseX < i*x+radius && mouseY > y-radius && mouseY < y+radius){ 
      if (button[i]){ 
       fill(150); 
      } 
     } 
     else { 
      fill(0); 
     } 
     ellipse(i*x, y, ellipseSize, ellipseSize); 
    } 
} 

"ArrayIndexOutOfBoundsException : 3"오류가 발생합니다. 누군가 도울 수 있습니까?

Answer 1

변경

i <= button.length 

i < button.length 

배열의 길이가 3 다음 버튼 [2] 마지막 요소 인 경우에

.

Answer 2

잘못된 인덱스에 액세스하려고 시도했기 때문에 ArrayIndexOutOfBoundsException: 3 오류가 발생합니다. Java와 대부분의 프로그래밍 언어 배열은 0에서 시작합니다. 몇 사람이 대부분의 프로그래밍 언어에서 배열을 언급 한 바와 같이 그래서, 당신의 루프는 인덱스 0에서 시작 button.length - 1 그래서 당신이 for 루프 또는 button[i] 전화를 변경할 필요가에서 마지막 인덱스가 i < button.length

Answer 3

에 i <= button.length을 변경해야합니다.

그러나 버튼을 완성하려면 처리에 대해 더 이해해야합니다. 그리기 기능이 반복적으로 호출되며 (사용자 fps에 따라 다름) 항상 background 기능으로 스케치를 지 웁니다. 그런 다음 채우기 색을 검은 색으로 설정하고 3 개의 원을 그립니다. 마우스 이벤트 내부에서 fill을 변경하면 가끔 작동 할 수 있습니다 (원이 그려지는 것과 같은 순간에 클릭하는 경우). 그러나 매우 나쁜 접근입니다.

당신은 draw 기능 내에서 button 배열에 따라 fill을 설정해야합니다 :

for(int i = 1; i <= button.length; i++){ //good boundaries for drawing but not for array 
    if(button[i-1]) {     //for array you need correct index 
     fill(0); 
    }else{ 
     fill(150); 
    } 
    ellipse(i*x, y, ellipseSize, ellipseSize); 
} 

그리고 물론

그냥 버튼을 클릭 한 경우 확인하고 다음 drwing에 대한 button 배열 내에서이 정보를 저장하는 마우스 이벤트 변경 .

for(int i = 1; i <= button.length; i++){ //your old boundaries 
    if (mouseX > i*x-radius && mouseX < i*x+radius && mouseY > y-radius && mouseY < y+radius){ 
     button[i-1] = !button[i-1];   //updated index 
    } 
}