/suto3/p5.js:shape - Scrapbox Reader

generated at 2/23/2025, 11:28:41 AM
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()

（共通部分）
test.jsfunction setup() {
  createCanvas(300, 300);
  background('#eee');
  stroke('#aaa');
}

円（circle）
楕円（ellipse）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  ellipse(mouseX, mouseY, 80, 80);
}

弧（arc）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  arc(mouseX, mouseY, 80, 80,  0, HALF_PI, PIE);
} 

直線（line）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  line(mouseX, mouseY, 150, 150);
} 

点（point）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  point(mouseX, mouseY);
} 

四角形（quad）
testxx.jsfunction 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）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  rect(mouseX, mouseY, 80, 60);
} 

三角形（triangle）
testxx.jsfunction draw() {
  if (mouseIsPressed) {
    fill(0,0,0,10);
  } else {
    fill('#fff');
  }
  triangle(mouseX, mouseY, mouseX+15, mouseY+30, mouseX+-15, mouseY+30);
} 

正多角形
test.jsfunction 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