p5.jsのCSSで画面幅を設定とリサイズ対応【Typescript】

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

今回はp5.jsで特定のDOMにキャンパスを挿入する方法についてまとめました。自分で設定しないとキャンパスの大きさを変更した際に、キャンパスの大きさが固定されたままになるので、リサイズ対応も併せて実装しています。特定領域に描画させることで、CSSでキャンパスの大きさを制御することができます。

1 ご挨拶
2 実装
- 2.1 p5.jsでリサイズ対応
- 2.2 DOMを指定してキャンパスを挿入：リサイズ対応
3 終わり

ご挨拶

ども！週末に一つ、業務と関係ないことで新しいことを学んでいきたいと思っている龍ちゃんです。今年は、これを目標に含めて頑張っていきたいですね。

さて、今回は「p5.js」のお話になります。前回の記事「10分でp5.js環境構築：ViteでGitHub Pageに公開」で、環境構築とGitHub Pagesでの公開を行いました。こちらの実装では、p5.js側のコーディングには触れていなかったので、静的ページとのコラボレーションという意図でこちらの記事を出しておこうと思います。

ぬるっと始めます。

実装

今回の記事で、わかる内容としては以下になります。

画面のリサイズに反応して、キャンパスの大きさを増減させる
p5.jsで指定したDOMにp5.jsのキャンパスを設定する
p5.jsを画面幅いっぱいに表示させる

それでは、始めていきましょう。

p5.jsでリサイズ対応

まずは、画面のリサイズ時にキャンパスの値が変わらない対策をしましょう。p5.jsのライブラリのほうでリサイズ時に呼び出される関数が存在しています。そちらを使用して動的にキャンバスの大きさを変更します。

const windowSize = (): [number, number] => [
  window.innerWidth,
  window.innerHeight,
];

const sketch = (p: p5) => {
  p.setup = () => {
    const [windowWidth, windowHeight] = windowSize();
    p.createCanvas(windowWidth, windowHeight);
  };

  p.draw = () => {
    p.background(255);
  };

  p.windowResized = () => {
    const [windowWidth, windowHeight] = windowSize();
    p.resizeCanvas(windowWidth, windowHeight);
  };
};

サンプルでは、初回作成時に画面幅いっぱいに描画して、リサイズ時に画面幅を取得してキャンパスと画面幅を設定しています。

DOMを指定してキャンパスを挿入：リサイズ対応

プロジェクトによっては、特定の場所にキャンパスを設定したい場合があるかと思います。特定領域に描画する場合も簡単に設定することができます。

まずは、HTMLのほうで描画する領域を用意しましょう。div要素を置き、idとしてcanvasを設定しています。

<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + TS</title>
  <link rel="stylesheet" href="src/style.css">
</head>

<body class="relative">
  <h1 class="text-2xl">Test</h1>
  <div id="canvas" class="w-full h-20">

</body>

<script type="module" src="/src/main.ts"></script>

</html>

あとは、p5.jsを使用してペアレントを設定します。また、先ほど設定したリサイズ対応もcanvasを指定して取得しています。

import p5 from "p5";

const windowSize = (): [number, number] => [
  window.innerWidth,
  window.innerHeight,
];

const targetSize = (): [number, number] => {
  const target = document.getElementById("canvas");
  if (target) {
    return [target.clientWidth, target.clientHeight];
  }
  return windowSize();
};

const sketch = (p: p5) => {
  let y = 0;
  p.setup = () => {
    const [windowWidth, windowHeight] = targetSize();
    const canvas = p.createCanvas(windowWidth, windowHeight);
    canvas.parent("canvas");
  };

  p.draw = () => {
    p.background(0);
  };

  p.windowResized = () => {
    const [windowWidth, windowHeight] = targetSize();
    p.resizeCanvas(windowWidth, windowHeight);
  };
};

new p5(sketch);

実装結果としては、以下のような画面になっています。CSSはTailwind CSSを用いて設定しています。