curvilinear

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let gSpace;

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe(
    "polar coordinates on a blueprint with a moving curve that has 2 and 3 fold symmetries dance."
  );
  createCanvas(w, w);
  rectMode(CENTER);

  angleMode(DEGREES);
  textSize(16);
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawGrid();
  t = frameCount / 10;
  noStroke();
  fill(255, 255, 255);
  push();

  for (let i = 0; i <= 720; i += 0.1) {
    r = (width / 2.5) * sin(i + t);
    theta = i * sin(t - i) * cos(-i);
    circle(r * cos(theta), r * sin(theta), 4);
  }

  pop();
  noStroke();
  fill(gCol);
  text("curvilinear", -w / 2 + 10, w / 2 - 5);
}

function drawGrid() {
  gSpace = (w / nGrid) * 0.95;
  stroke(gCol);
  strokeWeight(0.3);
  noFill();
  for (let i = 0; i < 20; i++) {
    circle(0, 0, (i * (w - 2 * gSpace)) / 10);
    push();
    rotate((360 / 20) * i);
    line(-width / 1.5, 0, width / 1.5, 0);
    pop();
  }

  noStroke();
  fill(bgCol);
  rect(-width / 2 + gSpace / 2, 0, gSpace, height);
  rect(width / 2 - gSpace / 2, 0, gSpace, height);
  rect(0, -width / 2 + gSpace / 2, height, gSpace);
  rect(0, width / 2 - gSpace / 2, height, gSpace);
  noFill();
  stroke(gCol);
  strokeWeight(3);

  rect(0, 0, w - 2 * gSpace);
}

function mousePressed() {
  setup();
  draw();
}
function windowResized() {
  setup();
  draw();
}