html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}

let points, nexts;

function setup() {
  createCanvas(windowWidth, windowHeight);

  stroke(240);
  noFill();

  points = [];

  divide({ x: 0, y: height / 2 }, { x: width, y: height / 2 }, 100);
  points.push({ x: width, y: height / 2 });

  let px = points[0].x;
  let py = points[0].y;
  for (let i = 1; i < points.length; i++) {
    const x = points[i].x;
    const y = points[i].y;

    line(px, py, x, y);

    px = x;
    py = y;
  }
}

function divide(a, b, h) {
  if (abs(a.x - b.x) < 1) {
    points.push({ x: a.x, y: a.y });
    return;
  }

  const c = lerp2d(a, b, 0.5);
  c.y += random(-h, h);

  divide(a, c, h / 2);
  divide(c, b, h / 2);
}

function lerp2d(a, b, t) {
  return { x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t) };
}