如何使用p5.js在JavaScript中绘制不规则圆及代码无输出问题排查

代码存在的问题 #

• 语法错误：vertex 方法参数括号错位，你写的vertex(xValues[x] + random(-10, 10), yValues[y]) + random(-10, 10); 把y轴的随机偏移写在了vertex调用的括号外面，该参数根本没有传入vertex方法。
• 绘制逻辑错误：beginShape() 和 endShape() 包裹的内容只有1个vertex顶点，单个顶点无法构成任何可显示的图形，你需要把圆的所有顶点都放在同一个beginShape()和endShape()之间才能绘制出完整的图形。
• 坐标配对逻辑错误：你嵌套了两层循环交叉遍历xValues和yValues，实际上同一个下标i对应的xValues[i]和yValues[i]才是圆上的同一个顶点，交叉配对出来的坐标根本不在你要画的圆上。
• 绘制位置问题：你调用crookedCircle(10, 10, 10, 10)时，圆心坐标在画布左上角的(10,10)位置，半径仅为10，再叠加±10的随机偏移，很容易出现绘制内容超出画布可视范围的情况。

修正后的可运行代码 #

var xValues = [];
var yValues = [];

function setup() {
  createCanvas(400, 400);
  background(220);
  // 圆心移到画布中心，放大半径方便观察
  crookedCircle(100, 20, 200, 200);
}

function draw() {}

function crookedCircle(radius, steps, centerX, centerY) {
  // 先计算所有圆上顶点坐标
  for (var i = 0; i < steps; i++) {
    xValues[i] = centerX + radius * Math.cos(2 * Math.PI * i / steps);
    yValues[i] = centerY + radius * Math.sin(2 * Math.PI * i / steps);
  }
  // 一次性绘制所有顶点构成不规则圆
  beginShape();
  for (let i = 0; i < steps; i++) {
    vertex(xValues[i] + random(-10, 10), yValues[i] + random(-10, 10));
  }
  endShape(CLOSE);
}

内容的提问来源于stack exchange，提问作者billyjean