2012年11月27日火曜日

Processing ControlP5 Buttonコントロール使い方

前回、ProcessingへControlP5を組み込み、Buttonコントロールのサンプルを動かしました。サンプルのスケッチを読みながら、Buttonコントロールの使い方をマスターしたいと思います。

まずは、用意から。



新しい空のスケッチを保存します。
スケッチ名はButtonRensyu です。
保存先は、
C:\Documents and Settings\Administrator\My Documents\Processing\buttonRensyu

このフォルダ内に、スケッチ本体 buttonRensyu.pde と、ライブラリーを保存します。
ライブラリーの保存は、前回やり方を覚えました。
codeフォルダを作り、その中にcontrolP5.jarを保存します。

C:\Documents and Settings\Administrator\My Documents\Processing\buttonRensyu\code\controlP5.jar

実行例

sampleのスケッチの各ブロックを、読みながらコピーしていきます。

【初めのブロック】


import controlP5.*;

ControlP5 cp5;
int myColor = color(255);
int c1,c2;
float n,n1;

[解説]

このブロックでは、ライブラリーを使うためのお約束と、使用する変数の宣言をしています。

import controlP5.*;   このスケッチでcontrolP5ライブラリーを使うためにインポート

ControlP5 cp5;     contorlP5のオブジェクトを保管するための変数を宣言
int myColor = color(255);  色を使うための変数を宣言
int c1,c2;            int型変数を使うための宣言
float n,n1;           float型変数を使うための宣言



【setup()ブロック】


void setup() {
  size(400,400);
  noStroke();
  cp5 = new ControlP5(this);

    // create a new button with name 'buttonA'
  cp5.addButton("colorA")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;
    // and add another 2 buttons
  cp5.addButton("colorB")
     .setValue(100)
     .setPosition(100,120)
     .setSize(200,19)
     ;
}



[解説]

このsetup()ブロックでは、画面サイズの指定と、2つのボタンを作っています。


cp5 = new ControlP5(this);  controlP5オブジェクトを作成し、cp5へ保存
これ以降は、cp5.xxxxx と指定することでcontorlP5を操作することができます。

ボタン名 colorA というボタンを作る命令 cp5.addButton です。
ボタン名、表示位置、ボタンの大きさを指定しています。


    // create a new button with name 'buttonA'
  cp5.addButton("colorA")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;


  cp5.addButton("ボタン名")

     .setValue(0)  ・・・ よくわかりませんm(__)m

     .setPosition(表示位置 横,表示位置 縦)

     .setSize(ボタンの大きさ 横,ボタンの大きさ 縦)



     ;

複数行にわたって書いていますが、一行で書いてもOKです。

  cp5.addButton("colorA").setValue(0).setPosition(100,100).setSize(200,19);



同じようにボタンをもうひとつ作っています。
    // and add another 2 buttons
  cp5.addButton("colorB")
     .setValue(100)
     .setPosition(100,120)
     .setSize(200,19)
     ;



【draw()ブロック】


void draw() {
  background(myColor);
  myColor = lerpColor(c1,c2,n);
  n += (1-n)* 0.1;
}



[解説]

このdraw()ブロックでは、背景色を指定しています。このあとのボタンの操作により、c1,c2が変化したことに背景色を変更しています。

lerpColor命令は、c1とc2の中間色を取り出すための関数です。どのあたりの中間色かを指定しているのが、n です。nは割合で0.0~1.0で指定します。

【controlEventブロック】

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  n = 0;
}



[解説]

どのボタンがクリックされても、このブロックが実行されます。
println命令により、コントロール名を表示します。

nを0に代入しています。
結果、draw()ブロックの  n += (1-n)* 0.1;  に影響していきます。

n=0 ⇒ n += (1-n)* 0.1; この式により、nは、(1-0)*0.1 の結果、0.1 を加算するので、0.1
次の回は、
n=0.1 ⇒ nは、(1-0.1)*0.1の結果0.09を加算し、0.19

次の回は、
n=0.19 ⇒ nは、(1-0.19)*0.1の結果0.081を加算し、0.271

と、nは徐々に1へ近づいていきます。


【 colorA ブロック】

public void colorA(int theValue) {
  println("a button event from colorA: "+theValue);
  c1 = c2;
  c2 = color(0,160,100);
}




[解説]

ColorAボタンがクリックされたときに、このブロックが実行されます。

println命令により、コンソールへメッセージを表示しています。
そして、c1とc2を指定しています。
c1へc2を代入し、c2へは、color(0,160,100)を代入しています。


【 colorB ブロック】


public void colorB(int theValue) {
  println("a button event from colorB: "+theValue);
  c1 = c2;
  c2 = color(150,0,0);
}





[解説]

ColorBボタンがクリックされたときに、このブロックが実行されます。

println命令により、コンソールへメッセージを表示しています。
そして、c1とc2を指定しています。
c1へc2を代入し、c2へは、color(150,0,0)を代入しています。

colorAブロツクとcolorBブロックがクリックされた際に、c1とc2の値を変更し、その結果がdraw()ブロック内で背景色の指定に使われています。

最後にまとめると、
まず、ライブラリーを使用するためのお約束事項を実行。
setup() 内で、ボタンコントロールを追加します。
ボタンがクリックされたことを検出するのは、controlEventとコントロール名で指定した処理となります。


【スケッチ全体】

import controlP5.*;

ControlP5 cp5;
int myColor = color(255);
int c1,c2;
float n,n1;

void setup() {
  size(400,400);
  noStroke();
  cp5 = new ControlP5(this);

    // create a new button with name 'buttonA'
  cp5.addButton("colorA")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     ;
    // and add another 2 buttons
  cp5.addButton("colorB")
     .setValue(100)
     .setPosition(100,120)
     .setSize(200,19)
     ;
}
void draw() {
  background(myColor);
  myColor = lerpColor(c1,c2,n);
  n += (1-n)* 0.1;
}

public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  n = 0;
}

public void colorA(int theValue) {
  println("a button event from colorA: "+theValue);
  c1 = c2;
  c2 = color(0,160,100);
}

public void colorB(int theValue) {
  println("a button event from colorB: "+theValue);
  c1 = c2;
  c2 = color(150,0,0);
}








・Processingをはじめよう
・Processing アニメーション
・楽しく学ぶコンピュテーショナルデザイン






0 件のコメント:

コメントを投稿