Help us understand the problem. What is going on with this article?

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クラスのサブクラスとして実装されています。

スライダー

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

slider.png

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

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 プログラミング』 赤間世紀著 工学社

akspect
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした