P5.js 日本語リファレンス(ellipseMode)

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

ellipseMode()

説明文

ellipse()、circle()、arc() に指定されたパラメータの解釈方法を変更することにより、楕円が描画される位置を変更します。

デフォルトのモードは ellipseMode(CENTER) です。これは、ellipse() の最初の2つのパラメータを形状の中心点として解釈し、3番目と4番目のパラメータはその幅と高さです。

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

ellipseMode(CORNER) は ellipse() の最初の2つのパラメータを形状の左上隅として解釈し、3番目と4番目のパラメータはその幅と高さです。

ellipseMode(CORNERS) は、ellipse() の最初の2つのパラメータを楕円の境界ボックスの1つのコーナーの位置として解釈し, 3番目と4番目のパラメータを反対側のコーナーの位置として解釈します。

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

構文

ellipseMode(mode)

パラメタ

• mode
  定数：CENTER、RADIUS、CORNER、CORNERS のいずれか

例1

function draw() {
  ellipseMode(RADIUS); // ellipseMode を RADIUS に設定します
  fill(255); //塗りつぶしを白に設定します
  ellipse(50, 50, 30, 30); // RADIUS モードを使用して半径30(直径60)の白い楕円を描画します

  ellipseMode(CENTER); // ellipseMode を CENTERに設定します
  fill(180); //塗りつぶしを灰色に設定します
  ellipse(50, 50, 30, 30); // CENTER モードを使用して直径30の灰色の楕円を描画します
}

実行結果

例2

  noFill();
  stroke(255, 0, 0);
  rect(25, 25, 50, 50);

  stroke(0);
  ellipseMode(CORNER); // ellipseMode を CORNERに設定します
  fill(255); //塗りつぶしを白に設定します
  ellipse(25, 25, 50, 50); // CORNER モードを使用して白い楕円を描画します

  ellipseMode(CORNERS); // ellipseMode を CORNERS に設定します
  fill(180); //塗りつぶしを灰色に設定します
  ellipse(25, 25, 50, 50); // CORNERSモードを使用して灰色の楕円を描画します

実行結果

著作権

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) に従います。