第8章 マウスの位置を画材にする

マウスの横位置を色へ、縦位置を大きさへ変換します。動かす手の位置が、そのまま作品の入力になります。

8.1 mouseX と mouseY は毎フレーム変わる

次のスケッチでは、円がマウスポインタを追いかけます。

def setup
  createCanvas(500, 320)
end

def draw
  background(245)
  fill(235, 90, 120)
  ellipse(mouseX, mouseY, 60, 60)
end

mouseX（マウス・エックス）はキャンバス内の横位置、mouseY（マウス・ワイ）は縦位置です。draw のたびに現在値を読み直すため、円が追従して見えます。

マウスがキャンバス外にある場合も値を持つことがあります。作品の操作をキャンバス内に限定したいなら、後で境界条件を加えます。

8.2 位置をそのまま使わない変換

横位置を円の大きさへ渡します。次の draw は変更部分です。8.1 の長いコードにある def draw から対応する end までと置き換えます。

def draw
  background(245)
  size = mouseX
  ellipse(width / 2, height / 2, size, size)
end

キャンバスの幅が 500 なら、大きさもおよそ 0 から 500 まで変わります。大きすぎる場合は、size = mouseX の 1 行を次の変更部分と置き換え、値の範囲を変換する map（マップ）を使えます。

size = map(mouseX, 0, width, 20, 180)

これは、0 から width の範囲を、20 から 180 の範囲へ対応させます。入力と出力の範囲を分けると、操作の感度を調整できます。

8.3 軌跡を描くか、現在位置だけを見せるか

background を setup へ移すと、マウスの軌跡が残ります。

def setup
  createCanvas(500, 320)
  background(24, 28, 45)
  noStroke
end

def draw
  red_amount = map(mouseX, 0, width, 80, 255)
  blue_amount = map(mouseY, 0, height, 255, 80)
  fill(red_amount, 120, blue_amount, 50)
  ellipse(mouseX, mouseY, 30, 30)
end

横に動かすと赤の量が、縦に動かすと青の量が変わります。位置を色へ変換しているため、軌跡から手の動きを読み取れます。

8.4 押している間だけ描く

mouseIsPressed（マウス・イズ・プレスド）は、マウスボタンが押されているかを真偽値（しんぎち）で表します。真偽値は、条件が成り立つことを表す true（トゥルー）と、成り立たないことを表す false（フォルス）の二つの値です。ここでは押している間が true、放している間が false です。次の draw は変更部分です。8.3 の長いコードにある def draw から対応する end までと置き換えます。

def draw
  if mouseIsPressed
    fill(255, 200, 80, 80)
    ellipse(mouseX, mouseY, 36, 36)
  end
end

このコードでは、押している間だけ円を描きます。クリックした瞬間だけ処理したい場合と、押し続けている間処理したい場合は別です。連続した線を描く道具では、押している状態を毎フレーム読む方法が合います。

8.5 一人で操作を確かめる

操作と画面の反応を確かめるために、第三者は必須ではありません。

1. 操作説明を別の場所へメモする
2. コードを HTML として保存する。描いた軌跡も残したい場合は、画面を画像として残す操作をしてから閉じる
3. 数時間後または翌日に開く
4. 説明を見る前に触ってみる
5. 最初に試した操作と、迷った場所を一つずつ記録する

時間を置くと、作った直後には気づかなかった操作の迷いやすさを見つけられます。

8.6 自分のブラシを発明する

マウスの位置へ円を置く代わりに、短い線、細長い四角形、三角形を描けば、筆跡の性格が変わります。次の draw も変更部分で、8.3 の長いコードの draw 全体と置き換えて試します。

def draw
  if mouseIsPressed
    stroke(255, 190, 80, 90)
    strokeWeight(6)
    line(mouseX - 18, mouseY + 12, mouseX + 18, mouseY - 12)
  end
end

このブラシは、マウスの場所を中心に斜めの線を置き続けます。線の傾き、長さ、透明度のどれか一つを変えてください。次に、押していない間だけ小さな点を描く、画面上部では細く下部では太くする、といった操作と見た目の関係を考えられます。

描き終えたら、線が密集した場所と、何も描かなかった余白を見ます。描かなかった場所も画面の一部です。速く動かした場所、ゆっくり動かした場所、止まった場所の違いが、線のリズムになります。

操作を加えたら、細かなマウス操作が難しい場合にも同じ変化が必要か、クリックしなくても一部を見られるか、操作方法を画面へ書くかを確認します。変えやすいところから一つ直すと、作品を操作できる方法が増えます。

線の長さか傾きを変え、手の動きと筆跡の違いを確認します。次章では、キーボードで場面を切り替えましょう。

参考資料

• rbCanvas/p5 0.5.1 API リファレンス — mouseX、mouseY、mouseIsPressed、map の説明
• p5.js mouseX・mouseY — ポインター座標の概念。サンプルは JavaScript で書かれている