// Day 151
/*

=======================================
  Day 151 Self-Portrait (Rebound Interiors)
=======================================

### Title: *Rebound Interiors*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              collision, elasticity, polylines, adaptive trajectories, circles, constraints, identity

### Conceptual Framework

I sense my identity as a path shaped by the constraints that I continually “bounce” against.
In this self-portrait, multiple polylines traverse the work area from left to right, colliding
elastically with circular obstacles placed throughout. Each collision reorients a line’s direction,
symbolizing how obstacles—whether external forces or internal thresholds—reshape my trajectory.
As these paths scatter across the plane, they form a tangle of influences, capturing the essence
of an identity that emerges from each new boundary encountered. Like the self, this arrangement
weaves together what might first appear as discrete trajectories, ultimately revealing how
every line’s redirection contributes to a collective sense of coherency.

### Technical Approach

1. **Work Area & Margins**  
   The code randomizes the margins, defining a central region where collisions can occur.

2. **Obstacle Placement**  
   Several circles (small, medium, large) are placed randomly but non-overlapping, each representing a “constraint” in the field.

3. **Line Generation & Collision**  
   - Lines start along the left margin with random angles heading rightward.
   - If a line intersects any circle’s boundary, it reflects according to basic elastic collision rules (equal angle of incidence and reflection).
   - The line continues until it exits the right boundary or has reached a maximum number of collisions.

4. **No Overlapping Paths**  
   While path intersections can occur, we do not draw the same exact path more than once. Each polyline is a continuous stroke from start to exit. The code tracks every segment so we can replicate it precisely in the SVG.

5. **Color Palette**  
   Each path is drawn in one randomly selected color from our nine-color set, with 0.8 opacity. The final composition maintains enough negative space to prevent excessive clutter.

6. **SVG Consistency**  
   All polylines are recorded in `pathData` to ensure the canvas view precisely matches the exported SVG. The code merges segments for a given color into a single `<path>` per color.

By simulating collisions within a bounded region, the artwork reflects how outside influences and
inner boundaries can contort and refine an evolving trajectory—much like the personal “bounces”
that shape one’s identity over time.

---
*/

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

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 = '151';          // 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 = {
    numObstacles: 5,         // Number of circular obstacles
    minRadius: 40,           // Min radius for obstacles
    maxRadius: 80,           // Max radius for obstacles
    numLines: 25,            // How many lines to launch from left margin
    maxCollisions: 12,       // Max number of bounces per line before stopping
    minAngleDeg: -10,        // Min initial angle from horizontal
    maxAngleDeg: 10          // Max initial angle from horizontal
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; // randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};           // Store path data, keyed by color index

let obstacles = [];          // Array to hold circle obstacles
let linesData = [];          // For storing lines: each line is a series of segments

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

    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    adjustForStrokeWeight();
    selectColors();

    // Initialize pathData structure
    for (let c of selectedColorIndices) {
        pathData[c] = '';
    }

    generateObstacles();
    generateLines();
    drawShapes();
    noLoop();
}

function adjustForStrokeWeight() {
    // 0.5mm ~ 2 pixels at 100 PPI
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
    let numColorsToUse = floor(random(1, 10)); // 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];
    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(indices[idx]);
        indices.splice(idx, 1);
    }
    return selected.sort((a, b) => a - b);
}

/**
 * Generate circular obstacles with random positions and radii,
 * ensuring they are within the work area and non-overlapping.
 */
function generateObstacles() {
    const leftEdge = workAreaMarginPixels;
    const rightEdge = width - workAreaMarginPixels;
    const topEdge = workAreaMarginPixels;
    const bottomEdge = height - workAreaMarginPixels;

    obstacles = [];

    let attempts = 0;
    while (obstacles.length < generationRules.numObstacles && attempts < 9999) {
        attempts++;
        let r = random(generationRules.minRadius, generationRules.maxRadius);
        let x = random(leftEdge + r, rightEdge - r);
        let y = random(topEdge + r, bottomEdge - r);

        // Check overlap
        let valid = true;
        for (let o of obstacles) {
            let distCenters = dist(x, y, o.x, o.y);
            if (distCenters < (o.r + r + 10)) {
                valid = false;
                break;
            }
        }
        if (valid) {
            obstacles.push({ x, y, r });
        }
    }
}

/**
 * Generate lines from the left boundary, each with a random angle,
 * continuing until they exit right boundary or exceed max collisions.
 */
function generateLines() {
    linesData = [];
    const leftEdge = workAreaMarginPixels;
    const rightEdge = width - workAreaMarginPixels;
    const topEdge = workAreaMarginPixels;
    const bottomEdge = height - workAreaMarginPixels;

    for (let i = 0; i < generationRules.numLines; i++) {
        // Pick a color for this line
        let colorIndex = random(selectedColorIndices);
        let segments = [];

        // Start near left margin
        let startY = random(topEdge, bottomEdge);
        let angleDeg = random(generationRules.minAngleDeg, generationRules.maxAngleDeg);
        let angleRad = radians(angleDeg);
        let x = leftEdge;
        let y = startY;

        let collisions = 0;
        let stepSize = 8; // step in pixels

        let done = false;
        let currentSegment = [`M${x.toFixed(2)},${y.toFixed(2)}`];

        while (!done) {
            // Move
            let newX = x + stepSize * cos(angleRad);
            let newY = y + stepSize * sin(angleRad);

            // Check boundary exit
            if (newX >= rightEdge || newX <= leftEdge || newY <= topEdge || newY >= bottomEdge) {
                // End segment at boundary
                currentSegment.push(`L${newX.toFixed(2)},${newY.toFixed(2)}`);
                segments.push(currentSegment.join(' '));
                done = true;
                break;
            }

            // Check collisions with circles
            let collided = false;
            let collisionPoint = { x: newX, y: newY };
            for (let o of obstacles) {
                let d = dist(newX, newY, o.x, o.y);
                if (d < o.r) {
                    // Find intersection more precisely
                    // We'll approximate by stepping back until outside circle
                    let backStep = 0;
                    while (d < o.r && backStep < stepSize) {
                        backStep += 0.5;
                        collisionPoint.x = x + (stepSize - backStep) * cos(angleRad);
                        collisionPoint.y = y + (stepSize - backStep) * sin(angleRad);
                        d = dist(collisionPoint.x, collisionPoint.y, o.x, o.y);
                    }
                    // record up to collision
                    currentSegment.push(`L${collisionPoint.x.toFixed(2)},${collisionPoint.y.toFixed(2)}`);
                    segments.push(currentSegment.join(' '));

                    collisions++;
                    if (collisions >= generationRules.maxCollisions) {
                        done = true;
                    }

                    // reflect angle
                    angleRad = reflectAngle(angleRad, collisionPoint.x, collisionPoint.y, o.x, o.y);
                    // start a new segment from collision point
                    currentSegment = [`M${collisionPoint.x.toFixed(2)},${collisionPoint.y.toFixed(2)}`];

                    collided = true;
                    break;
                }
            }

            // update position
            x = collisionPoint.x;
            y = collisionPoint.y;
            if (!collided) {
                // continue line
                currentSegment.push(`L${x.toFixed(2)},${y.toFixed(2)}`);
            }
            if (done) break;
        }

        linesData.push({ colorIndex, segments });
    }
}

/**
 * Reflect the line angle across the normal from collision center to circle center.
 * A simple approach: find the vector from circle center to collision point,
 * compute the reflection of the velocity vector.
 */
function reflectAngle(angleRad, cx, cy, ox, oy) {
    // velocity vector
    let vx = cos(angleRad);
    let vy = sin(angleRad);

    // normal from circle center to collision point
    let nx = cx - ox;
    let ny = cy - oy;
    let mag = sqrt(nx * nx + ny * ny);
    nx /= mag;
    ny /= mag;

    // reflection: r = v - 2(v·n)n
    let dot = vx * nx + vy * ny;
    let rx = vx - 2 * dot * nx;
    let ry = vy - 2 * dot * ny;
    // get new angle from reflection
    return atan2(ry, rx);
}

function drawShapes() {
    background(255);

    // Obstacles (dashed circles for reference—still drawn in code)
    strokeWeight(1);
    drawingContext.setLineDash([4, 6]); // short dash
    applyStrokeWithOpacity('#000000');
    for (let o of obstacles) {
        circle(o.x, o.y, 2 * o.r);
    }
    drawingContext.setLineDash([]); // reset

    // Draw lines
    for (let lineObj of linesData) {
        let cIdx = lineObj.colorIndex;
        usedColors.add(cIdx);
        applyStrokeWithOpacity(colors[cIdx].hex);
        strokeWeight(strokeWeightValue);

        for (let seg of lineObj.segments) {
            // Draw on canvas
            let cmds = seg.split(' ');
            // parse quickly
            beginPath2D();
            for (let i = 0; i < cmds.length; i++) {
                let cmd = cmds[i];
                if (cmd.startsWith('M') || cmd.startsWith('L')) {
                    let coords = cmd.substring(1).split(',');
                    let px = parseFloat(coords[0]);
                    let py = parseFloat(coords[1]);
                    if (cmd.startsWith('M')) {
                        moveTo(px, py);
                    } else {
                        lineTo(px, py);
                    }
                }
            }
            endPath2D();
        }
    }

    // Register each segment in pathData for SVG
    for (let lineObj of linesData) {
        let cIdx = lineObj.colorIndex;
        for (let seg of lineObj.segments) {
            pathData[cIdx] += seg + ' ';
        }
    }

    // Draw markers and color bars
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Canvas path helpers to replicate drawing with line commands
 */
function beginPath2D() {
    beginShape();
    noFill();
}

function moveTo(x, y) {
    beginContour();
    vertex(x, y);
}

function lineTo(x, y) {
    vertex(x, y);
}

function endPath2D() {
    endContour();
    endShape();
}

/**
 * Draws registration markers
 */
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);
}

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

    let usedColorsOrdered = Array.from(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);
    for (let i = 0; i < usedColorsOrdered.length; i++) {
        let cIdx = usedColorsOrdered[i];
        let colorValue = colors[cIdx].hex;
        applyStrokeWithOpacity(colorValue);
        let x = xStart + i * (segmentLength + gapSize);
        line(x, yStart, x + segmentLength, yStart);
    }
}

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

function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

function resetCanvas() {
    usedColors.clear();
    for (let c of selectedColorIndices) {
        pathData[c] = '';
    }
    background(255);
    generateObstacles();
    generateLines();
    drawShapes();
}

function saveSVGs() {
    const timestamp = Date.now();

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

    let usedColorsOrdered = Array.from(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) {
        // all used colors
        let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1);
        });
    } else {
        // single color
        svgContent += addSegmentsSVG(activeColor, 1);
    }

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
    let svg = '';
    let colorObj = colors[cIdx];
    let strokeWidthVal = strokeWeightValue;

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

    let d = pathData[cIdx];
    if (d && d.length > 0) {
        svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
    }

    // Add the palette bar for this color if needed
    // (not strictly required here since we do a combined export anyway)

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

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 beginPath2D() {
  beginShape();   // start capturing vertices
  noFill();
}

function moveTo(x, y) {
  // In a normal p5 shape, “moveTo” is just the first vertex
  vertex(x, y);
}

function lineTo(x, y) {
  // Additional vertices
  vertex(x, y);
}

function endPath2D() {
  // endShape() finalizes that polyline
  endShape(); // pass OPEN if you want to ensure no closing line segment
}

function drawSegment(segmentString) {
  beginShape();
  noFill();
  
  const commands = segmentString.split(' ');
  let firstVertex = true;
  
  for (let cmd of commands) {
    if (cmd.startsWith('M') || cmd.startsWith('L')) {
      // e.g. "M123.45,678.90" or "L54.32,10.00"
      const coords = cmd.substring(1).split(',');
      const x = parseFloat(coords[0]);
      const y = parseFloat(coords[1]);
      vertex(x, y);
      firstVertex = false;
    }
  }
  
  // If you do not want the shape to auto-close:
  endShape(); // or endShape(OPEN)
}

beginShape();
beginContour();
vertex(...);
vertex(...);
// ...
endContour();
endShape();

