let canvasSize = 800;
let discDiameter = 650;

// pattern 
let spacing = 10;
let thickness = 5;

// moire
let strength1 = 30;
let strength2 = 35;

let freq1 = 0.03;
let freq2 = 0.020;

function setup() {
  createCanvas(canvasSize, canvasSize);
  pixelDensity(1);
  noLoop();
}

function draw() {

  background(255);

  let cx = width / 2;
  let cy = height / 2;
  let radius = discDiameter / 2;

  // circular mask
  drawingContext.save();
  drawingContext.beginPath();
  drawingContext.arc(cx, cy, radius, 0, TWO_PI);
  drawingContext.clip();

  // layer 1 moire
  drawMoireLayer(
    cx, cy,
    spacing,
    thickness,
    strength1,
    freq1,
    5
  );

  // layer 2 moire
  drawMoireLayer(
    cx, cy,
    spacing + 1,
    thickness,
    strength2,
    freq2,
    3.5
  );

  drawingContext.restore();
}


function drawMoireLayer(
  cx,
  cy,
  lineSpacing,
  lineThickness,
  strength,
  frequency,
  phase
) {

  push();

  translate(cx, cy);

  stroke(0);
  strokeWeight(lineThickness);
  strokeCap(ROUND);
  strokeJoin(ROUND);
  noFill();

  let extent = discDiameter;

  for (let y = -extent; y <= extent; y += lineSpacing) {

    beginShape();

    for (let x = -extent; x <= extent; x += 2) {

      let d = sqrt(x * x + y * y);

      let distortion =
        sin(d * frequency + phase) * strength;

      let influence =
        exp(-(d * d) / (2 * 180 * 180));

      let yy =
        y + distortion * influence;

      vertex(x, yy);
    }

    endShape();
  }

  pop();

}