Search code examples
processingcurvevertex

curveVertex in Processing

dunesSo, I'm creating a curveVertex that it's animated. It's a line, basically, with amplitude. The image is a rough sketch of what I want to achieve Now I want to fill it, creating the idea of a dune or mountain, but when I do it, an imaginary line is created between the first and last point and does not fill it the right way

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

How do I fill a curveVertex that it's like a sinusoidal wave?

Solution

  • Based on your image: add some regular vertices and draw "rectangles with a wavy top edge":

    enter image description here

    That is, set up all the corners with regular vertex(), then add the curvy wave using curveVertex, and then use endShape(CLOSE) to create a closed shape layer. Do that for all your shapes and then draw them ordered "back to front".