Plot Grid - OpenProcessing

mySketch
palettes
xxxxxxxxxx
 
let SCL = 4, N, NX, NY, S, pal, grid, ENTROPY = 4;
let svgGrps;
​
function setup() {
  createCanvas(297*SCL, 210*SCL); // createCanvas(windowWidth, windowHeight);
  describe("grid of cells");
  frameRate(10);
​
  N = ~~random(7, 17);
  SZ = min(windowWidth, windowHeight)
  S = SZ / N;
  NX = ~~(windowWidth / S);
  NY = ~~(windowHeight / S);
  grid = new Array(NX * NY).fill(~~random(ENTROPY));
  pal = random(palettes);
​
  background("tan");
  background(32);
  fill("darkslateblue");
  noStroke();
  stroke("cyan");
  loop();
}
​
function draw() {
  const CT = N*N;
  for (let i = 0; i < CT; i++) {
    // M: reduce max size if grid 
    const M = N; // ~~pow(map(i, 0, CT - 1, ~~sqrt(N + 1), 1), 2); // ~~sqrt(map(i, 0, CT-1, N, 1)); //
    if (M <= 0) continue;
    // console.log(M);
    const val = ~~random(ENTROPY);
    const clr = ~~random(pal.length);
    const x = ~~random(NX);
    const y = ~~random(NY);
    const w = ~~random(1, min(~~(M / 2 + 1), NX - x));
    const h = ~~random(1, min(~~(M / 2 + 1), NY - y));
​
    setGrid(x, y, w, h, S, val, clr);
  }
​
  // console.log(grid);
  drawGrid();
  
  noLoop();
}
​
function setGrid(x, y, w, h, S, val, clr) {
  for (let j = y; j < y + h; j++) {
    for (let i = x; i < x + w; i++) {
      setCell(x, y, S, val, clr);
    }
  }
}
​
function setCell(x, y, S, val, clr) {
  grid[y*NX+x] = val + clr * 10;
}
​
function drawGrid() {
  svgGrps = new Array(pal.length).fill(``);
  for (let y = 0; y < NY; y++) {
    for (let x = 0; x < NX; x++) {
      drawCell(x, y, S);
    }
  }
}
​
function drawCell(x, y, S) {
  let val = grid[y*NX+x];
  let clr = ~~(val / 10);
  val = val % 10;
  stroke(pal[clr]);
  x *= S, y *= S;
  if (val === 0) {
    // [+]
    svgLine(x+S/3, y+S/2, x+S-S/3, y+S/2, clr);
    svgLine(x+S/2, y+S/3, x+S/2, y+S-S/3, clr);
  } else {
    // draw n lines
    val = 2**val;
    for (let i = 0; i < S; i += S/val) {
      svgLine(x, y + i, x + S, y + i, clr);
    }
  }
}
​
function svgLine(x1, y1, x2, y2, clr, prec = 2) {
  line(x1, y1, x2, y2);
  svgGrps[clr] += `<line x1="${nf(x1,0,prec)}" y1="${nf(y1,0,prec)}" x2="${nf(x2,0,prec)}" y2="${nf(y2,0,prec)}" />\n`;
}
​
function mouseClicked() {
  if (mouseButton != RIGHT) setup();
}
​
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_grid.svg.txt");
  }
}
​
function saveSvg(file_name) {
  let svgAll = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  for (let i = 0; i < svgGrps.length; i++) {
    const svgGr = svgGrps[i];
    svgAll += `<g id="${pal[i]}" stroke="${pal[i]}" stroke-width="1" fill="none">\n` + svgGr + `</g>\n`;
  }
  svgAll += `</svg>`;
  save(svgAll.split("\n"), file_name);
}