使用 dat.GUI 更改 p5.js 中绘制圆上的矢量点数

Question

我试图通过在圆形中绘制一定数量的顶点（由 stepCount 确定）然后连接这些点来在 p5js 中创建一些自定义形状。

根据stepCount，形状可以是直线、矩形、五边形、六边形等，一直到圆形。当我对 stepCount 进行硬编码并刷新页面时，更改会按预期反映出来。

问题是我想使用 dat.GUI 从页面操纵 stepCount 直播。当我这样做时，我得到一个闪烁的轮廓，其中的预期形状被剪掉了。

下面是我的代码：

let p;
let x;
let y;

function setup() {
  createCanvas(windowWidth, windowHeight);
  p = new Planet();
  console.log("Planet generated.");
  let gui = new dat.GUI();
  gui.add(p, 'radius', 0, 500);
  gui.add(p, 'stepCount', 0, 50)

}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function draw() {
  background(100);
  makePlanet();
}

function Planet() {
  this.radius = 200;
  this.angle = 0;
  this.stepCount = 20;
  this.step = TWO_PI / this.stepCount;
  this.angle = 0;
}

function makePlanet() {
  beginShape();
  for (i = 0; i < p.stepCount + 1; i++) {
    x = p.radius * sin(p.angle);
    y = p.radius * cos(p.angle);
    vertex(windowWidth / 2 - x, windowHeight / 2 - y);
    p.angle = p.angle + p.step;
    if (i >= p.stepCount) {
      endShape();
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

我知道这与循环中的 p.angle = p.angle + p.step 运行有关，但我无法弄清楚解决方案是数学的还是在于我存储的方式Planet().

中的变量

非常感谢任何指导，我只是想学习。

Answer 1

您必须 round 将 p.stepCount 设为整数值。一步的角度取决于步数，因此必须重新计算 (p.steps)。 p.angle 应在每一帧中重置，从头开始：

function makePlanet() {
    // round stepCount
    stepCount =  round(p.stepCount);
    // calculate step angle 
    p.steps = TWO_PI / stepCount;
    // reset start angle
    p.angle = 0;
    // create shape
    beginShape();
    for (i = 0; i <= stepCount; i++) {
        x = p.radius * sin(p.angle);
        y = p.radius * cos(p.angle);
        vertex(windowWidth / 2 - x, windowHeight / 2 - y);
        p.angle = p.angle + p.steps;
        if (i >= stepCount) {
            endShape();
        }
    }
}

另外，最小步数应该是3:

gui.add(p, 'stepCount', 3, 50)

查看示例

let p, x, y;

function setup() {
    createCanvas(windowWidth, windowHeight);
    p = new Planet();
    console.log("Planet generated.");
    let gui = new dat.GUI();
    gui.add(p, 'radius', 0, 500);
    gui.add(p, 'stepCount', 3, 50)
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

function draw() {
    background(100);
    makePlanet();
}

function Planet() {
    this.radius = 50;
    this.angle = 0;
    this.stepCount = 5
    this.step = TWO_PI / this.stepCount;
    this.angle = 0;
}

function makePlanet() {
    // round stepCount
    stepCount =  round(p.stepCount);
    // calculate step angle 
    p.steps = TWO_PI / stepCount;
    // reset start angle
    p.angle = 0;
    // create shape
    beginShape();
    for (i = 0; i <= stepCount; i++) {
        x = p.radius * sin(p.angle);
        y = p.radius * cos(p.angle);
        vertex(windowWidth / 2 - x, windowHeight / 2 - y);
        p.angle = p.angle + p.steps;
        if (i >= stepCount) {
            endShape();
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

使用 dat.GUI 更改 p5.js 中绘制圆上的矢量点数

Changing # of vector points on a plotted circle in p5.js with dat.GUI

javascript

processing

vector

dat.gui

p5.js