Processing cp5でボタンが押されたときにすべてのボタンを消したいです。

Question

Processsing で57個のボタンをfor分で回して作成しました。
作成はでき、ボタン自体もしっかりと機能しています。

そこで、一つのボタンを押したときに全てのボタンを消して、背景に画像を表示しようと思い以下のコードを書きました。

import controlP5.*;

ControlP5 cp5;

String ikkai = "ikkai.txt";
String ikkaiData[];
String nikai = "nikai.txt";
String nikaiData[];
String sankai = "sankai.txt";
String sankaiData[];
String yonkai = "yonkai.txt";
String yonkaiData[];
int x=0;
PImage img1;
PImage img2;
PImage img3;
PImage img4;

void setup(){
  img1 = loadImage("ikkai.png");
  img2 = loadImage("nikai.png");
  img3 = loadImage("sankai.png");
  img4 = loadImage("yonkai.png");
  size(1253,915);
  
  cp5 = new ControlP5(this);
  ControlFont fo = new ControlFont(createFont("MS Gothic", 18));
  
  PFont font = createFont("MS Gothic",18);
  textFont(font);
 
  ikkaiData = loadStrings(ikkai);
  if(ikkaiData == null){
    println(ikkai + "読み込み失敗");
    exit();
  }
  nikaiData = loadStrings(nikai);
  if(nikaiData == null){
    println(nikai + "読み込み失敗");
    exit();
  }
  sankaiData = loadStrings(sankai);
  if(sankaiData == null){
    println(sankai + "読み込み失敗");
    exit();
  }
  yonkaiData = loadStrings(yonkai);
  if(yonkaiData == null){
    println(yonkai + "読み込み失敗");
    exit();
  }
  
  
  text("一階",30,30);
  int x=30;
  for(int i=0; i<5;i++){
    createButton("b" + i,ikkaiData[i],x,40,fo);
    x = x+180;
  }
  x=30;
  for(int i=5; i<10;i++){
    createButton("b" + i,ikkaiData[i],x,100,fo);
    x = x+180;
  }
  x=30;
  for(int i=10; i<16;i++){
    createButton("b" + i,ikkaiData[i],x,160,fo);
    x = x+180;
  }
  
  text("二階",30,240);
  x=30;
  for(int i=0; i<5;i++){
    createButton("b" + (i+16),nikaiData[i],x,250,fo);
    x = x+180;
  }
  x=30;
  for(int i=5; i<10;i++){
    createButton("b" + (i+16),nikaiData[i],x,310,fo);
    x = x+180;
  }
  x=30;
  for(int i=10; i<16;i++){
    createButton("b" + (i+16),nikaiData[i],x,370,fo);
    x = x+180;
  }
  
  text("三階",30,450);
  x=30;
  for(int i=0; i<5;i++){
    createButton("b" + (i+32),sankaiData[i],x,460,fo);
    x = x+180;
  }
  x=30;
  for(int i=5; i<10;i++){
    createButton("b" + (i+32),sankaiData[i],x,520,fo);
    x = x+180;
  }
  x=30;
  for(int i=10; i<16;i++){
    createButton("b" + (i+32),sankaiData[i],x,580,fo);
    x = x+180;
  }
  
  text("四階",30,660);
  x=30;
  for(int i=0; i<5;i++){
    createButton("b" + (i+48),yonkaiData[i],x,670,fo);
    x = x+180;
  }
  x=30;
  for(int i=5; i<9;i++){
    createButton("b" + (i+48),yonkaiData[i],x,730,fo);
    x = x+180;
  }
}

void draw(){
}

