genuary day 22 + day 24 + day26

let svgs = [];
let depth1;
let pArray;

function setup() {
  cnv = createCanvas(600, 600);
  background(255);
  noFill();
  describe(
    "triangle grid drawn with many lines missing to make a fractal-like structure"
  );
  noLoop();
  strokeWeight(1);
  depth1 = random(1, 10);
  pArray = [];
  n = random(1, 4);
  for (let i = 0; i < n; i++) {
    pArray.push(true);
  }
  pArray.push(false);
}

function draw() {
  translate(width / 2, height / 2);
  r = width / 2.5;

  for (let j = 0; j < 3; j++) {
    push();
    rotate((PI / 1.5) * j);
    translate((r / 2) * cos(PI / 3), (r / 2) * sin(PI / 3));

    push();
    for (let i = 1; i < 8; i++) {
      rotate((2 * PI) / 6);

      triangled(r / pow(2, i), 10);
    }
    pop();
    pop();
  }
  push();
  for (let i = 2; i < 8; i++) {
    rotate((2 * PI) / 6);

    triangled(r / pow(2, i), 10);
  }
  pop();
}

function triangled(r, depth) {
  let points = [];
  let rL = random(1.5, 3);
  if (depth < depth1 || r < rL) {
    return;
  }
  let m = drawingContext.getTransform();
  beginShape();
  for (let i = 0; i <= 3; i++) {
    x = r * cos((i * 2 * PI) / 3);
    y = r * sin((i * 2 * PI) / 3);
    if (random(pArray)) {
      let gx = 0 + m.a * x + m.c * y + m.e;
      let gy = 0 + m.b * x + m.d * y + m.f;
      points.push({ x: gx, y: gy });
      vertex(x, y);
    } else {
      if (i === random([1, 2, 3])) {
        return;
      }
    }
  }
  endShape();
  if (points.length > 1) {
    let d = points
      .map((p, i) => (i === 0 ? "M" : "L") + p.x + "," + p.y)
      .join(" ");
    svgs.push(d);
  }

  for (let i = 0; i < 3; i++) {
    a1 = (i * 2 * PI) / 6;
    a2 = ((i + 1) * 2 * PI) / 6;
    mx = (r / 2) * (cos(a1) + cos(a2));
    my = (r / 2) * (sin(a1) + sin(a2));

    push();
    translate(mx, my);
    rotate(PI);
    triangled(r / 2, depth - 1);
    pop();
  }
}

function keyPressed() {
  if (keyCode === 83) {
    saveSVG();
  } else if (keyCode === 32) {
    points = [];
    svgs = [];
    clear();
    setup();
    draw();
  }
}

function saveSVG() {
  let svg = `<svg xmlns="http://www.w3.org/2000/svg" 
    width="1200px" 
    height="1200px" 
    viewBox="0 0 1200 1200">
    ${svgs
      .map(
        (d) => `<path d="${d} Z" fill="none" stroke="black" stroke-width="1" />`
      )
      .join("\n")}
  </svg>`;
  saveStrings([svg], "genuary", "svg");
}