area

let dx = 20;
let rule = 3;
function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  noFill();
  strokeWeight(1);
  stroke(255);
}

function draw() {
  background(0);
  t = frameCount;
  line(0, height / 2, width, height / 2);
  beginShape();
  a = height / 4;
  for (let i = 0; i < width; i++) {
    x = i;
    y = a * sin(i + t) + height / 2;
    vertex(x, y);
    if (i % dx === 0) {
      r = map(i, 0, width, 0, 255) / 2 + 50;
      g = map(i, 0, width, 0, 255) + 50;
      b = map(i, 0, width, 0, 255) + 50;
      fill(r, g, b);
      if (rule === 0) {
        rect(x, y, dx, height / 2 - y);
      } else if (rule === 1) {
        rect(x, y, -dx, height / 2 - y);
      } else if (rule === 2) {
        quad(
          x,
          y,
          x + dx,
          a * sin(x + dx + t) + height / 2,
          x + dx,
          height / 2,
          x,
          height / 2
        );
      } else {
        rect(
          x,
          a * sin((2 * x + dx) / 2 + t) + height / 2,
          dx,
          -a * sin((2 * x + dx) / 2 + t)
        );
      }

      noFill();
    }
  }
  endShape();
}

function mousePressed() {
  if (dx > 1) {
    dx--;
  } else {
    dx = 15;
  }
}

function keyPressed() {
  if (rule < 3) {
    rule++;
  } else {
    rule = 0;
  }
}