Hashed Hexagon layers

const SCL = 3;

let svgStr;

​

function setup() {

  createCanvas(210 * SCL, 297 * SCL);

  frameRate(30);

  describe("two hashed hexagon layer");

​

  randomSeed(~~random(hour() + minute() + second()));

  randomSeed(13);

  noiseSeed(random(1234567));

​

  noFill();

  strokeCap(PROJECT);

​

  loop();

}

​

function draw() {

  background(2, 2, 12);

  svgStr = ``;

  let S = min(width, height);

  stroke("gold");

  svgStr += `<g fill="none" stroke="silver" stroke-width="1">\n`;

  drawLayer(S / 7);

  svgStr += `</g>\n`;

​

  stroke("silver");

  svgStr += `<g fill="none" stroke="gold" stroke-width="1">\n`;

  drawLayer(S / 13);

  svgStr += `</g>\n`;

  // noLoop();

}

​

function drawLayer(sze) {

  // evaluate dx and dy for pattern and display them

  const dx = 3 * sze; // S

  const dy = sze / 2 * sqrt(3); // H = S / 2 * sqrt(3);

  for (let y = 0, j = 0; y < height + dy; y += dy, j++) {

    for (let x = (j%2 === 0 ? 0 : dx/2); x < width + dx; x += dx) {

      drawHexagon(x, y, sze+sze);

    }

  }

}

​

// hexagon

function drawHexagon(cx, cy, sze) {

  push();

  // circle(cx, cy, sze);

  const boundaryPoints = [];

  clip(() => {    

    const rad = sze/2;

    const num = 6;

    beginShape();

    for (let i = 0; i < num; i++) {

      const a = TAU * i/num;

      const x = cx + cos(a) * rad;

      const y = cy + sin(a) * rad;

      vertex(x, y);

      boundaryPoints.push({x: constrain(x, 0, width), y: constrain(y, 0, height)});

    }

    endShape(CLOSE);

  });

  const a = noise(cx/321, cy/321, frameCount/123) * TAU;

  const stp = sze/13; // 7;

  // fill(random(32, 212))

  // circle(cx, cy, sze);

  for (let l = 0; l <= sze/2; l += stp) {

    const x = cos(a) * l;

    const y = sin(a) * l;

    const u = cos(a) * sze;

    const v = sin(a) * sze;

​

    {

      const p1 = {x: cx + x, y: cy + y};

      clipLine(p1, {x: cx + x + v, y: cy + y - u}, boundaryPoints); // line(cx + x, cy + y, cx + x + v, cy + y - u)

      clipLine(p1, {x: cx + x - v, y: cy + y + u}, boundaryPoints);

    }

    if (l > 0) {      

      const p1 = {x: cx - x, y: cy - y};

      clipLine(p1, {x: cx - x + v, y: cy - y - u}, boundaryPoints);

      clipLine(p1, {x: cx - x - v, y: cy - y + u}, boundaryPoints);

    }

  }

  pop();

}

​

function mouseClicked() {

  if (mouseButton != RIGHT && mouseX > width * 0.1 && mouseX < width * 0.9) setup();

}

​

function keyPressed() {

  if (key == "s") {

    saveSvg("epi_hashed_hexas.svg.txt");

  }

}

​

function saveSvg(file_name) {

  let svgAll = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;

  svgAll += svgStr;

  svgAll += `</svg>`;

  save(svgAll.split("\n"), file_name);

}