INDEX(各項目ごとの目次)

[HOME]  [Processing関係]  [Arduino関係]  [マテリアル関係]  [秋葉原工作マップ]

2008年用ですが、部分的に内容を更新しています(2010/06/14)。
また、[建築農業工作ゼミ2009-2010]とも連動していますので、そちらにも幾つかサンプルがあります。
:

5/13/2008

Processing マウス入力4

今までのボタン操作において、「押したらオン、放したらオフ」になるというプログラムを書いてきましたが、「押したらオン、もう一回押したらオフ」になるトグルスイッチというものもあります。トグルスイッチのプログラムには、変数を用意しておいて、オンやオフになっている状態を記憶させておく必要があります。そのようなものをフラグといいます。サンプルとして、正方形をクリックし、オンなら緑、オフなら赤というプログラムを書きます。まず、オン/オフ用としてflag(変数名は任意)という変数を用意しておきます。いままで使ってきたint型の変数を使うことも可能ですが、オン/オフの二つの状態しかないので、より単純なboolean型の変数を用います。変数の値としては、truefalseだけになります。つまり、flagがtrueのときは、スイッチがオンになっている状態とし、flagがfalseのときはオフになっている状態であるという設定にします。

boolean flag; //boolean型の変数flagを用意

void setup(){
//画面サイズ
size(400,200);
//スイッチの初期値はfalse(オフ)に設定
flag=false;
//図形の初期色を赤(オフ)に設定
fill(255,0,0);
}

void draw(){
background(100);
rect(200,100,50,50);
}

void mousePressed(){
//マウス座標が正方形の範囲内の時
if(mouseX>=200 && mouseX<=250 && mouseY>=100 && mouseY<=150){
if(flag==false){ //クリックする前がオフの時
fill(0,255,0);
flag=true; //クリックしたらオンの状態に変更する
}else{ //クリックする前がオンの時
fill(255,0,0);
flag=false; //クリックしたらオフの状態に変更する
}
}
}

if()内の条件式では、flag==falseというように「==」イコールを二つ用いて下さい。ただし、その後の「クリックしたらオンの状態に変更する」箇所では、flag=trueというように「=」イコールが一つになります。
フラグを用いることで、もう既に済んでしまっている出来事の状態を記憶させておくことができます。それに応じて、条件式を設定すれば、より複雑な状況をプログラムしていくことが可能になります。例えば3回押したらオンになるスイッチもint型変数をカウントとして使えば可能となります。

boolean flag; //オンかオフを判定するフラグ変数
int count; //クリック回数をカウントする変数

void setup(){
size(400,200);
flag=false; //オフに設定しておく
fill(255,0,0);//正方形の色(オフ)を赤にしておく
count=0; //0回目に設定しておく
}

void draw(){
background(100);
rect(200,100,50,50);
}

void mousePressed(){
if(mouseX>=200 && mouseX<=250 && mouseY>=100 && mouseY<=150){
count++; //正方形内をクリックするごとに回数が+1される
if(count>=3){ //クリック回数が3以上なら
if(flag==false){ //スイッチがオフなら
fill(0,255,0); //緑(オン)に変更する
flag=true; //スイッチをオンに変更する
}else{ //スイッチがオンなら
fill(255,0,0); //オフ(赤)に変更する
flag=false; //スイッチをオフに変更する
}
count=0; //カウントを0に戻す
}
}
}

クリックされる前の状態がオンのときはオフへ、オフのときはオンへ切り替えるboolean型の変数flagと同時に、クリック回数を記憶しておくint型変数countがあります。それぞれ切り替わる際には、flagをfalseからtrueへ、あるいはtrueからfalseへ、そして回数も3から0へと変更するような後処理についても忘れずプログラムしておく必要があります。

Processing マウス入力3

クリックやドラッグ以外に、マウス(カーソル)を図形の上に重ねた時に、色や形が変わるロールオーバーという機能があります。Processingでは、ロールオーバーの関数は用意されていないので、自前でプログラムする必要があります。原理的には、マウス(カーソル)の座標mouseXmouseYが、その図形上にあるかどうかをif文を用いて判定するプログラムになります。
例として、画面上の座標(200,100)に配置された一辺50pixelの正方形(赤)にマウス(カーソル)が重なった ら黄色に変化し、マウスボタンを押したら緑に、放したらもとの赤に戻るというプログラムを書きます。

void setup(){
size(400,200);//画面サイズ
fill(255,0,0);//正方形の初期色を赤に設定
}
void draw(){
background(100);
rect(200,100,50,50);

//マウスが正方形内にある場合
if(mouseX>=200 && mouseX<=250 && mouseY>=100 && mouseY<=150){
if(mousePressed){//クリックした場合:緑
fill(0,255,0);
}else{//それ以外(クリックしない場合):黄
fill(255,255,0);
}
}else{ //それ以外(マウスが正方形外にある場合):赤
fill(255,0,0);
}
}