//button
void b0(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b1(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b2(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b3(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b4(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b5(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b6(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b7(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b8(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b9(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b10(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b11(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b12(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b13(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b14(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b15(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b16(){;
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b17(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b18(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b19(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b20(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b21(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b22(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b23(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b24(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b25(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b26(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b27(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b28(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b29(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b30(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b31(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b32(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b33(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b34(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b35(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b36(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b37(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b38(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b39(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b40(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b41(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b42(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b43(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b44(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b45(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b46(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b47(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b48(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b49(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b50(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b51(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b52(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b53(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b54(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b55(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}
void b56(){
  background(img1);
  for(int i = 0; i<57; i++){
    cp5.getController("b" + i).remove();
  }
}


Button createButton(String theName, String theLabel, int theX, int theY, ControlFont theFont) {
  Button b = cp5.addButton(theName)
  .setLabel(theLabel)
  .setPosition(theX,theY)
  .setSize(170,50);
  b.getCaptionLabel().setFont(theFont);
  return b;
}

"b0"をクリックした時には全てのボタンが消えるのですが、"b1"以降のボタンをクリックすると" ArrayIndexOutOfBoundsException: Arra index out of range: 0" とエラーが出ます。

試しに"b1()"のfor文をi<56にするとエラーはでなくなりますが、"b56"のボタンは消えません。

なぜこのようなことになるのか、また解決策を教えて頂きたいです。

※ikkai.txtなどのtxtファイルにはボタンに表示するためのテキストが入っています。

Answer 1

提示しておられるコードはいささか長いので、若干イベントハンドリングコードを変更しつつより短いコードで動かしてみますと・・・

import controlP5.*;

ControlP5 cp5;

String ikkai = "ikkai.txt";
String ikkaiData[];
PImage img1;

void setup(){
  img1 = loadImage("ikkai.png");
  size(360, 200);
  
  cp5 = new ControlP5(this);
  ControlFont fo = new ControlFont(createFont("MS Gothic", 18));
  
  PFont font = createFont("MS Gothic", 18);
  textFont(font);
  
  ikkaiData = loadStrings(ikkai);
  
  text("一階",30,30);
  int x = 30;
  for (int i = 0; i < 5; i++) {
    createButton("b" + i, ikkaiData[i], x, 40, fo);
    x += 60;
  }
}

Button createButton(String theName, String theLabel, int theX, int theY, ControlFont theFont) {
  Button b = cp5.addButton(theName)
  .setLabel(theLabel)
  .setPosition(theX,theY)
  .setSize(60,50);
  b.getCaptionLabel().setFont(theFont);
  return b;
}

void removeAllButtonsAndDrawImage() {
    image(img1, 0, 0);
    for (int i = 0; i < 5; i++) {
      Controller c = cp5.getController("b" + i);
      // 以下のif文はデバッグのためにやってみただけで意味は特にありません。
      if (c != null) {
        c.remove();
      } else {
        println("b" + i + " does not exist");
      }
    }
}

void draw(){
}

// 全てのControlP5のコントロールのイベントを受けるハンドラー(なのかな?)
void controlEvent(ControlEvent event) {
  String controlName = event.getController().getName();
  println("event fired from " + controlName);
  removeAllButtonsAndDrawImage();
}

ControlP5 2.2.6 infos, comments, questions at http://www.sojamo.de/libraries/controlP5
event fired from b1
java.lang.ArrayIndexOutOfBoundsException: Array index out of range: 0
	at java.util.Vector.get(Vector.java:748)
	at controlP5.ControllerList.get(Unknown Source)
	at controlP5.ControllerGroup.setMousePressed(Unknown Source)
	at controlP5.ControlWindow.mouseReleasedEvent(Unknown Source)
	at controlP5.ControlWindow.mouseEvent(Unknown Source)
	at sun.reflect.GeneratedMethodAccessor4.invoke(Unknown Source)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at processing.core.PApplet$RegisteredMethods.handle(PApplet.java:1429)
	at processing.core.PApplet.handleMethods(PApplet.java:1624)
	at processing.core.PApplet.handleMouseEvent(PApplet.java:2687)
	at processing.core.PApplet.dequeueEvents(PApplet.java:2609)
	at processing.core.PApplet.handleDraw(PApplet.java:2450)
	at processing.awt.PSurfaceAWT$12.callDraw(PSurfaceAWT.java:1547)
	at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:316)

確かに最初のボタンをクリックした場合はエラーは発生しませんが、2番目(以降?)のボタンをクリックすると調子が悪い様です。スタックトレースをみた感じ「ボタンを押した=MousePressed」際のイベントの後、「ボタンを離した=MouseReleased」イベントを処理しようとした際になんらかの内部矛盾が生じているように見えました。ControlP5のコントロールの属性を見ると「isPressed()」のようなメソッドがあることから「そのコントロールに対してMouseClickedイベントが発生した際にコントロールに「PRESSED状態」を設定し、MouseReleaseイベントが発生したら内部状態の「PRESSED状態」を解除しようとしていると思います。マウスを離した際に「PRESSED状態のコントロールの状態をPRESSEDでない状態に変更しようとして、それに失敗している（その時点ではもうコントロールが消されてしまっているから）」といった状況になっているのではないでしょうか？

ControlP5の内部を調べてないので上記は単なる想像ですが「MousePressed時のイベントハンドラーの中で直接コントロールを削除する」ような使い方を想定していないか、またはバグのような気がしました。複数ある最初のコントロールの場合だけは例外が発生せずに動くようですが、たまたま動いているだけのような気がします。

###対処
マウスが離されたときを狙ってボタンを削除すればよいのではないかと思い、ボタンを生成する際に

.activateBy(ControlP5.RELEASED)

とやってみたのですが、やはり例外が起きます。ならばということで「ボタンが押されたことをフラグに記録し、ボタン関連イベントの処理が終わった後で定期起動メソッド（つまりdrawメソッド）の中でそのフラグをみてボタンを消す（イベントの遅延発動とでもいいましょうか）という考え方にしてみました。

こうするとどのボタンを押しても例外は発生せず一応期待通りに動作するように見えます。

...省略...

// フラグを用意する
boolean buttonClicked = false;

void draw(){
  if (buttonClicked) {
    println("removing all buttons");
    removeAllButtonsAndDrawImage();
    buttonClicked = false;
  }
}

// 全てのControlP5のコントロールのイベントを受けるハンドラー(なのかな?)
void controlEvent(ControlEvent event) {
  Controller controller = event.getController();
  String controlName = controller.getName();
  println("event fired from " + controlName);
  // イベント発生元のコントロールがButtonだったら
  if (controller instanceof Button) {
    //removeAllButtonsAndDrawImage();  // 直接ボタンを削除せずに
    buttonClicked = true;              // 後でボタンを削除するためのフラグのみ設定する
  }
}

本当のところどうするのが一番よいのかまでは分かりませんでしたが、回避例として挙げてみました。

Comments

[ATMEGA]

素早い回答ありがとうございます。MouseReleasedが影響していたのですね。詳しい解説までありがとうございます。
おかげで解決いたしました。
ほんとにありがとうございます。