p5.js:shape
図形、シェイプ（shape）
プリミティブ（primitive）
https://p5js.org/reference/#group-Shape
p5.js:circle()
p5.js:ellipse()
p5.js:arc()
p5.js:rect()
p5.js:quad()
p5.js:square()
p5.js:triangle()
p5.js:line()
p5.js:point()
（共通部分）
code:test.js
function setup() {
createCanvas(300, 300);
background('#eee');
stroke('#aaa');
}
円（circle）
楕円（ellipse）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
ellipse(mouseX, mouseY, 80, 80);
}
弧（arc）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
arc(mouseX, mouseY, 80, 80, 0, HALF_PI, PIE);
}
直線（line）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
line(mouseX, mouseY, 150, 150);
}
点（point）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
point(mouseX, mouseY);
}
四角形（quad）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
quad(mouseX, mouseY, mouseX+10, mouseY+80,mouseX+70, mouseY+80,mouseX+100, mouseY+30,);
}
方形（rect）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
rect(mouseX, mouseY, 80, 60);
}
三角形（triangle）
code:testxx.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
triangle(mouseX, mouseY, mouseX+15, mouseY+30, mouseX+-15, mouseY+30);
}
正多角形
code:test.js
function draw() {
if (mouseIsPressed) {
fill(0,0,0,10);
} else {
fill('#fff');
}
var corner=3;
translate(mouseX,mouseY);
beginShape();
for (var i=0; i<corner; i++) {
var angle=map(i, 0, corner, 0, 360);
var x=sin(radians(angle))*30;
var y=cos(radians(angle))*30;
vertex(x, y);
}
endShape(CLOSE);
}
実行→test.js
#p5.js-term
https://img.shields.io/badge/p5.js-shape-ED225D.svg?logo=p5.js&style=for-the-badge