マウスの座標であるmouseXmouseYに対して、if文によって正方形内にマウスがあるかないかを判定しています。X座標に関しては正方形の左端(200)から右端(250)の座標、Y座標に関しては上端(100)から下端(150)の座標の範囲にマウスがある場合ということを、複数の条件としてif文に設定しています。&&は、複数の条件「Aという条件かつBという条件」という意味です。マウスの座標が200以上かつ250以下なので、200<=mouseX<=250と書きたいところですが、mouseX>=200 && mouseX<=250というように分けて書かないとエラーがでます。ちなみに「Aという条件またはBという条件」の場合は、||を用います。

このプログラムでは条件式が少し複雑ですが、まずマウスが正方形内にあるかないかという条件を設定します。もし正方形外ならそのままfill(255,0,0)で赤、もし正方形内であれば、ロールオーバーかクリックかという二つの条件に分かれて、mousePressedされれば、fill(0,255,0)で緑、そうでなければ、ロールオーバーのままfill(255,255,0)で黄色になるという仕組みです。
if(mousePressed){};というようにmousePressedは、if文の()内に入れて使うことはできますが、mouseReleasedはmouseReleased()として使うのであって、if文の()内に直接入れることはできません。

Processing マウス入力2



mouseXmouseYという関数を使えば、動かしているマウスのXY 座標を直接用いることができます。
矩形を描くrect()のXY座標値にmouseXmouseYを入れれば、マウス(カーソル)の動きに合わせて図形が動きます。例として、正方形(50pixel角)を動かすプログラムを以下に書いてみます。さらに、mousePressed()mouseReleased()を加えて、マウスボタンを押したら緑、放したら赤に戻る正方形の色も変化する内容にします。

int a; //正方形の1辺の長さの変数を用意する

void setup(){
//画面サイズ400×200に設定
size(400,200);
//正方形の一辺aを50に設定
a=50;
//正方形の位置基準を図形中央に設定
rectMode(CENTER);
//最初の塗り色を赤に設定
fill(255,0,0);
}

void draw(){
//背景色をとりあえず100に設定
background(100);
//正方形のXY座標にmouseX,mouseYを設定
rect(mouseX,mouseY,a,a);
}

void mousePressed(){
//押されたら塗り色を緑へ変える
fill(0,255,0);
}

void mouseReleased(){
//放したら塗り色を赤へ戻す
fill(255,0,0);
}

この場合、正方形は常にマウス(カーソル)に合わせて動きます。
さらに、正方形をクリックしてドラッグできるようなプログラムにするなら、正方形のXY座標用の変数も用意して、以下のようになります。

int a; //正方形の1辺の長さの変数を用意する
int x; //正方形のX座標の変数を用意する
int y; //正方形のY座標の変数を用意する

void setup(){
//画面サイズ400×200に設定
size(400,200);
//正方形の一辺aを50に設定
a=50;
//正方形の位置基準を図形中央に設定
rectMode(CENTER);
//最初の塗り色を赤に設定
fill(255,0,0);
//正方形の初期位置を画面中央にしておく
x=width/2;
y=height/2;
}

void draw(){
//背景色をとりあえず100に設定
background(100);
//描画される正方形に各変数を代入しておく
rect(x,y,a,a);
}

void mousePressed(){
//押されたら塗り色を緑へ変える
fill(0,255,0);
}

void mouseDragged(){
//ドラッグ中はrect()に代入されたXY座標用の
//変数x,yにマウス座標のmouseXとmouseYが
//対応するようにしておく
x=mouseX;
y=mouseY;
}

void mouseReleased(){
//放したら塗り色を赤へ戻す
fill(255,0,0);
}

setup()内にあるwidthは画面サイズ幅、heightは画面サイズ高さです。一度画面サイズをsize(400,200);と設定してしまえば、その後画面サイズである400や200という数値はwidthheightを使って代入することができます。
以上のプログラムでも問題ないかもしれないですが、やや不自然な挙動がひとつあります。正方形をクリックしてドラッグした時に正方形が少し瞬間移動してしまう点です(正方形の中心以外の箇所をクリックしてドラッグするとその不自然な挙動ははっきりします)。正方形の中心以外の箇所をクリックしたままドラッグできるようにするためには、クリックした地点の座標と正方形の中心座標との差分を計算に入れなければなりません。そのため、その差分の変数をとりあえずdx,dyとして用意しておき、以下のようになります。

int a; //正方形の1辺の長さの変数を用意する
int x; //正方形のX座標の変数を用意する
int y; //正方形のY座標の変数を用意する
int dx; //差分用のX座標変数
int dy; //差分用のY座標変数

void setup(){
//画面サイズ400×300に設定
size(400,300);
//正方形の一辺aを50に設定
a=50;
//正方形の位置基準を図形中央に設定
rectMode(CENTER);
//最初の塗り色を赤に設定
fill(255,0,0);
//正方形の初期位置を画面中央にしておく
x=width/2;
y=height/2;
//初期設定ではとりあえず差分を0にしておく
//(これは書かなくても大丈夫ですが、
// 一応書いておきます)
dx=0;
dy=0;
}

void draw(){
//背景色をとりあえず100に設定
background(100);
//描画される正方形に各変数を代入しておく
rect(x,y,a,a);
}

