マウスの動きを受け取ろう

マウスの入力を受け取ることで、インタラクティブ(対話的)な作品を作ることができます。
マウスを使った代表的なプログラムはお絵かきプログラムあるいはゲームチックな作品も作ることができます。

マウスの位置を受け取ろう

もっとも重要な情報はマウスの位置でしょう。
マウスの位置は、processingで用意されている特別な変数mouseXとmouseYに自動的に入っています。

var w = 200;
var h = 200;
function setup(){
  createCanvas(w, h);
  background(100);
}

function draw(){
  background(100);
  text("x: " + str(mouseX) + ", y:" + str(mouseY), 10, 170);
}
            

マウスが横方向に何pxのところにいるかがmouseXへ、縦方向に何pxのところにいるかがmouseYへ格納されています。

マウスクリックのイベントを受け取ろう

マウスの位置を受け取れたところで、次はクリックのイベントを受け取りましょう。
マウスクリックを受け取るには、processingで用意されているmouseClicked()関数を使います。
mouseClicked()関数は、マウスがクリックされたときだけ自動的に実行される特別な関数です。名前だけ用意されているので、 中身の処理を書きましょう。

var w = 200;
var h = 200;
var c = 255;
function setup(){
  createCanvas(w, h);
  background(100);
}

function draw(){
  background(100);
  fill(c);
  ellipse(w/2,h/2, 100);
}

function mouseClicked(){
  c = 255 - c;
}
            

マウスをクリックすると、円の色が白と黒交互に入れ替わるのがわかるかと思います。
マウスがクリックされたときなので、左クリックを押して離したタイミングで処理が実行されます。
細かい違いですが、左クリックを押したタイミングで実行したい場合はmousePressed()関数を使います。使い方はmouseClickedと同じで。

マウスがクリックされている間処理を実行しよう

クリックだけ受け取るのであればこれでいいのですが、お絵かきプログラムなどはクリックしている間ずっと 何かの処理をしていて欲しいものです。
このような場合には、mouseIsPressed変数を使います。
mouseIsPressedは特別な変数で、マウスがクリック状態にあるときtrueを返し、マウスがクリックされていないときはfalseを返します。
if文でmouseIsPressedがtrueのとき、falseのときの処理を分けて書きます。

var w = 200;
var h = 200;
function setup(){
  createCanvas(w, h);
  background(100);
}

function draw(){
  noStroke();
  if(mouseIsPressed){
    ellipse(mouseX, mouseY, 10);
  }
}
            

マウスをドラッグしてみてください。すごく簡単ですが、お絵かきアプリができました。

まとめ