マウスやキーボードによる操作をプログラムに反映させることもプロセッシングでは簡単にできます。このページでは、マウスを押すと動いているものが止まったり、動き出したり、あるいは色を変えたりといったインタラクティブな処理を実現する方法を説明します。
このページのサンプルでは、画面を押すと動作が止まる機能と、長押しするとリロードする機能は止めてあります
マウスを押したときに何かを行いたいときには、void mousePressed(){ }を使います。この処理が行われるのは、マウスを押した瞬間だけです。マウスを押している間中、処理を行いたい場合には後述する別の方法を用います。
void mousePressed(){ }の使い方は、関数と同じです。波括弧の中に、マウスを押したときに行いたい処理を書きます。具体的には、下記のプログラム例を見てみましょう。
このプログラムは、マウスを押した瞬間に「click」と画面に表示させるものです。
String s;
void setup(){
s = "click!";
}
void draw(){
}
void mousePressed(){
textSize(20);
text(s,width/2,height/2);
}
実行結果は下記のようになります。（このページのサンプルでは、画面を押すと動作が止まる機能と、長押しするとリロードする機能は止めてあります）
下記プログラムは、ハートが画面左から右に向かって移動するものです。上記例とは違い、マウスをクリックするとハートの位置が始めの位置に戻ります。
PImage haikei, heart1, heart2, heart3, heart4;
int x1,x2,x3,x4;
void setup() {
haikei = loadImage("hot-chocolate-1058197__340.jpg");
heart1 = loadImage("heart1.png");
heart2 = loadImage("heart2.png");
heart3 = loadImage("heart3.png");
heart4 = loadImage("heart4.png");
size(600, 400);
x1=0;
x2=0;
x3=0;
x4=0;
}
void draw() {
image(haikei, 0, 0, width, height);
image(heart1, x1, 0);
image(heart2, x2, 100);
image(heart3, x3, 200);
image(heart4, x4, 300);
x1++;
x2+=2;
x3+=3;
x4+=4;
}
void mousePressed(){
x1=0;
x2=0;
x3=0;
x4=0;
}
上記コードは下記のように動作します。
今度は、マウスをクリックすると画面の外に出てしまったハートだけ、始めの位置に戻るようにしています。
PImage haikei, heart1, heart2, heart3, heart4;
int x1, x2, x3, x4;
void setup() {
haikei = loadImage("hot-chocolate-1058197__340.jpg");
heart1 = loadImage("heart1.png");
heart2 = loadImage("heart2.png");
heart3 = loadImage("heart3.png");
heart4 = loadImage("heart4.png");
size(600, 400);
x1=0;
x2=0;
x3=0;
x4=0;
}
void draw() {
image(haikei, 0, 0, width, height);
image(heart1, x1, 0);
image(heart2, x2, 100);
image(heart3, x3, 200);
image(heart4, x4, 300);
x1++;
x2+=2;
x3+=3;
x4+=4;
}
void mousePressed() {
if (x1>width) {
x1=0;
}
if (x2>width) {
x2=0;
}
if (x3>width) {
x3=0;
}
if (x4>width) {
x4=0;
}
}
上記コードは下記のように動作します。
マウスを押して、その指が離れたときに1回だけ処理を行いたい場合は、void mouseReleased() { }を使います。mousePressed(){ }と使い方は同じです。マウスを押した瞬間か、離した瞬間かという違いがあるだけです。そのため例は省略します。
マウスを押している間中ずっと何らかの処理を行いたい場合は、mousePressedという変数を使います。これは特別な変数で、マウスが押されている間はtrueになり、押されていないときはfalseになります。また宣言も不要です。
簡単な例です。マウスを押している時のみ、円を表示します。
void setup(){
size(800,600);
}
void draw(){
background(200,200,200);
if(mousePressed == true){
ellipse(width/2,height/2,400,400);
}
}
上記コードは下記のように動作します。
理解を深めるために、マウスを押している間、円が大きくなったり、色が変わったりするようにアレンジしてみるとよいでしょう。
下記は、マウスを押している間のみハートが上下に振動します。
PImage haikei, heart1, heart2, heart3, heart4;
int x1, x2, x3, x4;
int y1, y2, y3, y4;
void setup() {
haikei = loadImage("hot-chocolate-1058197__340.jpg");
heart1 = loadImage("heart1.png");
heart2 = loadImage("heart2.png");
heart3 = loadImage("heart3.png");
heart4 = loadImage("heart4.png");
size(600, 400);
x1=0;
x2=0;
x3=0;
x4=0;
y1 = (int)random(height);
y2 = (int)random(height);
y3 = (int)random(height);
y4 = (int)random(height);
}
void draw() {
image(haikei, 0, 0, width, height);
image(heart1, x1, y1);
image(heart2, x2, y2);
image(heart3, x3, y3);
image(heart4, x4, y4);
x1++;
x2+=2;
x3+=3;
x4+=4;
if (mousePressed == true) {
y1+=(int)random(-10, 10); //ハートを上下に振動させる処理
y2+=(int)random(-10, 10); //ハートを上下に振動させる処理
y3+=(int)random(-10, 10); //ハートを上下に振動させる処理
y4+=(int)random(-10, 10); //ハートを上下に振動させる処理
}
}
上記コードは下記のように動作します。
何かのキーが押されているに、何らかの処理を行いたいときは、keyPressedという変数を使います。mousePressedと使い方は同じです。
キーが押されたときに1回だけ {...} の中を実行する
キーを押したときに何かを行いたいときには、void keyPressed(){ }を使います。波括弧の中にマウスを押したときに行いたい処理を書きます。mousePressed()と同じように使うことができます。
キーが離されたときに1回だけ処理を行いたい場合は、void keyReleased() { }を使います。キーを押した瞬間か、離した瞬間かということが違うだけで、keyPressed(){ }と使い方は同じです。これも例を省略します。
keyというのは特別な変数で、押された変数が格納されます。
下記の例でその動作を確かめてみましょう。下記は、a、b、cのいずれかのキーが押されると、そのことが出力されます。
void setup(){
size(800,600);
textSize(50);
}
void draw(){
background(200,200,200);
if(key=='a'){
text("key is 'a'",width/4,height/2);
}else if(key=='b'){
text("key is 'b'",width/4,height/2);
}else if(key=='c'){
text("key is 'c'",width/4,height/2);
}else{
text("key is not 'a' or 'b' or 'c'",width/4,height/2);
}
}
上記コードは下記のように動作します。
理解を深めるために、押したキーによって動作が変わる（'a'押すとハートが振動するが、bを押した場合はハートの移動速度が変化するなるといった）プログラムを作成してみるとよいでしょう。
mouseXやmouseYは特別な変数で、これらの変数にはマウスの位置が自動的に格納されます。下記の例でその動作を確かめてみましょう。
マウスのある位置に円が描かれます。
void setup(){
size(800,600);
}
void draw(){
background(200,200,200);
ellipse(mouseX,mouseY,50,50);
}
上記コードは下記のように動作します。
上記プログラムをアレンジして円の軌跡を残してみましょう。そのためには、下記のようにdraw()の中からbackground()という処理を消して、画面の背景を更新しないようにします。
void setup() {
size(800, 600);
mouseX = -100;
mouseY = -100;
background(200, 200, 200);
}
void draw() {
ellipse(mouseX, mouseY, 50, 50);
}
上記コードは下記のように動作します。
マウスをクリックすると色がランダムで変化するようにします。
void setup() {
size(800, 600);
mouseX = -100;
mouseY = -100;
background(200, 200, 200); //消す
}
void draw() {
ellipse(mouseX, mouseY, 50, 50);
}
void mousePressed(){
fill(random(255),random(255),random(255));
}
上記コードは下記のように動作します。
pmouseXやpmouseYは特別な変数で、前フレームのマウスポインタの位置を取得します。
フレームとは、動画の元になる静止画像の一コマ一コマを指します。これはプロセッシングでは、draw()の中の処理、一回に対応します。
下記の例で、使用方法の感覚をつかみましょう。
前フレームの位置から、現在のフレームの位置に線を引きます。この処理は何度も何度も素早く繰り返されるため（draw()の中の処理はデフォルトでは一分間に６０回繰り返される）、結果として、マウスを動かした位置に線が引かれるように見えます。
この例は下記URLから拝借したものです。下記URLにはほかにも多くのおすすめの例があります。
Processing 学習ノート
void setup() {
size(400, 400);
}
void draw() {
line(mouseX, mouseY, pmouseX, pmouseY);
}
上記コードは下記のように動作します。