第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 = map(mouseX, 0, width, 80, 255)
  blue = map(mouseY, 0, height, 255, 80)
  fill(red, 120, blue, 50)
  ellipse(mouseX, mouseY, 30, 30)
end

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

8.4 押している間だけ描く

mouseIsPressed は、マウスボタンが押されているかを真偽値で表します。次の 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. スケッチを保存して閉じる
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

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

描き終えたら、線が密集した場所と、何も描かなかった余白を見ます。全部を埋める必要はありません。速く動かした場所、ゆっくり動かした場所、止まった場所の違いが、線のリズムになります。

操作を作品へ加えるときは、「この作品は誰に何をさせるか」も考えられます。細かなマウス操作が難しい人にも同じ変化が必要か、クリックしなくても一部を見られるか、操作方法を画面へ書くか、の中から一問だけ選びます。すべての人へ同じ操作を強いるのではなく、入口を増やす発想です。

この章の小さな区切り

• マウスの横または縦位置を、色・大きさ・線のどれかへ渡せた
• 押している間だけ描く違いを確認できた
• 自分のブラシで、密な場所と余白の両方を残した版を保存した

参考資料

• p5.js Reference: mouseX
• p5.js Reference: mouseY
• p5.js Reference: mouseIsPressed
• p5.js Reference: map