Help us understand the problem. What is going on with this article?

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

このページでは「P5.js 日本語リファレンス」 の 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);
}

実行結果

https://editor.p5js.org/bit0101/sketches/TGz2ly_Gc

例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);

}

実行結果

https://editor.p5js.org/bit0101/sketches/LwZkL9UBE

例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);

}

実行結果

https://editor.p5js.org/bit0101/sketches/4gEPDcaTK

著作権

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

bit0101
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away