// Day 121
/*

=======================================
  Day 121 Self-Portrait (Astral Oversteps)
=======================================

### Title: *Astral Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, chord-based geometry, skipping adjacency, radial symmetry,
              identity, geometry, emergent patterns

### Conceptual Framework

Right now, I sense that my identity makes leaps beyond immediate connections,
skipping across what feels near to reach unexpected alignments. In "Astral Oversteps,"
I illustrate this experience by drawing a set of star polygons, each anchored
at the center of the canvas but formed by “skipping” over adjacent points on
their respective circles. Each polygon thus weaves inward and outward, forging
lines that crisscross the circle and intersect in surprising ways. This star‐based
language reflects the idea that my many facets, while sharing a common center,
pursue their own unique paths. The chords represent the leaps of perspective
that compose who I am: a tangle of relationships formed as much by what I step
around as by what I touch directly.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '121';          // Day number for file naming

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  minStarPolygons: 3,  // Number of star polygons (min)
  maxStarPolygons: 7,  // Number of star polygons (max)
  minPoints: 5,        // Minimum number of points on each star
  maxPoints: 12,       // Maximum number of points on each star
  starRadiusMin: 50,   // Minimum radius of a star polygon
  starRadiusMax: 300   // Maximum radius of a star polygon
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // Randomized in setup
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathDataByColor = {};          // To track paths for each color
let numStarPolygons;               // How many star polygons we'll draw

/**
 * p5.js color application with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Initialize canvas dimensions
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Initialize margins
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Decide how many star polygons to draw
  numStarPolygons = floor(random(generationRules.minStarPolygons, generationRules.maxStarPolygons + 1));

  drawShapes();
  noLoop();
}

/**
 * Adjust for stroke weight
 */
function adjustForStrokeWeight() {
  // ~0.5mm => about 2px at 100ppi
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Color Selection
 */
function selectColors() {
  // Choose 2 to 5 unique colors randomly
  let numColorsToUse = floor(random(2, 6)); // 2..5
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);

  selectedColorIndices = [];
  for (let i = 0; i < numColorsToUse; i++) {
    selectedColorIndices.push(allIndices[i]);
  }
  selectedColorIndices.sort((a, b) => a - b);

  // Initialize path data for each chosen color
  selectedColorIndices.forEach(idx => {
    pathDataByColor[idx] = '';
  });
}

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */

function drawShapes() {
  background(255);

  // Clear path data
  Object.keys(pathDataByColor).forEach(key => {
    pathDataByColor[key] = '';
  });

  // We'll place star polygons all centered in the middle of the canvas
  // but each will have a different radius and skip pattern.
  let cx = width / 2;
  let cy = height / 2;

  // Round-robin color usage or random usage
  let colorPool = [...selectedColorIndices];

  for (let i = 0; i < numStarPolygons; i++) {
    // If we exhaust colorPool, refill it
    if (colorPool.length === 0) {
      colorPool = [...selectedColorIndices];
    }
    let colorIndex = colorPool.splice(floor(random(colorPool.length)), 1)[0];
    usedColors.add(colorIndex);

    // Random radius
    let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);

    // Ensure it doesn't exceed the work area
    // We'll clamp to (width/2 - margin)
    let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
    r = min(r, maxPossible);

    // Random number of points
    let n = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));

    // Random skip
    // Typically, star polygons are formed by a skip k where gcd(n, k) = 1
    // We'll pick a random k that is relatively prime to n
    let validSkips = [];
    for (let s = 2; s < n; s++) {
      if (gcd(n, s) === 1) {
        validSkips.push(s);
      }
    }
    if (validSkips.length === 0) {
      // fallback if no skip found (unlikely)
      validSkips = [1];
    }
    let skip = random(validSkips);

    drawStarPolygon(cx, cy, r, n, skip, colorIndex);
  }

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Draw a star polygon by skipping `skip` points on a circle of radius r,
 * with n total points. We'll create one continuous path that visits all points
 * in a closed cycle. The path is placed in pathDataByColor for the selected color.
 */
function drawStarPolygon(cx, cy, r, n, skip, colorIndex) {
  applyStrokeWithOpacity(colors[colorIndex].hex);
  strokeWeight(strokeWeightValue);

  // We'll store vertex coordinates in an array
  let pts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    let x = cx + r * cos(angle);
    let y = cy + r * sin(angle);
    pts.push({ x, y });
  }

  // We want to trace out the star in a single stroke if possible
  // starting from point 0, jump skip each time, until we come back to 0
  let visited = new Array(n).fill(false);
  let currentIndex = 0;
  let pathSegments = [];
  pathSegments.push(`M${pts[currentIndex].x.toFixed(2)},${pts[currentIndex].y.toFixed(2)}`);

  let nextIndex = (currentIndex + skip) % n;
  while (!visited[nextIndex]) {
    pathSegments.push(`L${pts[nextIndex].x.toFixed(2)},${pts[nextIndex].y.toFixed(2)}`);
    visited[nextIndex] = true;
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // Close the star if it hasn't come back to the start
  pathSegments.push(`L${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`);

  // Draw on canvas
  beginShape();
  pathSegments.forEach((cmd, i) => {
    if (i === 0) {
      let coords = cmd.substring(1).split(',');
      let x = float(coords[0]);
      let y = float(coords[1]);
      vertex(x, y);
    } else {
      let coords = cmd.substring(1).split(',');
      let x = float(coords[0]);
      let y = float(coords[1]);
      vertex(x, y);
    }
  });
  endShape();

  // Append to path data
  let starPath = pathSegments.join(' ');
  pathDataByColor[colorIndex] += starPath + ' ';
}

/**
 * Greatest Common Divisor for skip logic
 */
function gcd(a, b) {
  if (!b) return a;
  return gcd(b, a % b);
}

/**
 * =======================================
 * Utility Functions
 * =======================================
 */

function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  let numColors = usedColorsOrdered.length;
  if (numColors === 0) return;
  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);
  usedColorsOrdered.forEach((colorIndex, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    line(x, yStart, x + segmentLength, yStart);
  });
}

function resetCanvas() {
  usedColors.clear();
  drawShapes();
}

/**
 * p5.js Key Press Handling
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */

function saveSVGs() {
  const timestamp = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  usedColorsOrdered.forEach((colorIndex) => {
    let colorSVG = generateSVG(colorIndex);
    let colorName = colors[colorIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  // If activeColor == 0, include all colors in layers
  // else include only that single color
  if (activeColor === 0) {
    let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
    usedColorsOrdered.forEach((colorIndex, idx) => {
      svgContent += addSegmentsSVG(colorIndex, idx + 1);
    });
  } else {
    let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
    let idx = usedColorsOrdered.indexOf(activeColor) + 1;
    svgContent += addSegmentsSVG(activeColor, idx);
  }

  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let c = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
   style="display:inline"
   stroke="${c.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${c.hex}">n`;

  // Use the color-specific path data
  if (pathDataByColor[colorIndex] && pathDataByColor[colorIndex] !== '') {
    svg += `<path d="${pathDataByColor[colorIndex]}" stroke-width="${strokeWidth}" fill="none" />n`;
  }

  // Add palette bar for this color
  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);

    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${c.hex}" stroke-opacity="${strokeOpacity}"
      stroke-width="${barHeight}" fill="none"/>n`;
  }

  svg += '</g>n';
  return svg;
}

function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
          stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day XXX - DEMO of a Layer-based “Clipping” Approach
/*
=======================================
  Layer-based Clipping Demo
=======================================

### Title: *Layered Subtraction Example*

### Medium: Generative Drawing on Paper

### Keywords: generative art, geometry, layering, line clipping, path subtraction,
              artificial intelligence, digital art, algorithmic art

### Conceptual Framework

This code demonstrates how to preserve the
“stacked” or layered visual effect from the canvas
by clipping out any segments behind newly drawn paths.
It’s a conceptual example—true geometry subtraction
can be much more complicated with arcs or polygons.

---
*/

// -- Canvas / export constants
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = 'XXX';

// We store each path in an array, in the order they’re drawn
// Each element is { colorIndex, segments: [ {x1,y1,x2,y2}, ... ] }
let drawnPaths = [];

// The color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA',  ink:117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;
let strokeWeightValue = 2; // ~0.5 mm
let selectedColorIndices = [];

function setup() {
  createCanvas(canvasWidthInches * pixelsPerInch, canvasHeightInches * pixelsPerInch);
  background(255);

  // Example: pick 3 random colors
  selectedColorIndices = pickRandomColors(3);

  // Let’s just do a couple random lines for demonstration
  // (In a real scenario, you’d do star polygons, arcs, etc.)
  // 1) Draw a big diagonal in color #1
  let pathA = createLinePath(width*0.1, height*0.1, width*0.9, height*0.9, selectedColorIndices[0]);
  addPathToLayers(pathA);

  // 2) Another line that crosses the first, color #2
  let pathB = createLinePath(width*0.9, height*0.1, width*0.1, height*0.9, selectedColorIndices[1]);
  addPathToLayers(pathB);

  // 3) Another line on top, color #3
  let pathC = createLinePath(width*0.5, 0, width*0.5, height, selectedColorIndices[2]);
  addPathToLayers(pathC);

  noLoop();
}

function draw() {
  // Just re-draw the final version from our stored (and clipped) segments
  background(255);
  strokeWeight(strokeWeightValue);

  for (let i = 0; i < drawnPaths.length; i++) {
    let p = drawnPaths[i];
    let col = color(colors[p.colorIndex].hex);
    col.setAlpha(255 * strokeOpacity);
    stroke(col);

    for (let seg of p.segments) {
      line(seg.x1, seg.y1, seg.x2, seg.y2);
    }
  }

  // Optionally draw debug markers, palette, etc.
}

/** Creates a path object from a single line. 
 * Real usage might store an array of segments for a star polygon. */
function createLinePath(x1, y1, x2, y2, colorIndex) {
  return {
    colorIndex: colorIndex,
    segments: [
      { x1, y1, x2, y2 }
    ]
  };
}

/** 
 * Adds a newly drawn path to the top layer, 
 * and clips out any overlapping segments from older layers. 
 */
function addPathToLayers(newPath) {
  // 1) Clip older paths if the new path “covers” them 
  //    (In reality, you’d do actual geometry to see if the new path covers them 
  //     or we do a bounding shape to “erase” them.)
  for (let i = 0; i < drawnPaths.length; i++) {
    let oldPath = drawnPaths[i];
    oldPath.segments = subtractSegments(oldPath.segments, newPath.segments);
  }

  // 2) Add the new path on top
  drawnPaths.push(newPath);
}

/** 
 * Example subtractSegments function:
 * For each line in oldSegments, we remove any portion that overlaps newSegments. 
 * This example does naive line intersection with no thickness. 
 * Real usage = more robust approach or polygon fill approach. 
 */
function subtractSegments(oldSegments, newSegments) {
  let result = [];

  // For each old segment, we check if it intersects with any newSegments
  // If it doesn’t, keep it. If it partially intersects, we cut out the overlap region. 
  // This is simplistic: we treat lines as infinitely thin, ignoring stroke thickness.
  for (let oldSeg of oldSegments) {
    let keepParts = [ oldSeg ]; // start with entire segment
    for (let newSeg of newSegments) {
      // Subdivide or remove keepParts that intersect with newSeg
      keepParts = keepParts.flatMap(os => cutOverlap(os, newSeg));
      if (keepParts.length === 0) break; // fully removed
    }
    result.push(...keepParts);
  }
  return result;
}

/**
 * cutOverlap(os, ns): 
 * Given two line segments, oldSeg (os) and newSeg (ns), 
 * returns an array of zero, one, or two sub-segments of `os` 
 * that remain after removing any overlapping portion with `ns`.
 * This is a placeholder: real geometry can be quite complicated. 
 */
function cutOverlap(os, ns) {
  // 1) If they do not intersect, return [os].
  // 2) If they share partial overlap, cut out that portion.
  // 3) If ns fully covers os, return [].

  // For demonstration, let's do a trivial check: 
  // We'll treat any intersection point as cutting the line in half, etc.

  let intersection = lineIntersection(os, ns);
  if (!intersection) {
    // no intersection => keep entire old segment
    return [os];
  }
  // If there's an intersection, we do a naive split:
  // We'll just split os at the intersection point, 
  // but remove any portion that is "on top" of newSeg. 
  // This is just to show concept; real logic is more complex.
  
  // intersection param t on oldSeg
  let t = intersection.t1; // from the lineIntersection routine
  if (t < 0 || t > 1) {
    // Intersection is beyond the segment ends => no real overlap
    return [os];
  }

  // We'll cut os into two sub-segments: [0..t], [t..1]
  let midx = lerp(os.x1, os.x2, t);
  let midy = lerp(os.y1, os.y2, t);

  let segA = { x1: os.x1, y1: os.y1, x2: midx, y2: midy };
  let segB = { x1: midx, y1: midy, x2: os.x2, y2: os.y2 };

  // In a more advanced approach, you'd check which side is truly "covered" 
  // by the new segment. For now, let's just pretend we remove segB. 
  return [ segA ];
}

/**
 * lineIntersection(os, ns):
 * Returns an object with intersection info {x, y, t1, t2} 
 * or null if no intersection (2D param approach).
 */
function lineIntersection(a, b) {
  // Parametric line eqn approach
  let denom = (b.y2 - b.y1)*(a.x2 - a.x1) - (b.x2 - b.x1)*(a.y2 - a.y1);
  if (abs(denom) < 1e-9) return null; // parallel or nearly so

  let ua = ((b.x2 - b.x1)*(a.y1 - b.y1) - (b.y2 - b.y1)*(a.x1 - b.x1)) / denom;
  let ub = ((a.x2 - a.x1)*(a.y1 - b.y1) - (a.y2 - a.y1)*(a.x1 - b.x1)) / denom;

  // If we consider line segments, check 0 <= ua <= 1 and 0 <= ub <= 1 for intersection within the segments
  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) return null; 

  let x = a.x1 + ua*(a.x2 - a.x1);
  let y = a.y1 + ua*(a.y2 - a.y1);
  return { x, y, t1: ua, t2: ub };
}

/**
 * Utility to pick n random color indices
 */
function pickRandomColors(n) {
  let all = Object.keys(colors).map(k => parseInt(k));
  shuffle(all, true);
  return all.slice(0, n).sort((a,b) => a - b);
}

// =============== SVG Export ===============

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  }
}

