lunes and lenses

function setup() {
  cnv = createCanvas(700, 200);
  noLoop();
  background(255);
  noFill();
  diam = width / 10;
  angleMode(DEGREES);
  noStroke();
}

function draw() {
  for (let i = 1; i < 10; i++) {
    x1 = (width / 10) * i;
    y1 = height / 2;
    x2 = (width / 10) * i - (i * diam) / 10;
    y2 = height / 2;
    dx = abs((x1 - x2) / 2);
    theta1a = 180 - abs(acos(dx / (diam / 2)));
    theta1b = -theta1a;
    theta2a = abs(acos(dx / (diam / 2)));
    theta2b = -theta2a;
    strokeWeight(2);
    fill(200);
    beginShape();

    for (let k = theta1b; k < theta1a; k++) {
      vertex(x1 + (diam / 2) * cos(k), y1 + (diam / 2) * sin(k));
    }
    for (let k = theta2a; k > theta2b; k--) {
      vertex(x2 + (diam / 2) * cos(k), y2 + (diam / 2) * sin(k));
    }
    endShape();
    theta1a = 180 - abs(acos(dx / (diam / 2)));
    theta1b = -theta1a;
    theta2a = abs(acos(dx / (diam / 2)));
    theta2b = -theta2a;
    strokeWeight(2);
    fill(0);
    beginShape();
    for (let k = theta2a; k > theta2b; k--) {
      vertex(x2 + (diam / 2) * cos(k), y2 + (diam / 2) * sin(k));
    }
    for (let k = theta2b; k < theta2a; k++) {
      vertex(dx * 2 + x2 - (diam / 2) * cos(k), y2 + (diam / 2) * sin(k));
    }

    endShape();
  }
}

function keyPressed() {
  if (keyCode === 83) {
    save(cnv, "lunes", "jpg");
  }
}