はじめに

個人の活動で、よく p5.js を使った体験型のインタラクティブな作品を作って、その内容を SNS に投稿したり、作った作品をモノづくり系の展示イベントに出したりします。

展示したイベントの様子の一部

今年も色々な場所での展示イベントに出展して、作品をいろいろな方に体験いただきました。以下はその一部です。

12月の展示＠長野：モノコトフェス #2

10月の展示＠名古屋（愛知）： NT名古屋2025

9月の展示＠東京： NT東京2025

7月の展示＠那須（栃木）： DIYデジタルガジェットで遊ぼ３ in 那須

5月の展示＠函館（北海道）： NT函館2025

他にも出展したイベントがあり上記は一部のみですが、上記だけを見ても居住地の埼玉からは遠い場所がたくさんでした（笑

体験型展示を行う中で対応した／対応したい内容

それでは、p5.js を使った体験型展示を行う中で対応した／対応したい内容について書いていきます。ちなみに、「p5.js を使った」という文言が入っていますが、p5.js に限らない内容だったりもします。

話の方向性としては、展示をするのにちょっと便利・あるとありがたい、といった方向の機能についてです。

実装方法について記事を書いたもの

作品をフルスクリーン表示する

1つ目は、以下の記事に書いたフルスクリーン表示です。

●p5.js で画面のクリックやキー操作をトリガーにフルスクリーン表示（全画面表示） - Qiita
　https://qiita.com/youtoy/items/97fd1c10e0680f724a43

ブラウザの API のラッパーの機能が p5.js にあり、それを使う話です。これを使うと、以下のように PC・モバイルモニターに表示させたブラウザでの Webアプリ表示が、コンテンツ部分のみ示せます。

実装内容は、シンプルに以下のような感じです。

function keyPressed() {
  if (key === ' ' || key === 'f' || key === 'F') {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}

スリープを防止する

2つ目は、以下の記事に書いたスリープ防止です。

●p5.js との組み合わせ：スリープ・ロックなどを防止するブラウザの「Screen Wake Lock API」を試す - Qiita
　https://qiita.com/youtoy/items/a0bed6de36ee1e1a1101

これは、ブラウザの Screen Wake Lock API を使った話です。

PC の設定で、しばらく操作をしない状態でスリープ・画面のオフなどが行われるようにしていても、Webアプリが表示されている状態であればそれを防ぐというものです。

未実装・試せてないもの

これから下は、未実装のもの・試せてないものになります。

休憩中であることを表示させる画面

これは、記事を書いた前日の展示イベントで思ったことなのです。1人で展示対応をしている時に作品をいったん止めてブースを離れたい時に、離席中・休憩中であることを作品を表示する画面で出せると良いなと思いました。

上記を提示するための画像と、その画像をフルスクリーン表示する表示切りかえを実装すれば実現できそうかな、と思ったものでした（できれば、キー操作をロックするみたいなこともできると良いかも？）。

スクリーンセーバー的な PC側の機能で実現しても良さそうにも思いますが...
（だけど、楽しそうなアニメーションとかを出せると面白そうかもとも思ってみたりして）

以下は p5.js関連ではなくなってしまいますが、3Dプリンタで出力した離席中を示す小さい立て看板みたいなものを、テーブルの上に置いているのを見かけたことがあり、そういった物理的なものも良いなとも思ったりしました。

チュートリアル表示機能とチュートリアルの作成

次は、チュートリアル表示機能とチュートリアルの作成です。

展示イベントでブースから少し離れるものの、作品は止めずに置いておきたい場合、作品の体験方法に関するチュートリアルを出せると良さそうと思ってます（が、着手はできてません）。

機能を有効／無効にする操作を行う、というイメージです。他に、一定時間体験されてない状態が続いたらチュートリアルを自動で表示する、というのもできたら良いなと思ってます。
自分の作品は、体験型のインタラクティブな展示が基本で、来場者の方が体験するための動作などをしない状態はアプリで検知できるので、自動でチュートリアルを出すというのはできそうです。ただ、チュートリアル用のコンテンツをどうしようか、と思って着手できてない状況です。

あと余談ですが、過去の展示で、現地で手作り感あふれる簡易な説明書きをつけたことがあったりしました。

https://x.com/pscmps/status/1721068364137902591

展示用作品以外でつけたことがある機能

以下は、展示用作品以外でつけたことがある機能で、展示用作品にもつけたら良いかもと思った機能です。

アプリの使い方の表示／非表示

上記のような便利機能をいろいろつけていくと、その展示作品にどんな機能をつけたかや、どんな操作で機能を扱うかを忘れてしまうことがありそうです。

コード内を見れば分かるものにはなりますが、簡単な操作で実装した機能の項目と、有効化などに使う操作方法を表示させられると良いと思っています。

やり方はいろいろありますが、簡易なやり方の 1つではフラグの ON／OFF で対応するやり方があるかと思います。例えば以下の実装です。

function keyPressed() {
  if (key === " ") {
     showDebug = !showDebug;
     return false;
  }
}

それと合わせて、draw() の中の処理で if (showDebug) { 。。。 } といった文字等の表示用の処理を加えるやり方です。

もっとメンテしやすいやり方、良いやり方がある感じですが、とりあえずの対応で。

おわりに

高頻度にモノづくり系イベントなどで展示をするので、その展示で役立つ機能を色々と作品に加えられたらと思って、いくつか書いてみました。

展示をしている中でふと思いついたりするものの、そのままイベントが終わってから忘れてしまうことも多いので、今回はメモ的な記事を書いてみました。

余談

今年の p5.js のアドベントカレンダー（Qiitaのカレンダー）の中で、この記事のトピックとはずれますが、以下の内容の記事も書いています。

●シンプルに「React ＋ p5.js」を試す（Strict Mode で p5.js のキャンバスが 2つ生成されてしまう問題に対応） - Qiita
　https://qiita.com/youtoy/items/a01cb1365a8740b2b247

●Anime.js v4系を p5.js Web Editor上で利用（読み込み方法 2種で）：過去の内容に関する最新版での再実装 - Qiita
　https://qiita.com/youtoy/items/6cedfaae6d13f3a647fe

●以前書いた p5.js Web Editor で OpenCV.js を利用するコードを見直す（2025年） - Qiita
　https://qiita.com/youtoy/items/cb9573641be71fc7c420