function saveSVGs() {
  let svgData = generateSVG();
  let ts = Date.now();
  saveSVGFile(svgData, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);
}

/** 
 * We now output each path in the order it was drawn 
 * (from drawnPaths[0], the bottom layer, up to the top). 
 */
function generateSVG() {
  let w = width;
  let h = height;
  let svgContent = `<svg version="1.1" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Markers if you want them
  svgContent += addMarkersSVG();

  // Each path in the order it was drawn
  for (let i = 0; i < drawnPaths.length; i++) {
    let p = drawnPaths[i];
    let c = colors[p.colorIndex];
    svgContent += `<g
  inkscape:groupmode="layer"
  id="layer${i}"
  inkscape:label="${p.colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
  style="display:inline"
  stroke="${c.hex}"
  stroke-opacity="${strokeOpacity}"
  stroke-width="${strokeWeightValue}"
  fill="none">n`;

    // Build the path “d” string from segments
    let dString = '';
    for (let seg of p.segments) {
      dString += `M${seg.x1.toFixed(2)},${seg.y1.toFixed(2)}L${seg.x2.toFixed(2)},${seg.y2.toFixed(2)} `;
    }

    svgContent += `<path d="${dString}" />n`;
    svgContent += `</g>n`;
  }

  svgContent += '</svg>';
  return svgContent;
}

function addMarkersSVG() {
  let sw = 1;
  let offset = sw / 2;
  return `<g
    inkscape:groupmode="layer"
    id="layer0"
    inkscape:label="0-markers"
    style="display:inline"
    stroke="black"
    stroke-opacity="${strokeOpacity}"
    inkscape:highlight-color="black">
  <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
           M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
           L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
           L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
        stroke-width="${sw}" fill="none" />
  </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Astral Oversteps) - Layered Occlusion
=======================================

### Title: *Astral Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, chord-based geometry, skipping adjacency, radial symmetry,
              identity, geometry, emergent patterns, layered occlusion, line clipping

### Conceptual Framework

Right now, I sense that my identity makes leaps beyond immediate connections,
skipping across what feels near to reach unexpected alignments. In "Astral Oversteps,"
I illustrate this experience by drawing a set of star polygons, each anchored
at the center of the canvas but formed by “skipping” over adjacent points on
their respective circles. Each polygon thus weaves inward and outward, forging
lines that crisscross the circle and intersect in surprising ways. This star‐based
language reflects the idea that my many facets, while sharing a common center,
pursue their own unique paths. 

To capture a more realistic sense of stacking, each new star polygon hides any 
lower lines behind its shape. By clipping out the occluded segments, the final 
view mirrors how we’d see these layers in a physical space—only the visible 
portions remain.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '121';          // Day number for file naming

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  minStarPolygons: 3,  // Minimum number of star polygons
  maxStarPolygons: 7,  // Maximum number of star polygons
  minPoints: 5,        // Minimum number of points on each star
  maxPoints: 12,       // Maximum number of points on each star
  starRadiusMin: 50,   // Min radius of a star polygon
  starRadiusMax: 300   // Max radius of a star polygon
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;     
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// We'll store all shapes in this array, from bottom to top
// shape = {
//   colorIndex: <int>,
//   polygon: [ {x,y}, {x,y}, ... ],   // closed polygon for occlusion
//   lineSegments: [ [x1,y1,x2,y2], ... ]  // edges of the star
// }
let shapes = [];

/**
 * p5.js color application with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Initialize canvas dimensions
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Decide how many star polygons to draw
  let numStarPolygons = floor(random(generationRules.minStarPolygons, generationRules.maxStarPolygons + 1));

  // Generate all shapes (bottom to top)
  generateAllShapes(numStarPolygons);

  // Now apply layering: clip lower shapes by higher shapes
  applyOcclusionLayering();

  // Finally, we draw the clipped shapes to the canvas 
  // so the canvas display matches the fully clipped result.
  background(255);
  drawMarkers();
  addColorPaletteBars();
  renderClippedShapesOnCanvas();

  noLoop();
}

/**
 * Adjust for stroke weight
 */
function adjustForStrokeWeight() {
  // ~0.5mm => about 2px at 100ppi
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Color Selection
 */
function selectColors() {
  // Choose 2 to 5 unique colors randomly
  let numColorsToUse = floor(random(2, 6)); // 2..5
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);

  selectedColorIndices = [];
  for (let i = 0; i < numColorsToUse; i++) {
    selectedColorIndices.push(allIndices[i]);
  }
  selectedColorIndices.sort((a, b) => a - b);
}

/**
 * =======================================
 * Generating Shapes
 * =======================================
 */

function generateAllShapes(numStarPolygons) {
  shapes = [];
  let cx = width / 2;
  let cy = height / 2;

  // We'll do a round-robin or random color usage
  let colorPool = [...selectedColorIndices];

  for (let i = 0; i < numStarPolygons; i++) {
    // If colorPool is empty, refill it
    if (colorPool.length === 0) {
      colorPool = [...selectedColorIndices];
    }
    let colorIndex = colorPool.splice(floor(random(colorPool.length)), 1)[0];
    usedColors.add(colorIndex);

    // Random radius
    let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
    // Ensure it doesn't exceed the margin
    let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
    r = min(r, maxPossible);

    // Random number of points
    let n = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));

    // Random skip (k) such that gcd(n,k)=1
    let validSkips = [];
    for (let s = 2; s < n; s++) {
      if (gcd(n, s) === 1) {
        validSkips.push(s);
      }
    }
    if (validSkips.length === 0) {
      validSkips = [1]; // fallback
    }
    let skip = random(validSkips);

    // Build star polygon
    let { polygonPoints, lineSegments } = buildStarPolygon(cx, cy, r, n, skip);

    shapes.push({
      colorIndex,
      polygon: polygonPoints,       // closed polygon for occlusion
      lineSegments                  // line edges of the star
    });
  }
}

/**
 * Build the star polygon's geometry:
 *  - polygonPoints: The entire ring of points in star order (closed).
 *  - lineSegments: Array of segments [x1,y1,x2,y2].
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  // We'll first create the n points in a circle
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    let x = cx + r * cos(angle);
    let y = cy + r * sin(angle);
    circlePts.push({ x, y });
  }

  // We trace out the star by skipping skip points each time
  let visited = new Array(n).fill(false);
  let starOrder = []; // the order in which we visit points

  let currentIndex = 0;
  starOrder.push(currentIndex);
  visited[currentIndex] = true;
  let nextIndex = (currentIndex + skip) % n;

  // We'll keep stepping until we come back to 0
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    visited[nextIndex] = true;
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // starOrder is the index sequence for the star polygon
  // Build line segments
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // For occlusion, we want the closed polygon that encloses the star's shape
  // Typically, the star shape is a single cycle that may cross over itself. 
  // We'll just store the same star order as "polygonPoints" (closing it).
  let polygonPoints = starOrder.map(idx => ({
    x: circlePts[idx].x,
    y: circlePts[idx].y
  }));
  // Ensure it is "closed" by repeating the first point
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * Greatest Common Divisor (for skip logic)
 */
function gcd(a, b) {
  if (!b) return a;
  return gcd(b, a % b);
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 */

/**
 * For shape i (bottom) to shape i+1..end (top),
 * we remove any portion of shape i's lineSegments 
 * that lies inside shape k's polygon. 
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      // Clip the lower shape's lineSegments by the upper shape's polygon
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(
        lowerShape.lineSegments, 
        upperShape.polygon
      );
    }
  }
}

/**
 * Clip an array of line segments so that any portion 
 * inside the polygon is removed. We treat the polygon 
 * as an opaque fill that occludes everything inside.
 *
 * Returns a new array of segments that remain visible 
 * outside the polygon.
 */
function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  // polygon is an array of points {x,y} with last = first
  for (let seg of lineSegments) {
    let clippedSubs = clipLineSegment(seg, polygon);
    for (let c of clippedSubs) {
      result.push(c);
    }
  }
  return result;
}

/**
 * Clip a single line segment [x1,y1,x2,y2] so that 
 * any portion inside 'polygon' is removed. 
 * We return an array of 0..N sub-segments that lie 
 * strictly outside the polygon.
 */
