インタラクティブコーディング勉強会第7, 8回「マウス」カーソルをぶん回して発電する

2014-12-29

連載

インタラクティブコーディング勉強会

10月からはじまったインタラクティブコーディング勉強会も、年内はこれでおしまい。今回のお題は「マウス」。

(勉強会のまとめページはこちら)

マウスから得られる情報

マウスから得られる情報とは？

カーソルの位置

Processingの世界では、現在のマウスカーソルの位置をmouseX, mouseYで取得できる。例えば、この位置を中心に毎フレーム小さな円を描いていくと、カーソルの軌跡が残るようになる。

void setup() {
  size(400, 300);
  background(255);
  fill(0);
  noStroke();
}

void draw() {
  float dia = 3;
  ellipse(mouseX, mouseY, dia, dia);
}

ボタンを押しているかどうか

マウスのボタンが現在どのような状態になっているかは、mouseButtonで取得できる。例えば、左ボタンが押されたとき( mouseButton == LEFT )だけカーソル位置を描くようにすれば、超簡単なお絵描きアプリのできあがり。

void setup() {
  size(400, 300);
  background(255);
  fill(0);
  noStroke();
}

void draw() {
  if (mouseButton == LEFT) {
    float dia = 3;
    ellipse(mouseX, mouseY, dia, dia);
  }
}

1フレーム前のカーソル位置

Processingは1フレーム前のカーソル位置を覚えてくれていて、pmouseX, pmouseYで取得できる。この「1フレーム前の位置」と現在の位置(mouseX, mouseY)を線でつないでやると、よりお絵描きソフトっぽく線が描ける。

void setup() {
  size(400, 300);
  background(255);
  stroke(0);
  strokeWeight(3);
}

void draw() {
  if (mouseButton == LEFT) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

カーソルの移動速度

また、過去と現在のカーソル位置との差分をとることで、1フレーム前からどれだけ動いたか—つまり直近の移動速度を求めることができる。

この情報を上手く使うことで、さらに表現の幅が広がっていく。例えば先のお絵描きアプリ。速度が大きいほど色を濃く、線幅を太くすれば…

void setup() {
  blendMode(DARKEST);
  size(400, 300);
  background(255);
}

void draw() {
  if (mouseButton == LEFT) {
    float dx = mouseX - pmouseX;
    float dy = mouseY - pmouseY;
    float speed = sqrt(dx * dx + dy * dy);

    // 線の太さ
    float weight = 1 + pow(speed, 0.5);
    strokeWeight(weight);

    // 線の薄さ
    float white = pow(0.5, speed * 0.1);
    stroke(255 * white);

    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}