<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>

body {margin:0px; padding:0px; overflow: hidden}

const margin = 64;
let slider, circleX = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  background("#F7EDFF");
  const span = 50;
  for (let x = 0; x < width; x += span) {
    line(x, 0, x, height);
    drawLabel(x,16, x, LEFT);
  }
  for (let y = 0; y < height; y += span) {
    line(0, y, width, y);
    drawLabel(0, y + 16, y, LEFT);
  }
  
  circle(100, 100, 100);
  circle(250, 250, 200);
  rect(400, 50, 200, 200);
}

function drawLabel(x, y, label, align = CENTER) {
  push();
  fill(0); noStroke();
  textFont("monospace");
  textSize(14);
  textAlign(align);
  text(label, x + (align === LEFT ? 6 : align === RIGHT ? -6 : 0), y);
  pop();
}