Zentangle Color 1 - OpenProcessing

mySketch
myDrawings
helper
xxxxxxxxxx
 
/*
  Zentangle #WCCChallenge 250402 
  https://openprocessing.org/sketch/2599861
  #generativeart #creativecoding #p5js
​
  Dear Raph and creative coding community,
  
  took the opportunity to wok on my drawing function helper.
  Have to figure out for the future, how to best separate this functions
  to best include it later via unpkg.com, jsdelivr.com or similar, 
  to not c&p it due the latest skecthes :/ 
  
  inspiration from several images, eg
  https://www.google.com/search?client=firefox-b-d&q=zentangle
  
  Join the Birb's Nest Discord for friendly creative coding community
  and future challenges and contributions: https://discord.gg/S8c7qcjw2b
  WCCC-Contributions: https://openprocessing.org/curation/78544
*/
​
let S, MAR;
let svgStr;
let circles;
let cnt = 0;
​
function setup() {
  S = min(windowWidth, windowHeight)
  createCanvas(S*4/3, S);
  describe("random lines and circles fitting into areas")
  colorMode(HSB, 255);
  MAR = 10//~~(S * 0.05);
  background(240);
  //stroke(2, 2, 8);
  stroke(0);
  strokeWeight(2);
  fill(255);
  loop();
}
​
function draw() {
  svgStr = '';
  const zenFc = random[zen1, zen2];
  zen1(MAR, MAR, width - 2 * MAR, height - 2 * MAR);
  noLoop();
}
​
function mousePressed() {
  if (mouseButton !== RIGHT && mouseX > 0.1 * width && mouseX < 0.9 * width) setup();
}
​
function zen1(x, y, w, h) {
  const boundaryPoints = [
    {x: x, y: y},
    {x: x + w, y: y},
    {x: x + w, y: y + h},
    {x: x, y: y + h},
  ];
​
  rect(x, y, w, h);
  const cx = x + ~~(random(0.2, 0.8) * w);
  const cy = y + ~~(random(0.2, 0.8) * h);
  const l = max(w, h) * 1.5;
  const n = 12; // ~~random(7, 15) * 2;
  let areas = [];
  const aa = random(TAU);
  for (let i = 0; i < n; i++) {
    const a = aa + i / n * TAU + random(-0.05, 0.05);
    const v = createVector(l, 0).rotate(a);
    // line(cx, cy, cx+v.x, cy+v.y);
    const p1 = {x: cx, y: cy};
    const p2 = {x: cx + v.x, y: cy + v.y};
    areas.push(clipLine(p1, p2, boundaryPoints));
  }
​
  const off = ~~random(areas.length);
  for (let j = 0; j < areas.length; j += 1) {
    const a1 = areas[j];
    const a2 = areas[(j+1) % areas.length];
    const areaPts = correctAreaPts([
      {x: a1[0].x, y: a1[0].y},
      {x: a1[1].x, y: a1[1].y},
      {x: a2[1].x, y: a2[1].y},
    ]);
​
    svgStr += `<g stroke="#000000" stroke-width="1" fill="none">\n`;
    //cnt=0;
    for (let cnt=0; cnt<3; cnt++){
    if ((j+off) % 5 === 0) {
      if (cnt==0) stroke(0, 255, 255)
      if (cnt==1) stroke(18, 255, 255)
      if (cnt==2) stroke(36, 255, 255)
      fillAreaCircles(areaPts)
    } else if ((j+off) % 5 === 1) {
      if (cnt==0) stroke(54, 255, 255)
      if (cnt==1) stroke(72, 255, 255)
      if (cnt==2) stroke(90, 255, 255)
      fillAreaRadial(areaPts);
    } else if ((j+off) % 5 === 2) {
      if (cnt==0) stroke(108, 255, 255)
      if (cnt==1) stroke(126, 255, 255)
      if (cnt==2) stroke(144, 255, 255)
      fillAreaWaves(areaPts, random(20, 50));
    } else if ((j+off) % 5 === 3) {
      if (cnt==0) stroke(162, 255, 255)
      if (cnt==1) stroke(180, 255, 255)
      if (cnt==2) stroke(196, 255, 255)
      fillAreaRandom(areaPts, random(20, 50)); 
    } else if ((j+off) % 5 === 4) {
      if (cnt==0) stroke(214, 255, 255)
      if (cnt==1) stroke(232, 255, 255)
      if (cnt==2) stroke(250, 255, 255)
      fillAreaLines(areaPts);
    }
    svgStr += `</g>\n`;
  }
  }
}
​
​
function zen2(x, y, w, h) {
  const boundaryPoints = [
    {x: x, y: y},
    {x: x + w, y: y},
    {x: x + w, y: y + h},
    {x: x, y: y + h},
  ];
​
  rect(x, y, w, h);
  noFill();
  const cx = x + ~~(random(0.3, 0.7) * w);
  const cy = y + ~~(random(0.3, 0.7) * h);
​
  let n = ~~random(2, 7);
  const dia = min(w, h) / n;
  n *= 2;
  for (let i = 1; i < n; i++) {
    const d = dia * i;
    const dx = random(-dia / 6, dia / 6);
    const dy = random(-dia / 6, dia / 6);
    // circle(cx + dx, cy + dy, d);
    clipArc(cx + dx, cy + dy, d, d, 0, TAU, boundaryPoints); // circle(cx, cy, d, d)
  }
}
​
function keyPressed() {
  if (key == "s") {
    saveSvg("epi_zentangle.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);
}