tinykeys と p5.js を組み合わせて「特定のキーの連続入力・組み合わせ入力に反応させる処理」を実装【JavaScript-2】

この記事は「JavaScript Advent Calendar 2024」の 7日目に登録するための記事です。

はじめに

この記事では、以下で使っているライブラリの話を扱います。

具体的には、前に書いた以下の記事で紹介した「tinykeys」です。それを今回は p5.js と組み合わせて試してみた、という内容になります。

●JavaScript に関するニュース記事（JavaScript Weekly）で気になったものを見てみる：「tinykeys」「heic-to」「Embla Carousel」 - Qiita
　https://qiita.com/youtoy/items/e455f9593b348cb5462c

tinykeys について

tinykeys はキーバインド用のライブラリで、特定のキーが連続して入力されるパターンや、修飾キーを伴う入力なども含むキー入力の処理を扱えます。

前回の記事を書いた中では、以下のように紹介していました。

p5.js と組み合わせたお試し

p5.js との組み合わせを試してみたのですが、その環境には p5.js Web Editor を用いました。

そこで、HTML と JavaScript に手を加えます。

HTML については、tinykeys公式のページにも書かれている CDN からファイルを読み込めるように、以下の行を加えます。

<script src="https://unpkg.com/tinykeys@3.0.0/dist/tinykeys.umd.js"></script>

JavaScript での処理に関して、実装は以下のとおりです。

let backgroundColor = 220;
let displayText = "特定のキー入力に反応";

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

  const keybindingsHandler = tinykeys.createKeybindingsHandler({
    "t r": () => {
      updateDisplay("t r：連続でのキー入力", [140, 160, 220]);
    },
    "a s d": () => {
      updateDisplay("a s d：連続でのキー入力", [130, 220, 190]);
    },
    "Shift+D": () => {
      updateDisplay("Shiftキー ＋ Dキーの入力", 220);
    },
    z: () => {
      updateDisplay("", 220);
    },
  });
  window.addEventListener("keydown", keybindingsHandler);
}

function draw() {
  background(backgroundColor);

  textSize(32);
  text(displayText, 90, 200);
}

function updateDisplay(text, color) {
  displayText = text;
  console.log(text);

  backgroundColor = color;
}

これで、冒頭に掲載していた内容を実現できます。