Shape Primitives / 形状の基本

基本的な形状プリミティブ関数には、triangle()、rect()、quad()、ellipse()、arc()があります。正方形はrect()で、円はellipse()で作成されます。これらの各関数は、形状の位置とサイズを決定するためにいくつかのパラメータを必要とします。

primitive shape rect ellipse
Form Drawing

View Source Code

/*
 * @name Shape Primitives
 * @arialabel From left to right: a grey triangle, a darker grey square, a light grey trapezoid, a white circle, a light grey triangle, and a white half circle, on a black background
 * @description The basic shape primitive functions are triangle(),
 * rect(), quad(), ellipse(), and arc(). Squares are made with rect()
 * and circles are made with ellipse(). Each of these functions requires
 * a number of parameters to determine the shape's position and size.
 */
function setup() {
  // Sets the screen to be 720 pixels wide and 400 pixels high
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  background(0);
  noStroke();

  fill(204);
  triangle(18, 18, 18, 360, 81, 360);

  fill(102);
  rect(81, 81, 63, 63);

  fill(204);
  quad(189, 18, 216, 18, 216, 360, 144, 360);

  fill(255);
  ellipse(252, 144, 72, 72);

  fill(204);
  triangle(288, 18, 351, 360, 288, 360);

  fill(255);
  arc(479, 300, 280, 280, PI, TWO_PI);
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.