ControlP5の使い方

今回はProcessingでGUIを扱うためのライブラリであるControlP5の使い方を解説します。

GitHub - sojamo/controlp5: A gui library for processing.org

ControlP5のインストール

ControlP5はProcessingにデフォルトではインストールされていないので、はじめにインストールを行います。以下のところからLibrary Managerを開き、「ControlP5」で検索してインストールしてください。

「Sketch」->「Import Library...」->「Add Library...」

インストールが完了したら、「Import Library...」にControlP5が表示されるようになります。

ノブを使う

f:id:aa_debdeb:20161104221404p:plain

まずはControlP5の基本的な使い方を説明します。次のコードは上図のように3つのノブをスケッチ上に配置しています。これをマウスで操作すると、それぞれ対応した四角形の大きさが変化します。

/*
* sample01
*/

import controlP5.*;

ControlP5 cp5;
float knobValue;
Knob knob;
float knobFuncValue;

void setup(){
  size(600, 350);
  rectMode(CENTER);
  cp5 = new ControlP5(this);
  
  cp5.addKnob("knobValue") // left knob
     .setLabel("left")
     .setRange(0, 100)
     .setValue(50)
     .setPosition(75, 50)
     .setRadius(50);
  
  knob = cp5.addKnob("center") // center knob
            .setRange(0, 100)
            .setValue(50)
            .setPosition(250, 50)
            .setRadius(50)
            .setDragDirection(Knob.VERTICAL);
            
  cp5.addKnob("knobFunc") // light knob
     .setLabel("right")
     .setRange(0, 100)
     .setValue(50)
     .setPosition(425, 50)
     .setRadius(50)
     .setNumberOfTickMarks(10)
     .setTickMarkLength(5)
     .snapToTickMarks(true);           
}

void knobFunc(float value){
  knobFuncValue = value;
}

void draw(){
  background(128);
  stroke(255);
  noFill();
  rect(125, 250, knobValue, knobValue); // left box
  rect(300, 250, knob.getValue(), knob.getValue()); // center box
  rect(475, 250, knobFuncValue, knobFuncValue); //right box
}

このコードについて解説していきたいと思います。

import controlP5.*;
...
ControlP5 cp5;
...
cp5 = new ControlP5(this);

まずControlP5のライブラリをインポートし、ControlP5クラスのインスタンスを作成します。

  cp5.addKnob("knobValue") // left knob
     .setLabel("left")
     .setRange(0, 100)
     .setValue(50)
     .setPosition(75, 50)
     .setRadius(50);

ノブを作成するにはaddKnobメソッドを使います。このノブの値は、addKnobメソッドの引数と同じ名前の変数に格納されます（この場合、変数knobValueに値が格納されます）。パラメータはメソッドチェーンの形式で設定します。以下、各メソッドで設定できるパラメータです。

setLabel: ラベル名（デフォルトは、addKnobメソッドの引数の値）
setRange: 値の範囲
setValue: 初期値
setPosition: GUIの右上の位置
setRadius: ノブの半径

  knob = cp5.addKnob("center") // center knob
            .setRange(0, 100)
            .setValue(50)
            .setPosition(250, 50)
            .setRadius(50)
            .setDragDirection(Knob.VERTICAL);

真ん中のノブはKnob型変数に作成したノブを代入し、draw関数内でその値をgetValueメソッドを使って取得しています。

ここで新たに出てきたメソッドは、次のパラメータを設定しています。

setDragDirection: マウスを動かす方向（デフォルトはKnob.HORIZONTAL）

  cp5.addKnob("knobFunc") // light knob
     .setLabel("right")
     .setRange(0, 100)
     .setValue(50)
     .setPosition(425, 50)
     .setRadius(50)
     .setNumberOfTickMarks(10)
     .setTickMarkLength(5)
     .snapToTickMarks(true);

3つ目のノブは操作するとaddKnobメソッドの引数と同名の関数knobFunc()を呼び出します。

ここで新たに出てきたメソッドは、次のパラメータを設定しています。

setNumberOfTickMarks: 目盛りの数
setTickMarkLength: 目盛りの長さ
snapToTickMarks: 目盛りの値でステップさせるか（デフォルトはfalse）

以上がノブの使い方の説明です。他のGUIパーツも同様に「add○○」でGUIパーツを作成し、メソッドチェーンでパラメータを設定します。 GUIからの値の取得も同じように行います。

以下では、楽器作成で使うトグルスイッチとスライダーについて説明します。

トグルスイッチを使う

f:id:aa_debdeb:20161104224856p:plain

トグルスイッチは、Boolean型の値を操作するためのGUIです。以下のコードでは、トグルスイッチで四角形の中の色を変えることができます。

/*
* sample02
*/

import controlP5.*;

ControlP5 cp5;

boolean toggleValue;
Toggle toggle;

void setup(){
  size(400, 400);
  rectMode(CENTER);
  cp5 = new ControlP5(this);
  
  cp5.addToggle("toggleValue")
     .setLabel("left")
     .setPosition(100, 100)
     .setValue(false)
     .setSize(40, 20);
  
  toggle = cp5.addToggle("right")
              .setPosition(260, 100)
              .setValue(false)
              .setSize(40, 20)
              .setMode(ControlP5.SWITCH);
}

void draw(){
  background(128);
  stroke(255);
  
  // left box
  if(toggleValue){
    fill(255);
  } else {
    noFill();
  }
  rect(120, 250, 100, 100);
  
  // right box
  if(toggle.getBooleanValue()){
    fill(255);
  } else {
    noFill();
  }
  rect(280, 250, 100, 100);
}

基本的にはノブのときと同じですが、setModeでノブの種類を変えられるのと、Toggle型変数から値を取得するのにgetBooleanValue()を使っている点に注意してください。

スライダーを使う

f:id:aa_debdeb:20161104225222p:plain

スライダーもノブと同様に連続した数値を設定するために使います。次のコードではスライダーを操作すると対応した四角形の大きさを変えることができます。

/*
* sample03
*/

import controlP5.*;

ControlP5 cp5;
float sliderValue;
Slider slider;

void setup(){
  size(400, 400);
  rectMode(CENTER);
  cp5 = new ControlP5(this);
  
  cp5.addSlider("sliderValue")
     .setLabel("left")
     .setRange(0, 100)
     .setValue(50)
     .setPosition(50, 90)
     .setSize(100, 20);
  
  slider = cp5.addSlider("right")
              .setRange(0, 100)
              .setValue(50)
              .setPosition(290, 50)
              .setSize(20, 100)
              .setNumberOfTickMarks(11);
}

void draw(){
  background(128);
  stroke(255);
  noFill();
  rect(100, 250, sliderValue, sliderValue); // left box
  rect(300, 250, slider.getValue(), slider.getValue()); // right box
}