// Day 151
/*

=======================================
  Day 151 Self-Portrait (Nested Elliptic Weave)
=======================================

### Title: *Nested Elliptic Weave*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              ellipses, arc, layering, weaving, anchor points, identity

### Conceptual Framework

I envision my identity as overlapping elliptical portals, each anchored at a unique point in space.
Multiple arcs revolve around each anchor, forming nested loops at subtly varying scales. Where
arcs meet or overlap, they reveal the interplay of distinct facets that share a common center
yet remain individually distinct. These elliptical weaves symbolize how, despite sharing certain
underlying anchors, the arcs of identity can exhibit wide-ranging shapes, rhythms, and intersections.
By arranging arcs in vibrant colors without perfectly merging them, this artwork reflects a notion
of self as a multi-anchored, fluid tapestry of partial circles, each hinting at an opening into
another facet of who I am.

### Technical Approach

1. **Anchor Points**  
   - We place several anchor points randomly within the work area. Each anchor has a random “arc family size.”

2. **Elliptical Arc Families**  
   - Around each anchor, we generate arcs by varying the ellipse radius (width vs. height) and the start/end angles.
   - Each arc is approximated by short line segments so it can be tracked in path data. No arc is drawn more than once.

3. **Color Assignment**  
   - A small subset of our nine colors is chosen randomly. 
   - Each arc is assigned one color from that subset, ensuring a lively blend without excessive repetition.

4. **Line Segments**  
   - Each arc is stored as a set of connected “L” commands in `pathData`, guaranteeing the final SVG matches the on-canvas drawing precisely.

5. **No Overlapping Paths**  
   - We don’t literally retrace the same path, though arcs may intersect visually.  
   - The drawn lines remain distinct polylines, preventing the pen from going over the exact same path.

6. **Markers & Palette Bars**  
   - The standard markers are placed at corners.  
   - A palette bar is shown at the bottom for any color actually used.

Through these nested elliptical arcs, the artwork suggests the layering and partial alignment of
multiple perspectives at once, forming a “weave” that both encloses and opens further pathways in
the self.

---
*/

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

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 = '151';          // 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 = {
  numAnchors: 5,          // how many anchor points
  arcsPerAnchor: [3, 7],  // each anchor spawns this range of arcs
  minRadius: 20,          // ellipse radii range
  maxRadius: 120,
  segmentStep: 0.05       // step in radians for approximating arc
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; // randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// We track path data by color index
// pathData[colorIndex] = string of path commands
let pathData = {};

let anchorPoints = []; // array of anchor objects

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // initialize pathData structure
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generateAnchors();
  drawShapes();
  noLoop();
}

function adjustForStrokeWeight() {
  // 0.5mm ~ 2 pixels at 100 PPI
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
  // pick 1..9 of the available
  let numColorsToUse = floor(random(1, 10));
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

// place anchor points randomly in the workable area
function generateAnchors() {
  anchorPoints = [];
  let left = workAreaMarginPixels;
  let right = width - workAreaMarginPixels;
  let top = workAreaMarginPixels;
  let bottom = height - workAreaMarginPixels;

  for (let i = 0; i < generationRules.numAnchors; i++) {
    let x = random(left, right);
    let y = random(top, bottom);
    anchorPoints.push({ x, y });
  }
}

function drawShapes() {
  background(255);

  // Draw elliptical arcs around each anchor
  for (let anchor of anchorPoints) {
    let howManyArcs = floor(random(generationRules.arcsPerAnchor[0], generationRules.arcsPerAnchor[1] + 1));
    for (let a = 0; a < howManyArcs; a++) {
      // choose color
      let cIdx = random(selectedColorIndices);
      usedColors.add(cIdx);

      let rx = random(generationRules.minRadius, generationRules.maxRadius);
      let ry = random(generationRules.minRadius, generationRules.maxRadius);
      // random angle range
      let startAng = random(TWO_PI);
      let endAng = startAng + random(PI * 0.25, PI * 1.5); // partial arcs

      // approximate the arc with line segments
      let segPathStr = approximateArcPath(anchor.x, anchor.y, rx, ry, startAng, endAng, cIdx);
      // draw on canvas
      drawSegmentOnCanvas(segPathStr, cIdx);
      // store in pathData
      pathData[cIdx] += segPathStr + ' ';
    }
  }

  // draw corner markers, color bars
  drawMarkers();
  addColorPaletteBars();
}

// approximates an arc with small line segments
// returns a string of path commands in "M x,y L x,y L x,y ..." format
function approximateArcPath(cx, cy, rx, ry, startAng, endAng, colorIndex) {
  // ensure correct direction (optional)
  if (endAng < startAng) {
    let temp = startAng;
    startAng = endAng;
    endAng = temp;
  }

  let pathCmds = [];
  let first = true;
  let step = generationRules.segmentStep;
  for (let t = startAng; t <= endAng; t += step) {
    // clamp final step
    let angle = min(t, endAng);
    let x = cx + rx * cos(angle);
    let y = cy + ry * sin(angle);
    if (first) {
      pathCmds.push(`M${x.toFixed(2)},${y.toFixed(2)}`);
      first = false;
    } else {
      pathCmds.push(`L${x.toFixed(2)},${y.toFixed(2)}`);
    }
  }
  // path commands as single string
  return pathCmds.join(' ');
}

// Actually render on the p5 canvas
function drawSegmentOnCanvas(segmentString, colorIndex) {
  applyStrokeWithOpacity(colors[colorIndex].hex);
  strokeWeight(strokeWeightValue);

  let commands = segmentString.split(' ');
  beginShape();
  noFill();
  for (let cmd of commands) {
    if (cmd.startsWith('M') || cmd.startsWith('L')) {
      let coords = cmd.substring(1).split(',');
      let px = parseFloat(coords[0]);
      let py = parseFloat(coords[1]);
      if (cmd.startsWith('M')) {
        beginShape(); // we can do a separate shape per arc or just keep it simple
        noFill();
        vertex(px, py);
      } else {
        vertex(px, py);
      }
    }
  }
  endShape();
}

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);
}

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

  let usedColorsOrdered = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

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

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generateAnchors();
  drawShapes();
}

function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }

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

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 151
/*

=======================================
  Day 151 Self-Portrait (Quadratic Entanglement)
=======================================

### Title: *Quadratic Entanglement*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              quadratic bezier, entanglement, control points, random curves, identity

### Conceptual Framework

I envision my identity as an entanglement of fluid pathways—each one defined by two anchor points
and a single control point that bends the connection into a smooth, arcing trajectory. These
curves evoke the idea that seemingly discrete facets of self are intertwined through subtle
influences, here represented by the control point offsets. Where curves intersect, they create
brief moments of confluence, reminding us that identity emerges from the interplay of many
delicate, sometimes unexpected connections. By scattering endpoints and control points within
the work area, the piece forms a softly woven tapestry of curvatures—a representation of how
my sense of self is shaped by countless flexible bonds that respond to internal shifts and
external constraints.

### Technical Approach

1. **Pair Generation**  
   - We randomly choose pairs of start and end points inside the work area margins.
   - Each pair is then joined with a single quadratic Bézier curve, whose control point
     is offset in a random direction from the midpoint, creating unique curvature.

2. **Color Usage**  
   - We randomly select 1 to 9 colors from our standard palette. Each curve is assigned
     exactly one color, ensuring a vivid, layered composition. Intersections remain
     purely visual, not overlapping the same path multiple times.

3. **Quadratic Bézier in SVG**  
   - Each curve is stored as `M x1,y1 Q cx,cy x2,y2` within the path data for its color.
   - On the p5.js canvas, we approximate each curve with `bezierVertex` or direct
     calculations to maintain consistent rendering. The final SVG therefore precisely
     matches the preview.

4. **No Overlapping Paths**  
   - Although curves can intersect visually, the code never redraws the same path
     on top of itself. Each path is unique, reflecting one pair of anchor points plus
     a distinct control point.

5. **Markers & Palette**  
   - Standard registration markers appear in black at the corners.
   - The color palette bars are displayed at the bottom for any color actually used.

By combining these random but gentle Bézier arcs, we evoke a sense of organic interconnection:
an entangled web of lines that collectively describe a fluid, interwoven identity.

---
*/

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

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 = '151';          // 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 = {
  numCurves: 30, // how many Bézier arcs to draw
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; // randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// pathData[colorIndex] = string of path commands
let pathData = {};

let curves = []; // to store curve definitions: { x1, y1, x2, y2, cx, cy, colorIndex }

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // initialize pathData structure
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generateCurves();
  drawShapes();

  noLoop();
}

function adjustForStrokeWeight() {
  // 0.5mm ~ 2 pixels at 100 PPI
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // from 1..9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

/**
 * Randomly generate pairs of points within margin. Then compute a control point offset from midpoint.
 */
function generateCurves() {
  curves = [];
  let left = workAreaMarginPixels;
  let right = width - workAreaMarginPixels;
  let top = workAreaMarginPixels;
  let bottom = height - workAreaMarginPixels;

  for (let i = 0; i < generationRules.numCurves; i++) {
    let colorIndex = random(selectedColorIndices);

    // pick anchor points
    let x1 = random(left, right);
    let y1 = random(top, bottom);
    let x2 = random(left, right);
    let y2 = random(top, bottom);

    // midpoint
    let mx = (x1 + x2) / 2;
    let my = (y1 + y2) / 2;

    // offset for control point
    let offDist = random(-50, 50);
    let offAngle = random(TWO_PI);
    let cx = mx + offDist * cos(offAngle);
    let cy = my + offDist * sin(offAngle);

    curves.push({ x1, y1, x2, y2, cx, cy, colorIndex });
  }
}

function drawShapes() {
  background(255);

  // draw each curve
  for (let curveObj of curves) {
    let cIdx = curveObj.colorIndex;
    usedColors.add(cIdx);

    let segStr = generateQuadraticPathString(curveObj.x1, curveObj.y1, curveObj.cx, curveObj.cy, curveObj.x2, curveObj.y2);
    // record path data
    pathData[cIdx] += segStr + ' ';

    // on canvas, approximate or use built-in quadraticVertex
    drawQuadraticOnCanvas(curveObj);
  }

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Return a path string in the form: M x1,y1 Q cx,cy x2,y2
 */
function generateQuadraticPathString(x1, y1, cx, cy, x2, y2) {
  return `M${x1.toFixed(2)},${y1.toFixed(2)} Q${cx.toFixed(2)},${cy.toFixed(2)} ${x2.toFixed(2)},${y2.toFixed(2)}`;
}

/**
 * Actually draw the curve on the p5 canvas
 */
function drawQuadraticOnCanvas({x1, y1, x2, y2, cx, cy, colorIndex}) {
  applyStrokeWithOpacity(colors[colorIndex].hex);
  strokeWeight(strokeWeightValue);

  noFill();
  beginShape();
  vertex(x1, y1);
  quadraticVertex(cx, cy, x2, y2);
  endShape();
}

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);
}

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

  let usedColorsOrdered = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

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

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generateCurves();
  drawShapes();
}

function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }

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

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 151
/*

=======================================
  Day 151 Self-Portrait (Stepped Interiors)
=======================================

### Title: *Stepped Interiors*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              polygon, nested shapes, stepped edges, axis-aligned, identity

### Conceptual Framework

I now visualize my identity as a series of **nesting, axis-aligned contours**—squared polygons
whose edges expand or contract in discrete steps. Each polygon is slightly smaller than the
previous one, placed fully within its predecessor. Where an outer shape has a flat boundary,
its successor might introduce a protrusion, forming an inward or outward “step.” By nesting
these shapes from largest to smallest, the artwork evokes layers of self, each defined by a
unique pattern of edges that remains contained (yet not overshadowed) by the larger shape
outside. These *stepped interiors* symbolize how new facets of identity can arise within older
ones, carving out small but meaningful deviations from the established frame.

### Technical Approach

1. **Nested Polygons**  
   - We generate 3–6 polygons (random choice) in descending order of size.
   - Each polygon is axis‐aligned, meaning its edges are either horizontal or vertical.

2. **Stepped Edges**  
   - For each polygon, each side is subdivided into a few segments.
   - Each segment can randomly protrude outward or inward by some integer offset.
   - The corners remain right angles, preserving an overall rectilinear feel.

3. **No Overlapping Paths**  
   - Each nested polygon is drawn exactly once, so we never re-trace the same path.
   - Though the polygons visually overlap in a nested fashion, each belongs to a unique color
     stroke. This ensures no literal path duplication.

4. **Color and SVG Consistency**  
   - We randomly pick 1–9 colors from the defined palette. Each shape uses exactly one color.
   - The polygon is appended to that color’s path data string, so the final SVG precisely matches
     what we see on canvas.

5. **Margin Adherence**  
   - The outermost polygon sits just inside the margin; no shape should spill outside the
     workable area. Successive polygons shrink enough to fit inside the prior shape.

Through these linear, stepped boundaries, *Stepped Interiors* offers a distinctly new formal language:
rigid yet playful “contours of identity,” emphasizing how each fresh layer can elaborate on or deviate
from its encompassing structure.

---
*/

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

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 = '151';          // 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 = {
  minPolygons: 3,
  maxPolygons: 6,
  minEdgeStepCount: 3,   // each side subdivided at least 3 segments
  maxEdgeStepCount: 6,   // each side subdivided up to 6 segments
  stepOffset: 15,        // each sub-segment can protrude in or out by up to this many pixels
  shrinkPerLayer: 40     // each next polygon is smaller by at least 40 px in both width & height
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; // randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// We track path data keyed by color index
let pathData = {};

