読者です 読者をやめる 読者になる 読者になる

aa develop

開発と成長

ControlP5の使い方

Processing Processingで楽器を作ろう

今回は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
}

スライダーは、横幅が縦幅より大きいときは横向き、縦幅が横幅より大きいときは縦向きに操作できるように勝手になります。

もしこれら以外のGUIパーツを使うことがあれば、その都度解説します。

この記事はProcessingで楽器をつくろうの第2回目です。