数回に分けてp5.jsの基本的な要素について紹介し、p5.jsでのプロジェクトの始め方を説明します。今回はp5.jsの描画領域と座標について説明します。

p5.jsの描画領域はcreateCanvas( )で設定します。→createCanvasの公式リファレンス

function setup() {
  createCanvas(640, 480); // 幅640px, 高さ480px
}

描画領域は自由に変えることができます。また、描画領域に以下のようなシステム変数を使用することもできます。

• windowWidth, windowHeight

ブラウザのウィンドウ幅を格納しているシステム変数

• displayWidth, displayHeight

ディスプレイサイズに応じた値を格納しているシステム変数

画面の解像度が高い場合は、displayWidth≠画面幅ではないので注意

補足

createCanvas( )のレンダラーはデフォルトで ”P2D”（2Dグラフィック用のレンダラー）となっています。以下のように引数に”WEBGL” を追加すると3Dグラフィック用のレンダラーとなります。

→WEBGLの使用例

function setup() {
  createCanvas(100, 100, WEBGL); // 幅100px, 高さ100px, 3Dグラフィック設定
}

p5.jsの座標はデカルト座標系(直行座標系)で、方眼紙のような構造となっています。例として以下のコードで高さ100ピクセル、幅100ピクセルの描画領域を作成します。

function setup() {
  createCanvas(100, 100); // 幅100px, 高さ100px
}

注意点としては、原点(0, 0)が描画領域の左上であることです。xが増えれば水平方向右側、yが増えれば垂直方向下側を表します。

次に、作成した描画領域にpoint( )で点を描きます。

function setup() {
  createCanvas(100, 100); // 幅100px, 高さ100px
}

function draw() {
	point(75, 50); // 左端から75px, 上端から50pxの位置に点を描画
  point(width/2, height/4); // 描画領域幅×1/2px, 描画領域高さ×1/4pxの位置に点を描画
}

上記コードを実行すると、下図のように点を２個描くことができました。ポイントは２個目のpoint( )で使用したwidth, heightです。

width, heightは描画領域を格納しているシステム変数で、createCanvas( )を実行した時に書き込まれます。今回の描画領域は幅100px, 高さ100pxであり、width, heightは100pxとなるため、width/2=50, height/4=25 となります。

座標変換は面倒な行列計算を行う必要があります。しかし、p5.jsでは以下のような関数で座標変換を簡単に行うことができます。

これらの関数を効果的に使うことでこちらの作品のようにアクロバティックな動きができます。

translate(50, 50);  // 座標系を50px右に, 50px下に移動
rotate(PI/6); // 座標系を30度時計回りに回転
scale(0.5); // 座標系を0.5倍に縮小

rotate( )の回転角は時計回りであるため、先に説明したxy方向と合わせて注意してください。

今回はp5.jsの描画領域と座標について説明しました。

p5.jsの座標はデカルト座標系、左上が原点、回転角度は時計回りが正となるため注意。

createCanvasで設定した描画領域はwidth, heightに格納される。めっちゃ便利。

座標はtranslate( )、rotate( )、scale( )などの関数で自由に変換できる。