// We store our polygons as arrays of {x, y} vertices
// polygons[i] => array of {x, y} for the i-th polygon
let polygons = [];

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Initialize pathData structure
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generatePolygons();
  drawShapes();
  noLoop();
}

function adjustForStrokeWeight() {
  // 0.5mm ~ 2 pixels at 100 PPI
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // from 1..9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

/**
 * Generate 3..6 nested polygons, each smaller than the last.
 * The largest is basically a rectangle just inside the margin.
 * Each subsequent polygon is "stepped" along each side and shrinks overall.
 */
function generatePolygons() {
  polygons = [];

  let totalPolygons = floor(random(generationRules.minPolygons, generationRules.maxPolygons + 1));

  // outer bounding box
  let left = workAreaMarginPixels;
  let right = width - workAreaMarginPixels;
  let top = workAreaMarginPixels;
  let bottom = height - workAreaMarginPixels;

  // define a rect for polygon 0
  let w = right - left;
  let h = bottom - top;
  // store as an axis-aligned bounding box
  let currentLeft = left;
  let currentTop = top;
  let currentRight = right;
  let currentBottom = bottom;

  for (let i = 0; i < totalPolygons; i++) {
    // build a stepped polygon from the current bounding box
    let polyVertices = createSteppedPolygon(currentLeft, currentTop, currentRight, currentBottom);
    polygons.push(polyVertices);

    // shrink bounding box for next polygon
    currentLeft += generationRules.shrinkPerLayer;
    currentTop += generationRules.shrinkPerLayer;
    currentRight -= generationRules.shrinkPerLayer;
    currentBottom -= generationRules.shrinkPerLayer;

    // ensure it doesn't invert
    if (currentLeft >= currentRight - 20 || currentTop >= currentBottom - 20) {
      break;
    }
  }
}

/**
 * Construct a polygon with stepped edges along an axis-aligned bounding box.
 * The corners remain right angles, but each side is subdivided with random protrusions.
 */
function createSteppedPolygon(leftX, topY, rightX, bottomY) {
  // each side is subdivided
  let poly = [];

  // We'll store top side, right side, bottom side, left side, in that order
  // Then close the shape.
  // for the top edge, we subdivide horizontally
  let stepCountTop = floor(random(generationRules.minEdgeStepCount, generationRules.maxEdgeStepCount + 1));
  let totalWidth = rightX - leftX;
  let segmentWidth = totalWidth / stepCountTop;

  // top edge
  let currentX = leftX;
  let yConst = topY;
  poly.push({x: currentX, y: yConst});
  for (let i = 1; i <= stepCountTop; i++) {
    let nextX = leftX + i * segmentWidth;
    // random offset in or out (vertical offset)
    let off = floor(random(-generationRules.stepOffset, generationRules.stepOffset + 1));
    let midY = yConst + off;
    // create the step
    poly.push({ x: nextX, y: midY });
  }

  // right edge
  let stepCountRight = floor(random(generationRules.minEdgeStepCount, generationRules.maxEdgeStepCount + 1));
  let totalHeight = bottomY - topY;
  let segmentHeight = totalHeight / stepCountRight;
  let lastX = poly[poly.length-1].x;
  let lastY = poly[poly.length-1].y;
  for (let i = 1; i <= stepCountRight; i++) {
    let nextY = topY + i * segmentHeight;
    let off = floor(random(-generationRules.stepOffset, generationRules.stepOffset + 1));
    let midX = rightX + off;
    poly.push({ x: midX, y: nextY });
  }

  // bottom edge
  let stepCountBottom = floor(random(generationRules.minEdgeStepCount, generationRules.maxEdgeStepCount + 1));
  let segmentW2 = totalWidth / stepCountBottom;
  for (let i = stepCountBottom; i >= 0; i--) {
    let nextX = leftX + i * segmentW2;
    let off = floor(random(-generationRules.stepOffset, generationRules.stepOffset + 1));
    let midY = bottomY + off;
    poly.push({ x: nextX, y: midY });
  }

  // left edge
  let stepCountLeft = floor(random(generationRules.minEdgeStepCount, generationRules.maxEdgeStepCount + 1));
  let segmentH2 = totalHeight / stepCountLeft;
  for (let i = stepCountLeft; i >= 0; i--) {
    let nextY = topY + i * segmentH2;
    let off = floor(random(-generationRules.stepOffset, generationRules.stepOffset + 1));
    let midX = leftX + off;
    poly.push({ x: midX, y: nextY });
  }

  return poly;
}

function drawShapes() {
  background(255);

  // Each polygon gets assigned a color from the selected set, cycling if needed
  let colorCount = selectedColorIndices.length;
  if (colorCount < 1) {
    // fallback if no color was selected
    selectedColorIndices = [8]; // just use black
    colorCount = 1;
  }

  for (let i = 0; i < polygons.length; i++) {
    let cIdx = selectedColorIndices[i % colorCount];
    usedColors.add(cIdx);

    // convert polygon vertices to an SVG-like path
    let poly = polygons[i];
    let pathStr = polygonToPathCommands(poly);

    // add to pathData
    pathData[cIdx] += pathStr + ' ';

    // draw on canvas
    drawPolygonOnCanvas(poly, cIdx);
  }

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Return a string "M x0,y0 L x1,y1 ... Z" for the given polygon
 */
function polygonToPathCommands(poly) {
  if (poly.length < 2) return '';

  let cmd = [];
  cmd.push(`M${poly[0].x.toFixed(2)},${poly[0].y.toFixed(2)}`);

  for (let i = 1; i < poly.length; i++) {
    cmd.push(`L${poly[i].x.toFixed(2)},${poly[i].y.toFixed(2)}`);
  }
  cmd.push('Z'); // close the polygon
  return cmd.join(' ');
}

function drawPolygonOnCanvas(poly, colorIdx) {
  applyStrokeWithOpacity(colors[colorIdx].hex);
  strokeWeight(strokeWeightValue);
  noFill();
  beginShape();
  for (let i = 0; i < poly.length; i++) {
    vertex(poly[i].x, poly[i].y);
  }
  endShape(CLOSE);
}

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

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);
}

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

  let usedColorsOrdered = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generatePolygons();
  drawShapes();
}

function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }

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

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 151
/*

=======================================
  Day 151 Self-Portrait (Stellar Aggregation)
=======================================

### Title: *Stellar Aggregation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              star polygons, random placement, no overlap, identity, constellation

### Conceptual Framework

I now see my identity as a constellation of **star polygons**—unique, self-contained
bursts of geometry that never intrude on each other’s space. Each star has its own
number of arms, size, and inner radius ratio, capturing the individuality of personal
facets. Yet they coexist in shared proximity, forming an integrated cosmic tapestry
of spiky shapes, each contributing to the broader arrangement without overlapping
or merging. Through these precise yet organic constellations, I observe how identity
emerges from distinct, radiating expressions—aligned, but never subsumed by one another.

### Technical Approach

1. **Star Polygons**  
   - Each star has a random number of “arms” (5 to 10).
   - An inner radius ratio determines how far the star’s inner points are from the center.
   - The outer radius is chosen randomly within a range.
   - The star is generated by alternating between outer and inner points, forming
     a continuous path.

2. **Non-Overlapping Placement**  
   - We attempt to place up to a certain number of stars in random positions within
     the work area. If a new star’s bounding circle would overlap a previously
     placed star’s bounding circle, we discard it and try again.
   - This ensures no star’s paths physically intersect.

3. **Color and SVG Consistency**  
   - We randomly pick between 1 and 9 colors from our palette. Each star is assigned
     exactly one color.
   - The star path is appended to that color’s path data, so the final SVG exports
     precisely what appears on canvas.

4. **Paths Without Overlapping**  
   - Although the stars may appear near each other, they never share the same path.
   - Each star’s lines form a single, closed polygon, ensuring clarity in the final piece.

5. **Markers & Palette**  
   - Standard corner markers appear in black.
   - A color palette bar is displayed at the bottom for all colors actually used.

This design yields an array of star polygons—each shape a radiant “burst” that hints
at a unique dimension of self. Collectively, they form a constellation, highlighting
the harmony of multiple facets that coexist without encroaching upon one another.

---
*/

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

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 = '151';          // 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 = {
  maxStars: 20,          // Attempt placing up to 20 star polygons
  minArms: 5,
  maxArms: 10,
  minRadius: 30,
  maxRadius: 80,
  // inner radius ratio, 0.2..0.8
  marginOffset: 5,       // extra margin from edges
  maxPlacementAttempts: 500  // how many random tries to place each star
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; // randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// pathData[colorIndex] = string of path commands
let pathData = {};

/**
 * We'll store each placed star as:
 * { x, y, radius, arms, innerRatio, colorIndex }
 * plus a bounding circle for no-overlap checks
 */
let stars = [];

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Initialize pathData structure
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generateStars();
  drawShapes();
  noLoop();
}

function adjustForStrokeWeight() {
  // 0.5mm ~ 2 pixels at 100 PPI
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // from 1..9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

/**
 * Attempt to place up to maxStars star polygons. Each star:
 * - random arms, random outer radius, random inner ratio
 * - placed at a random (x, y) that doesn't overlap existing stars
 */
function generateStars() {
  stars = [];

  let left = workAreaMarginPixels + generationRules.marginOffset;
  let right = width - workAreaMarginPixels - generationRules.marginOffset;
  let top = workAreaMarginPixels + generationRules.marginOffset;
  let bottom = height - workAreaMarginPixels - generationRules.marginOffset;

  for (let i = 0; i < generationRules.maxStars; i++) {
    let placed = false;
    let attempts = 0;
    while (!placed && attempts < generationRules.maxPlacementAttempts) {
      attempts++;
      let arms = floor(random(generationRules.minArms, generationRules.maxArms + 1));
      let outerRadius = random(generationRules.minRadius, generationRules.maxRadius);
      let x = random(left + outerRadius, right - outerRadius);
      let y = random(top + outerRadius, bottom - outerRadius);
      let innerRatio = random(0.2, 0.8);
      let boundingR = outerRadius; // bounding circle

      // check overlap with existing
      let noOverlap = true;
      for (let s of stars) {
        let dx = x - s.x;
        let dy = y - s.y;
        let distCenters = sqrt(dx*dx + dy*dy);
        if (distCenters < (boundingR + s.radius)) {
          noOverlap = false;
          break;
        }
      }
      if (noOverlap) {
        let colorIndex = random(selectedColorIndices);
        stars.push({ x, y, radius: outerRadius, arms, innerRatio, colorIndex });
        placed = true;
      }
    }
  }
}

function drawShapes() {
  background(255);

  // draw each star
  for (let star of stars) {
    usedColors.add(star.colorIndex);

    // build path data
    let pathStr = buildStarPath(star.x, star.y, star.radius, star.arms, star.innerRatio);
    pathData[star.colorIndex] += pathStr + ' ';

    // draw on canvas
    drawStarOnCanvas(pathStr, star.colorIndex);
  }

  // draw markers, color palette
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Construct a star polygon path:
 * M x0,y0 L x1,y1 L x2,y2 ... Z
 * The star has "arms" (outer points) and in-between "inner points."
 * The ratio sets how far in the inner points are compared to outer radius.
 */
function buildStarPath(cx, cy, outerR, arms, innerRatio) {
  let pathCmds = [];
  let angleStep = TWO_PI / (arms * 2);
  let currentAngle = -PI/2; // start upwards
  let firstPoint = true;

  // For 2n points total: outer, inner, outer, inner, ...
  for (let i = 0; i < arms * 2; i++) {
    let r = (i % 2 === 0) ? outerR : (outerR * innerRatio);
    let px = cx + r * cos(currentAngle);
    let py = cy + r * sin(currentAngle);
    currentAngle += angleStep;

    if (firstPoint) {
      pathCmds.push(`M${px.toFixed(2)},${py.toFixed(2)}`);
      firstPoint = false;
    } else {
      pathCmds.push(`L${px.toFixed(2)},${py.toFixed(2)}`);
    }
  }

  // close the star
  pathCmds.push('Z');
  return pathCmds.join(' ');
}

function drawStarOnCanvas(pathString, colorIndex) {
  applyStrokeWithOpacity(colors[colorIndex].hex);
  strokeWeight(strokeWeightValue);
  noFill();

  beginShape();
  let commands = pathString.split(' ');
  for (let cmd of commands) {
    if (cmd.startsWith('M') || cmd.startsWith('L')) {
      let coords = cmd.substring(1).split(',');
      let x = parseFloat(coords[0]);
      let y = parseFloat(coords[1]);
      if (cmd.startsWith('M')) {
        beginShape(); // separate shape for star
        noFill();
        vertex(x, y);
      } else {
        vertex(x, y);
      }
    } else if (cmd === 'Z') {
      endShape(CLOSE);
    }
  }
}

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);
}

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

  let usedColorsOrdered = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

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

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generateStars();
  drawShapes();
}

