【Processing】controlP5の使い方

Processingでボタンやスライダーを表示するためのライブラリ『controlP5』ですが、Processing 3への対応はまだされていないようです。

ですが、実際に使えるのか試してみました。使い方の確認もしたいと思います。

コード例

import controlP5.*;

ControlP5 cp5;

String filenameA = null;
String filenameB = null;

void setup(){
  size(300,200);
  cp5 = new ControlP5(this);
  
  cp5.addButton("fileA")
    .setLabel("File A")
    .setPosition(50,50)
    .setSize(60,30);
    
  cp5.addButton("fileB")
    .setLabel("File B")
    .setPosition(120,50)
    .setSize(60,30);
    
  cp5.addButton("mergeFiles")
    .setLabel("Create")
    .setPosition(50,90)
    .setSize(130,30);
}

void draw(){
}

void fileA(){
  println("fileA clicked");
}

void fileB(){
  println("fileB clicked");
}

void mergeFiles(){
  println("mergeFiles clicked");
  exit();
}

実行

上のコードを実行した結果が以下です。

解説

まずcontrolP5を初期化し、ボタンを配置します。

cp5 = new ControlP5(this);

 cp5.addButton("fileA")
    .setLabel("File A")
    .setPosition(50,50)
    .setSize(60,30);

３行目以降の意味は、以下のような意味です。

ボタンを「fileA」という名前（ID）で追加し、ラベルは「File A」、位置は (x: 50, y: 50)、サイズは 60px x 30px

これを理解していれば、他のボタンも同じように追加できます。

クリックイベント

さて、実行してみるとわかりますが、クリックしても何も動きません。

そこで以下のコードを追加します。

void fileA(){
  // クリックされた時の処理
}

この関数名は、先ほど追加したボタンの名前（ID）と一致します。

あとは、background(255,0,0)とかを追加すれば、クリックされたことが分かります。