void mousePressed(){
//押されたら塗り色を緑へ変える
fill(0,255,0);
//クリックされた瞬間に正方形の座標と
//マウス座標の差分を求めておく
dx=x-mouseX;
dy=y-mouseY;
}

void mouseDragged(){
//ドラッグ中はrect()に代入されたXY座標用の
//変数x,yにマウス座標のmouseXとmouseYが
//対応するようにしておき、
//mousePressed()の中で求めた差分dx,dyを
//付け足す
x=mouseX+dx;
y=mouseY+dy;
}

void mouseReleased(){
//放したら塗り色を赤へ戻す
fill(255,0,0);
}
このプログラムでは、クリックした時に、正方形の位置座標であるx,yとマウスのmouseX,mouseYのズレを予め用意した変数dx,dyへ記憶させておき、最終的に正方形の座標にその差分であるdx,dyを付け足してズレを解消する微調整を行っています。インタラクティブな内容になるほど、ユーザ側への配慮が必要となってくるので、このようにプログラムもやや複雑で細かくなってきますが、逆に表現の幅を広げる工夫にもつながると思います。

マルチパッドフィルム Multi pad Slick Film #601AFAG for MacBook Late 2008 Series / MPSF601AFAG
マイクロソリューション Micro Solution Inc.
売り上げランキング: 3020

5/12/2008

Processing マウス入力1

前回までは、ループ処理を使って図形を動かしていました。ただ、このままでは一方的に動画を表示していることに過ぎないので、録画されたコンテンツを再生していることと、何ら違いがありません。今回は、ユーザ側からのマウス入力のプログラムを加えることで、一方的に表示されている内容を、相互作用的な内容へと変化させます。
例として、前回の入れ子で動く正方形のプログラム(「Processingの描画サンプル」)にマウス入力に反応するプログラムを書き足します。ここでは、mousePressed()というマウスのボタン(左クリック)が押された時に発動するプログラムを付け足してみます。
そのためには、

void mousePressed(){
//ここにボタンが押されたときに発動するプログラムを書く
}

というプログラムを前回のプログラムの最後に付け足します。

例えば、クリックしたら二つの正方形の位置がそれぞれ0に戻るというプログラムであれば、

int a=10;
int b=a*12;
int c=b*3;
int ax; //小さい正方形(黒)のX座標の変数
int bx; //大きい正方形(赤)のX座標の変数

void setup(){
size(360,120);
noStroke();
}

void draw(){
background(0);
fill(250,20,20);
rect(bx,height/2-b/2,b,b);
bx=bx+1;
if(bx>c){
bx=-b;
}
fill(0);
rect(ax+bx,height/2-a/2,a,a);
ax++;
if(ax>b){
ax=-a;
}
}

void mousePressed(){
ax=0;
bx=0;
}

となります(axは前回用いたプログラムの小さな黒い正方形のx座標のための変数、bxは大きな赤い正方形のx座標のための変数)。draw()の中の上から4行目の「bx=bx+1;」を「bx+=1;」あるいは「bx++;」と書くこともできます。同様にさらに6行下の「ax++;」は「ax=ax+1;」あるいは「ax+=1;」と同じことです。以前の「Processingの基本操作 その3」でも触れましたが、「++」はインクリメントと呼ばれ、変数に+1を自己代入して+1ずつ増加させていくことです。
mousePressed()のほかにmouseReleased()mouseDragged()mouseMoved()があります。
mousePressed()は、マウスボタンを押した瞬間に発動します。
mouseRelease()は、マウスボタンを押して放される瞬間に発動します。
mouseDragged()は、クリックし、そのままドラッグしている間発動し続けます。
mouseMoved()は、マウスが動いている間(クリックしなくても)発動し続けます。
それぞれの挙動の違いを各自確かめてみてください。

5/03/2008

Processingの描画サンプル

以下は、「One inch /One foot / One yard」のテーマをもとにProcessingで作成したプログラムの例です。



このプログラムでは、画面の横幅を1yard、大きな正方形(赤)を1footの正方形、小さな正方形(黒)を1inchの正方形とみなしています。入れ子になった正方形が左から右へ動くというサンプルです。
「One inch /One foot / One yard」は、単位やスケールに関わるテーマです。このようなシンプルな表現で構わないので、次回の授業までに作成してきてください。
ちなみに、このプログラムでは、noStroke()という関数を使っています。noStroke()は、rect()などの「図形の外形線を描かない」というコマンドです。それ以外は、このブログで説明してある方法を用いてプログラムできると思います。

以下がプログラムソースです。

int a=10;
int b=a*12;
int c=b*3;
int ax;
int bx;

void setup(){
size(360,120);
noStroke();
}
void draw(){
background(0);
fill(250,20,20);
rect(bx,height/2-b/2,b,b);
bx=bx+1;
if(bx>c){
bx=-b;
}
fill(0);
rect(ax+bx,height/2-a/2,a,a);
ax++;
if(ax>b){
ax=-a;
}
}


[目次:Processing関係]  [HOMEへ戻る]  [目次:Arduino関係]