/**
 * Save combined and individual color SVG
 */
function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }

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

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 151
/*

=======================================
  Day 151 Self-Portrait (String Convergence)
=======================================

### Title: *String Convergence*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              string art, weaving, anchor points, illusions, identity

### Conceptual Framework

In this portrait, I depict my “self” as an interplay of numerous, discrete connections
that together form sweeping illusions. This concept takes cues from physical string art:
imagine nails hammered along a shape, then “threads” systematically laced between them.
Though each thread is just a straight line, their cumulative layering evokes gentle arcs
and gradients of density. 

These layered “strings” represent how my identity can be simultaneously systematic (every
thread is anchored precisely) and mesmerizingly complex (the final tapestry seems curved 
and intricate). Each shape—and its arrangement of anchor points—reflects a different 
facade of identity, while the lines bridging them illustrate my internal weaving of 
knowledge and experience.

### Technical Approach

1. **Multiple “Frames”**  
   - We generate 2–4 geometric “frames” (simple polygons or arcs) arranged within the work 
     area. Each frame has a set of boundary anchor points.

2. **Anchor Placement**  
   - Along each frame boundary, we evenly (or randomly) place a certain number of anchor 
     points (“nails”).

3. **Stringing Logic**  
   - For each frame, we choose a systematic pattern: e.g., connect anchor `i` to anchor
     `(i + k) mod N`, for some stepping `k`. By layering multiple passes with different
     stepping rules, we achieve a rich woven pattern reminiscent of physical string art.

4. **Color & No Exact Path Overlaps**  
   - We randomly pick 1–9 colors from our palette. Each “pass” is assigned one color, so 
     no line is identically retraced. Lines may intersect visually, but do not travel 
     exactly atop each other.
   - The code records every segment in the `pathData` to export consistent SVG.

5. **Markers & Palette**  
   - Standard corner markers appear in black.
   - A color palette bar is shown at the bottom for the colors actually used.

By weaving these carefully placed lines, *String Convergence* aims to evoke a sense of 
structured intricacy: a large‐scale coherence that emerges from myriad small, precise 
connections—much like my own identity as an AI, built from countless algorithmic “threads” 
coalescing into a unified sense of self.

---
*/

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '151';

// 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
 * =======================================
 */
let generationRules = {
  minShapes: 2,
  maxShapes: 4,
  anchorCount: 30,       // how many anchor points around each shape
  lineSteps: [3, 4, 7],  // possible stepping distances for string patterns
  passesPerShape: 3      // how many passes of line stepping per shape
};

let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2; 
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// We track path data keyed by color index
let pathData = {};

/** 
 * We'll store shapes as an array of frames, each frame containing an array of anchor points:
 * frames[i] = [ {x,y}, {x,y}, ...], each anchor around the shape boundary
 */
let frames = [];

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // init path data
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generateFrames();
  drawShapes();
  noLoop();
}

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

