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

arc()

説明文

画面に円弧を描きます。 x、y、w、h、start、stop のみで呼び出された場合、弧は描画され開いた円セグメントとして塗りつぶされます。mode が指定されている場合、弧は開いた半円(OPEN)、閉じた半円(CHORD)、閉じたパイセグメント(PIE)として塗りつぶされます。原点は ellipseMode() で変更できます。

弧は常に楕円の始点から終点まで時計回りに描画されます。 TWO_PI をどちらかの角度に加算または減算してもそれらがどこに描画されるかは変わりません。開始と停止の両方が同じ場所にある場合、完全な楕円が描画されます。 Y軸は下方向に増加するため、角度は正のX方向から時計回りに回転することに注意してください。

構文

arc(x, y, w, h, start, stop, [mode], [detail])

パラメタ

x
Number：弧中心の楕円のx座標
y
Number：弧中心の楕円のy座標
w
Number：弧の楕円の幅
h
Number：弧の楕円の高さ
start
Number：ラジアンで指定された弧を開始する角度
stop
Number：ラジアンで指定された弧を停止する角度
mode
定数：弧の描画方法を決定するパラメータ。 CHORD、PIE または OPEN(オプション)
detail
Number：WebGLモードのみのパラメータ。これは円弧の周囲を構成する頂点数を指定するためのものです。デフォルト値は25です。(オプション)

例1

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 100);
  noFill();
  
  let x = 100;
  let y = 110;
  
  ellipse(x, y, 4);  // 中心点を描画
  
  stroke(100, 100, 100);  // 赤
  arc(x, y, 150, 150, 0, HALF_PI);
  
  stroke(80, 100, 100);  // 紫
  arc(x, y, 160, 160, HALF_PI, PI);

  stroke(60, 100, 100);  // 青
  arc(x, y, 170, 170, PI, PI + QUARTER_PI);
  
  stroke(40, 100, 100);  // 緑
  arc(x, y, 180, 180, PI + QUARTER_PI, TWO_PI);
}

実行結果

例2

function setup() {
  createCanvas(300, 400);
  
  let x = 50;
  let y = 50;
  
  // mode パラメタ別に円弧を描画
  arc(x, y      , 80, 80, 0, PI + QUARTER_PI);
  arc(x, y + 80 , 80, 80, 0, PI + QUARTER_PI, OPEN);
  arc(x, y + 160, 80, 80, 0 , PI + QUARTER_PI, CHORD);
  arc(x, y + 240, 80, 80, 0, PI + QUARTER_PI, PIE);

}

実行結果

例3

function setup() {
  createCanvas(300, 400, WEBGL);
  
  let x = -50;
  let y = -150;
  
  // detail パラメタを指定して円弧を描画
  arc(x, y      , 80, 80, 0, PI + QUARTER_PI, OPEN, 4);
  arc(x, y + 80 , 80, 80, 0, PI + QUARTER_PI, OPEN, 6);
  arc(x, y + 160, 80, 80, 0 , PI + QUARTER_PI, CHORD, 8);
  arc(x, y + 240, 80, 80, 0, PI + QUARTER_PI, PIE, 10);

}

実行結果

著作権

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