p5.js で正方形のキャンバスを縦長・横長の短辺ピッタリの長さにする（＋画面中央に表示させる）

はじめに

この記事で扱う内容は表題のとおりです。p5.js を使った JavaScript の描画で正方形のキャンバスを表示する時に、そのキャンバスの長さを、縦長・横長の画面の短い方の辺の長さぴったりにする、という話です。

図で表すと、こんな感じになるかと思います。

これをやってみたきっかけは、p5.js のコミュニティの Discord（Processing Community Japan の Discord）で、「上記の内容を実現する実装方法は？」という質問があったことです。

質問された方のポスト（質問に回答した後の話）

上記の質問に、今回の記事に書いた内容を回答したところ、無事に質問者の方の思い通りの動作になったようで良かったです。

今回の内容

あらためて今回の概要

質問で「やりたいこと」として話に出ていたのは、冒頭の図で示した内容でした。
さらに、キャンバスのサイズ調整のみ実装すると、正方形のキャンバスの表示位置が「縦長の画面の場合は上端」に、「横長の場合は左端」になってしまうため、その位置が中央になるように調整する、という内容も加えています。

その表示が行われている様子を実機でシンプルに示すと、こんな感じです。

画面中の青い部分が「p5.js のキャンバス」で、緑の部分は「キャンバスが表示されている背景 ＝ スマホの画面の表示領域全体」にあたる部分です（※ HTML のスタイルに background を設定して、キャンバスの背景に当たる部分を緑に着色しています）。緑色の部分（画面全体）に対して青い部分（p5.js のキャンバス）が画面短辺ピッタリの長さになっており、なおかつ表示位置が中央になっているのが分かります。

これを実現する方法について、この後に説明していきます。

実装する内容

今回、実装する内容は、おおまかに以下となります。

1. キャンバス生成前に画面の短辺の長さを取得する
2. キャンバスの縦横の長さを上記1で求めた短辺の長さに設定
3. 正方形のキャンバスが画面中央にくるようにキャンバスの位置を調整
4. （やりたいことによっては必須ではないですが）キャンバスがリサイズされた際の対応

これらについて、この後に具体的なコードと簡単な補足を書いていきます。

実装した内容

それでは、実装内容とその補足を順に書いていきます。

JavaScript で実装した内容（p5.js の sketch.js にあたる部分）

必要最低限となる部分は、以下の通りです。

let canvas;

function setup() {
  const canvasSize = min(windowWidth, windowHeight);
  canvas = createCanvas(canvasSize, canvasSize);
  centerCanvas(canvas);
}

function draw() {
  background(100, 150, 200);
}

function windowResized() {
  const canvasSize = min(windowWidth, windowHeight);
  resizeCanvas(canvasSize, canvasSize);
  centerCanvas(canvas);
}

function centerCanvas(cnv) {
  const x = (windowWidth - width) / 2;
  const y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

上で、4つの実装のポイントを書いていましたが、対応関係は以下のとおりです。

1. キャンバス生成前に画面の短辺の長さを取得する
   • min(windowWidth, windowHeight) で画面の短いほうの長さを取得（canvasSize という変数に長さを格納）
2. キャンバスの縦横の長さを上記1で求めた短辺の長さに設定
   • createCanvas(canvasSize, canvasSize) としてキャンバスを生成
3. 正方形のキャンバスが画面中央にくるようにキャンバスの位置を調整
   • （後述）
4. （やりたいことによっては必須ではないですが）キャンバスがリサイズされた際の対応
   • 画面の短辺の長さを再取得して resizeCanvas(canvasSize, canvasSize) でキャンバスをリサイズし、キャンバスの表示位置の調整を行う

上で「（後述）」と書いた部分に関し、さらに補足を書きます。

この処理に該当するのは以下の部分です。
やっていることは、「画面の幅（または画面の高さ）とキャンバスの幅（またはキャンバスの高さ）の差の半分の長さ」を取得し、その長さの分だけキャンバスの表示位置をずらす、というものです。

function centerCanvas(cnv) {
  const x = (windowWidth - width) / 2;
  const y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

この処理を適用すると、画面の短辺方向のキャンバスの表示位置は変わらないですが、画面の長辺方向のキャンバスの表示位置は、画面の長辺方向にできる余白の半分の長さだけずれます。
つまり長辺方向で、キャンバスの左右の両側に、等しい長さの余白ができることになり、それでキャンバスの表示位置が画面中央になります。

おわりに

今回の内容は、上で書いていた質問をきかっけに実装してみたものでした。
それについて、自分が今後スマホ画面での p5.js の描画を扱う際などに、必要になるかもしれないという感じがしたものでもあったため、今回の内容を試せて良かったです。