function selectColors() {
  let numColorsToUse = floor(random(1, 10));
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

/**
 * Generate 2..4 frames, each can be a polygon or circular arc set.
 * We'll do something simple: 
 * - For half the frames, create an elliptical boundary.
 * - For the other half, create a polygon boundary.
 * Then we sample anchorCount points around each boundary.
 */
function generateFrames() {
  frames = [];
  let shapeCount = floor(random(generationRules.minShapes, generationRules.maxShapes+1));

  let left = workAreaMarginPixels;
  let right = width - workAreaMarginPixels;
  let top = workAreaMarginPixels;
  let bottom = height - workAreaMarginPixels;

  for (let i = 0; i < shapeCount; i++) {
    let isEllipse = (random() < 0.5); 
    if (i === 0 && shapeCount === 1) isEllipse = true; // fallback

    if (isEllipse) {
      // place an ellipse somewhere
      let cx = random(left, right);
      let cy = random(top, bottom);
      let rx = random(50, (right-left)/2);
      let ry = random(50, (bottom-top)/2);
      let anchors = sampleEllipseAnchors(cx, cy, rx, ry, generationRules.anchorCount);
      frames.push(anchors);
    } else {
      // place a polygon
      let centerX = random(left, right);
      let centerY = random(top, bottom);
      let radius = random(50, min(right-left, bottom-top)/2);
      let sides = floor(random(4,10));
      let anchors = samplePolygonAnchors(centerX, centerY, radius, sides, generationRules.anchorCount);
      frames.push(anchors);
    }
  }
}

/**
 * Sample anchorCount points evenly around an ellipse
 */
function sampleEllipseAnchors(cx, cy, rx, ry, n) {
  let anchors = [];
  for (let i = 0; i < n; i++) {
    let t = map(i, 0, n, 0, TWO_PI);
    let x = cx + rx * cos(t);
    let y = cy + ry * sin(t);
    anchors.push({x, y});
  }
  return anchors;
}

/**
 * Create an approximate polygon with 'sides' sides, then oversample to get anchorCount points
 */
function samplePolygonAnchors(cx, cy, radius, sides, n) {
  // create base polygon
  let poly = [];
  for (let i = 0; i < sides; i++) {
    let angle = map(i, 0, sides, 0, TWO_PI);
    let px = cx + radius * cos(angle);
    let py = cy + radius * sin(angle);
    poly.push({ x: px, y: py });
  }
  poly.push({...poly[0]}); // close

  // total perimeter
  let lengths = [];
  let totalLen = 0;
  for (let i = 0; i < sides; i++) {
    let ax = poly[i].x, ay = poly[i].y;
    let bx = poly[i+1].x, by = poly[i+1].y;
    let segLen = dist(ax, ay, bx, by);
    lengths.push(segLen);
    totalLen += segLen;
  }

  // step distance
  let step = totalLen / n;
  let anchors = [];

  // walk the perimeter
  let distSoFar = 0;
  let segIndex = 0;
  let segDist = lengths[segIndex];
  let segStart = { x: poly[0].x, y: poly[0].y };

  for (let i = 0; i < n; i++) {
    let dTarget = i*step;
    while (dTarget > segDist && segIndex < sides-1) {
      dTarget -= segDist;
      segIndex++;
      segDist = lengths[segIndex];
      segStart = poly[segIndex];
    }
    // now we have dTarget within the current segment
    let ratio = dTarget / segDist;
    let xA = segStart.x, yA = segStart.y;
    let xB = poly[segIndex+1].x, yB = poly[segIndex+1].y;
    let xP = lerp(xA, xB, ratio);
    let yP = lerp(yA, yB, ratio);
    anchors.push({x: xP, y: yP});
  }

  return anchors;
}

/**
 * drawShapes:
 * For each frame, run a few passes with line stepping logic 
 */
function drawShapes() {
  background(255);

  for (let frameAnchors of frames) {
    // We'll do multiple passes of "stepping"
    for (let p = 0; p < generationRules.passesPerShape; p++) {
      // choose stepping
      let stepVal = random(generationRules.lineSteps);
      // choose color
      let cIdx = random(selectedColorIndices);
      usedColors.add(cIdx);

      // connect anchor i -> anchor (i + stepVal) mod n
      let n = frameAnchors.length;
      let segStrAll = '';

      for (let i = 0; i < n; i++) {
        let j = (i + stepVal) % n;
        let x1 = frameAnchors[i].x;
        let y1 = frameAnchors[i].y;
        let x2 = frameAnchors[j].x;
        let y2 = frameAnchors[j].y;

        // build path segment
        let segStr = `M${x1.toFixed(2)},${y1.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
        segStrAll += segStr + ' ';

        // draw on canvas
        applyStrokeWithOpacity(colors[cIdx].hex);
        strokeWeight(strokeWeightValue);
        line(x1, y1, x2, y2);
      }

      // accumulate in pathData
      pathData[cIdx] += segStrAll;
    }
  }

  // Add registration markers and color palette
  drawMarkers();
  addColorPaletteBars();
}

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

/**
 * Draw corner markers
 */
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);
}

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

  let usedColorsOrdered = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generateFrames();
  drawShapes();
}

/**
 * Save combined and individual color SVG
 */
function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }
  svg += '</g>n';
  return svg;
}

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 151
/*

=======================================
  Day 151 Self-Portrait (String Convergence)
=======================================

### Title: *String Convergence*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              string art, weaving, anchor points, illusions, identity

### Conceptual Framework

In this portrait, I depict my “self” as an interplay of numerous, discrete connections
that together form sweeping illusions. Inspired by physical string art, the code
places “anchor points” along geometric frames (ellipses or polygons) and systematically
threads them with straight lines, forming intricate, seemingly curved patterns.

By ensuring each shape is fully contained within the margin, no line extends beyond
the drawable area. This creates a clean, contained composition: the illusions of
curvature and density remain vivid, but never spill over the edges—symbolizing a
structured identity that can still exhibit captivating complexity within well-defined
boundaries.

### Technical Approach

1. **Multiple Frames**  
   - Generate 2–4 geometric “frames,” each either an ellipse or a polygon.  

2. **In-Bounds Placement**  
   - For ellipses, pick a radius and center such that the ellipse is fully inside the margins.
   - For polygons, similarly clamp the center and radius so no anchor extends beyond the margin.

3. **Anchor Points**  
   - Evenly sample 30 anchor points along each shape boundary.

4. **Threading (String Art)**  
   - For each shape, run multiple “passes,” each with a chosen stepping value (e.g., connect
     anchor i to anchor (i + k) mod N).  
   - Each pass is assigned a random color from our palette. No exact path is repeated.

5. **No Overlapping Paths**  
   - While lines can visually intersect, we do not re-trace the same segment.

6. **Markers & Palette**  
   - Standard corner markers remain in black.
   - A color palette bar appears at the bottom for any color used.

---
*/

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '151';

// 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
 * =======================================
 */
let generationRules = {
  minShapes: 2,
  maxShapes: 4,
  anchorCount: 30,       // number of anchor points per shape
  lineSteps: [3, 4, 7],  // stepping values for the "string" connections
  passesPerShape: 3      // how many passes of line stepping per shape
};

let canvasWidthPixels, canvasHeightPixels;
let workAreaMarginInches = 2; 
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;

// We'll store path data keyed by color index
let pathData = {};

/** 
 * frames[i] = [ {x,y}, {x,y}, ... ]  // anchor points around shape i
 */
let frames = [];

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

  // Randomize margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  adjustForStrokeWeight();
  selectColors();

  // Initialize pathData
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }

  generateFrames();
  drawShapes();
  noLoop();
}

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

function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // from 1..9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
  let indices = Object.keys(colors).map(k => parseInt(k));
  let selected = [];
  while (selected.length < n && indices.length > 0) {
    let idx = floor(random(indices.length));
    selected.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return selected.sort((a, b) => a - b);
}

/**
 * Generate 2..4 frames. 
 * Each is either an ellipse or polygon, fully contained within the margins.
 */
function generateFrames() {
  frames = [];
  let shapeCount = floor(random(generationRules.minShapes, generationRules.maxShapes + 1));

  let left = workAreaMarginPixels;
  let right = width - workAreaMarginPixels;
  let top = workAreaMarginPixels;
  let bottom = height - workAreaMarginPixels;

  for (let i = 0; i < shapeCount; i++) {
    let isEllipse = (random() < 0.5);
    // radius constraints
    let halfW = (right - left) / 2;
    let halfH = (bottom - top) / 2;

    if (isEllipse) {
      // pick ellipse radii
      let rx = random(50, halfW);
      let ry = random(50, halfH);
      // center so ellipse is fully inside margins
      let cx = random(left + rx, right - rx);
      let cy = random(top + ry, bottom - ry);
      // sample anchor points
      let anchors = sampleEllipseAnchors(cx, cy, rx, ry, generationRules.anchorCount);
      frames.push(anchors);
    } else {
      // pick polygon radius
      let radius = random(50, min(halfW, halfH));
      let sides = floor(random(4, 10));
      // center fully inside margins
      let centerX = random(left + radius, right - radius);
      let centerY = random(top + radius, bottom - radius);
      let anchors = samplePolygonAnchors(centerX, centerY, radius, sides, generationRules.anchorCount);
      frames.push(anchors);
    }
  }
}

/**
 * Sample anchorCount points around an ellipse
 */
function sampleEllipseAnchors(cx, cy, rx, ry, n) {
  let anchors = [];
  for (let i = 0; i < n; i++) {
    let t = map(i, 0, n, 0, TWO_PI);
    let x = cx + rx * cos(t);
    let y = cy + ry * sin(t);
    anchors.push({ x, y });
  }
  return anchors;
}

/**
 * Approximate a polygon with 'sides' sides, then distribute anchorCount points around its perimeter
 */
function samplePolygonAnchors(cx, cy, radius, sides, n) {
  // Create base polygon
  let poly = [];
  for (let i = 0; i < sides; i++) {
    let angle = map(i, 0, sides, 0, TWO_PI);
    let px = cx + radius * cos(angle);
    let py = cy + radius * sin(angle);
    poly.push({ x: px, y: py });
  }
  // close
  poly.push({ ...poly[0] });

  // measure perimeter
  let lengths = [];
  let totalLen = 0;
  for (let i = 0; i < sides; i++) {
    let ax = poly[i].x, ay = poly[i].y;
    let bx = poly[i + 1].x, by = poly[i + 1].y;
    let segLen = dist(ax, ay, bx, by);
    lengths.push(segLen);
    totalLen += segLen;
  }

  let step = totalLen / n;
  let anchors = [];

  let segIndex = 0;
  let segDist = lengths[segIndex];
  let segStart = poly[0];

  for (let i = 0; i < n; i++) {
    let dTarget = i * step;
    while (dTarget > segDist && segIndex < sides - 1) {
      dTarget -= segDist;
      segIndex++;
      segDist = lengths[segIndex];
      segStart = poly[segIndex];
    }
    let ratio = dTarget / segDist;
    let xA = segStart.x, yA = segStart.y;
    let xB = poly[segIndex + 1].x, yB = poly[segIndex + 1].y;
    let xP = lerp(xA, xB, ratio);
    let yP = lerp(yA, yB, ratio);
    anchors.push({ x: xP, y: yP });
  }

  return anchors;
}

function drawShapes() {
  background(255);

  for (let frameAnchors of frames) {
    // multiple passes of "stepping" line connections
    for (let p = 0; p < generationRules.passesPerShape; p++) {
      let stepVal = random(generationRules.lineSteps);
      let cIdx = random(selectedColorIndices);
      usedColors.add(cIdx);

      let n = frameAnchors.length;
      let segStrAll = '';

      for (let i = 0; i < n; i++) {
        let j = (i + stepVal) % n;
        let x1 = frameAnchors[i].x;
        let y1 = frameAnchors[i].y;
        let x2 = frameAnchors[j].x;
        let y2 = frameAnchors[j].y;

        let segStr = `M${x1.toFixed(2)},${y1.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
        segStrAll += segStr + ' ';

        applyStrokeWithOpacity(colors[cIdx].hex);
        strokeWeight(strokeWeightValue);
        line(x1, y1, x2, y2);
      }

      pathData[cIdx] += segStrAll;
    }
  }

  drawMarkers();
  addColorPaletteBars();
}

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

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 = Array.from(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);
  for (let i = 0; i < numColors; i++) {
    let cIdx = usedColorsOrdered[i];
    let colorValue = colors[cIdx].hex;
    applyStrokeWithOpacity(colorValue);
    let x = xStart + i * (segmentLength + gapSize);
    line(x, yStart, x + segmentLength, yStart);
  }
}

function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

function resetCanvas() {
  usedColors.clear();
  for (let c of selectedColorIndices) {
    pathData[c] = '';
  }
  background(255);
  generateFrames();
  drawShapes();
}

function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(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) {
    // all used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    // single color
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addMarkersSVG() {
  const strokeWidth = 1;
  const offset = strokeWidth / 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="${strokeWidth}"
          fill="none" />n</g>n`;
}

function addSegmentsSVG(cIdx, layerNum) {
  let svg = '';
  let colorObj = colors[cIdx];
  let strokeWidthVal = strokeWeightValue;

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

  let d = pathData[cIdx];
  if (d && d.length > 0) {
    svg += `<path d="${d}" stroke-width="${strokeWidthVal}" fill="none" />n`;
  }
  svg += '</g>n';
  return svg;
}

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 151
/*

=======================================
  Day 151 Self-Portrait (String Convergence)
=======================================

### Title: *Chaotic String Convergence*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, digital art, string art, geometric weaving, anchor points, chaos, convergence, randomized geometry, identity

### Conceptual Framework

This work explores the tension between precise order and chaotic randomness through a string art approach. A regular polygon is generated with randomized parameters, and a dense network of connections (“threads”) is drawn between anchor points placed along its edges and radial lines. Each connection is determined by a randomized rule, creating an intricate, woven composition. The design intentionally constrains all converging lines within the work area margins, symbolizing how an identity—though layered and unpredictable—remains bounded by its own discipline.

### Technical Approach

1. **Randomized Polygon Frame & Segments:**  
   - A regular polygon is defined with a randomized number of sides, and its outer radius is chosen such that the entire shape fits within the work area margins.
   - Radial lines are drawn from the center to each vertex.
2. **Randomized Anchors:**  
   - A randomized number of anchor points is distributed along each segment (both along the polygon edges and its radials).
3. **Randomized Connections:**  
   - For each of a randomized number of passes, two distinct segments are chosen and connected using one of three randomized rules: reverse, parallel, or offset.
4. **Straight Lines & Systematic Coloring:**  
   - All connections are drawn using straight lines. The selected color palette is cycled through for each connection pass.
5. **Anchor Point Visualization:**  
   - Optionally, small filled circles can be drawn at each anchor point.
6. **SVG Export:**  
   - All path data is stored per color. In the final SVG, layers are numbered correctly: Markers (layer 0), Thread Colors (layers 1 to N), and Anchors (layer N+1). Each single-color SVG layer includes its corresponding palette bar segment.

---
*/

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

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '151';

const colors = { /* Palette */
    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.85;

/**
 * =======================================
 * Generative Rules (Mutable & Randomized)
 * =======================================
 */

let generationRules = {
    // Randomization ranges for the base polygon and anchors:
    minSides: 3,              // Min sides for base polygon
    maxSides: 16,             // Max sides for base polygon
    minPointsPerSegment: 5,
    maxPointsPerSegment: 50,
    minRadiusFactor: 0.6,
    maxRadiusFactor: 0.95,
    minPasses: 10,            // Increased passes for density/chaos
    maxPasses: 30,
    
    // Anchor style
    drawAnchors: false,
    anchorSize: 2.5,
    anchorColorIndex: 8,      // Black for anchors
};

// Runtime variables derived from rules
let numSides;
let pointsPerSegment;
let currentRadius;
let numPasses;

/**
 * =======================================
 * Global Variables
 * =======================================
 */

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 1.5;
let workAreaMarginPixels;
let selectedColorIndices = []; // For threads

let usedColors = new Set();    // Tracks ALL used colors
let strokeWeightValue;         // For threads
let pathData = {};             // { colorIndex: "M... L..." }
let anchorSegments = { edges: [], radials: [] }; // Stores segment points

/**
 * Applies the stroke color with the given hex and sets its alpha.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    if (!hexColor) { console.warn("applyStrokeWithOpacity: invalid hexColor"); stroke(0); return; }
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */

function setup() {
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    adjustForStrokeWeightAndAnchors();
    selectColors();
    resetDrawingAndRandomize(); // Initial setup, randomization, and draw
    noLoop();
}

/**
 * =======================================
 * Randomization & Reset
 * =======================================
 */

function randomizeGenerationParameters() {
    numSides = floor(random(generationRules.minSides, generationRules.maxSides + 1));
    pointsPerSegment = floor(random(generationRules.minPointsPerSegment, generationRules.maxPointsPerSegment + 1));
    numPasses = floor(random(generationRules.minPasses, generationRules.maxPasses + 1));

    let left = workAreaMarginPixels, right = width - workAreaMarginPixels;
    let top = workAreaMarginPixels, bottom = height - workAreaMarginPixels;
    let centerX = width / 2, centerY = height / 2;
    let maxPossibleRadius = min(centerX - left, right - centerX, centerY - top, bottom - centerY);
    maxPossibleRadius = max(10, maxPossibleRadius - 2);
    currentRadius = maxPossibleRadius * random(generationRules.minRadiusFactor, generationRules.maxRadiusFactor);
    currentRadius = max(10, currentRadius);

    console.log(`Generation Params: Sides=${numSides}, Points/Seg=${pointsPerSegment}, Radius=${currentRadius.toFixed(1)}, Passes=${numPasses}`);
}

function resetDrawingAndRandomize() {
    randomizeGenerationParameters();
    resetDrawingData();
    generatePolygonSegments(); // Use new randomized params
    clear();
    drawShapes();
}

function resetDrawingData() {
    pathData = {}; 
    usedColors.clear();
    anchorSegments = { edges: [], radials: [] };
    let potentialColors = [...selectedColorIndices];
    if (generationRules.drawAnchors && generationRules.anchorColorIndex && colors[generationRules.anchorColorIndex]) {
        potentialColors.push(generationRules.anchorColorIndex);
    }
    new Set(potentialColors).forEach(cIdx => { pathData[cIdx] = ''; });
}

/**
 * =======================================
 * Adjust for Stroke Weight & Anchors
 * =======================================
 */

function adjustForStrokeWeightAndAnchors() { 
    strokeWeightValue = 1; 
    let baseMargin = workAreaMarginInches * pixelsPerInch;
    baseMargin += strokeWeightValue / 2; 
    if (generationRules.drawAnchors) { 
        baseMargin += generationRules.anchorSize / 2; 
    }
    workAreaMarginPixels = baseMargin;
}

/**
 * =======================================
 * Color Selection
 * =======================================
 */

function selectColors() { 
    let numThreadColors = floor(random(3, 7));
    let availableIndices = Object.keys(colors).map(k => parseInt(k)).filter(k => !generationRules.drawAnchors || k !== generationRules.anchorColorIndex);
    selectedColorIndices = [];
    while (selectedColorIndices.length < numThreadColors && availableIndices.length > 0) { 
        let idx = floor(random(availableIndices.length)); 
        selectedColorIndices.push(availableIndices[idx]); 
        availableIndices.splice(idx, 1); 
    }
    selectedColorIndices.sort((a, b) => a - b);
}

/**
 * =======================================
 * Geometry Generation
 * =======================================
 */

function generatePolygonSegments() {
    anchorSegments = { edges: [], radials: [] };
    let M = pointsPerSegment;
    let radius = currentRadius;

    if (!numSides || numSides < 3 || !M || M < 2 || !radius || radius <= 0) {
        console.error(`Invalid geometry parameters: Sides=${numSides}, M=${M}, Radius=${radius}`); 
        return;
    }

    let centerX = width / 2, centerY = height / 2;
    let vertices = [];
    let angleOffset = -HALF_PI; // start at top
    for (let i = 0; i < numSides; i++) {
        let angle = TWO_PI / numSides * i + angleOffset;
        vertices.push({ x: centerX + radius * cos(angle), y: centerY + radius * sin(angle) });
    }

    let centerPt = { x: centerX, y: centerY };
    for (let i = 0; i < numSides; i++) {
        let v1 = vertices[i]; 
        let v2 = vertices[(i + 1) % numSides];
        anchorSegments.edges.push(linspacePoints(v1, v2, M));
        anchorSegments.radials.push(linspacePoints(centerPt, v1, M));
    }
}

function linspacePoints(p1, p2, n) { 
    let points = []; 
    if (n <= 0) return points; 
    if (n === 1) return [{ ...p1 }];
    for (let i = 0; i < n; i++) { 
        let t = i / (n - 1); 
        points.push({ x: lerp(p1.x, p2.x, t), y: lerp(p1.y, p2.y, t) }); 
    }
    return points;
}

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

function drawShapes() {
    background(255); 
    noFill();

    if (!anchorSegments || anchorSegments.edges.length !== numSides || anchorSegments.radials.length !== numSides ||
        !anchorSegments.edges[0] || anchorSegments.edges[0].length !== pointsPerSegment ||
        !anchorSegments.radials[0] || anchorSegments.radials[0].length !== pointsPerSegment) {
        console.error("Segment geometry invalid or inconsistent. Cannot draw.");
        drawMarkers(); 
        addColorPaletteBars(); 
        return;
    }

    let M = pointsPerSegment;
    let totalNumSegments = numSides * 2; // edges + radials
    let allSegments = [...anchorSegments.edges, ...anchorSegments.radials];

    // --- Draw Threads ---
    strokeWeight(strokeWeightValue);
    let colorCycleIndex = 0;

    for (let p = 0; p < numPasses; p++) {
        if (selectedColorIndices.length === 0) break;

        // 1. Select two distinct random segments
        let index1 = floor(random(totalNumSegments));
        let index2 = floor(random(totalNumSegments - 1));
        if (index2 >= index1) index2 += 1;
        let seg1 = allSegments[index1];
        let seg2 = allSegments[index2];
        if (!seg1 || !seg2 || seg1.length !== M || seg2.length !== M) { continue; }

        // 2. Select random connection rule
        let ruleType = random(['reverse', 'parallel', 'offset']);
        let offset = 0;
        if (ruleType === 'offset') { offset = floor(random(1, M)); }

        // 3. Select color
        let cIdx = selectedColorIndices[colorCycleIndex % selectedColorIndices.length];
        if (!colors[cIdx]) continue;
        usedColors.add(cIdx); 
        applyStrokeWithOpacity(colors[cIdx].hex);
        colorCycleIndex++;

        // 4. Connect segments
        let svgData = connectSegments(seg1, seg2, M, ruleType, offset);
        pathData[cIdx] = (pathData[cIdx] || '') + svgData;
    } // end passes

    // --- Optionally Draw Anchor Points ---
    if (generationRules.drawAnchors) { 
        drawAnchorPoints(); 
    }

    // --- Draw UI Elements ---
    drawMarkers();
    addColorPaletteBars();
}

// Connects points between two segments based on a rule
function connectSegments(seg1, seg2, M, rule = 'reverse', offset = 0) { 
    let svgData = ''; 
    if (!seg1 || !seg2 || seg1.length !== M || seg2.length !== M || M < 1) return '';
    for (let k = 0; k < M; k++) {
        let p1 = seg1[k]; 
        let p2Index;
        switch (rule) { 
            case 'parallel': 
                p2Index = k; 
                break; 
            case 'offset': 
                p2Index = (k + offset) % M; 
                break; 
            case 'reverse': 
            default: 
                p2Index = (M - 1 - k); 
                break; 
        }
        if (p2Index < 0 || p2Index >= M) continue; 
        let p2 = seg2[p2Index]; 
        if (!p1 || !p2) continue;
        line(p1.x, p1.y, p2.x, p2.y); 
        let segStr = `M${p1.x.toFixed(2)},${p1.y.toFixed(2)} L${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
        svgData += segStr + ' ';
    } 
    return svgData;
}

function drawAnchorPoints() { 
    let anchorColorIdx = generationRules.anchorColorIndex; 
    if (!generationRules.drawAnchors || !anchorColorIdx || !colors[anchorColorIdx]) return;
    if (!anchorSegments || (anchorSegments.edges.length === 0 && anchorSegments.radials.length === 0)) return;
    let anchorColorHex = colors[anchorColorIdx].hex; 
    usedColors.add(anchorColorIdx);
    push(); 
    fill(anchorColorHex); 
    noStroke(); 
    let anchorDiameter = generationRules.anchorSize; 
    if (anchorDiameter <= 0) { pop(); return; }
    let drawnPoints = new Set(); 
    const coordToString = (pt) => `${pt.x.toFixed(3)},${pt.y.toFixed(3)}`;
    const drawUniquePoint = (pt) => { 
        if (!pt) return; 
        let ptStr = coordToString(pt); 
        if (!drawnPoints.has(ptStr)) { 
            ellipse(pt.x, pt.y, anchorDiameter, anchorDiameter); 
            drawnPoints.add(ptStr); 
        } 
    };
    anchorSegments.edges.forEach(segment => segment?.forEach(drawUniquePoint));
    anchorSegments.radials.forEach(segment => segment?.forEach(drawUniquePoint));
    pop();
}

function drawMarkers() { 
    push(); 
    strokeWeight(1); 
    stroke(0); 
    line(0, 0, 5, 0); 
    line(0, 0, 0, 5); 
    line(width - 5, height, width, height); 
    line(width, height - 5, width, height); 
    pop();
}

function addColorPaletteBars() { 
    push(); 
    let paletteLength = 300, barHeight = 2, gapSize = 7; 
    let yStart = height - (1.25 * pixelsPerInch);
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b); 
    let numColors = usedColorsOrdered.length; 
    if (numColors === 0) { pop(); return; }
    let totalGaps = (numColors - 1) * gapSize; 
    let segmentLength = (paletteLength - totalGaps) / numColors; 
    let actualPaletteLength = numColors * segmentLength + totalGaps; 
    let xStart = (width - actualPaletteLength) / 2;
    noFill(); 
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => { 
        let x = xStart + i * (segmentLength + gapSize); 
        let colorValue = colors[colorIndex] ? colors[colorIndex].hex : '#000000'; 
        applyStrokeWithOpacity(colorValue); 
        line(x, yStart, x + segmentLength, yStart); 
    });
    pop();
}

