log

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

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  describe(
    "a logarithmic x and y grid that shrinks and grows in a blueprint design. "
  );
  gSpace = (w / nGrid) * 0.95;
  createCanvas(w, w);
  rectMode(CENTER);
  angleMode(DEGREES);
  textSize(16);
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawLogGrid();
  t = frameCount / 10;
  stroke(255);
  strokeWeight(2);
  let r = w / 2.5;
  noStroke();
  fill(gCol);
  text("log", -w / 2 + 10, w / 2 - 5);
}

function drawLogGrid() {
  stroke(gCol);
  strokeWeight(0.5);
  cnt = 0;
  p = 8 + 6 * sin(t);
  s = (w - 2 * gSpace) / p / Math.log(9);

  tmp2 = w - 2 * gSpace;
  tmp1 = s * Math.log(9);
  tmp = (w / 2 - gSpace) / tmp1;
  for (let j = 0; j <= p; j++) {
    for (let i = 0; i < 10; i++) {
      if (-w / 2 + s + j * tmp1 + gSpace * Math.log(i) < w / 2 - gSpace) {
        line(
          -w / 2 + gSpace + j * tmp1 + s * Math.log(i),
          -w / 2 + gSpace,
          -w / 2 + gSpace + j * tmp1 + s * Math.log(i),
          w / 2 - gSpace
        );

        line(
          -w / 2 + gSpace,
          w / 2 - gSpace - j * tmp1 - s * Math.log(i),
          w / 2 - gSpace,
          w / 2 - gSpace - j * tmp1 - s * Math.log(i)
        );
      }
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w - 2 * gSpace);
}

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