まずは、用意から。
新しい空のスケッチを保存します。
スケッチ名は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 アニメーション
・楽しく学ぶコンピュテーショナルデザイン
田原 淳一郎
カットシステム
売り上げランキング: 292836
カットシステム
売り上げランキング: 292836
0 件のコメント:
コメントを投稿