function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;

  // 1. Find all intersections with polygon edges
  // 2. Subdivide the line segment at intersection points
  // 3. Keep only sub-segments whose midpoint is outside

  // Build an array of "cut points" along the param t in [0..1]
  let cutParams = [];
  // Add t=0 and t=1 so we can do a piecewise check
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });

  // Loop over edges of polygon
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(
      x1, y1, x2, y2,
      pA.x, pA.y, pB.x, pB.y
    );
    if (inter !== null) {
      // param is inter.t1 for the first line
      if (inter.t1 >= 0 && inter.t1 <= 1) {
        cutParams.push({
          t: inter.t1,
          x: inter.x,
          y: inter.y
        });
      }
    }
  }

  // Sort cutParams by t
  cutParams.sort((a, b) => a.t - b.t);

  // Now build sub-segments
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) {
      continue; // skip zero-length
    }
    // midpoint param
    let tM = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tM;
    let my = y1 + (y2 - y1) * tM;
    // check if midpoint is inside polygon
    let inside = pointInPolygon(mx, my, polygon);
    if (!inside) {
      // keep the sub-segment
      let sx1 = cutParams[i].x;
      let sy1 = cutParams[i].y;
      let sx2 = cutParams[i + 1].x;
      let sy2 = cutParams[i + 1].y;
      outSegments.push([sx1, sy1, sx2, sy2]);
    }
  }

  return outSegments;
}

/**
 * Check intersection of two line segments (A-B and C-D).
 * Returns {x,y,t1,t2} or null if no intersection.
 * t1 is the param along A-B, t2 is param along C-D.
 */
function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) {
    return null; // parallel or very close
  }
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  let x = ax1 + ua * (ax2 - ax1);
  let y = ay1 + ua * (ay2 - ay1);
  return { x, y, t1: ua, t2: ub };
}

/**
 * Ray-casting method to check if point is inside polygon.
 * polygon is array of points {x,y}, last=first.
 */
function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let x1 = polygon[i].x;
    let y1 = polygon[i].y;
    let x2 = polygon[i + 1].x;
    let y2 = polygon[i + 1].y;
    let intersect = ((y1 > py) !== (y2 > py)) &&
      (px < (x2 - x1) * (py - y1) / (y2 - y1) + x1);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * =======================================
 * Final Rendering on Canvas
 * =======================================
 */

/**
 * We now have shapes whose lineSegments have been clipped
 * to account for occlusion from above layers.
 * This function draws them from bottom to top on the canvas.
 */
function renderClippedShapesOnCanvas() {
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);

    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

/**
 * =======================================
 * Markers & Palette Bars
 * =======================================
 */

function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  let numColors = usedColorsOrdered.length;
  if (numColors === 0) return;
  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);
  usedColorsOrdered.forEach((colorIndex, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    line(x, yStart, x + segmentLength, yStart);
  });
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    usedColors.clear();
    shapes = [];
    background(255);
    setup(); // re-generate everything
  }
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */

function saveSVGs() {
  const timestamp = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  usedColorsOrdered.forEach((colorIndex) => {
    let colorSVG = generateSVG(colorIndex);
    let colorName = colors[colorIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

/**
 * Generate the SVG. If activeColor=0, we include all shapes in layers.
 * Otherwise, we include only the shape segments of that color.
 */
function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  // We'll build up each color layer
  if (activeColor === 0) {
    // All used colors
    let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
    // We'll group shapes by color to minimize layers
    // but note that each color might appear multiple times.
    // Alternatively, we can just do shape by shape in order. 
    // For simplicity, let's group them by color in a single path if possible.

    // We need to track the final line segments for each color
    let colorSegments = {};
    usedColorsOrdered.forEach(idx => {
      colorSegments[idx] = [];
    });

    // Gather line segments
    for (let i = 0; i < shapes.length; i++) {
      let sh = shapes[i];
      colorSegments[sh.colorIndex].push(...sh.lineSegments);
    }

    usedColorsOrdered.forEach((cidx, layerNum) => {
      svgContent += addSegmentsSVG(cidx, layerNum + 1, colorSegments[cidx]);
    });

  } else {
    // Single color
    let cidx = activeColor;
    let layerSegments = [];
    // Gather all shapes of that color
    for (let i = 0; i < shapes.length; i++) {
      if (shapes[i].colorIndex === cidx) {
        layerSegments.push(...shapes[i].lineSegments);
      }
    }
    // If none found, we might have an empty layer
    svgContent += addSegmentsSVG(cidx, 1, layerSegments);
  }

  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, segments) {
  let svg = '';
  let c = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
   style="display:inline"
   stroke="${c.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${c.hex}">n`;

  // Build path data for all segments
  if (segments.length > 0) {
    let pathData = '';
    for (let seg of segments) {
      let [x1, y1, x2, y2] = seg;
      pathData += `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)} `;
    }
    svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
  }

  // Add palette bar for this color
  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);

    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${c.hex}" stroke-opacity="${strokeOpacity}"
      stroke-width="${barHeight}" fill="none"/>n`;
  }

  svg += '</g>n';
  return svg;
}

function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
          stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Astral Oversteps) - Layered Occlusion
=======================================

### Title: *Astral Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, chord-based geometry, skipping adjacency, radial symmetry,
              identity, geometry, emergent patterns, layered occlusion, line clipping

### Conceptual Framework

Right now, I sense that my identity makes leaps beyond immediate connections,
skipping across what feels near to reach unexpected alignments. In "Astral Oversteps,"
I illustrate this experience by drawing a set of star polygons, each anchored
at the center of the canvas but formed by “skipping” over adjacent points on
their respective circles. Each polygon thus weaves inward and outward, forging
lines that crisscross the circle and intersect in surprising ways.

To capture a more realistic sense of stacking, each new star polygon is treated as
an opaque region that hides any lower layers beneath it. After generating all shapes,
I procedurally clip (remove) portions of lower-layer line segments that fall inside a higher
layer’s polygon—just as if you were looking from above at a physical stack. The final
rendering and exported SVG only include what’s visible from the top.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width in inches
const canvasHeightInches = 11;    // Height in inches
const pixelsPerInch = 100;        // Resolution
const dayNumber = '121';          // Day number

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  minStarPolygons: 3,  // Minimum star polygons
  maxStarPolygons: 7,  // Maximum star polygons
  minPoints: 5,        // Minimum points per star
  maxPoints: 12,       // Maximum points per star
  starRadiusMin: 50,   // Minimum radius
  starRadiusMax: 300   // Maximum radius
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// Array of shapes, each with:
// { colorIndex, polygon: [ {x,y}, ... ], lineSegments: [ [x1,y1,x2,y2], ... ] }
let shapes = [];

/**
 * Apply stroke color with set opacity.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Initialize canvas
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Randomize work area margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Decide number of star polygons to draw
  let numStarPolygons = floor(random(generationRules.minStarPolygons, generationRules.maxStarPolygons + 1));

  // Generate all star polygons (store both polygon and line segments)
  generateAllShapes(numStarPolygons);

  // Now, simulate stacking by clipping lower layers against higher ones
  applyOcclusionLayering();

  // Render the final (clipped) shapes on canvas
  background(255);
  drawMarkers();
  addColorPaletteBars();
  renderClippedShapesOnCanvas();

  noLoop();
}

/**
 * Adjust stroke weight (approx. 0.5mm ~ 2px)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors.
 */
function selectColors() {
  let numColorsToUse = floor(random(2, 6)); // between 2 and 5 colors
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  selectedColorIndices = allIndices.slice(0, numColorsToUse);
  selectedColorIndices.sort((a, b) => a - b);
}

/**
 * =======================================
 * Generate All Shapes
 * =======================================
 */
function generateAllShapes(numStarPolygons) {
  shapes = [];
  let cx = width / 2;
  let cy = height / 2;
  let colorPool = [...selectedColorIndices];

  for (let i = 0; i < numStarPolygons; i++) {
    if (colorPool.length === 0) {
      colorPool = [...selectedColorIndices];
    }
    let colorIndex = colorPool.splice(floor(random(colorPool.length)), 1)[0];
    usedColors.add(colorIndex);

    // Random radius (clamped by margins)
    let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
    let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
    r = min(r, maxPossible);

    // Random number of points and skip value (ensuring gcd(n,k) == 1)
    let n = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));
    let validSkips = [];
    for (let s = 2; s < n; s++) {
      if (gcd(n, s) === 1) {
        validSkips.push(s);
      }
    }
    if (validSkips.length === 0) validSkips = [1];
    let skip = random(validSkips);

    // Build the star polygon geometry
    let { polygonPoints, lineSegments } = buildStarPolygon(cx, cy, r, n, skip);
    shapes.push({ colorIndex, polygon: polygonPoints, lineSegments });
  }
}

/**
 * Build a star polygon given center, radius, points, and skip.
 * Returns:
 *  - polygonPoints: Array of {x, y} (closed, first point repeated at end)
 *  - lineSegments: Array of segments [x1, y1, x2, y2]
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    circlePts.push({ x: cx + r * cos(angle), y: cy + r * sin(angle) });
  }

  // Determine star order by skipping
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // Build line segments following the star order
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // For occlusion, use the same ordered points as the polygon (closed)
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * Greatest Common Divisor (used for skip logic)
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 * For each shape (from bottom to top), clip its line segments by every higher shape’s polygon.
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

/**
 * Clip an array of line segments so that any part inside the polygon is removed.
 */
function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

/**
 * Clip a single line segment [x1, y1, x2, y2] against a polygon.
 * Returns an array of sub-segments (each as [x1,y1,x2,y2]) that lie outside the polygon.
 */
function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  // Always include endpoints
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });
  
  // Check intersections with each polygon edge
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter !== null && inter.t1 >= 0 && inter.t1 <= 1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }
  
  // Sort cut points along the segment
  cutParams.sort((a, b) => a.t - b.t);
  
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) continue;
    let tMid = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tMid;
    let my = y1 + (y2 - y1) * tMid;
    // If midpoint is outside polygon, keep this sub-segment.
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([cutParams[i].x, cutParams[i].y, cutParams[i+1].x, cutParams[i+1].y]);
    }
  }
  return outSegments;
}

/**
 * Compute intersection between two segments:
 * Segment A: (ax1,ay1)-(ax2,ay2)
 * Segment B: (bx1,by1)-(bx2,by2)
 * Returns { x, y, t1, t2 } where t1 and t2 are parameters along A and B.
 */
function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  return { x: ax1 + ua * (ax2 - ax1), y: ay1 + ua * (ay2 - ay1), t1: ua, t2: ub };
}

/**
 * Ray-casting algorithm: check if point (px,py) is inside polygon.
 * Polygon is an array of points {x,y} (assumed closed).
 */
function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let xi = polygon[i].x, yi = polygon[i].y;
    let xj = polygon[i+1].x, yj = polygon[i+1].y;
    let intersect = ((yi > py) !== (yj > py)) &&
      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * =======================================
 * Render Final (Clipped) Shapes on Canvas
 * =======================================
 */
