Posted at

Processing controlP5でGUIコントローラー

More than 3 years have passed since last update.

ProcessingではControlP5ライブラリを使用すると、簡単にGUIのコントローラーを作成できます。

今回よく使いそうなスライダーとボタンについて書き留めておきます。

今後増やすかも、増えないかも、というところ。

Processing3を使用しました。


ControlP5をライブラリに追加する

まずライブラリの読み込みをします。

メニューバーの

Sketch > ImportLibrary > addLibrary

でLibrayManagerが開くので、ControlP5を検索し、インストールします。

再び、Sketch>ImportLibraryをみると、ControlP5が表示されるので選択すると、skechのウィンドウにimport controlP5.*;と表示されます。

ちなみにControlP5はクラスとして定義され、controlP5.Controllerクラスのサブクラスとして実装されています。


スライダー

スライダーを左右に動かすと、背景色が変化するコード


controlP5_slider.pde

import controlP5.*;

ControlP5 slider;
int sliderValue;

void setup() {
int myColor = color(255, 0, 0);

size(500, 500);
slider = new ControlP5(this);
slider.addSlider("sliderValue")
//.setLabel("bbb")
.setRange(0, 100)//0~100の間
.setValue(25)//初期値
.setPosition(50, 40)//位置
.setSize(200, 20)//大きさ

// まとめても書ける
// slider.addSlider(name, minimum, maximum, default value (float), x, y, width, height)

//.setColorActive(myColor)//hover
//.setColorBackground(myColor) //スライダの背景色 引数はintとかcolorとか
//.setColorCaptionLabel(myColor) //キャプションラベルの色
//.setColorForeground(myColor) //スライダの色
//.setColorValueLabel(myColor) //現在の数値の色
//.setSliderMode(Slider.FIX)//スライダーの形 Slider.FLEXIBLEだと逆三角形
.setNumberOfTickMarks(5);//Rangeを(引数の数-1)で割った値が1メモリの値

//スライダーの現在値の表示位置
slider.getController("sliderValue")
.getValueLabel()
.align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE)//位置、外側の右寄せ
.setPaddingX(-20);//padding値をとる alineで設定したRIGHTからのpadding
}

void draw() {
background(sliderValue);
}



解説

スライダーの追加

addSlider(string)

stringでスライダーのID名を付ける。

スライダーのラベル

setLabel(string)

ラベルがないと、addSliderのときに設定したID名が表示される。

スライダーの位置

setPosition(x,y)

スライダーの大きさ

setSize(width,height)

スライダーにメモリをつける

.setNumberOfTickMarks()の引数がメモリの数。

Rangeを(引数の数-1)で割った値が1メモリの値になる。

メモリをつけると、1メモリずつしか増加できない。

デフォルト値がメモリとは関係ない中途半端な値だと、正しい数値が表示されないので注意。


ボタン

ボタンを押したら、赤い四角が描かれるコード


controlP5_button.pde

import controlP5.*;

ControlP5 Button;
int redcolor;
color C1;

void setup() {
size(500, 500);
C1 = redcolor = color(255, 0, 0);

Button = new ControlP5(this);
Button.addButton("red")
.setLabel("Red_Button")//テキスト
.setPosition(50, 40)
.setSize(100, 40)
//まとめてもかける
//slider.addSlider(name, value (float), x, y, width, height)

//.setColorActive(C1) //押したときの色 引数はintとかcolorとか
//.setColorBackground(C1) //通常時の色
//.setColorForeground(recolor) //hoverしたときの色
.setColorCaptionLabel(redcolor); //テキストの色

}

void draw() {
}

void red() {
fill(255, 0, 0);
rect(0, 0, width, height/3);
}

/*
void red(){}ではなく、下のように書いても同じ。

void controlEvent(ControlEvent theEvent){
if(theEvent.getController().getName() == "red"){
fill(255,0,0);
rect(0,0,width,height/3);

}
}
*/



解説

ボタンはクリックするとイベントが起こる。

メソッドはスライダーとほぼ同じなので割愛。


参考

ライブラリをインストールすると、libraries > controlP5 ディレクトリにサンプルとリファレンスも一緒にダウンロードされます。

他に公式サイトでサンプルを見れたり、Processingのメニュー>ヘルプ>ライブラリリファレンスからでもリファレンスを見れます。

controlP5

Processing ControlP5 library example 1 : user interface

【Processing】controlP5の使い方

『Processing GUI プログラミング』 赤間世紀著 工学社