多么可爱的问题啊。
突出的一件事是这部分：
if(i == 0) {
flowerArray.push(x,y);
}else {
cAngle = angle - spacing/2;
cX = centerX + cos(radians(cAngle)) * 100;
cY = centerY+ sin(radians(cAngle)) * 100;
flowerArray.push(cX,cY,x,y)
}
请注意，您致电flowerArray.push(x,y);与任何其他情况一样，您推送 4 而不是两个值：flowerArray.push(cX,cY,x,y)。目前还不清楚为什么这个条件是必要的：if(i == 0)
如果没有它，代码将按预期工作：
function setup() {
createCanvas(512, 512);
background(226, 255, 204);
let flowerArray = [];
let centerX = 256;
let centerY = 256;
let numVertices = 7;
let steps = 11;
let spacing = 360 / numVertices;
for (let i = 0; i < numVertices + 1; i++) {
angle = i * spacing;
x = centerX + cos(radians(angle)) * 180;
y = centerY + sin(radians(angle)) * 180;
cAngle = angle - spacing/2;
cX = centerX + cos(radians(cAngle)) * 100;
cY = centerY+ sin(radians(cAngle)) * 100;
flowerArray.push(cX, cY, x, y);
}
for (i = 0; i < flowerArray.length; i+=2) {
x1=flowerArray[i];
y1=flowerArray[i+1];
qcX=flowerArray[i+2];
qcY=flowerArray[i+3];
x2=flowerArray[i+4];
y2=flowerArray[i+5];
for (k=0; k <= steps; k++) {
t = k/steps;
cPx2 = (1-t)*(1-t)* x1+2 * (1-t)*t*qcX + t*t*x2;
cPy2 = (1-t)*(1-t)* y1+2 * (1-t)*t*qcY + t*t*y2;
circle(cPx2, cPy2, 3);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
我个人建议养成格式化代码的习惯：它使阅读代码和发现问题变得更容易。你编写的程序越多，程序越大，你花在阅读代码上的时间就越多，因此使代码可读肯定会有回报。
另一个建议是封装二次贝塞尔公式 https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Quadratic_B%C3%A9zier_curves在一个函数中：
function quadLerp(p0, p1, p2, t){
return ((1-t)*(1-t)) * p0 + 2 * ((1-t) * t * p1) + t * t * p2;
}
像这样称呼它：
cPx2 = quadLerp(x1, qcX, x2, t);
cPy2 = quadLerp(y1, qcY, y2, t);
二次贝塞尔曲线的一件很酷的事情是，您可以通过插入两个线性插值来计算它们：
弦乐艺术中二次贝塞尔曲线的插图。在每种情况下，用黑色圆圈标记的端点和用 X 标记的控制点定义了二次贝塞尔曲线，显示为虚线：维基百科用户 Cmglee https://en.wikipedia.org/wiki/File:Quadratic_Beziers_in_string_art.svg
鉴于您可以通过以下方式在 p5.js 中计算线性插值lerp() https://p5js.org/reference/#/p5/lerp您可以将二次插值计算为：
function quadLerp(p0, p1, p2, t){
return lerp(lerp(p0, p1, t),
lerp(p1, p2, t),
t);
}
很高兴 p5.js 支持各种曲线绘制功能，例如bezier() https://p5js.org/reference/#/p5/bezier or curve() https://p5js.org/reference/#/p5/curve（以及类似的功能，例如bezierPoint()/curvePoint()计算可用于自定义渲染的插值）
Update根据您的评论，我了解您只想绘制内部形状。
您的代码正在处理正多边形的外部点和内部中点，绘制星形形状和下一个外部点，并使用它们作为锚点/控制点在这些点之间的二次贝塞尔曲线上绘制圆圈。好像这还不够复杂，有一个数组将所有锚点和控制点存储混合到一个列表中，并且您必须跟踪索引才能正确绘制。哦，而且您还使用极坐标到笛卡尔坐标系转换来首先绘制正多边形/星形。
发生了很多事情，所以让我们尝试将其分解。
从绘制星星和其背后的数学开始：这类似于 islia 的问题，你可以看到我的详细答案在这里 https://stackoverflow.com/questions/62893486/what-is-the-math-behind-creation-of-a-star-in-p5js/62895550#62895550.
注意明星例子 https://p5js.org/examples/form-star.html在她的问题中：这不是一个糟糕的起点，因为我们不必担心二次贝塞尔点。它确实介绍了push()/pop()你可能还不熟悉。了解这一点很有用，但现在可以跳过它。让我们看一下该片段的简化版本：
function setup() {
createCanvas(512, 512);
}
function draw() {
background(102);
star(width * 0.5, height * 0.5, 80, 100, 7);
}
function star(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
现在让我们看看同样的事情是更明显的变量名称：
function setup() {
createCanvas(512, 512);
}
function draw() {
background(102);
star(width * 0.5, height * 0.5, 80, 100, 7);
}
function star(x, y, innerRadius, outerRadius, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let xOuter = x + cos(a) * outerRadius;
let yOuter = y + sin(a) * outerRadius;
vertex(xOuter, yOuter);
let xInner = x + cos(a + halfAngle) * innerRadius;
let yInner = y + sin(a + halfAngle) * innerRadius;
vertex(xInner, yInner);
}
endShape();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
希望这能让您更容易理解哪一点是哪一点。
要绘制二次贝塞尔点，您需要当前的外部点和下一个外部点作为锚点，并将当前的内部点（在它们之间具有较小的半径）作为控制点。
这是草图的修改版本，其中star()函数被重新用于绘制花朵：
function setup() {
createCanvas(512, 512);
}
function draw() {
background(226, 255, 204);
flower(width * 0.5, height * 0.5, mouseX, 100, 7);
text("innerRadius = " + mouseX, 10, 15);
}
function flower(x, y, innerRadius, outerRadius, npoints) {
let angleIncrement = TWO_PI / npoints;
let halfAngle = angleIncrement / 2.0;
// increment by point index
for (let i = 0; i < npoints; i++) {
// calculate the current angle around the circle
let angle = angleIncrement * i;
// calculate current outer point
let xOuter = x + cos(angle) * outerRadius;
let yOuter = y + sin(angle) * outerRadius;
// calculate current inner point
let xInner = x + cos(angle + halfAngle) * innerRadius;
let yInner = y + sin(angle + halfAngle) * innerRadius;
// next angle increment
let angleNext = angleIncrement * (i+1);
// calculate next outer point
let xOuterNext = x + cos(angleNext) * outerRadius;
let yOuterNext = y + sin(angleNext) * outerRadius;
// draw quad bezier between current and outer points with inner point as control point
quadBezierCircles(xOuter, yOuter, xInner, yInner, xOuterNext, yOuterNext, 11);
// for debug purposes only: render
if(mouseIsPressed){
circle(xInner,yInner,9);
circle(xOuter,yOuter,9);
}
}
}
function quadBezierCircles(anchorX1, anchorY1, controlX, controlY, anchorX2, anchorY2, steps){
for (let k = 0 ; k <= steps; k++) {
t = k / steps;
x = quadLerp(anchorX1, controlX, anchorX2, t);
y = quadLerp(anchorY1, controlY, anchorY2, t);
circle(x, y, 3);
}
}
function quadLerp(p0, p1, p2, t){
return lerp(lerp(p0, p1, t),
lerp(p1, p2, t),
t);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
您可以移动鼠标来控制内半径。
如果按住鼠标，您可以看到锚点/控制点。
同样可以绘制为当前和下一个内部点之间的四边形贝塞尔点作为锚点，同时也将当前外部点作为锚点。