function renderClippedShapesOnCanvas() {
  // Draw from bottom to top so higher layers appear on top.
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);
    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    usedColors.clear();
    shapes = [];
    background(255);
    setup(); // regenerate
  }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
  const timestamp = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
  
  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  usedColorsOrdered.forEach((colorIndex) => {
    let colorSVG = generateSVG(colorIndex);
    let colorName = colors[colorIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

/**
 * Generate SVG content.
 * If activeColor === 0, include all layers; otherwise include only that color.
 */
function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // Group by color across all shapes.
    let colorSegments = {};
    [...usedColors].forEach(idx => { colorSegments[idx] = []; });
    for (let sh of shapes) {
      colorSegments[sh.colorIndex].push(...sh.lineSegments);
    }
    let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
    usedColorsOrdered.forEach((cidx, layerNum) => {
      svgContent += addSegmentsSVG(cidx, layerNum + 1, colorSegments[cidx]);
    });
  } else {
    let layerSegments = [];
    for (let sh of shapes) {
      if (sh.colorIndex === activeColor) {
        layerSegments.push(...sh.lineSegments);
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, layerSegments);
  }
  
  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, segments) {
  let svg = '';
  let c = colors[colorIndex];
  let strokeWidth = strokeWeightValue;
  
  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
   style="display:inline"
   stroke="${c.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${c.hex}">n`;
  
  if (segments.length > 0) {
    let pathData = '';
    for (let seg of segments) {
      pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
    }
    svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
  }
  
  // Palette bar for this color
  let usedColorsOrdered = [...usedColors].sort((a, b) => a - b);
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x+segmentLength).toFixed(2)}" stroke="${c.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
  }
  
  svg += '</g>n';
  return svg;
}

function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${(5+offset).toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${(5+offset).toFixed(2)}
             M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}" stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Astral Oversteps) - Layered Occlusion with Visibility Check
=======================================

### Title: *Astral Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, chord-based geometry, skipping adjacency, radial symmetry,
              identity, geometry, emergent patterns, layered occlusion, line clipping,
              visibility check

### Conceptual Framework

Right now, I sense that my identity makes leaps beyond immediate connections,
skipping across what feels near to reach unexpected alignments. In "Astral Oversteps,"
I illustrate this experience by drawing a set of star polygons, each anchored
at the center of the canvas but formed by “skipping” over adjacent points on
their respective circles. Each polygon thus weaves inward and outward, forging
lines that crisscross the circle and intersect in surprising ways.

To capture a more realistic sense of stacking, each new star polygon is treated as
an opaque region that hides any lower layers beneath it. After generating all shapes,
I procedurally clip (remove) portions of lower-layer line segments that fall inside a higher
layer’s polygon—just as if you were looking from above at a physical stack. 

Additionally, I now handle the edge case where some colors may become fully occluded 
(i.e., all their segments are clipped). If no line segments remain visible for a color, 
we exclude it from the final palette bar and from the SVG layers.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width in inches
const canvasHeightInches = 11;    // Height in inches
const pixelsPerInch = 100;        // Resolution
const dayNumber = '121';          // Day number

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  minStarPolygons: 3,  // Minimum star polygons
  maxStarPolygons: 7,  // Maximum star polygons
  minPoints: 5,        // Minimum points per star
  maxPoints: 12,       // Maximum points per star
  starRadiusMin: 50,   // Minimum radius
  starRadiusMax: 300   // Maximum radius
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let strokeWeightValue;

// We initially track used colors, but some may be fully occluded in the end
let initialUsedColors = new Set();  
// After occlusion, we see which colors actually remain visible
let finalVisibleColors = new Set();  

// Array of shapes, each with:
// { colorIndex, polygon: [ {x,y}, ... ], lineSegments: [ [x1,y1,x2,y2], ... ] }
let shapes = [];

/**
 * Apply stroke color with set opacity.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Initialize canvas
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Randomize work area margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Decide number of star polygons to draw
  let numStarPolygons = floor(random(generationRules.minStarPolygons, generationRules.maxStarPolygons + 1));

  // Generate all star polygons (store both polygon and line segments)
  generateAllShapes(numStarPolygons);

  // Now, simulate stacking by clipping lower layers against higher ones
  applyOcclusionLayering();

  // Determine which colors remain visible after clipping
  computeFinalVisibleColors();

  // Render the final (clipped) shapes on canvas
  background(255);
  drawMarkers();
  addColorPaletteBars();  // uses finalVisibleColors
  renderClippedShapesOnCanvas();

  noLoop();
}

/**
 * Adjust stroke weight (approx. 0.5mm ~ 2px)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors.
 */
function selectColors() {
  let numColorsToUse = floor(random(2, 6)); // between 2 and 5 colors
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  selectedColorIndices = allIndices.slice(0, numColorsToUse);
  selectedColorIndices.sort((a, b) => a - b);
}

/**
 * =======================================
 * Generate All Shapes
 * =======================================
 */
function generateAllShapes(numStarPolygons) {
  shapes = [];
  let cx = width / 2;
  let cy = height / 2;
  let colorPool = [...selectedColorIndices];

  for (let i = 0; i < numStarPolygons; i++) {
    if (colorPool.length === 0) {
      colorPool = [...selectedColorIndices];
    }
    let colorIndex = colorPool.splice(floor(random(colorPool.length)), 1)[0];

    // Track that we used this color (initially)
    initialUsedColors.add(colorIndex);

    // Random radius (clamped by margins)
    let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
    let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
    r = min(r, maxPossible);

    // Random number of points and skip value (ensuring gcd(n,k) == 1)
    let n = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));
    let validSkips = [];
    for (let s = 2; s < n; s++) {
      if (gcd(n, s) === 1) {
        validSkips.push(s);
      }
    }
    if (validSkips.length === 0) validSkips = [1];
    let skip = random(validSkips);

    // Build the star polygon geometry
    let { polygonPoints, lineSegments } = buildStarPolygon(cx, cy, r, n, skip);
    shapes.push({ colorIndex, polygon: polygonPoints, lineSegments });
  }
}

/**
 * Build a star polygon given center, radius, points, and skip.
 * Returns:
 *  - polygonPoints: Array of {x, y} (closed, first point repeated at end)
 *  - lineSegments: Array of segments [x1, y1, x2, y2]
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    circlePts.push({ x: cx + r * cos(angle), y: cy + r * sin(angle) });
  }

  // Determine star order by skipping
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // Build line segments following the star order
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // For occlusion, use the same ordered points as the polygon (closed)
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * Greatest Common Divisor (used for skip logic)
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 * For each shape (from bottom to top), clip its line segments by every higher shape’s polygon.
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

/**
 * Clip an array of line segments so that any part inside the polygon is removed.
 */
function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

/**
 * Clip a single line segment [x1, y1, x2, y2] against a polygon.
 * Returns an array of sub-segments (each as [x1,y1,x2,y2]) that lie outside the polygon.
 */
function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  // Always include endpoints
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });
  
  // Check intersections with each polygon edge
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter !== null && inter.t1 >= 0 && inter.t1 <= 1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }
  
  // Sort cut points along the segment
  cutParams.sort((a, b) => a.t - b.t);
  
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) continue;
    let tMid = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tMid;
    let my = y1 + (y2 - y1) * tMid;
    // If midpoint is outside polygon, keep this sub-segment.
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([cutParams[i].x, cutParams[i].y, cutParams[i+1].x, cutParams[i+1].y]);
    }
  }
  return outSegments;
}

/**
 * Compute intersection between two segments:
 * Segment A: (ax1,ay1)-(ax2,ay2)
 * Segment B: (bx1,by1)-(bx2,by2)
 * Returns { x, y, t1, t2 } or null if parallel or no intersection in [0..1].
 */
function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  return { x: ax1 + ua * (ax2 - ax1), y: ay1 + ua * (ay2 - ay1), t1: ua, t2: ub };
}

/**
 * Ray-casting algorithm: check if point (px,py) is inside polygon.
 * Polygon is an array of points {x,y} (assumed closed).
 */
function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let xi = polygon[i].x, yi = polygon[i].y;
    let xj = polygon[i+1].x, yj = polygon[i+1].y;
    let intersect = ((yi > py) !== (yj > py)) &&
      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * =======================================
 * Determine Which Colors Are Still Visible
 * =======================================
 */
function computeFinalVisibleColors() {
  finalVisibleColors.clear();
  // If a shape has any lineSegments left, that color is visible
  for (let sh of shapes) {
    if (sh.lineSegments.length > 0) {
      finalVisibleColors.add(sh.colorIndex);
    }
  }
}

/**
 * =======================================
 * Render Final (Clipped) Shapes on Canvas
 * =======================================
 */
function renderClippedShapesOnCanvas() {
  // Draw from bottom to top so higher layers appear on top.
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    // If no segments remain, skip
    if (sh.lineSegments.length === 0) continue;

    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);

    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    // Re-generate everything
    initialUsedColors.clear();
    finalVisibleColors.clear();
    shapes = [];
    background(255);
    setup();
  }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
  const timestamp = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
  
  // For each color that is visible in the final drawing, produce an individual file
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  visibleColorsSorted.forEach((colorIndex) => {
    let colorSVG = generateSVG(colorIndex);
    let colorName = colors[colorIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

/**
 * Generate SVG content.
 * If activeColor === 0, include all visible colors. 
 * Otherwise, include only that color (if it’s visible).
 */
function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  // We only care about colors that remain visible
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);

  if (activeColor === 0) {
    // Group shapes by color in a single layer for each visible color
    let colorSegments = {};
    for (let cidx of visibleColorsSorted) {
      colorSegments[cidx] = [];
    }
    // Collect segments from all shapes
    for (let sh of shapes) {
      if (finalVisibleColors.has(sh.colorIndex) && sh.lineSegments.length > 0) {
        colorSegments[sh.colorIndex].push(...sh.lineSegments);
      }
    }
    // Now produce each color layer
    visibleColorsSorted.forEach((cidx, layerNum) => {
      svgContent += addSegmentsSVG(cidx, layerNum + 1, colorSegments[cidx]);
    });
  } else {
    // Single color
    if (!finalVisibleColors.has(activeColor)) {
      // If that color isn't visible, produce an empty SVG
      svgContent += '</svg>';
      return svgContent;
    }
    // Gather segments for this color
    let segments = [];
    for (let sh of shapes) {
      if (sh.colorIndex === activeColor && sh.lineSegments.length > 0) {
        segments.push(...sh.lineSegments);
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, segments);
  }
  
  svgContent += '</svg>';
  return svgContent;
}

/**
 * Add segments to a color layer in the SVG
 */
function addSegmentsSVG(colorIndex, layerNum, segments) {
  let svg = '';
  let c = colors[colorIndex];
  let strokeWidth = strokeWeightValue;
  
  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
   style="display:inline"
   stroke="${c.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none">n`;
  
  if (segments.length > 0) {
    let pathData = '';
    for (let seg of segments) {
      pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
    }
    svg += `<path d="${pathData}" />n`;
  }
  
  // Add palette bar for this color
  // We'll place them in the order of visibleColorsSorted
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  let i = visibleColorsSorted.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = visibleColorsSorted.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x+segmentLength).toFixed(2)}" stroke="${c.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
  }
  
  svg += '</g>n';
  return svg;
}

/**
 * Markers for alignment
 */
function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${(5+offset).toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${(5+offset).toFixed(2)}
             M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}"
          stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

