flexible

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let w;
let nV, r, mul, d;

function setup() {
  w = max(500, min(windowWidth, windowHeight) * 0.9);
  createCanvas(w, w);
  describe(
    "A blueprint design moves flexibly like a stretchy fabric with circles on the diagonal moving with the grid. "
  );
  rectMode(CENTER);
  angleMode(DEGREES);
  textSize(16);
}

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

  t = 360 * sin(frameCount / 3);
  drawGrid();
  for (let i = 0; i < nGrid; i++) {}
  noStroke();
  fill(bgCol);
  rect(0, -w / 2 + gSpace / 2, w, gSpace);
  rect(-w / 2 + gSpace / 2, 0, gSpace, w);
  rect(0, w / 2 - gSpace / 2, w, gSpace);
  rect(w / 2 - gSpace / 2, 0, gSpace, w);
  fill(gCol);
  text("flexible", -w / 2 + 10, w / 2 - 10);
}

function drawGrid() {
  gSpace = (w / nGrid) * 0.95;
  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 / 15) * sin((t * i) / 10) * cos(t / 4),
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace
      );
      line(
        -w / 2 + gSpace,
        -w / 2 + gSpace * i + (w / 15) * sin((t * i) / 10) * cos(t),
        w / 2 - gSpace,
        -w / 2 + gSpace * i
      );
      circle(
        -w / 2 + gSpace * i + (w / 15) * sin((t * i) / 10) * cos(t / 4),
        -w / 2 + gSpace * i + (w / 15) * sin((t * i) / 10) * cos(t),
        10
      );
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w - 2 * gSpace);
}

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