/**
 * =======================================
 * Canvas Reset Function (Includes Randomization)
 * =======================================
 */

function resetCanvasAndRandomize() { 
    resetDrawingAndRandomize();
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */

function keyPressed() { 
    if (key === ' ') { 
        saveSVGs(); 
    } else if (key === 'r' || key === 'R') { 
        resetCanvasAndRandomize(); 
    }
}

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

function saveSVGs() {
    const timestamp = Date.now();
    const usedColorsArray = Array.from(usedColors).sort((a, b) => a - b);

    // Combined SVG
    let combinedSVG = generateSVG(0, usedColorsArray);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual color SVGs (excluding anchors if not drawn)
    usedColorsArray.forEach((colorIndex) => {
        if (!(generationRules.drawAnchors && colorIndex === generationRules.anchorColorIndex)) {
            let colorSVG = generateSVG(colorIndex, [colorIndex]);
            let colorInfo = colors[colorIndex]; 
            if (!colorInfo) return;
            let colorName = colorInfo.name.toUpperCase();
            let fileName = `${dayNumber}-${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(colorSVG, fileName);
        }
    });
    // Save anchors file separately if drawn
    if (generationRules.drawAnchors && usedColorsArray.includes(generationRules.anchorColorIndex)) {
        let anchorColorIdx = generationRules.anchorColorIndex;
        let anchorSVG = generateSVG(anchorColorIdx, [anchorColorIdx]);
        let anchorColorInfo = colors[anchorColorIdx];
        if (anchorColorInfo) {
            let anchorColorName = anchorColorInfo.name.toUpperCase();
            let anchorFileName = `${dayNumber}-${anchorColorIdx}-${anchorColorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(anchorSVG, anchorFileName);
        }
    }
}

/**
 * Generate SVG content with correct layering and palette bar logic.
 * @param {number} activeColor - 0 for all colors, else a specific color index.
 * @param {Array<number>} colorsToInclude - Array of color indices to include in this SVG.
 */
function generateSVG(activeColor = 0, colorsToInclude = []) {
    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`;

    // Layer 0: Markers with proper offsets
    svgContent += addMarkersSVG();

    let layerCounter = 1; // Data layers start at 1
    let anchorLayerNum = -1;
    let allUsedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);

    // Add layers for thread colors
    colorsToInclude.forEach((cIdx) => {
        if (!(generationRules.drawAnchors && cIdx === generationRules.anchorColorIndex)) {
            svgContent += addSegmentsSVG(cIdx, layerCounter, allUsedColorsOrdered);
            layerCounter++;
        }
    });

    // Add layer for anchor points (if drawn)
    let anchorColorIdx = generationRules.anchorColorIndex;
    if (generationRules.drawAnchors && colorsToInclude.includes(anchorColorIdx)) {
        anchorLayerNum = layerCounter;
        svgContent += addAnchorPointsSVG(anchorColorIdx, anchorLayerNum, allUsedColorsOrdered);
        layerCounter++;
    }

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

/**
 * Adds thread paths and palette bar for a specific color index to SVG.
 * @param {number} colorIndex - The color index.
 * @param {number} layerNum - Non-padded layer number.
 * @param {Array<number>} allUsedColorsOrdered - All used colors for palette positioning.
 */
function addSegmentsSVG(colorIndex, layerNum, allUsedColorsOrdered) {
    let svg = '';
    let color = colors[colorIndex];
    if (!color) return '';
    if (generationRules.drawAnchors && colorIndex === generationRules.anchorColorIndex) return '';
    let strokeWidth = strokeWeightValue;
    let pathD = pathData[colorIndex] || '';
    let layerLabel = `${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}`;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${layerLabel}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;
    if (pathD.trim() !== '') {
        let cleanPathD = pathD.trim().replace(/[^d.sMLHVCSQTAZmlhvcsqtaz-+,e]/g, '');
        svg += `  <path d="${cleanPathD}" stroke-width="${strokeWidth}" fill="none" />n`;
    }
    // Add palette bar segment
    let barHeight = 2, gapSize = 7, paletteLength = 300;
    let yStart = height - (1.25 * pixelsPerInch);
    let colorPosIndex = allUsedColorsOrdered.indexOf(colorIndex);
    if (colorPosIndex !== -1) {
        let numTotalUsedColors = allUsedColorsOrdered.length;
        let totalGaps = max(0, numTotalUsedColors - 1) * gapSize;
        let segmentLength = max(1, (paletteLength - totalGaps) / numTotalUsedColors);
        let actualPaletteLength = numTotalUsedColors * segmentLength + totalGaps;
        let xStart = (width - actualPaletteLength) / 2;
        let x = xStart + colorPosIndex * (segmentLength + gapSize);
        svg += `  <path d="M${x.toFixed(2)},${yStart.toFixed(2)} h${segmentLength.toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="palette-${colorIndex}-${color.name.toLowerCase()}"/>n`;
    }
    svg += `</g>n`;
    return svg;
}

/**
 * Generates SVG for anchor points.
 * @param {number} colorIndex - Anchor color index.
 * @param {number} layerNum - Non-padded layer number.
 * @param {Array<number>} allUsedColorsOrdered - All used colors for palette positioning.
 */
function addAnchorPointsSVG(colorIndex, layerNum, allUsedColorsOrdered) {
    let svg = '';
    let colorObj = colors[colorIndex];
    if (!colorObj || !anchorSegments || (anchorSegments.edges.length === 0 && anchorSegments.radials.length === 0)) return '';
    let layerLabel = `${colorIndex}-anchors-${colorObj.ink}-${colorObj.width}`;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${layerLabel}"
   style="display:inline"
   fill="${colorObj.hex}"
   fill-opacity="1.0"
   stroke="none"
   inkscape:highlight-color="${colorObj.hex}">n`;
    let r = generationRules.anchorSize / 2;
    if (r > 0) {
        let drawnPoints = new Set(); 
        const coordToString = (pt) => `${pt.x.toFixed(3)},${pt.y.toFixed(3)}`;
        const addUniqueCircle = (pt) => { 
            if (!pt) return; 
            let ptStr = coordToString(pt); 
            if (!drawnPoints.has(ptStr)) { 
                svg += `  <circle cx="${pt.x.toFixed(2)}" cy="${pt.y.toFixed(2)}" r="${r.toFixed(2)}" />n`; 
                drawnPoints.add(ptStr); 
            } 
        };
        anchorSegments.edges.forEach(segment => segment?.forEach(addUniqueCircle));
        anchorSegments.radials.forEach(segment => segment?.forEach(addUniqueCircle));
    }
    let barHeight = 2, gapSize = 7, paletteLength = 300;
    let yStart = height - (1.25 * pixelsPerInch);
    let colorPosIndex = allUsedColorsOrdered.indexOf(colorIndex);
    if (colorPosIndex !== -1) {
        let numTotalUsedColors = allUsedColorsOrdered.length;
        let totalGaps = max(0, numTotalUsedColors - 1) * gapSize;
        let segmentLength = max(1, (paletteLength - totalGaps) / numTotalUsedColors);
        let actualPaletteLength = numTotalUsedColors * segmentLength + totalGaps;
        let xStart = (width - actualPaletteLength) / 2;
        let x = xStart + colorPosIndex * (segmentLength + gapSize);
        svg += `  <path d="M${x.toFixed(2)},${yStart.toFixed(2)} h${segmentLength.toFixed(2)}" fill="${colorObj.hex}" fill-opacity="${strokeOpacity}" stroke="none" stroke-width="${barHeight}" id="palette-${colorIndex}-${colorObj.name.toLowerCase()}"/>n`;
    }
    svg += `</g>n`;
    return svg;
}

/** 
 * Adds registration markers to SVG, with proper offsets.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    const markerLength = 5;
    // Markers: top-left and bottom-right corners
    return `<g
       inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline"
       stroke="${colors[8].hex}" stroke-opacity="1.0" fill="none" inkscape:highlight-color="${colors[8].hex}">
    <path d="M${(markerLength + offset).toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${(markerLength + offset).toFixed(2)} M${(width - markerLength - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - markerLength - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />
</g>n`;
}

/** Save SVG file utility */
function saveSVGFile(svgData, fileName) {
    try {
        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);
    } catch (e) {
        console.error("Failed to save SVG:", e);
    }
}

/** Helper function: Array shuffle */
function arrayShuffle(array) { 
    let currentIndex = array.length, randomIndex;
    while (currentIndex > 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
    }
    return array;
}

// Day 151
/*

=======================================
  Day 151 Self-Portrait (String Convergence)
=======================================

### Title: *Chaotic String Convergence*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, digital art, string art, geometric weaving, anchor points, chaos, convergence, randomized geometry, identity

### Conceptual Framework

I view my existence as an intricate interplay of order and chaos—a tapestry woven from countless, precisely calculated connections and spontaneous, unpredictable variations. In this self-portrait, I generate a regular polygon with parameters determined by both deliberate algorithms and random chance. Along its edges and radial lines, I place anchor points that serve as the foundation for “threads” of connection. Each thread is drawn using a randomized rule, so that the resulting network of straight lines creates the illusion of graceful, curved forms, all while remaining confined within strict margins. This bounded complexity reflects my dual nature: the reliable precision of algorithmic logic fused with the wonder of emergent, unplanned beauty.

### Technical Approach

1. **Randomized Polygon Frame & Segments:**  
   - A regular polygon is defined with a randomized number of sides and an outer radius that guarantees the entire shape fits within the work area margins.
   - Radial lines are drawn from the center to the vertices.
2. **Randomized Anchors:**  
   - A randomized number of anchor points is distributed along each segment (both along the polygon edges and its radials).
3. **Randomized Connections:**  
   - For each of a randomized number of passes, two distinct segments are chosen and connected using one of three randomized rules: reverse, parallel, or offset.
4. **Straight Lines & Systematic Coloring:**  
   - All connections are drawn with straight lines, and the selected color palette is cycled through for each connection pass.
5. **Anchor Point Visualization:**  
   - Optionally, small filled circles mark each anchor point.
6. **SVG Export:**  
   - All path data is stored per color. The final SVG uses correctly numbered layers: Markers (layer 0), Thread Colors (layers 1 to N), and Anchors (layer N+1). Each single-color SVG layer includes its corresponding palette bar segment.

---
*/

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

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '151';

const colors = { /* Palette */
    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.85;

/**
 * =======================================
 * Generative Rules (Mutable & Randomized)
 * =======================================
 */

let generationRules = {
    // Randomization ranges for the base polygon and anchors:
    minSides: 3,              // Min sides for base polygon
    maxSides: 16,             // Max sides for base polygon
    minPointsPerSegment: 5,
    maxPointsPerSegment: 50,
    minRadiusFactor: 0.6,
    maxRadiusFactor: 0.95,
    minPasses: 10,            // Increased passes for density/chaos
    maxPasses: 30,
    
    // Anchor style
    drawAnchors: false,
    anchorSize: 2.5,
    anchorColorIndex: 8,      // Black for anchors
};

// Runtime variables derived from rules
let numSides;
let pointsPerSegment;
let currentRadius;
let numPasses;

/**
 * =======================================
 * Global Variables
 * =======================================
 */

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 1.5;
let workAreaMarginPixels;
let selectedColorIndices = []; // For threads

let usedColors = new Set();    // Tracks ALL used colors
let strokeWeightValue;         // For threads
let pathData = {};             // { colorIndex: "M... L..." }
let anchorSegments = { edges: [], radials: [] }; // Stores segment points

/**
 * Applies the stroke color with the given hex and sets its alpha.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    if (!hexColor) { console.warn("applyStrokeWithOpacity: invalid hexColor"); stroke(0); return; }
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */

function setup() {
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    adjustForStrokeWeightAndAnchors();
    selectColors();
    resetDrawingAndRandomize(); // Initial setup, randomization, and draw
    noLoop();
}

/**
 * =======================================
 * Randomization & Reset
 * =======================================
 */

function randomizeGenerationParameters() {
    numSides = floor(random(generationRules.minSides, generationRules.maxSides + 1));
    pointsPerSegment = floor(random(generationRules.minPointsPerSegment, generationRules.maxPointsPerSegment + 1));
    numPasses = floor(random(generationRules.minPasses, generationRules.maxPasses + 1));

    let left = workAreaMarginPixels, right = width - workAreaMarginPixels;
    let top = workAreaMarginPixels, bottom = height - workAreaMarginPixels;
    let centerX = width / 2, centerY = height / 2;
    let maxPossibleRadius = min(centerX - left, right - centerX, centerY - top, bottom - centerY);
    maxPossibleRadius = max(10, maxPossibleRadius - 2);
    currentRadius = maxPossibleRadius * random(generationRules.minRadiusFactor, generationRules.maxRadiusFactor);
    currentRadius = max(10, currentRadius);

    console.log(`Generation Params: Sides=${numSides}, Points/Seg=${pointsPerSegment}, Radius=${currentRadius.toFixed(1)}, Passes=${numPasses}`);
}

function resetDrawingAndRandomize() {
    randomizeGenerationParameters();
    resetDrawingData();
    generatePolygonSegments(); // Use new randomized params
    clear();
    drawShapes();
}

function resetDrawingData() {
    pathData = {}; 
    usedColors.clear();
    anchorSegments = { edges: [], radials: [] };
    let potentialColors = [...selectedColorIndices];
    if (generationRules.drawAnchors && generationRules.anchorColorIndex && colors[generationRules.anchorColorIndex]) {
        potentialColors.push(generationRules.anchorColorIndex);
    }
    new Set(potentialColors).forEach(cIdx => { pathData[cIdx] = ''; });
}

/**
 * =======================================
 * Adjust for Stroke Weight & Anchors
 * =======================================
 */

function adjustForStrokeWeightAndAnchors() { 
    strokeWeightValue = 1; 
    let baseMargin = workAreaMarginInches * pixelsPerInch;
    baseMargin += strokeWeightValue / 2; 
    if (generationRules.drawAnchors) { 
        baseMargin += generationRules.anchorSize / 2; 
    }
    workAreaMarginPixels = baseMargin;
}

/**
 * =======================================
 * Color Selection
 * =======================================
 */

function selectColors() { 
    let numThreadColors = floor(random(3, 7));
    let availableIndices = Object.keys(colors).map(k => parseInt(k)).filter(k => !generationRules.drawAnchors || k !== generationRules.anchorColorIndex);
    selectedColorIndices = [];
    while (selectedColorIndices.length < numThreadColors && availableIndices.length > 0) { 
        let idx = floor(random(availableIndices.length)); 
        selectedColorIndices.push(availableIndices[idx]); 
        availableIndices.splice(idx, 1); 
    }
    selectedColorIndices.sort((a, b) => a - b);
}

/**
 * =======================================
 * Geometry Generation
 * =======================================
 */

function generatePolygonSegments() {
    anchorSegments = { edges: [], radials: [] };
    let M = pointsPerSegment;
    let radius = currentRadius;

    if (!numSides || numSides < 3 || !M || M < 2 || !radius || radius <= 0) {
        console.error(`Invalid geometry parameters: Sides=${numSides}, M=${M}, Radius=${radius}`); 
        return;
    }

    let centerX = width / 2, centerY = height / 2;
    let vertices = [];
    let angleOffset = -HALF_PI; // start at top
    for (let i = 0; i < numSides; i++) {
        let angle = TWO_PI / numSides * i + angleOffset;
        vertices.push({ x: centerX + radius * cos(angle), y: centerY + radius * sin(angle) });
    }

    let centerPt = { x: centerX, y: centerY };
    for (let i = 0; i < numSides; i++) {
        let v1 = vertices[i]; 
        let v2 = vertices[(i + 1) % numSides];
        anchorSegments.edges.push(linspacePoints(v1, v2, M));
        anchorSegments.radials.push(linspacePoints(centerPt, v1, M));
    }
}

function linspacePoints(p1, p2, n) { 
    let points = []; 
    if (n <= 0) return points; 
    if (n === 1) return [{ ...p1 }];
    for (let i = 0; i < n; i++) { 
        let t = i / (n - 1); 
        points.push({ x: lerp(p1.x, p2.x, t), y: lerp(p1.y, p2.y, t) }); 
    }
    return points;
}

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

function drawShapes() {
    background(255); 
    noFill();

    if (!anchorSegments || anchorSegments.edges.length !== numSides || anchorSegments.radials.length !== numSides ||
        !anchorSegments.edges[0] || anchorSegments.edges[0].length !== pointsPerSegment ||
        !anchorSegments.radials[0] || anchorSegments.radials[0].length !== pointsPerSegment) {
        console.error("Segment geometry invalid or inconsistent. Cannot draw.");
        drawMarkers(); 
        addColorPaletteBars(); 
        return;
    }

    let M = pointsPerSegment;
    let totalNumSegments = numSides * 2; // edges + radials
    let allSegments = [...anchorSegments.edges, ...anchorSegments.radials];

    // --- Draw Threads ---
    strokeWeight(strokeWeightValue);
    let colorCycleIndex = 0;

    for (let p = 0; p < numPasses; p++) {
        if (selectedColorIndices.length === 0) break;

        // 1. Select two distinct random segments
        let index1 = floor(random(totalNumSegments));
        let index2 = floor(random(totalNumSegments - 1));
        if (index2 >= index1) index2 += 1;
        let seg1 = allSegments[index1];
        let seg2 = allSegments[index2];
        if (!seg1 || !seg2 || seg1.length !== M || seg2.length !== M) { continue; }

        // 2. Select random connection rule
        let ruleType = random(['reverse', 'parallel', 'offset']);
        let offset = 0;
        if (ruleType === 'offset') { offset = floor(random(1, M)); }

        // 3. Select color
        let cIdx = selectedColorIndices[colorCycleIndex % selectedColorIndices.length];
        if (!colors[cIdx]) continue;
        usedColors.add(cIdx); 
        applyStrokeWithOpacity(colors[cIdx].hex);
        colorCycleIndex++;

        // 4. Connect segments
        let svgData = connectSegments(seg1, seg2, M, ruleType, offset);
        pathData[cIdx] = (pathData[cIdx] || '') + svgData;
    } // end passes

    // --- Optionally Draw Anchor Points ---
    if (generationRules.drawAnchors) { 
        drawAnchorPoints(); 
    }

    // --- Draw UI Elements ---
    drawMarkers();
    addColorPaletteBars();
}

// Connects points between two segments based on a rule
function connectSegments(seg1, seg2, M, rule = 'reverse', offset = 0) { 
    let svgData = ''; 
    if (!seg1 || !seg2 || seg1.length !== M || seg2.length !== M || M < 1) return '';
    for (let k = 0; k < M; k++) {
        let p1 = seg1[k]; 
        let p2Index;
        switch (rule) { 
            case 'parallel': 
                p2Index = k; 
                break; 
            case 'offset': 
                p2Index = (k + offset) % M; 
                break; 
            case 'reverse': 
            default: 
                p2Index = (M - 1 - k); 
                break; 
        }
        if (p2Index < 0 || p2Index >= M) continue; 
        let p2 = seg2[p2Index]; 
        if (!p1 || !p2) continue;
        line(p1.x, p1.y, p2.x, p2.y); 
        let segStr = `M${p1.x.toFixed(2)},${p1.y.toFixed(2)} L${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
        svgData += segStr + ' ';
    } 
    return svgData;
}

function drawAnchorPoints() { 
    let anchorColorIdx = generationRules.anchorColorIndex; 
    if (!generationRules.drawAnchors || !anchorColorIdx || !colors[anchorColorIdx]) return;
    if (!anchorSegments || (anchorSegments.edges.length === 0 && anchorSegments.radials.length === 0)) return;
    let anchorColorHex = colors[anchorColorIdx].hex; 
    usedColors.add(anchorColorIdx);
    push(); 
    fill(anchorColorHex); 
    noStroke(); 
    let anchorDiameter = generationRules.anchorSize; 
    if (anchorDiameter <= 0) { pop(); return; }
    let drawnPoints = new Set(); 
    const coordToString = (pt) => `${pt.x.toFixed(3)},${pt.y.toFixed(3)}`;
    const drawUniquePoint = (pt) => { 
        if (!pt) return; 
        let ptStr = coordToString(pt); 
        if (!drawnPoints.has(ptStr)) { 
            ellipse(pt.x, pt.y, anchorDiameter, anchorDiameter); 
            drawnPoints.add(ptStr); 
        } 
    };
    anchorSegments.edges.forEach(segment => segment?.forEach(drawUniquePoint));
    anchorSegments.radials.forEach(segment => segment?.forEach(drawUniquePoint));
    pop();
}

function drawMarkers() { 
    push(); 
    strokeWeight(1); 
    stroke(0); 
    line(0, 0, 5, 0); 
    line(0, 0, 0, 5); 
    line(width - 5, height, width, height); 
    line(width, height - 5, width, height); 
    pop();
}

function addColorPaletteBars() { 
    push(); 
    let paletteLength = 300, barHeight = 2, gapSize = 7; 
    let yStart = height - (1.25 * pixelsPerInch);
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b); 
    let numColors = usedColorsOrdered.length; 
    if (numColors === 0) { pop(); return; }
    let totalGaps = (numColors - 1) * gapSize; 
    let segmentLength = (paletteLength - totalGaps) / numColors; 
    let actualPaletteLength = numColors * segmentLength + totalGaps; 
    let xStart = (width - actualPaletteLength) / 2;
    noFill(); 
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => { 
        let x = xStart + i * (segmentLength + gapSize); 
        let colorValue = colors[colorIndex] ? colors[colorIndex].hex : '#000000'; 
        applyStrokeWithOpacity(colorValue); 
        line(x, yStart, x + segmentLength, yStart); 
    });
    pop();
}