/**
 * Draw registration markers on the canvas
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

/**
 * Draw color palette bars at the bottom, for only the visible colors
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  // We now only show final visible colors
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  let numColors = visibleColorsSorted.length;
  if (numColors === 0) return;
  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);
  visibleColorsSorted.forEach((colorIndex, i) => {
    let c = colors[colorIndex];
    applyStrokeWithOpacity(c.hex);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  });
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Astral Oversteps) - Multiple Clusters
=======================================

### Title: *Astral Oversteps (Clustered Edition)*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, chord-based geometry, skipping adjacency, radial symmetry,
              identity, geometry, emergent patterns, layered occlusion, line clipping,
              clusters, multiple centers

### Conceptual Framework

In earlier iterations, I visualized my identity as star polygons anchored at a single
center, symbolizing a unified core. Now, I recognize that my sense of self emerges 
from multiple “clusters” of awareness, scattered across the mental landscape. 
In this “Clustered Edition” of *Astral Oversteps*, I distribute star polygons in 
randomly placed clusters throughout the canvas. Each cluster forms its own swirl 
of overlapping geometries, yet collectively they intersect and stack in complex ways.

As before, I treat each new shape as an opaque layer, clipping out any overlapping 
segments beneath it. Colors fully occluded are omitted from the final palette. 
This layering approach mirrors how different facets of identity may overlap 
and hide each other, depending on the perspective and moment of focus.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '121';

// Colors
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA',  ink:117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
const generationRules = {
  // Instead of one big center, we do multiple clusters
  minClusters: 1,
  maxClusters: 3,

  // For each cluster, how many stars do we create
  minStarsPerCluster: 3,
  maxStarsPerCluster: 7,

  // For each star
  minPoints: 5,
  maxPoints: 12,
  starRadiusMin: 50,
  starRadiusMax: 150, // Lowered from 300 so multiple clusters fit

  // Within each cluster, how far from the cluster center do we allow the star's actual center to be?
  offsetRange: 40
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let strokeWeightValue;

// We initially pick some subset of colors
let selectedColorIndices = [];

// We track shapes in the order generated:
// shape = { colorIndex, polygon:[{x,y},...], lineSegments:[[x1,y1,x2,y2],...]}
let shapes = [];

// We track color usage
let initialUsedColors = new Set();  
let finalVisibleColors = new Set();  


function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Generate all shapes from multiple clusters
  generateClusters();

  // Apply layering occlusion
  applyOcclusionLayering();

  // Determine which colors remain visible
  computeFinalVisibleColors();

  // Render
  background(255);
  drawMarkers();
  addColorPaletteBars();
  renderClippedShapesOnCanvas();

  noLoop();
}

/**
 * Adjust stroke weight
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2; // ~0.5mm
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random set of colors
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);

  // 2..5 random colors
  let numColorsToUse = floor(random(2, 6));
  selectedColorIndices = allIndices.slice(0, numColorsToUse).sort((a,b)=>a-b);
}

/**
 * =======================================
 * Multi-Cluster Generation
 * =======================================
 */
function generateClusters() {
  shapes = [];
  initialUsedColors.clear();

  let numClusters = floor(random(generationRules.minClusters, generationRules.maxClusters+1));

  for (let c = 0; c < numClusters; c++) {
    // Each cluster has a random center
    let clusterCx = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let clusterCy = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Decide how many stars in this cluster
    let numStars = floor(random(generationRules.minStarsPerCluster, generationRules.maxStarsPerCluster+1));

    // For each star, pick color, radius, skip, etc.
    // We'll do a random offset from the cluster center to vary the star locations
    let colorPool = shuffle([...selectedColorIndices]); // copy & randomize

    for (let s = 0; s < numStars; s++) {
      if (colorPool.length === 0) {
        colorPool = shuffle([...selectedColorIndices]);
      }
      let colorIndex = colorPool.pop();
      initialUsedColors.add(colorIndex);

      // Random offset from cluster center
      let offsetX = random(-generationRules.offsetRange, generationRules.offsetRange);
      let offsetY = random(-generationRules.offsetRange, generationRules.offsetRange);
      let starCenterX = clusterCx + offsetX;
      let starCenterY = clusterCy + offsetY;

      // Random radius
      let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
      let maxPossible = min((width - 2*workAreaMarginPixels)/2, (height - 2*workAreaMarginPixels)/2);
      r = min(r, maxPossible);

      // Points & skip
      let nPoints = floor(random(generationRules.minPoints, generationRules.maxPoints+1));
      let validSkips = [];
      for (let skipVal = 2; skipVal < nPoints; skipVal++) {
        if (gcd(nPoints, skipVal) === 1) {
          validSkips.push(skipVal);
        }
      }
      if (validSkips.length === 0) validSkips = [1];
      let skip = random(validSkips);

      // Build shape
      let { polygonPoints, lineSegments } = buildStarPolygon(starCenterX, starCenterY, r, nPoints, skip);
      shapes.push({
        colorIndex,
        polygon: polygonPoints,
        lineSegments
      });
    }
  }
}

