如何使用 p5 在 JS 中绘制不完美的圆

Question

我创建了一个脚本来计算 JS 中圆的坐标。我正在使用 p5.js 绘制圆圈，但是当我运行脚本没有任何反应。我认为这与我绘制顶点的方式有关？

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

function setup() {
  createCanvas(400, 400);
  background(220);
  crookedCircle(10, 10, 10, 10);
}

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));
    for (let x = 0; x < xValues.length; x++) {
      for (let y = 0; y < yValues.length; y++) {
        //console.log("x: "+xValues[x] + " y: "+yValues[y])
        beginShape();
        vertex(xValues[x] + random(-10, 10), yValues[y]) + random(-10, 10);
        endShape(CLOSE);
      }
    }
  }
}

Answer 1

您只需 1 个点就可以画出许多形状。 beginShape and endShape 包含形状的顶点。因此，您必须在循环之前调用 beginShape 并在循环之后调用 endShape：

function crookedCircle(radius, steps, centerX, centerY) {
    beginShape();
    for (var i = 0; i < steps; i++) {
        // [...]
    }
    endShape(CLOSE);  
}

如果你想画1个圆，一个循环就够了：

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

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    fill(255)
    crookedCircle(100, 90, 120, 120);
}

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(-2, 2), yValues[i] + random(-2, 2));
    }
    endShape(CLOSE);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

Answer 2

这里我把写的东西清理干净了，如果你愿意的话我可以注释解释。此外，我建议您探索 noise() 函数 here，而不是随机的，这将使圆看起来更平滑。

function setup() {
  createCanvas(400, 400);
  background(220);
  crookedCircle(10, 10, width / 2, height / 2);
}

function draw() {}

function crookedCircle(radius, steps, centerX, centerY) {
  var xValues = [];
  var yValues = [];
  for (var i = 0; i < steps; i++) {
    let rad = radius + random(-radius / 10,radius / 10) // you can change the 10 here to how intense you want the change to be;
    xValues[i] = (centerX + rad * cos(2 * PI * i / steps));
    yValues[i] = (centerY + rad * sin(2 * PI * i / steps));
  }
  beginShape();
    for(let i = 0; i < xValues.length; i ++){
        curveVertex(xValues[i], yValues[i]);
    }
   endShape(CLOSE);
  
}

如何使用 p5 在 JS 中绘制不完美的圆

How to plot a imperfect circle in JS with p5

javascript

geometry

p5.js