处理中的曲线顶点

Question

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

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();
  }
}

如何填充像正弦波一样的曲线顶点？

Answer 1

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

即用正则vertex()设置所有的角，然后用curveVertex添加弯曲的波浪，然后用endShape(CLOSE)创建一个封闭的形状图层。对所有形状都这样做，然后按“从后到前”的顺序绘制它们。

Answer 2

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

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

与dunesclass相关的变量应该被封装。例如 count, time, amp, spacing 应该在 class dunes{} 内，否则会有全局变量，这意味着如果您有多个 dunes 实例，它们将看起来非常相似（同步动画等）
使用 Java 命名约定可能会使长运行更容易使用，例如，对 class 名称使用首字母大写，如果它是一个集合，则使用复数形式（例如 array/arraylist/etc.): class Dune{} 而不是 class dunes{}（当您处理 Dune 个实例的数组时，这会使代码不那么混乱）。
您可以利用 class 属性使每个 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）

处理中的曲线顶点

curveVertex in Processing

processing

curve

vertex