このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の rectMode関数を説明します。

rectMode()

説明文

rect() に指定されたパラメータにより長方形が描画される場所を変更します。

デフォルトのモードは rectMode(CORNER) です。これは rect() の最初の2つのパラメータを形状の左上隅として解釈し、3番目と4番目のパラメータはその幅と高さです。

rectMode(CORNERS) は、rect() の最初の2つのパラメータを1つのコーナーの位置として解釈し、3番目と4番目のパラメータを反対側のコーナーの位置として解釈します。

rectMode(CENTER)は、rect() の最初の2つのパラメータを形状の中心点として解釈し、3番目と4番目のパラメータはその幅と高さです。

rectMode(RADIUS) も、図形の中心点として rect() の最初の2つのパラメータを使用しますが、3番目と4番目のパラメータを使用して図形の幅と高さの半分を指定します。

JavaScriptは大文字と小文字を区別する言語であるため, パラメータはすべて大文字で記述する必要があります。

構文

rectMode(mode)

パラメタ

mode
定数：CORNER、CORNERS、CENTER、RADIUS

例1

function draw() {
  rectMode(CORNER); // デフォルトの rectMode は CORNER です
  fill(255); // 塗りつぶしを白に設定します
  rect(25, 25, 50, 50); // CORNERモードを使用して白い長方形を描画します

  rectMode(CORNERS); // rectMode を CORNERS に設定します
  fill(180); //塗りつぶしを灰色に設定します
  rect(25, 25, 50, 50); // CORNERSモードを使用して灰色の長方形を描画します
}

実行結果

例2

function draw() {
  rectMode(RADIUS); // rectMode を RADIUS に設定します
  fill(255); // 塗りつぶしを白に設定します
  rect(50, 50, 30, 30); // RADIUSモードを使用して白い長方形を描画します

  rectMode(CENTER); // rectMode を CENTERに設定します
  fill(100); // 塗りつぶしを灰色に設定します
  rect(50, 50, 30, 30); // CENTER モードを使用して灰色の長方形を描画します
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。