p5.js_tips/ 多角形備忘録

👻

p5.jsで多角形を書くコードが溜まってきたので、忘れないようにまとめておきますー。
使ってどうぞー。

angleMode(DEGREES)でやってます。
depth (くびれの深さ)の値は0.0~1.0の間で、０に近いほど浅く、１に近いほど深く激しいイメージです。

---

基本の多角形

https://editor.p5js.org/Senbaku/sketches/CrPvJOghW

function poly(x, y, r) {
  push();
  translate(x, y);
  let verticesNums = 6; //頂点数
  let angle = 360/verticesNums;
  
  beginShape();
  for (let i = 0; i < 360; i += angle) {
    let ex = r * sin(i);
    let ey = r * cos(i);
    vertex(ex, ey);
  }
  endShape(CLOSE);
  pop();
}

---

星型

https://editor.p5js.org/Senbaku/sketches/x0Sd_D7AT

function star(x, y, r) {
  push();
  translate(x, y);
  let verticesNums = floor(random(3, 12)); //頂点数
  let depth = 0.5; //くびれの深さ
  let radiusOuter = r;
  let radiusInner = r* (1-depth);
  let angle = 360/ verticesNums
  
  beginShape();
  for (let i = 0; i < 360; i += angle) {
    let ex = radiusOuter * cos(i);
    let ey = radiusOuter * sin(i);
    vertex(ex, ey);
    ex2 = radiusInner * cos(i+(angle*0.5));
    ey2 = radiusInner * sin(i+(angle*0.5));
    vertex(ex2, ey2);
  }
  endShape(CLOSE);
  pop();
}

---

角丸にする

https://editor.p5js.org/Senbaku/sketches/Qg0zdK6IS

function roundPolygon(x, y, r) {
  push();
  translate(x, y);
  let verticesNums = 6; //頂点数
  let depth = 0.12; //くびれの深さ
  beginShape();
  for (let i = 0; i < 360; i += 1) {
    let radius = r + r * depth * sin(i * verticesNums);
    let ex = radius * cos(i);
    let ey = radius * sin(i);
    vertex(ex, ey);
  }
  endShape(CLOSE);
  pop();
}

---

角丸を膨張にする

radiusのsin()にabsをかけると膨張に。
https://editor.p5js.org/Senbaku/sketches/j6Syz01KK

let radius = r + (r * depth * abs(sin(i * verticesNums)));

---

角丸の✨️型

https://editor.p5js.org/Senbaku/sketches/UXJJIeSuU

function roundStar(x, y, r) {
	push();
	translate(x, y)
	let verticesNums = 4;
	let depth = 0.7;　//0.7までがいい感じ
	let radiusInner = r * (1-depth)
	let angle = 360 / verticesNums
	beginShape();
	for (let i = 0; i < verticesNums+ 3; i++) {
		let x = r * cos(i * (360 / verticesNums))
		let y = r * sin(i * (360 / verticesNums))
		curveVertex(x, y)
		let x2 = radiusInner * cos(i * (360 / verticesNums) + angle * 0.5)
		let y2 = radiusInner * sin(i * (360 / verticesNums) + angle * 0.5)
		curveVertex(x2, y2)
	}
	endShape();
	pop();
}

---

多角形内サークルパッキング

https://editor.p5js.org/Senbaku/sketches/GF__Rq91m

function roundPolygonPacking(x, y, r) {
	push();
	translate(x, y);
	let verticesNums = floor(random(3,12)) //頂点数(ランダム)
	let depth = 0.4;
	let pos = [];
	
	// round Polygon
	fill(51);
	noStroke();
	beginShape();
	for (let i = 0; i < 360; i += 1) {
		let radius = r + (r * depth * sin(i * verticesNums));
		let ex = (radius) * cos(i);
		let ey = (radius) * sin(i);
		vertex(ex, ey);
		pos.push(createVector(ex, ey));
	}
	endShape(CLOSE);
  

	// 多角形内でのサークルパッキング
	let points = [];
	let tris = 1500;//試行回数
	let margin = 0.2;
	for (let i = 0; i < tris; i++) {
		let add = true;
		s = random(r * 0.001, r * 0.2);
		let a = random(360);
		let boundaryR = r + (r * depth * sin(a * verticesNums));
		let maxCenterR = boundaryR - s - margin; 
		if (maxCenterR <= 0) continue;
		let centerR = random(maxCenterR);

		let cx = centerR * cos(a);
		let cy = centerR * sin(a);

		for (let j = 0; j < points.length; j++) {
			let p = points[j];
			if (dist(cx, cy, p.x, p.y) < (s + p.r + margin)) {
				add = false;
				break;
			}
		}
		if (add) points.push({
			x: cx,
			y: cy,
			r: s
		});
	}

	//内側の図形
	for (let p of points) {
     　　　　　 fill(255)
		ellipse(p.x, p.y, p.r);
	}
	pop();
}