Processing マウス入力２

mouseXやmouseYという関数を使えば、動かしているマウスのXY 座標を直接用いることができます。
矩形を描くrect()のXY座標値にmouseXとmouseYを入れれば、マウス（カーソル）の動きに合わせて図形が動きます。例として、正方形（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という数値はwidthとheightを使って代入することができます。
以上のプログラムでも問題ないかもしれないですが、やや不自然な挙動がひとつあります。正方形をクリックしてドラッグした時に正方形が少し瞬間移動してしまう点です（正方形の中心以外の箇所をクリックしてドラッグするとその不自然な挙動ははっきりします）。正方形の中心以外の箇所をクリックしたままドラッグできるようにするためには、クリックした地点の座標と正方形の中心座標との差分を計算に入れなければなりません。そのため、その差分の変数をとりあえず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

posted with amazlet at 09.03.30

マイクロソリューション Micro Solution Inc.
売り上げランキング: 3020

Amazon.co.jp で詳細を見る