数回に分けてp5.jsの基本的な要素について紹介し、p5.jsでのプロジェクトの始め方を説明します。今回はp5.jsのイベント処理について説明します。これで基本的な要素の説明を最後とします。

p5.jsではマウスやキーボード操作などのイベント発生によって値が変化する変数・動作する関数がデフォルトで用意されています。これによりインタラクティブな作品を作成できます。

以下が公式リファレンスに掲載されているイベントハンドラの一覧です。種類が多いので良く使う（と思う）イベントハンドラを説明します。

マウス入力のイベントハンドラは大別すると以下の分類になります。これらの分類に分けて良く使う（と思う）ものをピックアップしました。

• ポインタの位置
• ボタン操作
• マウス操作

ポインタの位置およびポインタの移動量を扱う変数です。

マウスのボタン入力を扱う変数と入力時に動作する関数です。

mouseIsPressedとmousePressed( )は名前が似ており、イベントに対する動作タイミングも同じですが役割が違います。

mouseIsPressedは、true / falseの値を返す変数で、以下のように使用します。

// mouseIsPressedの公式リファレンスより抜粋して、一部改変。

function draw() {
  background(237, 34, 93);
  fill(0);
	
	// マウスのボタンの状態で分岐
  if (mouseIsPressed === true) {
    // マウスのボタンが押されていれば円を描画
    ellipse(50, 50, 50, 50);
		// マウスのボタンが押されていなければ四角形を描画
  } else {
    rect(25, 25, 50, 50);
  }
}

一方、mousePressed( )は関数です。以下のように、mousePressed( )関数内で関数実行時の動作を定義しておく必要があります。（mouseReleased( )も同様で、定義が必要。）

// mousePressed( )の公式リファレンスより抜粋して、一部改変。

function setup() {
  createCanvas(640, 480); // 幅640px, 高さ480px
}

function draw() {
  fill(value); // 塗りつぶす色を設定
	rect(25, 25, 50, 50); // 左端から25px, 上端から25pxの位置から、幅・高さ50pxの四角形を描画
}

// マウスのボタンが押された時の動作を定義
function mousePressed() {
  if (value === 0) {
		// 白
    value = 255;
  } else {
		// 黒
    value = 0;
  }
}

マウス操作時に動作する関数です。こちらも上述したmousePressed( )同様に関数実行時の動作を定義しておく必要があります。

マウスは色々とありましたが、キーボードはそれほど多くありません。

keyとkeyCodeはどちらも最後に入力された値を返しますが、格納されている値が異なります。

keyは入力された文字（a, A, 0, 1, …等々）、keyCodeはキーに対応する番号が格納されています。使い分けとしては以下の通りです。

• 文字入力を行う場合はkey
• TABやBACKSPACEなど特殊キーを使用する場合はkeyCode

公式リファレンスのサンプルコードに、何かキー入力を行った場合のkey、keyCodeそれぞれの出力結果を確認できるプルグラムがあるので興味があれば確認してみてください。

今回はp5.jsのイベント処理について説明しました。

マウス、キーボードなどの操作によって値が変化する変数・動作する関数がある。

変数は、true / falseを返すタイプ、入力された値を記憶するタイプがある。

関数は、関数実行時の動作を定義しておく必要がある。