Grid lines - OpenProcessing

mySketch
palettes
xxxxxxxxxx
 
const N = 9, SCL = 4;
let pal, pi, pens = ["white", "tan", "darkorange"];
let valsX, valsY, penIdx;
let svgGrps, svgStr;
​
function setup() {
  createCanvas(297*SCL, 210*SCL); // windowWidth, windowHeight
  stroke("silver");
  noStroke();
  noFill();
  makeValues();
  pal = random(palettes);
  svgGrps = []; for (let i = 0; i < pens.length; i++) svgGrps[i] = ``;
  loop();
}
​
function draw() {
  background(32);
  
  
  for (let j = 1; j < N; j++) {
    pal = random(palettes);
    stroke(random(pal));
    pi = 0;
    for (let i = 1; i < N; i++) {
      const x1 = ~~(valsX[j][i] * width);
      const y1 = ~~(valsX[i][j] * height);
      const x2 = ~~(valsX[j-1][i] * width);
      const y2 = ~~(valsX[i][j-1] * height);
      const x3 = ~~(valsX[j][i-1] * width);
      const y3 = ~~(valsX[i-1][j] * height);
      const x4 = ~~(valsX[j-1][i-1] * width);
      const y4 = ~~(valsX[i-1][j-1] * height);
      // stroke(random(pal));
      hQuad(x1, y1, x2, y2, x4, y4, x3, y3);
      // if (i === 1 && j === 1) console.log(`(${x1}, ${y1}), (${x2}, ${y2}), (${x4}, ${y4}), (${x3}, ${y3})`)
    }
  }
  
  noLoop();
}
​
function hQuad(x1, y1, x2, y2, x3, y3, x4, y4) {
  // quad(x1, y1, x2, y2, x3, y3, x4, y4);
  /*
  noStroke();
  fill("red"); circle(x1-4, y1-4, 4)
  fill("green"); circle(x2-4, y2+4, 4)
  fill("cyan"); circle(x3+4, y3+4, 4)
  fill("orange"); circle(x4+4, y4-4, 4)
  stroke(random(pal))
  */
  const NUM = N;
  for (let i = 0; i < NUM; i++) {
    const f = i / NUM;
    const xa = lerp(x1, x2, f);
    const xb = lerp(x4, x3, f);
    const ya = lerp(y1, y2, f);
    const yb = lerp(y4, y3, f);
    const clrIdx = penIdx[pi++];
    stroke(pens[clrIdx]);
    svgLine(xa, ya, xb, yb, clrIdx);
    // line(xa, ya, xb, yb);
  }
}
​
function svgLine(x1, y1, x2, y2, clrIdx, prec = 2) {
  line(x1, y1, x2, y2);
  svgGrps[clrIdx] += `<line x1="${nf(x1,0,prec)}" y1="${nf(y1,0,prec)}" x2="${nf(x2,0,prec)}" y2="${nf(y2,0,prec)}" />\n`;
}
​
function mousePressed() {
  if (mouseButton !== RIGHT && mouseX > width*0.1 && mouseX < width*0.9) setup();
}
​
​
function makeValues() {
  valsX = []; valsY = [];
  for (let j = 0; j < N; j++) {
    valsX[j] = [];
    valsY[j] = [];
    let sumX = 0; sumY = 0;
    for (let i = 0; i < N; i++) {
      valsX[j][i] = i === 0 ? 0 : random(0.2, 1);
      valsY[j][i] = i === 0 ? 0 : random(0.2, 1);
      sumX += valsX[j][i]; 
      sumY += valsY[j][i];
    }
    for (let i = 0; i < N; i++) {
      valsX[j][i] /= sumX;
      valsY[j][i] /= sumY;
    }
    for (let i = 1; i < N; i++) {
      valsX[j][i] += valsX[j][i-1];
      valsY[j][i] += valsY[j][i-1];
    }
  }
  // console.log(valsX, valsY)
  
  penIdx = [];
  for (let i = 0; i < N*N; i++) {
    const f = i / (N*N);
    // penIdx[i] = ~~(f * random(pens.length));
    penIdx[i] = constrain(~~(f * pens.length + random(-0.5, 0.5)), 0, pens.length-1);
  }
  // console.log(penIdx)
}
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_grid2.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="${pens[i]}" stroke="${pens[i]}" stroke-width="1" fill="none">\n` + svgGr + `</g>\n`;
  }
  svgAll += `</svg>`;
  save(svgAll.split("\n"), file_name);
}