元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについてアウトプットしています。

 menu

【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);
}
f:id:shiroyuki2020:20210422160732p:plain

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);  //描画領域の中央に長方形の中央がくる
}
f:id:shiroyuki2020:20210422160729p:plain

まとめ

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

参考サイト