dashed lines - OpenProcessing

mySketch
palettes
xxxxxxxxxx
 
const SCL = 4, // scale for level of details
  N = 3 * SCL, // distance between lines / raster
  NF = 32 * N, // noise factor, reciproc 
  F1 = 102 / N, F2 = 54 / N; // factor for line len (1) and spacing (2)
​
const PENS = [ // not in use
  {clr: "darkorange", f: 1},
  {clr: "silver", f: 2},
  {clr: "darkred", f: 0.2},
];
​
let pal, svgGrps;
​
function setup() {
  createCanvas(297 * SCL, 210 * SCL);
  frameRate(30);
  loop();
  // seed
  const seed = ~~random(1234567); // 1095092
  console.log(`seed: ${seed}`)
  noiseSeed(seed);
  // palette
  pal = random(palettes);
  /*
  svgGrps = Array(PENS.length)
  let sumF = 0;
  for (let i = 0; i < PENS.length; i++) sumF += PENS[i].f;
  // sumF /= PENS.length; // normalize
  let currR = 0;
  for (let i = 0; i < PENS.length; i++) {
    currR += PENS[i].f / sumF;
    PENS[i].r = currR;
    PENS[i].i = i; // index
  } // console.log(PENS);
  */
}
​
function draw() {
  background(24, 24, 32);
  const t = frameCount / 123;
  svgGrps = Array(pal.length); for (let i = 0; i < pal.length; i++) svgGrps[i] = '';
  console.log("draw() 1", svgGrps);
  let hClrIdxs = [], vClrIdxs = [];
  if (true || random() < 0.5) {
    for (let i = 0; i < pal.length; i++) {
      if (i < pal.length/2) {   
        hClrIdxs.push(i);
      } else {
        vClrIdxs.push(i);       
      }
    }
  }
  drawLines(false, t, hClrIdxs);
  drawLines(true, t, vClrIdxs);
  console.log("draw() 2", svgGrps);
  noLoop();
}
​
function mousePressed() {
  if (mouseButton !== RIGHT && mouseX > width*0.1 && mouseX < width*0.9) {
    setup();
  }
}
​
function drawLines(hv = true, t = 0, clrIdxs = []) {
  let H = height, W = width;
  if (hv) [H, W] = [W, H];
  for (let y = ~~(N / 2); y < H; y += N) {
    let clrIdx;
    let x = noise(y / NF, t) * -10 * N;
    /*
    const penR = random();
    let penI = 0;
    for (const p of PENS) {
      if (penR < p.r) {
        penI = p.i;
        continue;
      }
      break;
    }
    stroke(PENS[penI].clr);
    */
    if (clrIdxs && clrIdxs.length > 0) {
      clrIdx = ~~(random()**2 * clrIdxs.length);
    } else {    
      clrIdx = ~~random(pal.length); 
    }
    stroke(pal[clrIdx]);
​
    while (x < W) {
      const len = noise(y / NF, x / NF, t) * F1 * N;
      const pad = noise(x / NF, y / NF, t) * F2 * N;
      if (!hv) {
        svgLine(x, y, x + len, y, clrIdx);
      } else {
        svgLine(y, x + len, y, x, clrIdx);
      }
      x += len + pad;
    }
  }
}
​
function svgLine(x1, y1, x2, y2, clr, prec = 2) {
  if (true) {
    x1 = constrain(x1, 0, width);
    y1 = constrain(y1, 0, height);
    x2 = constrain(x2, 0, width);
    y2 = constrain(y2, 0, height);
  }
  line(x1, y1, x2, y2);
  // console.log(clr, svgGrps[clr].length);
  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 keyPressed() {
  if (key == "s") {
    saveSvg("epi_dashed_grid.svg.txt");
  }
}
​
function saveSvg(file_name) {
  console.log("saveSvg()", svgGrps);
  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);
}