在 Processing 上使用 curveVertex() 动画化曲线

Question

我正在尝试在 Processing 上实现动画螺旋曲线，以便在每个 draw() 函数中逐渐构建曲线。我已经成功地将曲线创建为静态形状 - 现在我正在尝试更进一步。

不幸的是，尽管我很努力，但我的代码似乎无法正常工作。等待一段时间后，我再次获得静态形状以及以下错误消息：

You must use beginShape() or beginShape(POLYGON) before curveVertex()

与此消息相反，我已经有一个 beginShape() 指令（可能在错误的地方？）

这是我的代码：

float x,y;
float stepSize;
float angle;

int counter;

void setup() {
  size(900, 600);
  background(255);
  frameRate(30);
  smooth();
  //noStroke();
  stroke(0);

  x = 0;
  y = 0;
  stepSize = 6;
  angle = radians(270);
  counter = 0;
}

void draw() {
  translate(width/3, height/2);
  if (counter == 0) {
    beginShape();
    curveVertex(x, y); // initial control point
  } else {
    if (stepSize > 1.0) {
      curveVertex(x, y);

      x = x + cos(angle) * stepSize; 
      y = y + sin(angle) * stepSize;
      stepSize = stepSize * 0.99;
      angle = angle - radians(1.5);    
    } else {
      // return to previous x,y values for last control point
      angle = angle + radians(1.5);
      stepSize = stepSize / 0.99;
      y = y - sin(angle) * stepSize;
      x = x - cos(angle) * stepSize;

      curveVertex(x, y); // last control point
      endShape();
    }
  }
  counter++;
}

在此先感谢您提供的任何帮助！ - 伊利亚斯

Answer 1

尝试在对 draw() 函数的多次调用之间拆分 beginShape()、curveVertex()、endShape() 组似乎很奇怪。

相反，您应该跟踪要绘制的每个点 - ArrayList<PVector> 在这里会派上用场。要绘制曲线，只需遍历 ArrayList 并绘制每个点。要延长曲线，只需向其添加 PVector。

float stepSize = 6.0;
float angle= radians(270);

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(900, 600);
  frameRate(30);
  points.add(new PVector(0, 0));
}

void draw() {
  background(255);

  translate(width/3, height/2);

  //draw previous points
  beginShape();
  for (PVector point : points) {
    curveVertex(point.x, point.y);
  }
  endShape();

  if (stepSize > 1.0) {
    //add a new point
    PVector prevPoint = points.get(points.size()-1);

    float x = prevPoint.x + cos(angle) * stepSize; 
    float y = prevPoint.y + sin(angle) * stepSize;
    points.add(new PVector(x, y));

    stepSize = stepSize * 0.99;
    angle = angle - radians(1.5);
  }
}

您可以只存储最近绘制的点并累积绘制调用，但重新绘制每个点可能是解决此类问题的最常见方法。

在 Processing 上使用 curveVertex() 动画化曲线

Animating a curve with curveVertex() on Proccesing

processing

curve