set

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let w1;
let gSpace;
function setup() {
  w1 = int(max(500, min(windowWidth, windowHeight) * 0.9));
  gSpace = (w1 / nGrid) * 0.95;
  describe("a fractal set on a blueprint inverted");
  createCanvas(w1, w1);
  pixelDensity(1);
  textSize(16);
}
function draw() {
  t = frameCount / 30;
  let maxIter = 60;
  let c = {
    x: -0.4 + 0.1 * Math.sin(t) * Math.cos(t),
    y: 0.4 - 0.3 * Math.sin(t / 3) * Math.cos(t / 2)
  };
  background(bgCol);
  push();
  translate(w1 / 2, w1 / 2);
  drawGrid();
  noStroke();
  fill(gCol);
  text("set", -w1 / 2 + 10, w1 / 2 - 5);
  pop();
  loadPixels();
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let a = map(x, 0, width, -1.7, 1.7);
      let b = map(y, 0, height, -1.7, 1.7);
      let n = 0;
      while (n < maxIter) {
        let aa = a * a - b * b;
        let bb = 2 * a * b;
        a = aa + c.x;
        b = bb + c.y;
        if (a * a + b * b > 4) break;
        n++;
      }
      let bright = map(n, 0, maxIter, 0, 1);
      bright = map(Math.cos(bright), 0, 1, 0, 165);
      let pix = (x + y * width) * 4;
      if (bright > 100) {
        pixels[pix + 0] = bright + 68;
        pixels[pix + 1] = bright + 122;
        pixels[pix + 2] = bright + 189;
        pixels[pix + 3] = 105;
      }
    }
  }
  updatePixels();
  push();
  rectMode(CENTER);
  noStroke();
  translate(w1 / 2, w1 / 2);
  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);
  noStroke();
  fill(gCol);
  text("set", -w1 / 2 + 10, w1 / 2 - 5);
  pop();
}
function drawGrid() {
  rectMode(CENTER);
  textSize(16);
  stroke(gCol);
  strokeWeight(0.1);
  for (let i = 1; i <= nGrid; i++) {
    for (let j = 1; j <= nGrid; j++) {
      line(
        -w1 / 2 + gSpace * i,
        -w1 / 2 + gSpace,
        -w1 / 2 + gSpace * i,
        w1 / 2 - gSpace
      );
      line(
        -w1 / 2 + gSpace,
        -w1 / 2 + gSpace * i,
        w1 / 2 - gSpace,
        -w1 / 2 + gSpace * i
      );
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w1 - 2 * gSpace);
}