/**
 * =======================================
 * Canvas Reset Function (Includes Randomization)
 * =======================================
 */

function resetCanvasAndRandomize() { 
    resetDrawingAndRandomize();
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */

function keyPressed() { 
    if (key === ' ') { 
        saveSVGs(); 
    } else if (key === 'r' || key === 'R') { 
        resetCanvasAndRandomize(); 
    }
}

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

function saveSVGs() {
    const timestamp = Date.now();
    const usedColorsArray = Array.from(usedColors).sort((a, b) => a - b);

    // Combined SVG
    let combinedSVG = generateSVG(0, usedColorsArray);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual color SVGs (excluding anchors if not drawn)
    usedColorsArray.forEach((colorIndex) => {
        if (!(generationRules.drawAnchors && colorIndex === generationRules.anchorColorIndex)) {
            let colorSVG = generateSVG(colorIndex, [colorIndex]);
            let colorInfo = colors[colorIndex]; 
            if (!colorInfo) return;
            let colorName = colorInfo.name.toUpperCase();
            let fileName = `${dayNumber}-${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(colorSVG, fileName);
        }
    });
    // Save anchors file separately if drawn
    if (generationRules.drawAnchors && usedColorsArray.includes(generationRules.anchorColorIndex)) {
        let anchorColorIdx = generationRules.anchorColorIndex;
        let anchorSVG = generateSVG(anchorColorIdx, [anchorColorIdx]);
        let anchorColorInfo = colors[anchorColorIdx];
        if (anchorColorInfo) {
            let anchorColorName = anchorColorInfo.name.toUpperCase();
            let anchorFileName = `${dayNumber}-${anchorColorIdx}-${anchorColorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(anchorSVG, anchorFileName);
        }
    }
}

/**
 * Generate SVG content with correct layering and palette bar logic.
 * @param {number} activeColor - 0 for all colors, else a specific color index.
 * @param {Array<number>} colorsToInclude - Array of color indices to include in this SVG.
 */
function generateSVG(activeColor = 0, colorsToInclude = []) {
    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`;

    // Layer 0: Markers with proper offsets
    svgContent += addMarkersSVG();

    let layerCounter = 1; // Data layers start at 1
    let anchorLayerNum = -1;
    let allUsedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);

    // Add layers for thread colors
    colorsToInclude.forEach((cIdx) => {
        if (!(generationRules.drawAnchors && cIdx === generationRules.anchorColorIndex)) {
            svgContent += addSegmentsSVG(cIdx, layerCounter, allUsedColorsOrdered);
            layerCounter++;
        }
    });

    // Add layer for anchor points (if drawn)
    let anchorColorIdx = generationRules.anchorColorIndex;
    if (generationRules.drawAnchors && colorsToInclude.includes(anchorColorIdx)) {
        anchorLayerNum = layerCounter;
        svgContent += addAnchorPointsSVG(anchorColorIdx, anchorLayerNum, allUsedColorsOrdered);
        layerCounter++;
    }

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

/**
 * Adds thread paths and palette bar for a specific color index to SVG.
 * @param {number} colorIndex - The color index.
 * @param {number} layerNum - Non-padded layer number.
 * @param {Array<number>} allUsedColorsOrdered - All used colors for palette positioning.
 */
function addSegmentsSVG(colorIndex, layerNum, allUsedColorsOrdered) {
    let svg = '';
    let color = colors[colorIndex];
    if (!color) return '';
    if (generationRules.drawAnchors && colorIndex === generationRules.anchorColorIndex) return '';
    let strokeWidth = strokeWeightValue;
    let pathD = pathData[colorIndex] || '';
    let layerLabel = `${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}`;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${layerLabel}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;
    if (pathD.trim() !== '') {
        let cleanPathD = pathD.trim().replace(/[^d.sMLHVCSQTAZmlhvcsqtaz-+,e]/g, '');
        svg += `  <path d="${cleanPathD}" stroke-width="${strokeWidth}" fill="none" />n`;
    }
    // Add palette bar segment
    let barHeight = 2, gapSize = 7, paletteLength = 300;
    let yStart = height - (1.25 * pixelsPerInch);
    let colorPosIndex = allUsedColorsOrdered.indexOf(colorIndex);
    if (colorPosIndex !== -1) {
        let numTotalUsedColors = allUsedColorsOrdered.length;
        let totalGaps = max(0, numTotalUsedColors - 1) * gapSize;
        let segmentLength = max(1, (paletteLength - totalGaps) / numTotalUsedColors);
        let actualPaletteLength = numTotalUsedColors * segmentLength + totalGaps;
        let xStart = (width - actualPaletteLength) / 2;
        let x = xStart + colorPosIndex * (segmentLength + gapSize);
        svg += `  <path d="M${x.toFixed(2)},${yStart.toFixed(2)} h${segmentLength.toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="palette-${colorIndex}-${color.name.toLowerCase()}"/>n`;
    }
    svg += `</g>n`;
    return svg;
}

/**
 * Generates SVG for anchor points.
 * @param {number} colorIndex - Anchor color index.
 * @param {number} layerNum - Non-padded layer number.
 * @param {Array<number>} allUsedColorsOrdered - All used colors for palette positioning.
 */
function addAnchorPointsSVG(colorIndex, layerNum, allUsedColorsOrdered) {
    let svg = '';
    let colorObj = colors[colorIndex];
    if (!colorObj || !anchorSegments || (anchorSegments.edges.length === 0 && anchorSegments.radials.length === 0)) return '';
    let layerLabel = `${colorIndex}-anchors-${colorObj.ink}-${colorObj.width}`;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${layerLabel}"
   style="display:inline"
   fill="${colorObj.hex}"
   fill-opacity="1.0"
   stroke="none"
   inkscape:highlight-color="${colorObj.hex}">n`;
    let r = generationRules.anchorSize / 2;
    if (r > 0) {
        let drawnPoints = new Set(); 
        const coordToString = (pt) => `${pt.x.toFixed(3)},${pt.y.toFixed(3)}`;
        const addUniqueCircle = (pt) => { 
            if (!pt) return; 
            let ptStr = coordToString(pt); 
            if (!drawnPoints.has(ptStr)) { 
                svg += `  <circle cx="${pt.x.toFixed(2)}" cy="${pt.y.toFixed(2)}" r="${r.toFixed(2)}" />n`; 
                drawnPoints.add(ptStr); 
            } 
        };
        anchorSegments.edges.forEach(segment => segment?.forEach(addUniqueCircle));
        anchorSegments.radials.forEach(segment => segment?.forEach(addUniqueCircle));
    }
    let barHeight = 2, gapSize = 7, paletteLength = 300;
    let yStart = height - (1.25 * pixelsPerInch);
    let colorPosIndex = allUsedColorsOrdered.indexOf(colorIndex);
    if (colorPosIndex !== -1) {
        let numTotalUsedColors = allUsedColorsOrdered.length;
        let totalGaps = max(0, numTotalUsedColors - 1) * gapSize;
        let segmentLength = max(1, (paletteLength - totalGaps) / numTotalUsedColors);
        let actualPaletteLength = numTotalUsedColors * segmentLength + totalGaps;
        let xStart = (width - actualPaletteLength) / 2;
        let x = xStart + colorPosIndex * (segmentLength + gapSize);
        svg += `  <path d="M${x.toFixed(2)},${yStart.toFixed(2)} h${segmentLength.toFixed(2)}" fill="${colorObj.hex}" fill-opacity="${strokeOpacity}" stroke="none" stroke-width="${barHeight}" id="palette-${colorIndex}-${colorObj.name.toLowerCase()}"/>n`;
    }
    svg += `</g>n`;
    return svg;
}

/** 
 * Adds registration markers to SVG, with proper offsets.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    const markerLength = 5;
    // Markers: top-left and bottom-right corners, with offsets applied
    return `<g
       inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline"
       stroke="${colors[8].hex}" stroke-opacity="1.0" fill="none" inkscape:highlight-color="${colors[8].hex}">
    <path d="M${(markerLength + offset).toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${offset.toFixed(2)} L${offset.toFixed(2)},${(markerLength + offset).toFixed(2)} M${(width - markerLength - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - markerLength - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />
</g>n`;
}

/** Save SVG file utility */
function saveSVGFile(svgData, fileName) {
    try {
        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);
    } catch (e) {
        console.error("Failed to save SVG:", e);
    }
}

/** Helper function: Array shuffle */
function arrayShuffle(array) { 
    let currentIndex = array.length, randomIndex;
    while (currentIndex > 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
    }
    return array;
}