Processing  controlP5でGUIコントローラー

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

今回よく使いそうなスライダーとボタンについて書き留めておきます。
今後増やすかも、増えないかも、というところ。

Processing3を使用しました。

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

まずライブラリの読み込みをします。
メニューバーの
Sketch > ImportLibrary > addLibrary
でLibrayManagerが開くので、ControlP5を検索し、インストールします。

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

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

# スライダー

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

![slider.png](https://qiita-image-store.s3.amazonaws.com/0/72056/a6b4df66-e263-c5b2-7a66-2b439dafcc9e.png)  

  

```Java: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メモリずつしか増加できない。
デフォルト値がメモリとは関係ない中途半端な値だと、正しい数値が表示されないので注意。



# ボタン

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

![button.png](https://qiita-image-store.s3.amazonaws.com/0/72056/65423862-199b-8ff2-f672-6d677a084af1.png)  

```Java: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 ディレクトリにサンプルとリファレンスも一緒にダウンロードされます。
他に[公式サイト](http://www.sojamo.de/libraries/controlP5/)でサンプルを見れたり、Processingのメニュー>ヘルプ>ライブラリリファレンスからでもリファレンスを見れます。

[controlP5](http://www.sojamo.de/libraries/controlP5/)
[Processing ControlP5 library example 1 : user interface](http://www.kasperkamperman.com/blog/processing-code/controlp5-library-example1/)
[【Processing】controlP5の使い方](http://ttff.hatenablog.com/entry/2015/09/01/132247)
[『Processing GUI プログラミング』 赤間世紀著 工学社](http://www.amazon.co.jp/Processing-GUIプログラミング-I・O-BOOKS-赤間/dp/4777517454)