【p5.js】定義済み変数とrectMode()

定義済み変数を利用して図形を描きます。rectMode()は、長方形のパラメータの解釈の方法を変更して、描画する位置を変更する関数です。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。

定義済み変数のwidthとheight

• width:描画領域の幅
• height:描画領域の高さ

widthとheightには、createCanvas()で指定した描画領域のサイズが設定される。定義済み変数を利用して、長方形を描いてみる。

function setup(){
  createCanvas(200, 200);
  background(127);

  //rect(50, 50,  50, 50);

  //描画領域の中央に長方形の左上の座標がくる
  rect(width/2, height/2,  50, 50);
}

rectMode()

rect()で指定するパラメータの解釈の方法を変更して、長方形を描画する位置を変更する。

• CORNER(デフォルト値)
  • 左上の座標を指定する
• CORNERS
  • 左上と右下の座標を指定する
• CENTER
  • 長方形の中央座標と幅と高さを指定する
• RADIUS
  • 長方形の中央の座標と中央から辺までの長さ(幅の1/2、高さの1/2)を指定する

//rectMode(CORNER);
//rect(x, y, w, h);

//rectMode(CORNERS);
//rect(x1, y1, x2, y2);

//rectMode(CENTER);
//rect(cx, cy, w, h);

//rectMode(RADIUS);
//rect(cx, cy, w/2, h/2);

function setup(){
  createCanvas(200, 200);
  background(127);

  //rect(width/2, height/2, 50, 50);  //描画領域の中央に長方形の左上がくる

  rectMode(CENTER);
  rect(width/2, height/2, 50, 50);  //描画領域の中央に長方形の中央がくる
}

まとめ

• widthとheightは、定義済み変数。
• 数値を変数に置き換えると良い。
• rectMode()で、長方形のパラメータの解釈の方法を変更して、描画する位置を変更する

参考サイト

• p5.js入門 (全14回) - プログラミングならドットインストール