【Processing】インタラクティブデザインに便利!mouse系関数のまとめ

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、インタラクティブなデザイン作成に役立つマウスを使った関数をまとめていきます。

関数mousePressed マウスが押されているとき

mousePressedはマウスが押されている間はtrue、そうでない場合はfalseとして機能する関数です。押すボタンは左、右クリック、ミドルボタン(スクロールするボタン)のどこを押しても同じです。下の例は、ボタンが押されている間マウスの軌跡を描くプログラムです。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
   stroke(255);
   strokeWeight(20);
  if (mousePressed) {
    line(pmouseX
      , pmouseY, mouseX, mouseY);
  }
}

mouseXはキャンバスのマウスのx座標位置、mouseYはy座標位置で、pmouseX、pmouseYはそれらの前のフレームのマウス座標位置です。一つ前の位置と現在の位置をフレームごとに繋いで行くことで、線を描くという仕組みになっています。

関数mousePressed() マウスが押されているとき2

mousePressed()は、マウスが押された時一回だけ呼び出される関数です。こちらも押すボタンはどれでも構いません。下の例では、クリックすると、その位置に円が描かれるようなプログラムです。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
}

void mousePressed() {
  fill(255);
  ellipse(mouseX,mouseY,20,20);
}

関数mouseButton 押されているボタン

mouseButtonは、mousePressedと同じようにマウスが押されている間呼び出される関数ですが、使うマウスのボタンによって処理を変えることが出来ます。今回は、右クリックの時は赤、左クリックの時は緑、スクロールのミドルボタンを押した時は青の線が描かれるようにプログラムしました。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
  strokeWeight(20);
  if (mouseButton==RIGHT) {
    stroke(255, 0, 0);
    line(pmouseX
      , pmouseY, mouseX, mouseY);
  }
  if (mouseButton==LEFT) {
    stroke(0, 255, 0);
    line(pmouseX
      , pmouseY, mouseX, mouseY);
  }
  if (mouseButton==CENTER) {
    stroke(0, 0, 255);
    line(pmouseX
      , pmouseY, mouseX, mouseY);
  }
}

関数mouseMoved() マウス移動時

mouseMoved()は、マウスを移動させた時に呼び出される関数です。マウスのボタンを押している間は呼び出されません。下の例では、マウスを移動するごとに円を描いています。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
}

void mouseMoved() {
  fill(255);
  ellipse(mouseX, mouseY, 20, 20);
}

関数mouseDragged() マウスが押された状態での移動時

mouseDragged()は、名前の通りドラッグしたときに呼び出される関数です。下の例では、マウスを移動させると白い円が描かれますが、ドラッグすると黄色の円を描くように変化します。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
}

void mouseMoved() {
  fill(255);
  ellipse(mouseX, mouseY, 20, 20);
}

void mouseDragged() {
  fill(255,255,0);
  ellipse(mouseX, mouseY, 20, 20);
}

関数mouseReleased() マウスが離れたとき

mouseReleased()はマウスボタンを離したときに呼び出される関数です。下の例では、マウス移動時白い円が描かれ、ボタンを押し離すと、背景がリセットされるようプログラムしました。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
}

void mouseMoved() {
  fill(255);
  ellipse(mouseX, mouseY, 20, 20);
}

void mouseReleased() {
  background(0);
}

関数mouseClicked() マウスが押されてから離れるとき

mouseClicked()は、マウスのボタンが押されてから離れたときに呼び出される関数です。mouseReleased()と少し似ていますが、mouseCliked()は「押して離す」動作で関数を呼び出すので、ボタンを押したまま移動し、ボタンを離しても適用されません。押して離す動作の間に、他の動作を介入しないようにします。

void setup() {
  size(800, 800);
  background(0);
}

void draw() {
}

void mouseMoved() {
  fill(255);
  ellipse(mouseX, mouseY, 20, 20);
}

void mouseClicked() {
  background(0);
}

いかがでしたでしょうか。思ったよりもマウス系の関数は多く、役割も似ているようなものもありますが、用途によって適宜使い分けてもらえばと思います。制作の際のお役に立てれば幸いです。
今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました