homologous

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

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe(
    "a white circle on a blueprint has 8 holes that bounce around at different intervals based on where they are in the rotation (almost a spiral efeect).Pressing s will save a gif - this was added for weird web october's gif prompt."
  );
  createCanvas(w, w);
  rectMode(CENTER);

  angleMode(DEGREES);
  textSize(16);
  gSpace = (w / nGrid) * 0.95;
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);

  t = frameCount / 3;
  stroke(255);
  strokeWeight(2);
  fill(255);
  circle(0, 0, gSpace * 16);
  fill(bgCol);
  n = 8;
  for (let i = 0; i < n; i++) {
    push();
    rotate((i * 360) / n + t);
    translate(gSpace * 3 + 4 * gSpace * abs(sin(t * i)), 0);

    circle(0, 0, 40 + 20 * abs(sin(t)));
    pop();
  }
  drawGrid();
  noStroke();
  fill(gCol);

  text("homologous", -w / 2 + 10, w / 2 - 5);
}

function drawGrid() {
  stroke(gCol);
  strokeWeight(0.3);
  for (let i = 1; i <= nGrid; i++) {
    for (let j = 1; j <= nGrid; j++) {
      line(
        -w / 2 + gSpace * i,
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace
      );
      line(
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace,
        -w / 2 + gSpace * i
      );
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w - 2 * gSpace);
}

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

function keyPressed() {
  if (key === "s") {
    saveGif("gif", 5);
  }
}