处理中的曲线顶点

Question

所以，我正在创建一个动画曲线顶点。基本上，它是一条有幅度的线。该图像是我想要实现的粗略草图 现在我想填充它，创建沙丘或山脉的想法，但是当我这样做时，在第一个点和最后一个点之间创建了一条假想线，并且没有以正确的方式填充它

int count = 50;
float time;
float amp;

// line param
float spacing = 45;

class dunes {

  void drawDunes() {

    stroke(211, 132, 52);
    strokeWeight(2);
    noFill();

    frameRate(24);
    //translate(-width, -height);
    //scale(3);

    time += .03;
    amp = map(width, 0, width, 5, 15);

    pushMatrix();
    translate(width/2 - count*spacing/2, 0);

    beginShape();
    curveVertex(0, height/2);
    for (int i = 0; i < count; i++) {
      float x = i * spacing;
      float y = height-250 + (sin(x + time) * amp + random(-.4, .4));

      curveVertex(x, y);
    }
    curveVertex(count*spacing, height/2);
    endShape();
    popMatrix();
  }
}

如何填充像正弦波一样的curveVertex？

Answer 1

根据您的图像：添加一些常规顶点并绘制“带有波浪形顶边的矩形”：

即用常规vertex()设置所有角，然后使用curveVertex添加曲线波浪，然后使用endShape(CLOSE)创建一个封闭的形状图层。对所有形状执行此操作，然后按“从后到前”的顺序绘制它们。

Answer 2

Mike 的回答是正确的 (+1)：您需要顶点来定义形状的边界。

我想针对您的代码添加一些注释：

• 应封装与dunes 类相关的变量。例如，count, time, amp, spacing 应该在 class dunes{} 内部，否则会有全局变量，这意味着如果您有多个 dunes 实例，它们看起来会非常相似（同步动画等）
• 从长远来看，使用 Java 命名约定可能会更容易，例如，类名使用标题大小写，如果是集合（例如数组/数组列表/等）则使用复数：class Dune{} 而不是 @ 987654327@（当您处理Dune 实例数组时，这将使代码不那么混乱）。
• 您可以利用类属性使每个Dune 实例略有不同。

这是一个基于您的代码使用上述注释的示例：

Dune[] dunes = {new Dune(), new Dune(), new Dune()};

void setup(){
  size(300, 300);
  frameRate(24);
  noStroke();
  
  for(int i = 0 ; i < dunes.length; i++){
    // reverse map alpha (1st = background dune = more alpha))
    dunes[i].alpha = map(i, 0, dunes.length - 1, 64, 32);
    // map y
    dunes[i].y = map(i, 0, dunes.length - 1, -30, 30);
    // set bounds, increasing height so offset dune is still drawn til the bottom of the sketch
    dunes[i].width = width;
    dunes[i].height = height + 30;
    // use indepenedent time increments for each dune
    dunes[i].timeIncrement = map(i, 0, dunes.length - 1, .03, .09);
  }
}

void draw(){
  background(#E3CCB7);
  fill(211, 132, 52);
  for(int i = 0 ; i < dunes.length; i++){
    dunes[i].draw();
  }
}



class Dune {

  float alpha = 32;
  float x, y;
  float timeIncrement = .03;
  float width;
  float height;
  
  int count = 50;
  float time = 0;
  float amp = 9;
  
  // line param
  float spacing = 45;

  
  void draw() {

    fill(211, 132, 52, alpha);
    

    time += timeIncrement;
    amp = map(width, 0, width, 5, 15);

    pushMatrix();
    translate(x, y);
    beginShape();
    // mid-left point
    vertex(0, height/2);
    // upper curveVertex points
    for (int i = 0; i < count; i++) {
      float x = i * spacing;
      float y = height-250 + (sin(x + time) * amp + random(-.4, .4));

      curveVertex(x, y);
    }
    // mid-right point
    vertex(count*spacing, height/2);
    // bottom-right point
    vertex(width, height);
    // bottom-left point
    vertex(0, height);
    endShape();
    popMatrix();
  }
}

您已经了解了使用正弦波绘制曲线的基本部分。 （如果有帮助，我已经发布了更基本的细分here）