p5.js でイベント検知して行う処理に関して検知後に一定時間は処理をブロックする時間を設ける：setTimeout() or millis() を使う

この記事の内容は、p5.js　で「常時イベントの発生を見張り、イベントを検知した時に特定の処理を実行する」ということを行う場合の話です。
もう少し補足すると、「そのイベント検知は随時行うものの、イベントが検知された場合には、その検知後の一定時間はイベント検知に連動した処理をブロックする」ということを実現する方法です。

これを実装するのに試した 2つの方法を、メモ的に記事にします。

2種類の実現方法

今回の記事でメモする実現方法は 2つあります。
具体的には、setTimeout() を使う方法と、millis() を使う方法です。

それぞれの事例について、シンプルな内容で例を示します。

setTimeout() を使う

まずは、setTimeout() を使うやり方です。

ここでやることは、イベント検知に連動して行われる処理の有効化／無効化を制御するフラグを用意し、そのフラグの切り替えに setTimeout() を使うというやり方です。setTimeout() を使う部分は、フラグを使ってイベント検知に連動した処理が行われない状態を作った後に、一定時間が経過したらフラグを切り替えるというところです。

マウスクリックを検知する対象のイベントとして、そのイベント検知に連動する処理は背景色の変更、という内容で、以下のようなプログラムを作ってみました。

let eventDetected = false;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (eventDetected) {
    background(100, 150, 200);
  } else {
    background(220);
  }
}

function mouseClicked() {
  if (!eventDetected) {
    console.log("イベント検知に連動した処理を実行");
    eventDetected = true;

    setTimeout(() => {
      eventDetected = false;
      console.log("再度、イベント検知と連動した処理を実行可能にする");
    }, 3000);
  }
}

上記のプログラムを実行してマウスをクリックすると、「イベント検知に連動した処理を実行」というテキストがログに出力されます。そのテキストが出力されてから、3秒間は、再度クリックをしてもテキストはログ出力されません。

そして、3秒が経過した後は、再度、クリック時に「イベント検知に連動した処理を実行」というテキストがログに出力される状態に戻ります。

そして、上記の「フラグが true になって、3秒間維持される間」は、背景の色が変化するようにしています。

millis() を使う

次は、millis() を使うやり方です。

先ほどは setTimeout() で実現したのと同じような処理を、millis() を使って以下のように実装します。

millis() を使った方法では、イベント検知が行われた時間を記録し、その記録した時間から3秒以上時間が経過したところで、フラグの切り替えを行っています。

let eventDetected = false;
let lastEventTime = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (eventDetected) {
    background(100, 150, 200);

    const currentTimeVal = millis();
    if (currentTimeVal - lastEventTime > 3000) {
      eventDetected = false;
      console.log("再度、イベント検知と連動した処理を実行可能にする");
    }
  } else {
    background(220);
  }
}

function mouseClicked() {
  if (!eventDetected) {
    console.log("イベント検知に連動した処理を実行");
    eventDetected = true;
    lastEventTime = millis();
  }
}

こちらのプログラムも、1つ目のものと同じような処理が行われることを確認できました。