id_grid

const DPI = 300;
const MM_PER_IN = 25.4;

const CONTENT_W_MM = 85.6;
const CONTENT_H_MM = 54;
const BLEED_MM = 3;

const CONTENT_W = Math.round(CONTENT_W_MM * DPI / MM_PER_IN);
const CONTENT_H = Math.round(CONTENT_H_MM * DPI / MM_PER_IN);

const TOTAL_W = Math.round((CONTENT_W_MM + BLEED_MM*2) * DPI / MM_PER_IN);
const TOTAL_H = Math.round((CONTENT_H_MM + BLEED_MM*2) * DPI / MM_PER_IN);

function setup() {
  createCanvas(TOTAL_W, TOTAL_H);
  pixelDensity(1);
  noLoop();
}

function draw() {
  background(255);

  noFill();
  rect(0, 0, TOTAL_W, TOTAL_H);

  const content_x = (TOTAL_W - CONTENT_W) / 2;
  const content_y = (TOTAL_H - CONTENT_H) / 2;

  strokeWeight(4);
  stroke(0, 0, 0);
  noFill();
  rect(content_x, content_y, CONTENT_W, CONTENT_H);

  const cols = 10;
  const rows = 6;
  const cell_w = CONTENT_W / cols;
  const cell_h = CONTENT_H / rows;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      const x = content_x + i * cell_w;
      const y = content_y + j * cell_h;
      fill((i + j) % 2 === 0 ? 180 : 255);
      rect(x, y, cell_w, cell_h);
    }
  }
  
  strokeWeight(8);
  stroke(255, 0, 0);
  strokeCap(ROUND);
  const line_len = CONTENT_H / 3;
  const cx = TOTAL_W/2;
  const cy = TOTAL_H/2;
  line(cx, cy, cx+line_len, cy);
  line(cx+line_len, cy, cx+line_len*2/3, cy+line_len/6);
  line(cx+line_len, cy, cx+line_len*2/3, cy-line_len/6);
  
  line(cx, cy, cx, cy-line_len);
  line(cx, cy-line_len, cx+line_len/6, cy-line_len*2/3);
  line(cx, cy-line_len, cx-line_len/6, cy-line_len*2/3);
  
  //saveCanvas('id_test', 'tiff');
}