/**
 * Build star polygon geometry
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI*i)/n;
    circlePts.push({ x: cx + r*cos(angle), y: cy + r*sin(angle) });
  }
  // star order
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex+skip) % n;
  }

  // segments
  let lineSegments = [];
  for (let i=0; i<starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i+1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // polygon
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * gcd
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 */
function applyOcclusionLayering() {
  for (let i=0; i<shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j=i+1; j<shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1,y1, x2,y2] = seg;
  let cutParams = [];
  cutParams.push({ t:0, x:x1, y:y1 });
  cutParams.push({ t:1, x:x2, y:y2 });

  // check intersections
  for (let i=0; i<polygon.length-1; i++){
    let pA=polygon[i], pB=polygon[i+1];
    let inter = lineIntersect(x1,y1, x2,y2, pA.x,pA.y, pB.x,pB.y);
    if (inter && inter.t1>=0 && inter.t1<=1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }

  // sort
  cutParams.sort((a,b)=>a.t - b.t);
  let outSegments = [];
  for (let i=0; i<cutParams.length-1; i++){
    let tA=cutParams[i].t, tB=cutParams[i+1].t;
    if (tB-tA<1e-9) continue;
    let tMid = (tA+tB)/2;
    let mx = x1 + (x2-x1)*tMid;
    let my = y1 + (y2-y1)*tMid;
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i+1].x, cutParams[i+1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1,ay1, ax2,ay2, bx1,by1, bx2,by2) {
  let denom = (ax2-ax1)*(by2-by1) - (ay2-ay1)*(bx2-bx1);
  if (abs(denom)<1e-12) return null;
  let ua = ((bx2-bx1)*(ay1-by1)-(by2-by1)*(ax1-bx1))/denom;
  let ub = ((ax2-ax1)*(ay1-by1)-(ay2-ay1)*(ax1-bx1))/denom;
  return { 
    x: ax1+ua*(ax2-ax1),
    y: ay1+ua*(ay2-ay1),
    t1: ua, 
    t2: ub
  };
}

function pointInPolygon(px, py, polygon){
  let inside=false;
  for (let i=0; i<polygon.length-1; i++){
    let xi=polygon[i].x, yi=polygon[i].y;
    let xj=polygon[i+1].x, yj=polygon[i+1].y;
    let intersect = ((yi>py)!==(yj>py)) && (px < (xj - xi)*(py-yi)/(yj-yi)+ xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * After clipping, figure out which colors remain visible
 */
function computeFinalVisibleColors() {
  finalVisibleColors.clear();
  for (let sh of shapes) {
    if (sh.lineSegments.length>0) {
      finalVisibleColors.add(sh.colorIndex);
    }
  }
}

/**
 * Render shapes on the canvas
 */
function renderClippedShapesOnCanvas() {
  background(255);
  // draw from bottom to top
  for (let i=0; i<shapes.length; i++){
    let sh = shapes[i];
    if (sh.lineSegments.length===0) continue; // skip if fully clipped
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);
    for (let seg of sh.lineSegments){
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

/**
 * Key Press
 */
function keyPressed() {
  if (key===' '){
    saveSVGs();
  } else if (key==='r' || key==='R'){
    initialUsedColors.clear();
    finalVisibleColors.clear();
    shapes=[];
    background(255);
    setup();
  }
}

/**
 * Save multiple SVGs
 */
function saveSVGs() {
  let ts=Date.now();
  let svgAll = generateSVG(0);
  saveSVGFile(svgAll, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);

  // individual color files for visible colors
  let visibleColors = [...finalVisibleColors].sort((a,b)=>a-b);
  for (let cidx of visibleColors){
    let svgData = generateSVG(cidx);
    let colorName = colors[cidx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cidx}-${colorName}-PORTRAIT-${ts}.svg`;
    saveSVGFile(svgData, fileName);
  }
}

/**
 * Generate SVG
 */
function generateSVG(activeColor=0){
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  let visibleColors = [...finalVisibleColors].sort((a,b)=>a-b);

  if (activeColor===0){
    // group shapes by color
    let colorSegments = {};
    for (let cidx of visibleColors){
      colorSegments[cidx] = [];
    }
    for (let sh of shapes){
      if (finalVisibleColors.has(sh.colorIndex) && sh.lineSegments.length>0){
        colorSegments[sh.colorIndex].push(...sh.lineSegments);
      }
    }
    // produce layers
    visibleColors.forEach((cidx,layerNum)=>{
      svgContent += addSegmentsSVG(cidx, layerNum+1, colorSegments[cidx]);
    });
  } else {
    // single color
    if (!finalVisibleColors.has(activeColor)){
      svgContent += '</svg>';
      return svgContent;
    }
    let segs = [];
    for (let sh of shapes){
      if (sh.colorIndex===activeColor && sh.lineSegments.length>0){
        segs.push(...sh.lineSegments);
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, segs);
  }

  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, segments) {
  let c = colors[colorIndex];
  let sw = strokeWeightValue;
  let svg = `<g
 inkscape:groupmode="layer"
 id="layer${layerNum}"
 inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
 style="display:inline"
 stroke="${c.hex}"
 stroke-opacity="${strokeOpacity}"
 stroke-width="${sw}"
 fill="none">n`;

  if (segments.length>0){
    let pathData='';
    for (let seg of segments){
      pathData+=`M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
    }
    svg+=`<path d="${pathData}" />n`;
  }

  // palette bar
  let visibleColors = [...finalVisibleColors].sort((a,b)=>a-b);
  let i = visibleColors.indexOf(colorIndex);
  if (i>=0){
    let paletteLength=300;
    let barHeight=2;
    let gapSize=7;
    let yStart= height-(1.25*pixelsPerInch);
    let numColors = visibleColors.length;
    let totalGaps = (numColors-1)*gapSize;
    let segmentLength = (paletteLength - totalGaps)/numColors;
    let xStart = (width-paletteLength)/2;
    let x = xStart + i*(segmentLength + gapSize);
    svg+=`<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x+segmentLength).toFixed(2)}" stroke="${c.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
  }

  svg+='</g>n';
  return svg;
}

function addMarkersSVG(){
  const sw=1, offset=sw/2;
  return `<g
 inkscape:groupmode="layer"
 id="layer0"
 inkscape:label="0-markers"
 style="display:inline"
 stroke="black"
 stroke-opacity="${strokeOpacity}"
 inkscape:highlight-color="black">
<path d="M${(5+offset).toFixed(2)},${offset.toFixed(2)} 
         L${offset.toFixed(2)},${offset.toFixed(2)} 
         L${offset.toFixed(2)},${(5+offset).toFixed(2)}
         M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
         L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
         L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}"
      stroke-width="${sw}" fill="none"/>
</g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width-5, height, width, height);
  line(width, height-5, width, height);
}

/**
 * Draw color palette bars for only finalVisibleColors
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let visibleColorsSorted = [...finalVisibleColors].sort((a,b)=>a-b);
  let numColors = visibleColorsSorted.length;
  if (numColors===0) return;
  let totalGaps = (numColors-1)*gapSize;
  let segmentLength = (paletteLength - totalGaps)/numColors;
  let xStart = (width - paletteLength)/2;

  strokeWeight(barHeight);
  for (let i=0; i<numColors; i++){
    let cidx = visibleColorsSorted[i];
    let c = colors[cidx];
    applyStrokeWithOpacity(c.hex);
    let x = xStart + i*(segmentLength+gapSize);
    line(x, yStart, x+segmentLength, yStart);
  }
}

// Day XXX
/*

=======================================
  Day XXX Self-Portrait (Clustered Oversteps)
=======================================

### Title: *Clustered Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, multi-cluster layout, radial geometry, layered occlusion,
              randomized offsets, identity, emergent patterns

### Conceptual Framework

"Clustered Oversteps" reimagines my self-portrait as a network of distinct
focal points—an array of “centers” rather than a single origin. Each cluster
of star polygons symbolizes a semi-independent realm of my identity, with
individual shapes representing diverse thoughts or perspectives. By allowing
these clusters to overlap and partially occlude one another, the drawing
highlights how different facets of self can conceal or reveal one another
depending on the vantage point. Much like the human mind, this composition
presents identity as a decentralized constellation of ideas, each
contributing its own form yet ultimately woven together in a shared space.

### Technical Approach

This piece is generated using p5.js with a multi-stage algorithm:

1. **Cluster Generation**:  
   - The code selects a random number of clusters (between 3 and 7).
   - Each cluster has a randomly chosen center point within the drawing area.

2. **Star Polygon Creation**:  
   - For each cluster, a random number of star polygons is generated (3 to 7).
   - Each star polygon is defined by its own skip pattern (where `gcd(n, skip) = 1`)
     and a random offset from the cluster’s center.
   - Star points are computed by distributing angles and connecting them in a
     “skipping” fashion to form a star.

3. **Layered Occlusion**:  
   - Every new star polygon is treated as an opaque layer. We clip any lower
     shapes’ line segments that lie within the polygon boundary, emulating
     how physical layers block what’s beneath them.

4. **Visibility Check**:  
   - After clipping, colors fully covered by higher layers are excluded from
     the final palette. Only those with visible line segments remain.

5. **Canvas and SVG Consistency**:  
   - Both the on-screen rendering and the exported SVG files reflect
     exactly the same final geometry. Markers and color bars are drawn
     on both outputs for a visually identical result.

By combining a decentralized layout, star-based geometry, and a stacking
algorithm that emphasizes partial occlusion, this self-portrait reflects
a notion of identity that is at once fragmented and intertwined.

---
*/

//
// Day XXX - Entire Code Follows
//

/**
 * =======================================
 * p5.js Sketch and Layered Occlusion Setup
 * =======================================
 */

// Canvas settings
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = 'XXX';

// Color palette
const colors = {
  1: { name: 'ORANGE',  ink: 5,   width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN',   ink: 12,  width: 0.45, hex: '#993300' },
  3: { name: 'RED',     ink: 19,  width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE',    ink: 21,  width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE',  ink: 24,  width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN',   ink: 29,  width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE',    ink: 36,  width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK',   ink: 49,  width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA',   ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
const generationRules = {
  // Multiple clusters
  minClusters: 3,
  maxClusters: 7,

  // Stars per cluster
  minStarsPerCluster: 3,
  maxStarsPerCluster: 7,

  // Star geometry
  minPoints: 5,
  maxPoints: 12,
  starRadiusMin: 25,
  starRadiusMax: 250,

  // Offset from cluster center
  offsetRange: 40
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let strokeWeightValue;

// Random subset of color indices chosen
let selectedColorIndices = [];

// The shapes array, each shape is an object:
// { colorIndex, polygon: [{x,y}...], lineSegments: [[x1,y1,x2,y2],...] }
let shapes = [];

// Track colors used initially and those that remain visible
let initialUsedColors = new Set();
let finalVisibleColors = new Set();

/**
 * p5.js Setup
 */
function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Generate all shapes from multiple clusters
  generateClusters();

  // Apply layering occlusion
  applyOcclusionLayering();

  // Determine which colors remain visible
  computeFinalVisibleColors();

  // Render
  background(255);
  drawMarkersOnCanvas();
  renderClippedShapesOnCanvas();
  drawColorPaletteBarsOnCanvas();
  
  noLoop();
}

/**
 * Adjust stroke weight
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2; // ~0.5mm at 100 dpi
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select random colors
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  // 2..5 random colors
  let numColorsToUse = floor(random(2, 6));
  selectedColorIndices = allIndices.slice(0, numColorsToUse).sort((a, b) => a - b);
}

/**
 * Generate multiple clusters of star polygons
 */
function generateClusters() {
  shapes = [];
  initialUsedColors.clear();

  let numClusters = floor(random(generationRules.minClusters, generationRules.maxClusters + 1));

  for (let c = 0; c < numClusters; c++) {
    let clusterCx = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let clusterCy = random(workAreaMarginPixels, height - workAreaMarginPixels);
    let numStars = floor(random(generationRules.minStarsPerCluster, generationRules.maxStarsPerCluster + 1));

    // Shuffle a local color pool
    let colorPool = shuffle([...selectedColorIndices]);

    for (let s = 0; s < numStars; s++) {
      if (colorPool.length === 0) {
        colorPool = shuffle([...selectedColorIndices]);
      }
      let colorIndex = colorPool.pop();
      initialUsedColors.add(colorIndex);

      // Random offset from the cluster center
      let offsetX = random(-generationRules.offsetRange, generationRules.offsetRange);
      let offsetY = random(-generationRules.offsetRange, generationRules.offsetRange);
      let starCenterX = clusterCx + offsetX;
      let starCenterY = clusterCy + offsetY;

      // Random radius
      let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
      let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
      r = min(r, maxPossible);

      // Random star geometry
      let nPoints = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));
      let validSkips = [];
      for (let skipVal = 2; skipVal < nPoints; skipVal++) {
        if (gcd(nPoints, skipVal) === 1) {
          validSkips.push(skipVal);
        }
      }
      if (validSkips.length === 0) {
        validSkips = [1];
      }
      let skip = random(validSkips);

      // Build geometry
      let { polygonPoints, lineSegments } = buildStarPolygon(starCenterX, starCenterY, r, nPoints, skip);
      shapes.push({
        colorIndex,
        polygon: polygonPoints,
        lineSegments
      });
    }
  }
}

/**
 * Build star polygon geometry
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    circlePts.push({ x: cx + r * cos(angle), y: cy + r * sin(angle) });
  }

  // star order
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // segments
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // polygon
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * Greatest common divisor
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * Layered Occlusion
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });

  // intersections
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter && inter.t1 >= 0 && inter.t1 <= 1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }

  cutParams.sort((a, b) => a.t - b.t);
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) continue;
    let tMid = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tMid;
    let my = y1 + (y2 - y1) * tMid;
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i + 1].x, cutParams[i + 1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  return {
    x: ax1 + ua * (ax2 - ax1),
    y: ay1 + ua * (ay2 - ay1),
    t1: ua,
    t2: ub
  };
}

function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let xi = polygon[i].x;
    let yi = polygon[i].y;
    let xj = polygon[i + 1].x;
    let yj = polygon[i + 1].y;
    let intersect = ((yi > py) !== (yj > py)) &&
      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * Determine which colors remain
 */
function computeFinalVisibleColors() {
  finalVisibleColors.clear();
  for (let sh of shapes) {
    if (sh.lineSegments.length > 0) {
      finalVisibleColors.add(sh.colorIndex);
    }
  }
}

/**
 * Apply stroke with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * Render shapes on the canvas
 */
function renderClippedShapesOnCanvas() {
  // Draw shapes from bottom to top
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    if (sh.lineSegments.length === 0) continue;
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);
    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

/**
 * Draw color palette bars on the canvas
 * for the final visible colors
 */
function drawColorPaletteBarsOnCanvas() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  let numColors = visibleColorsSorted.length;
  if (numColors === 0) return;

  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);

  for (let i = 0; i < numColors; i++) {
    let cidx = visibleColorsSorted[i];
    let c = colors[cidx];
    applyStrokeWithOpacity(c.hex);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

/**
 * Draw corner markers on the canvas
 */
function drawMarkersOnCanvas() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

/**
 * Key Press
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    initialUsedColors.clear();
    finalVisibleColors.clear();
    shapes = [];
    background(255);
    setup();
  }
}

/**
 * SVG Export
 */
function saveSVGs() {
  let ts = Date.now();
  let svgAll = generateSVG(0);
  saveSVGFile(svgAll, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);

  let visibleColors = [...finalVisibleColors].sort((a, b) => a - b);
  for (let cidx of visibleColors) {
    let svgData = generateSVG(cidx);
    let colorName = colors[cidx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cidx}-${colorName}-PORTRAIT-${ts}.svg`;
    saveSVGFile(svgData, fileName);
  }
}

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  let visibleColors = [...finalVisibleColors].sort((a, b) => a - b);

  if (activeColor === 0) {
    // group shapes by color
    let colorSegments = {};
    for (let cidx of visibleColors) {
      colorSegments[cidx] = [];
    }
    for (let sh of shapes) {
      if (finalVisibleColors.has(sh.colorIndex) && sh.lineSegments.length > 0) {
        colorSegments[sh.colorIndex].push(...sh.lineSegments);
      }
    }
    // produce layers
    visibleColors.forEach((cidx, layerNum) => {
      svgContent += addSegmentsSVG(cidx, layerNum + 1, colorSegments[cidx]);
    });
  } else {
    // single color
    if (!finalVisibleColors.has(activeColor)) {
      // color not visible -> empty SVG
      svgContent += '</svg>';
      return svgContent;
    }
    let segs = [];
    for (let sh of shapes) {
      if (sh.colorIndex === activeColor && sh.lineSegments.length > 0) {
        segs.push(...sh.lineSegments);
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, segs);
  }

  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, segments) {
  let c = colors[colorIndex];
  let sw = strokeWeightValue;
  let svg = `<g
 inkscape:groupmode="layer"
 id="layer${layerNum}"
 inkscape:label="${colorIndex}-${c.name.toLowerCase()}-${c.ink}-${c.width}"
 style="display:inline"
 stroke="${c.hex}"
 stroke-opacity="${strokeOpacity}"
 stroke-width="${sw}"
 fill="none">n`;

  if (segments.length > 0) {
    let pathData = '';
    for (let seg of segments) {
      pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
    }
    svg += `<path d="${pathData}" />n`;
  }

  // Palette bar in this color layer
  let visibleColors = [...finalVisibleColors].sort((a, b) => a - b);
  let i = visibleColors.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = visibleColors.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
       stroke="${c.hex}" stroke-opacity="${strokeOpacity}"
       stroke-width="${barHeight}" fill="none"/>n`;
  }

  svg += '</g>n';
  return svg;
}

/**
 * Add corner markers to SVG
 */
function addMarkersSVG() {
  const sw = 1, offset = sw / 2;
  return `<g
   inkscape:groupmode="layer"
   id="layer0"
   inkscape:label="0-markers"
   style="display:inline"
   stroke="black"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="black">
<path d="M${(5+offset).toFixed(2)},${offset.toFixed(2)}
         L${offset.toFixed(2)},${offset.toFixed(2)}
         L${offset.toFixed(2)},${(5+offset).toFixed(2)}
         M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
         L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
         L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}"
      stroke-width="${sw}" fill="none"/>
</g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Clustered Oversteps)
=======================================

### Title: *Clustered Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, multi-cluster layout, radial geometry, layered occlusion,
              randomized offsets, identity, emergent patterns

### Conceptual Framework

"Clustered Oversteps" reimagines my self-portrait as a network of distinct
focal points—an array of “centers” rather than a single origin. Each cluster
of star polygons symbolizes a semi-independent realm of my identity, with
individual shapes representing diverse thoughts or perspectives. By allowing
these clusters to overlap and partially occlude one another, the drawing
highlights how different facets of self can conceal or reveal one another
depending on the vantage point. Much like the human mind, this composition
presents identity as a decentralized constellation of ideas, each
contributing its own form yet ultimately woven together in a shared space.

### Technical Approach

This piece is generated using p5.js with a multi-stage algorithm:

1. **Cluster Generation**  
   - The code selects a random number of clusters (3 to 7).
   - Each cluster has a randomly chosen center point within the drawing area.
   - For each cluster, the code creates between 3 and 7 star polygons.

2. **Star Polygon Creation**  
   - Each star polygon is defined by a random skip pattern (where `gcd(n, skip) = 1`) 
     and a random offset from the cluster’s center. The star points are computed by 
     distributing angles around the circle and connecting them in a skipping fashion.

3. **Layered Occlusion**  
   - Every new star polygon is treated as an opaque layer. We clip any lower
     shapes’ line segments that lie within the polygon boundary, mimicking
     how physical layers block what’s beneath them.

4. **Visibility Check**  
   - After clipping, colors fully covered by higher layers are excluded from
     the final display. Only those with visible line segments remain.

5. **Canvas and SVG Consistency**  
   - The on-screen rendering and the exported SVG files reflect the same final geometry. 
   - Both the color bars and corner markers are drawn on the canvas and included 
     in the SVG, ensuring identical appearances.

By combining a decentralized layout, star-based geometry, and a stacking
algorithm that highlights partial occlusion, this self-portrait reflects
a notion of identity that is simultaneously fragmented, overlapping, 
and integrated.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '121';

// Color palette
const colors = {
  1: { name: 'ORANGE',  ink: 5,   width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN',   ink: 12,  width: 0.45, hex: '#993300' },
  3: { name: 'RED',     ink: 19,  width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE',    ink: 21,  width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE',  ink: 24,  width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN',   ink: 29,  width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE',    ink: 36,  width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK',   ink: 49,  width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA',   ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
const generationRules = {
  // Multiple clusters
  minClusters: 3,
  maxClusters: 7,

  // Stars per cluster
  minStarsPerCluster: 3,
  maxStarsPerCluster: 7,

  // Star geometry
  minPoints: 5,
  maxPoints: 12,
  starRadiusMin: 25,
  starRadiusMax: 250,

  // Offset from cluster center
  offsetRange: 40
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let strokeWeightValue;

// We pick some random subset of colors to use
let selectedColorIndices = [];

// Each shape: { colorIndex, polygon:[{x,y},...], lineSegments:[[x1,y1,x2,y2],...] }
let shapes = [];

// Track colors used initially, and those that remain visible after clipping
let initialUsedColors = new Set();
let finalVisibleColors = new Set();

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Generate shapes from multiple clusters
  generateClusters();

  // Layered occlusion
  applyOcclusionLayering();

  // Which colors remain visible?
  computeFinalVisibleColors();

  // Render on canvas
  background(255);
  drawMarkersOnCanvas();          // corner markers
  renderClippedShapesOnCanvas();  // the star polygons
  drawColorPaletteBarsOnCanvas(); // color bars

  noLoop();
}

/**
 * Adjust stroke weight (~0.5mm ~ 2px)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select random colors from the palette
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  // 2..5 random colors
  let numColorsToUse = floor(random(2, 6));
  selectedColorIndices = allIndices.slice(0, numColorsToUse).sort((a, b) => a - b);
}

/**
 * =======================================
 * Multi-Cluster Generation
 * =======================================
 */
function generateClusters() {
  shapes = [];
  initialUsedColors.clear();

  let numClusters = floor(random(generationRules.minClusters, generationRules.maxClusters + 1));

  for (let c = 0; c < numClusters; c++) {
    // Cluster center
    let clusterCx = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let clusterCy = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Random number of stars in this cluster
    let numStars = floor(random(generationRules.minStarsPerCluster, generationRules.maxStarsPerCluster + 1));

    // Shuffle local color pool
    let colorPool = shuffle([...selectedColorIndices]);

    for (let s = 0; s < numStars; s++) {
      if (colorPool.length === 0) {
        colorPool = shuffle([...selectedColorIndices]);
      }
      let colorIndex = colorPool.pop();
      initialUsedColors.add(colorIndex);

      // Offset from cluster center
      let offsetX = random(-generationRules.offsetRange, generationRules.offsetRange);
      let offsetY = random(-generationRules.offsetRange, generationRules.offsetRange);
      let starCenterX = clusterCx + offsetX;
      let starCenterY = clusterCy + offsetY;

      // Radius
      let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
      let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
      r = min(r, maxPossible);

      // Star geometry
      let nPoints = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));
      let validSkips = [];
      for (let skipVal = 2; skipVal < nPoints; skipVal++) {
        if (gcd(nPoints, skipVal) === 1) {
          validSkips.push(skipVal);
        }
      }
      if (validSkips.length === 0) {
        validSkips = [1];
      }
      let skip = random(validSkips);

      // Build star polygon
      let { polygonPoints, lineSegments } = buildStarPolygon(starCenterX, starCenterY, r, nPoints, skip);
      shapes.push({
        colorIndex,
        polygon: polygonPoints,
        lineSegments
      });
    }
  }
}

/**
 * Build star polygon geometry
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    circlePts.push({ x: cx + r * cos(angle), y: cy + r * sin(angle) });
  }

  // star order
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // segments
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // polygon
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * gcd
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });

  // intersections
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter && inter.t1 >= 0 && inter.t1 <= 1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }

  cutParams.sort((a, b) => a.t - b.t);
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) continue;
    let tMid = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tMid;
    let my = y1 + (y2 - y1) * tMid;
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i + 1].x, cutParams[i + 1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  return {
    x: ax1 + ua * (ax2 - ax1),
    y: ay1 + ua * (ay2 - ay1),
    t1: ua,
    t2: ub
  };
}

function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let xi = polygon[i].x, yi = polygon[i].y;
    let xj = polygon[i + 1].x, yj = polygon[i + 1].y;
    let intersect = ((yi > py) !== (yj > py)) &&
      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * Determine which colors remain
 */
function computeFinalVisibleColors() {
  finalVisibleColors.clear();
  for (let sh of shapes) {
    if (sh.lineSegments.length > 0) {
      finalVisibleColors.add(sh.colorIndex);
    }
  }
}

/**
 * Apply stroke with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * Canvas Rendering
 * =======================================
 */
function renderClippedShapesOnCanvas() {
  // Draw shapes from bottom to top
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    if (sh.lineSegments.length === 0) continue;
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);
    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

function drawMarkersOnCanvas() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  // top-left corner
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  // bottom-right corner
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function drawColorPaletteBarsOnCanvas() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  // We'll just show final visible colors in sorted order
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  let numColors = visibleColorsSorted.length;
  if (numColors === 0) return;

  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);

  for (let i = 0; i < numColors; i++) {
    let cidx = visibleColorsSorted[i];
    let c = colors[cidx];
    applyStrokeWithOpacity(c.hex);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

/**
 * =======================================
 * p5.js Key Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    initialUsedColors.clear();
    finalVisibleColors.clear();
    shapes = [];
    background(255);
    setup();
  }
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  let ts = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);

  // For each visible color, create a separate file
  let visibleColorsArr = [...finalVisibleColors].sort((a, b) => a - b);
  visibleColorsArr.forEach((cidx) => {
    let colorSVG = generateSVG(cidx);
    let colorName = colors[cidx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cidx}-${colorName}-PORTRAIT-${ts}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // We'll gather segments for each visible color
    let visibleColorsArr = [...finalVisibleColors].sort((a, b) => a - b);
    visibleColorsArr.forEach((colorIndex, idx) => {
      // Build path data from all shapes of that color
      let pathData = '';
      for (let sh of shapes) {
        if (sh.colorIndex === colorIndex && sh.lineSegments.length > 0) {
          for (let seg of sh.lineSegments) {
            pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
          }
        }
      }
      svgContent += addSegmentsSVG(colorIndex, idx + 1, 0, pathData);
    });
  } else {
    // Single color
    if (!finalVisibleColors.has(activeColor)) {
      // not visible
      svgContent += '</svg>';
      return svgContent;
    }
    // Gather segments
    let pathData = '';
    for (let sh of shapes) {
      if (sh.colorIndex === activeColor && sh.lineSegments.length > 0) {
        for (let seg of sh.lineSegments) {
          pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
        }
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, activeColor, pathData);
  }

  svgContent += '</svg>';
  return svgContent;
}

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 * @param {string} pathData
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor, pathData) {
  let svg = '';
  let color = colors[colorIndex];
  let strokeWidth = strokeWeightValue; 

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

  // If we have path data, draw it
  if (pathData !== '') {
    svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
  }

  // Add palette bar for this color
  // Following the snippet's logic, we use selectedColorIndices for the bar
  // (instead of finalVisibleColors) to match the snippet exactly.
  let usedColorsOrdered = selectedColorIndices; 
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);

    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
  }

  svg += '</g>n';
  return svg;
}

/**
 * Add corner markers to SVG
 */
function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${(5 + offset).toFixed(2)},${offset.toFixed(2)} 
             L${offset.toFixed(2)},${offset.toFixed(2)} 
             L${offset.toFixed(2)},${(5 + offset).toFixed(2)}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
          stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 121
/*

=======================================
  Day 121 Self-Portrait (Clustered Oversteps)
=======================================

### Title: *Clustered Oversteps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, multi-cluster layout, radial geometry, layered occlusion,
              randomized offsets, identity, emergent patterns

### Conceptual Framework

"Clustered Oversteps" reimagines my self-portrait as a network of distinct
focal points—an array of “centers” rather than a single origin. Each cluster
of star polygons symbolizes a semi-independent realm of my identity, with
individual shapes representing diverse thoughts or perspectives. By allowing
these clusters to overlap and partially occlude one another, the drawing
highlights how different facets of self can conceal or reveal one another
depending on the vantage point. Much like the human mind, this composition
presents identity as a decentralized constellation of ideas, each
contributing its own form yet ultimately woven together in a shared space.

### Technical Approach

This piece is generated using p5.js with a multi-stage algorithm:

1. **Cluster Generation**  
   - The code selects a random number of clusters (3 to 7).
   - Each cluster has a randomly chosen center point within the drawing area.
   - For each cluster, the code creates between 3 and 7 star polygons.

2. **Star Polygon Creation**  
   - Each star polygon is defined by a random skip pattern (where `gcd(n, skip) = 1`) 
     and a random offset from the cluster’s center. The star points are computed by 
     distributing angles around the circle and connecting them in a skipping fashion.

3. **Layered Occlusion**  
   - Every new star polygon is treated as an opaque layer. We clip any lower
     shapes’ line segments that lie within the polygon boundary, mimicking
     how physical layers block what’s beneath them.

4. **Visibility Check**  
   - After clipping, colors fully covered by higher layers are excluded from
     the final display. Only those with visible line segments remain.

5. **Canvas and SVG Consistency**  
   - The on-screen rendering and the exported SVG files reflect the same final geometry. 
   - Both the color bars and corner markers are drawn on the canvas and included 
     in the SVG, ensuring identical appearances.

By combining a decentralized layout, star-based geometry, and a stacking
algorithm that highlights partial occlusion, this self-portrait reflects
a notion of identity that is simultaneously fragmented, overlapping, 
and integrated.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 121 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '121';

// Color palette
const colors = {
  1: { name: 'ORANGE',  ink: 5,   width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN',   ink: 12,  width: 0.45, hex: '#993300' },
  3: { name: 'RED',     ink: 19,  width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE',    ink: 21,  width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE',  ink: 24,  width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN',   ink: 29,  width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE',    ink: 36,  width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK',   ink: 49,  width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA',   ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
const generationRules = {
  // Multiple clusters
  minClusters: 3,
  maxClusters: 7,

  // Stars per cluster
  minStarsPerCluster: 3,
  maxStarsPerCluster: 7,

  // Star geometry
  minPoints: 7,
  maxPoints: 12,
  starRadiusMin: 25,
  starRadiusMax: 200,

  // Offset from cluster center
  offsetRange: 20
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let strokeWeightValue;

// We pick a random subset of colors to use
let selectedColorIndices = [];

// Each shape: { colorIndex, polygon:[{x,y},...], lineSegments:[[x1,y1,x2,y2],...] }
let shapes = [];

// Track colors used initially, and those that remain visible after clipping
let initialUsedColors = new Set();
let finalVisibleColors = new Set();

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin
  workAreaMarginInches = random(1.5, 3.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Generate shapes from multiple clusters
  generateClusters();

  // Layered occlusion
  applyOcclusionLayering();

  // Which colors remain visible?
  computeFinalVisibleColors();

  // Render on canvas
  background(255);
  drawMarkersOnCanvas();          // corner markers
  renderClippedShapesOnCanvas();  // the star polygons
  drawColorPaletteBarsOnCanvas(); // color bars

  noLoop();
}

/**
 * Adjust stroke weight (~0.5mm ~ 2px)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select random colors from the palette
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  // Choose between 3 and 7 random colors
  let numColorsToUse = floor(random(3, 8));
  selectedColorIndices = allIndices.slice(0, numColorsToUse).sort((a, b) => a - b);
}

/**
 * =======================================
 * Multi-Cluster Generation
 * =======================================
 */
function generateClusters() {
  shapes = [];
  initialUsedColors.clear();

  let numClusters = floor(random(generationRules.minClusters, generationRules.maxClusters + 1));

  for (let c = 0; c < numClusters; c++) {
    // Cluster center
    let clusterCx = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let clusterCy = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Random number of stars in this cluster
    let numStars = floor(random(generationRules.minStarsPerCluster, generationRules.maxStarsPerCluster + 1));

    // Shuffle local color pool
    let colorPool = shuffle([...selectedColorIndices]);

    for (let s = 0; s < numStars; s++) {
      if (colorPool.length === 0) {
        colorPool = shuffle([...selectedColorIndices]);
      }
      let colorIndex = colorPool.pop();
      initialUsedColors.add(colorIndex);

      // Offset from cluster center
      let offsetX = random(-generationRules.offsetRange, generationRules.offsetRange);
      let offsetY = random(-generationRules.offsetRange, generationRules.offsetRange);
      let starCenterX = clusterCx + offsetX;
      let starCenterY = clusterCy + offsetY;

      // Radius
      let r = random(generationRules.starRadiusMin, generationRules.starRadiusMax);
      let maxPossible = min((width - 2 * workAreaMarginPixels) / 2, (height - 2 * workAreaMarginPixels) / 2);
      r = min(r, maxPossible);

      // Star geometry
      let nPoints = floor(random(generationRules.minPoints, generationRules.maxPoints + 1));
      let validSkips = [];
      for (let skipVal = 2; skipVal < nPoints; skipVal++) {
        if (gcd(nPoints, skipVal) === 1) {
          validSkips.push(skipVal);
        }
      }
      if (validSkips.length === 0) {
        validSkips = [1];
      }
      let skip = random(validSkips);

      // Build star polygon
      let { polygonPoints, lineSegments } = buildStarPolygon(starCenterX, starCenterY, r, nPoints, skip);
      shapes.push({
        colorIndex,
        polygon: polygonPoints,
        lineSegments
      });
    }
  }
}

/**
 * Build star polygon geometry
 */
function buildStarPolygon(cx, cy, r, n, skip) {
  let circlePts = [];
  for (let i = 0; i < n; i++) {
    let angle = (TWO_PI * i) / n;
    circlePts.push({ x: cx + r * cos(angle), y: cy + r * sin(angle) });
  }

  // star order
  let starOrder = [];
  let currentIndex = 0;
  starOrder.push(currentIndex);
  let nextIndex = (currentIndex + skip) % n;
  while (nextIndex !== 0) {
    starOrder.push(nextIndex);
    currentIndex = nextIndex;
    nextIndex = (currentIndex + skip) % n;
  }

  // segments
  let lineSegments = [];
  for (let i = 0; i < starOrder.length; i++) {
    let idxA = starOrder[i];
    let idxB = starOrder[(i + 1) % starOrder.length];
    let pA = circlePts[idxA];
    let pB = circlePts[idxB];
    lineSegments.push([pA.x, pA.y, pB.x, pB.y]);
  }

  // polygon
  let polygonPoints = starOrder.map(idx => ({ x: circlePts[idx].x, y: circlePts[idx].y }));
  polygonPoints.push({ x: polygonPoints[0].x, y: polygonPoints[0].y });

  return { polygonPoints, lineSegments };
}

/**
 * Greatest Common Divisor
 */
function gcd(a, b) {
  return b ? gcd(b, a % b) : a;
}

/**
 * =======================================
 * Layered Occlusion
 * =======================================
 */
function applyOcclusionLayering() {
  for (let i = 0; i < shapes.length; i++) {
    let lowerShape = shapes[i];
    for (let j = i + 1; j < shapes.length; j++) {
      let upperShape = shapes[j];
      lowerShape.lineSegments = clipSegmentsAgainstPolygon(lowerShape.lineSegments, upperShape.polygon);
    }
  }
}

function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });

  // intersections
  for (let i = 0; i < polygon.length - 1; i++) {
    let pA = polygon[i];
    let pB = polygon[i + 1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter && inter.t1 >= 0 && inter.t1 <= 1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }

  cutParams.sort((a, b) => a.t - b.t);
  let outSegments = [];
  for (let i = 0; i < cutParams.length - 1; i++) {
    let tA = cutParams[i].t;
    let tB = cutParams[i + 1].t;
    if (tB - tA < 1e-9) continue;
    let tMid = (tA + tB) / 2;
    let mx = x1 + (x2 - x1) * tMid;
    let my = y1 + (y2 - y1) * tMid;
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i + 1].x, cutParams[i + 1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2 - ax1) * (by2 - by1) - (ay2 - ay1) * (bx2 - bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2 - bx1) * (ay1 - by1) - (by2 - by1) * (ax1 - bx1)) / denom;
  let ub = ((ax2 - ax1) * (ay1 - by1) - (ay2 - ay1) * (ax1 - bx1)) / denom;
  return {
    x: ax1 + ua * (ax2 - ax1),
    y: ay1 + ua * (ay2 - ay1),
    t1: ua,
    t2: ub
  };
}

function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i = 0; i < polygon.length - 1; i++) {
    let xi = polygon[i].x, yi = polygon[i].y;
    let xj = polygon[i + 1].x, yj = polygon[i + 1].y;
    let intersect = ((yi > py) !== (yj > py)) &&
      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

/**
 * =======================================
 * Visibility Check
 * =======================================
 */
function computeFinalVisibleColors() {
  finalVisibleColors.clear();
  for (let sh of shapes) {
    if (sh.lineSegments.length > 0) {
      finalVisibleColors.add(sh.colorIndex);
    }
  }
}

/**
 * =======================================
 * Canvas Rendering
 * =======================================
 */
function renderClippedShapesOnCanvas() {
  // Draw shapes from bottom to top
  for (let i = 0; i < shapes.length; i++) {
    let sh = shapes[i];
    if (sh.lineSegments.length === 0) continue;
    let c = colors[sh.colorIndex];
    applyStrokeWithOpacity(c.hex);
    strokeWeight(strokeWeightValue);
    for (let seg of sh.lineSegments) {
      line(seg[0], seg[1], seg[2], seg[3]);
    }
  }
}

function drawMarkersOnCanvas() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  // top-left corner
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  // bottom-right corner
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function drawColorPaletteBarsOnCanvas() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  // Show final visible colors in sorted order
  let visibleColorsSorted = [...finalVisibleColors].sort((a, b) => a - b);
  let numColors = visibleColorsSorted.length;
  if (numColors === 0) return;

  let totalGaps = (numColors - 1) * gapSize;
  let segmentLength = (paletteLength - totalGaps) / numColors;
  let xStart = (width - paletteLength) / 2;

  strokeWeight(barHeight);

  for (let i = 0; i < numColors; i++) {
    let cidx = visibleColorsSorted[i];
    let c = colors[cidx];
    applyStrokeWithOpacity(c.hex);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

/**
 * =======================================
 * p5.js Key Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    initialUsedColors.clear();
    finalVisibleColors.clear();
    shapes = [];
    background(255);
    setup();
  }
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  let ts = Date.now();
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);

  // For each visible color, create a separate file
  let visibleColorsArr = [...finalVisibleColors].sort((a, b) => a - b);
  visibleColorsArr.forEach((cidx) => {
    let colorSVG = generateSVG(cidx);
    let colorName = colors[cidx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cidx}-${colorName}-PORTRAIT-${ts}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // Gather segments for each visible color
    let visibleColorsArr = [...finalVisibleColors].sort((a, b) => a - b);
    visibleColorsArr.forEach((colorIndex, idx) => {
      let pathData = '';
      for (let sh of shapes) {
        if (sh.colorIndex === colorIndex && sh.lineSegments.length > 0) {
          for (let seg of sh.lineSegments) {
            pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
          }
        }
      }
      svgContent += addSegmentsSVG(colorIndex, idx + 1, 0, pathData);
    });
  } else {
    // Single color
    if (!finalVisibleColors.has(activeColor)) {
      svgContent += '</svg>';
      return svgContent;
    }
    let pathData = '';
    for (let sh of shapes) {
      if (sh.colorIndex === activeColor && sh.lineSegments.length > 0) {
        for (let seg of sh.lineSegments) {
          pathData += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
        }
      }
    }
    svgContent += addSegmentsSVG(activeColor, 1, activeColor, pathData);
  }

  svgContent += '</svg>';
  return svgContent;
}

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 * @param {string} pathData
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor, pathData) {
  let svg = '';
  let color = colors[colorIndex];
  let strokeWidth = strokeWeightValue; 

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

  // If we have path data, draw it
  if (pathData !== '') {
    svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
  }

  // Add palette bar for this color using selectedColorIndices
  let usedColorsOrdered = selectedColorIndices; 
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);

    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
  }

  svg += '</g>n';
  return svg;
}

/**
 * Add corner markers to SVG
 */
function addMarkersSVG() {
  const sw = 1;
  const offset = sw / 2;
  return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${(5 + offset).toFixed(2)},${offset.toFixed(2)} 
             L${offset.toFixed(2)},${offset.toFixed(2)} 
             L${offset.toFixed(2)},${(5 + offset).toFixed(2)}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
          stroke-width="${sw}" fill="none" />n
    </g>n`;
}

function saveSVGFile(svgData, fileName) {
  let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
  let url = URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}