// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              parametric curves, ribbon structures, structured randomness, non-overlapping paths,
              noise-driven curves, fluid forms, identity dynamics

### Conceptual Framework

"Resilient Ribbons" envisions my identity as a series of gently undulating,
paired lines that stretch across the canvas, each pair forming a ribbon of thought.
These ribbons begin at one boundary of awareness and find their way to an opposite edge,
showcasing how internal currents can traverse shifting terrain while remaining cohesive.
The paired lines are offset in parallel, symbolizing the dualities within each facet of self.
Although ribbons may lightly intersect, they never overlap exactly—reflecting a boundary
between shared influence and distinct personal threads.

### Technical Approach

This piece generates several randomly anchored 'ribbons' that each occupy a single color
from the predefined palette. Each ribbon consists of two adjacent parametric curves—offset
slightly from a shared center path—to form a distinct, unified band. By incorporating noise
into the curves, I ensure organic, unpredictable flows while preserving a margin-based
structure. All paths are recorded in the `pathData` object for precise SVG export. Through
these carefully orchestrated arcs and offsets, the piece highlights how identity’s tension
between continuity and variation can yield a vibrantly interwoven whole.

---
*/

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    numRibbons: 6,          // Number of ribbons to draw
    resolution: 80,         // Points per ribbon path
    noiseScale: 0.003,      // Scale for noise offset
    ribbonOffset: 6,        // Gap between the two lines forming a ribbon
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
// We'll store paths for each color in an object: { colorIndex: "M...L..." }
let pathData = {};

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Generates a path string ("M x,y L x,y ...") from an array of points.
 * @param {Array} points - Array of {x, y} objects
 * @returns {string} - Path data string for SVG
 */
function createPathString(points) {
    if (!points || points.length === 0) return '';

    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

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

function setup() {
    // Initialize canvas dimensions
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    adjustForStrokeWeight();
    selectColors();

    // Initialize the pathData object
    pathData = {};

    // For each chosen color, store a blank path
    selectedColorIndices.forEach(ci => {
        pathData[ci] = '';
    });

    drawShapes();
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */

function adjustForStrokeWeight() {
    // 0.5mm line -> ~2 pixels at 100dpi
    strokeWeightValue = 2;
    // Adjust margin slightly
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // We can choose up to 6 distinct colors if we want 6 ribbons, or more
    // (some ribbons might share colors). We'll pick from 1..9:
    let n = floor(random(3, 7)); // 3-6 colors
    selectedColorIndices = selectRandomColorIndices(n);
}

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

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

function drawShapes() {
    background(255);

    // Draw main content
    drawResilientRibbons();

    // Draw markers, palette
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Draw multiple ribbons from random start to random end points.
 * Each "ribbon" is actually two parallel lines offset from a center curve.
 */
function drawResilientRibbons() {
    let colorCount = selectedColorIndices.length;

    // We'll draw up to generationRules.numRibbons ribbons
    for (let i = 0; i < generationRules.numRibbons; i++) {
        // Pick a color from the chosen palette
        let cIndex = selectedColorIndices[i % colorCount];

        // Construct a path of points from left->right or top->bottom, etc.
        let centerLine = generateRibbonCenterLine();

        // Create two parallel lines offset from the center
        let offsetA = offsetLine(centerLine,  generationRules.ribbonOffset * 0.5);
        let offsetB = offsetLine(centerLine, -generationRules.ribbonOffset * 0.5);

        // Combine them into one path data (two segments) for the same color
        // We'll store them in pathData[cIndex]
        let pathStringA = createPathString(offsetA);
        let pathStringB = createPathString(offsetB);

        // Draw on canvas
        applyStrokeWithOpacity(colors[cIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        beginShape();
        offsetA.forEach(pt => vertex(pt.x, pt.y));
        endShape();

        beginShape();
        offsetB.forEach(pt => vertex(pt.x, pt.y));
        endShape();

        // Append to pathData
        pathData[cIndex] += pathStringA + ' ' + pathStringB + ' ';
    }
}

/**
 * Generate a "center line" for a ribbon, bridging a random start and end on the margin.
 * We create a series of points that undulate via noise.
 */
function generateRibbonCenterLine() {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;

    // Randomly decide orientation: 0 => left->right, 1 => top->bottom
    let orientation = floor(random(2));

    let points = [];
    let resolution = generationRules.resolution;
    for (let i = 0; i <= resolution; i++) {
        let t = i / resolution;

        let x, y;
        if (orientation === 0) {
            // left->right
            x = margin + w * t;
            // noise offset for y
            let ny = noise(x * generationRules.noiseScale, i * 0.1);
            y = margin + ny * h;
        } else {
            // top->bottom
            y = margin + h * t;
            // noise offset for x
            let nx = noise(y * generationRules.noiseScale, i * 0.1);
            x = margin + nx * w;
        }

        points.push({x, y});
    }
    return points;
}

/**
 * Offset a line by a certain distance, forming a parallel path.
 * We'll compute approximate normals via perpendicular directions between segments.
 */
function offsetLine(points, offsetDist) {
    if (points.length < 2) return points;
    let result = [];

    for (let i = 0; i < points.length; i++) {
        let prev = points[max(0, i - 1)];
        let curr = points[i];
        let next = points[min(points.length - 1, i + 1)];

        // approximate direction
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        // normal
        let ndx = 0, ndy = 0;
        if (len > 0) {
            ndx = -dy / len; // perpendicular
            ndy = dx / len;
        }
        // offset
        let ox = curr.x + ndx * offsetDist;
        let oy = curr.y + ndy * offsetDist;

        result.push({ x: ox, y: oy });
    }
    return result;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // black
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);

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

/**
 * =======================================
 * Canvas Reset
 * =======================================
 */

function resetCanvas() {
    usedColors.clear();
    // Clear path data
    selectedColorIndices.forEach(ci => {
        pathData[ci] = '';
    });
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork with same color choices
        resetCanvas();
    }
}

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

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

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

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bar) to the SVG
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

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

    let d = pathData[colorIndex];
    if (d && d.trim() !== '') {
        svg += `<path d="${d}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * Add registration markers to SVG
 */
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`;
}

/**
 * Save SVG file
 */
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 157
/*

=======================================
  Day 157 Self-Portrait (Flowing Tapestry)
=======================================

### Title: *Flowing Tapestry*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              parametric curves, curveVertex, organic ribbons, structured randomness,
              color palette, identity

### Conceptual Framework

“Flowing Tapestry” envisions my identity as multiple ribbons—one per chosen color—arcing 
organically from one edge of awareness to the opposite boundary. Each ribbon is offset 
into a pair of parallel curves, symbolizing subtle internal dualities within each facet 
of self. By employing smooth curve interpolation and multiple orientation modes, these 
threads wind across the field in a gentle, natural manner. No two ribbons overlap exactly, 
mirroring how distinct parts of the self can coexist without obscuring each other.

### Technical Approach

- Number of ribbons equals the number of selected colors.
- Each ribbon’s “center line” is generated by randomly choosing one of four orientations 
  (left→right, right→left, top→bottom, or bottom→top), then sampling perlin noise to 
  introduce gently meandering paths.
- We use `curveVertex` for a smoother interpolation.
- The ribbon is created by offsetting this center line in both directions, forming two 
  neighboring curves.
- All path coordinates are recorded for consistent SVG export. The palette bar at the bottom 
  only shows the colors actually used.

---
*/

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

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

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

// 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; // for both canvas and SVG

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

let generationRules = {
  ribbonOffset: 6,        // gap between parallel lines forming a ribbon
  resolution: 80,         // number of segments
  noiseScale: 0.0025,     // scale for perlin noise
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let strokeWeightValue;
let pathData = {}; // to store "M..L.." paths per color

/**
 * Applies stroke color with given hex and sets alpha.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * Creates an SVG-like path string from an array of points.
 */
function createPathString(points) {
  if (!points || points.length === 0) return '';
  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
  for (let i = 1; i < points.length; i++) {
    d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
  }
  return d;
}

function setup() {
  // canvas size in pixels
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

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

  adjustForStrokeWeight();
  selectColors();

  // Initialize pathData
  pathData = {};
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });

  drawArtwork();
  noLoop();
}

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

function selectColors() {
  // pick 2..6 distinct colors (for variety)
  let n = floor(random(2, 7));
  let available = Object.keys(colors).map(k => parseInt(k));
  shuffleArray(available);
  selectedColorIndices = available.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Main drawing function
 */
function drawArtwork() {
  background(255);

  // We'll generate exactly as many ribbons as we have selected colors.
  for (let i = 0; i < selectedColorIndices.length; i++) {
    let cIndex = selectedColorIndices[i];
    // pick a random orientation
    // 0 => left->right, 1 => right->left, 2 => top->bottom, 3 => bottom->top
    let orientation = floor(random(4));

    // create "center" line
    let centerLinePts = generateCenterLine(orientation);

    // offset lines
    let offsetA = offsetLine(centerLinePts,  generationRules.ribbonOffset * 0.5);
    let offsetB = offsetLine(centerLinePts, -generationRules.ribbonOffset * 0.5);

    // stroke color
    applyStrokeWithOpacity(colors[cIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // draw the two lines as curves
    beginShape();
    for (let p of offsetA) {
      curveVertex(p.x, p.y);
    }
    endShape();

    beginShape();
    for (let p of offsetB) {
      curveVertex(p.x, p.y);
    }
    endShape();

    // store their paths for SVG
    let pathStringA = createPathString(offsetA);
    let pathStringB = createPathString(offsetB);
    pathData[cIndex] += pathStringA + ' ' + pathStringB + ' ';
  }

  // Markers & palette bars
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Generates a random "center line" from one boundary to another,
 * applying perlin noise for gentle curvature.
 */
function generateCenterLine(orientation) {
  let margin = workAreaMarginPixels;
  let w = width - 2*margin;
  let h = height - 2*margin;
  let pts = [];
  let steps = generationRules.resolution;

  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x, y;
    switch(orientation) {
      case 0: 
        // left->right
        x = margin + t * w;
        y = margin + (noise(x * generationRules.noiseScale, i*0.1) * h);
        break;
      case 1: 
        // right->left
        x = width - margin - t * w;
        y = margin + (noise(x * generationRules.noiseScale, i*0.1) * h);
        break;
      case 2:
        // top->bottom
        y = margin + t * h;
        x = margin + (noise(y * generationRules.noiseScale, i*0.1) * w);
        break;
      default:
        // bottom->top
        y = height - margin - t * h;
        x = margin + (noise(y * generationRules.noiseScale, i*0.1) * w);
        break;
    }
    pts.push({x, y});
  }
  return pts;
}

/**
 * Offsets a sequence of points by offsetDist, approximating a parallel curve.
 */
function offsetLine(points, offsetDist) {
  let result = [];
  if (points.length < 2) return points;

  for (let i = 0; i < points.length; i++) {
    let prev = points[max(0, i - 1)];
    let curr = points[i];
    let next = points[min(points.length - 1, i + 1)];

    let dx = next.x - prev.x;
    let dy = next.y - prev.y;
    let len = sqrt(dx*dx + dy*dy);

    let ndx = 0, ndy = 0;
    if (len > 0) {
      ndx = -dy / len; 
      ndy =  dx / len;
    }
    let ox = curr.x + ndx*offsetDist;
    let oy = curr.y + ndy*offsetDist;
    result.push({ x:ox, y:oy });
  }
  return result;
}

/**
 * Draws small 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 bars for the used palette
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = selectedColorIndices;
  if (usedColorsOrdered.length === 0) return;
  let totalGaps = (usedColorsOrdered.length - 1)*gapSize;
  let segmentLength = (paletteLength - totalGaps)/usedColorsOrdered.length;
  let xStart = (width - paletteLength)/2;

  strokeWeight(barHeight);

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

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

function resetCanvas() {
  pathData = {};
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });
  drawArtwork();
}

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

  // single colors
  selectedColorIndices.forEach((ci, idx) => {
    let svgForColor = generateSVG(ci);
    let cname = colors[ci].name.toUpperCase();
    saveSVGFile(svgForColor, `${dayNumber}-0${ci}-${cname}-PORTRAIT-${timestamp}.svg`);
  });
}

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

  // Markers
  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // all colors
    selectedColorIndices.forEach((ci, idx) => {
      svgContent += addSegmentsSVG(ci, idx+1, 0);
    });
  } else {
    // single color
    let idx = selectedColorIndices.indexOf(activeColor)+1;
    svgContent += addSegmentsSVG(activeColor, idx, activeColor);
  }
  svgContent += '</svg>';
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, activeColor) {
  let svg = '';
  let col = colors[colorIndex];
  let strokeW = strokeWeightValue;

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

  let d = pathData[colorIndex];
  if (d && d.trim() !== '') {
    svg += `<path d="${d}" stroke-width="${strokeW}" fill="none" />n`;
  }

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

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

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

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

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

/**
 * Utility to shuffle an array in place
 */
function shuffleArray(arr) {
  for (let i=arr.length-1; i>0; i--) {
    let j = floor(random(i+1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Layered Bands)
=======================================

### Title: *Layered Bands*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              ribbon bands, noise-driven curves, offset curves, color separation,
              non-overlapping paths

### Conceptual Framework

By assigning each color its own horizontal “band,” *Layered Bands* ensures that
no two colored ribbons intersect. Each ribbon is still rendered as a pair of
parallel curves offset from a noisy center line. This approach evokes the idea
that distinct facets of one’s identity can flow side by side without colliding,
each inhabiting its own domain yet contributing to a unified whole.

### Technical Approach

- The canvas is subdivided into as many horizontal bands as there are selected colors.
- In each band, we generate a single ribbon:
  - A noisy “center line” traveling left→right.
  - Two parallel lines offset above/below that center.
  - Any part of the ribbon that would go outside its band is clamped, preventing overlaps.
- The code tracks all path coordinates in `pathData` so the SVG export precisely
  matches the on‐canvas drawing.

---
*/

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

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;     
const canvasHeightInches = 11;    
const pixelsPerInch = 100;        
const dayNumber = '157';          

// 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; // for both canvas and SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  resolution: 80,          // #points for center line
  noiseScale: 0.0025,      // perlin noise scale
  ribbonOffset: 6          // gap between the two parallel lines forming a ribbon
};

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let strokeWeightValue;

// We'll store path data for each color: { colorIndex: "M..L.." }
let pathData = {};


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

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

  adjustForStrokeWeight();
  selectColors();

  // Initialize pathData
  pathData = {};
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });

  drawArtwork();
  noLoop();
}

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

/**
 * Random color selection
 */
function selectColors() {
  // 2..6 colors
  let n = floor(random(2, 7));
  let available = Object.keys(colors).map(k => parseInt(k));
  shuffleArray(available);
  selectedColorIndices = available.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Main drawing logic
 */
function drawArtwork() {
  background(255);

  // We'll create exactly one ribbon per selected color
  let nColors = selectedColorIndices.length;
  let totalHeight = height - 2 * workAreaMarginPixels;
  let bandHeight = totalHeight / nColors;

  for (let i = 0; i < nColors; i++) {
    let cIndex = selectedColorIndices[i];
    let bandTop = workAreaMarginPixels + i * bandHeight;
    let bandBottom = bandTop + bandHeight;

    // center line
    let centerLine = generateCenterLine(bandTop, bandBottom);

    // offset lines
    let offsetA = offsetLineWithinBand(centerLine, generationRules.ribbonOffset * 0.5, bandTop, bandBottom);
    let offsetB = offsetLineWithinBand(centerLine, -generationRules.ribbonOffset * 0.5, bandTop, bandBottom);

    // draw
    applyStrokeWithOpacity(colors[cIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // first side
    beginShape();
    for (let p of offsetA) curveVertex(p.x, p.y);
    endShape();

    // second side
    beginShape();
    for (let p of offsetB) curveVertex(p.x, p.y);
    endShape();

    // store path data for SVG
    pathData[cIndex] += createPathString(offsetA) + ' ' + createPathString(offsetB) + ' ';
  }

  // Markers & palette
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Generate a center line from left to right, constrained to [bandTop..bandBottom].
 */
function generateCenterLine(bandTop, bandBottom) {
  let pts = [];
  let steps = generationRules.resolution;

  // We'll keep a small vertical margin inside each band
  let vMargin = generationRules.ribbonOffset * 2;
  let topClamp = bandTop + vMargin;
  let botClamp = bandBottom - vMargin;
  let centerY = (bandTop + bandBottom)*0.5; // approximate middle
  let amplitude = 0.5*(bandBottom - bandTop) - vMargin; // max vertical variation

  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x = map(t, 0, 1, workAreaMarginPixels, width - workAreaMarginPixels);
    // gentle noise-based variation around centerY
    let ny = noise(x * generationRules.noiseScale, i*0.1);
    let y = centerY + amplitude * (ny - 0.5)*2.0; // scale to [-ampl..ampl]

    // clamp to band
    y = constrain(y, topClamp, botClamp);
    pts.push({x, y});
  }
  return pts;
}

/**
 * Offsets a line by offsetDist, then clamps it to the band boundaries.
 */
function offsetLineWithinBand(points, offsetDist, bandTop, bandBottom) {
  let result = [];
  if (points.length < 2) return points;

  for (let i = 0; i < points.length; i++) {
    let prev = points[max(0, i - 1)];
    let curr = points[i];
    let next = points[min(points.length - 1, i + 1)];

    let dx = next.x - prev.x;
    let dy = next.y - prev.y;
    let len = sqrt(dx*dx + dy*dy);

    let ndx = 0, ndy = 0;
    if (len > 0) {
      ndx = -dy / len;
      ndy =  dx / len;
    }
    let ox = curr.x + ndx * offsetDist;
    let oy = curr.y + ndy * offsetDist;

    // clamp inside [bandTop..bandBottom]
    oy = constrain(oy, bandTop, bandBottom);
    result.push({ x:ox, y:oy });
  }
  return result;
}

/**
 * Creates a path string from points.
 */
function createPathString(pts) {
  if (!pts || pts.length === 0) return '';
  let d = `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
  for (let i = 1; i < pts.length; i++) {
    d += ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
  }
  return d;
}

/**
 * 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 bars for used palette
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = selectedColorIndices;
  if (usedColorsOrdered.length === 0) return;
  let totalGaps = (usedColorsOrdered.length - 1)*gapSize;
  let segmentLength = (paletteLength - totalGaps)/usedColorsOrdered.length;
  let xStart = (width - paletteLength)/2;

  strokeWeight(barHeight);

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

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

function resetCanvas() {
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });
  drawArtwork();
}

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

  // per color
  selectedColorIndices.forEach(ci => {
    let cname = colors[ci].name.toUpperCase();
    let svgC = generateSVG(ci);
    let fname = `${dayNumber}-0${ci}-${cname}-PORTRAIT-${stamp}.svg`;
    saveSVGFile(svgC, fname);
  });
}

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`;

  // Markers
  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // all
    selectedColorIndices.forEach((ci, idx) => {
      svgContent += addSegmentsSVG(ci, idx+1, 0);
    });
  } else {
    // one color
    let idx = selectedColorIndices.indexOf(activeColor)+1;
    svgContent += addSegmentsSVG(activeColor, idx, activeColor);
  }

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

function addSegmentsSVG(colorIndex, layerNum, activeColor) {
  let svg = '';
  let col = colors[colorIndex];
  let strokeW = strokeWeightValue;

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

  let d = pathData[colorIndex];
  if (d && d.trim() !== '') {
    svg += `<path d="${d}" stroke-width="${strokeW}" fill="none" />n`;
  }

  // color bar
  let usedColorsOrdered = selectedColorIndices;
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300, barHeight = 2, gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let numC = usedColorsOrdered.length;
    let totalGaps = (numC-1)*gapSize;
    let segLength = (paletteLength - totalGaps)/numC;
    let xStart = (width - paletteLength)/2;
    let x = xStart + i*(segLength+gapSize);

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

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

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

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

/**
 * Fisher-Yates shuffle
 */
function shuffleArray(arr) {
  for (let i=arr.length-1; i>0; i--) {
    let j = floor(random(i+1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Stacked Overlaps)
=======================================

### Title: *Stacked Overlaps*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              thick strokes, overlapping ribbons, noise-driven paths, stacking order,
              layering, alpha transparency

### Conceptual Framework

In “Stacked Overlaps,” each ribbon is represented by a thick stroke with partial transparency,
allowing ribbons to visually overlap one another in a layered fashion. We see their colors 
mix where they intersect, evoking the organic interplay of distinct ideas. By drawing these 
ribbons back to front, the final ones appear on top, yielding the sense of stack depth without 
using polygon fills or explicit clipping.

### Technical Approach

1. **Random Ribbons**: We pick a random number of ribbons (2–5).  
2. **No Fill**: Each ribbon is just a single stroke, but with a large strokeWeight (~20px) plus 
   an opacity of ~0.75.  
3. **Path Generation**: Each ribbon extends from one random edge of the canvas to another, 
   with Perlin noise introducing gentle bends.  
4. **Stacking**: By simply drawing ribbons in sequence, the later ones appear in front.  
5. **SVG Export**: We store each path in `pathData` and then output an `<svg>` whose 
   `<path>` elements have `stroke-width="20"` and `stroke-opacity="0.75"`, matching the on‐screen look.

---
*/

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

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '157';

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

// We’ll use partial opacity for each ribbon stroke
const strokeOpacity = 0.75;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  ribbonCountMin: 2,
  ribbonCountMax: 5,
  resolution: 60,         // # points along each path
  noiseScale: 0.0015      // perlin noise scale factor
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 1.5;  // will be randomized in setup
let workAreaMarginPixels;
let selectedColorIndices = [];
let pathData = {};  // store path strings for each color
let strokeWeightValue = 20; // We'll do thick lines for a true "ribbon" look

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

  // random margins
  workAreaMarginInches = random(1, 2.5);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  // Choose random colors and init path data
  selectColors();
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });

  drawArtwork();
  noLoop();
}

/**
 * Pick 2..5 distinct colors from our dictionary
 */
function selectColors() {
  let n = floor(random(generationRules.ribbonCountMin, generationRules.ribbonCountMax+1));
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffleArray(allIndices);
  selectedColorIndices = allIndices.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Primary drawing function
 */
function drawArtwork() {
  background(255);
  
  // We'll draw one ribbon per chosen color, from oldest to newest so the last is "on top."
  for (let i = 0; i < selectedColorIndices.length; i++) {
    let cIndex = selectedColorIndices[i];

    // Generate random start & end edges
    let {sx, sy} = pickPointOnCanvasEdge();
    let {ex, ey} = pickPointOnCanvasEdge();

    // Build array of points from (sx, sy) to (ex, ey), wiggled by perlin noise
    let points = buildNoisyLine(sx, sy, ex, ey, generationRules.resolution);

    // Draw on canvas as a thick stroke with partial alpha
    applyStrokeWithOpacity(colors[cIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    beginShape();
    for (let p of points) {
      curveVertex(p.x, p.y);
    }
    endShape();

    // Store path commands for SVG
    let d = createPathString(points);
    // We'll combine them with a space if multiple lines per color
    pathData[cIndex] += d + ' ';
  }

  // Draw corner markers, palette bars
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Build a "noisy" path from (sx, sy) to (ex, ey)
 */
function buildNoisyLine(sx, sy, ex, ey, steps) {
  let pts = [];
  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x = lerp(sx, ex, t);
    let y = lerp(sy, ey, t);

    // Use noise to deviate perpendicular to the main direction
    // direction vector
    let dx = ex - sx;
    let dy = ey - sy;
    let len = sqrt(dx*dx + dy*dy);
    if (len < 1e-5) {
      // in case start & end are same
      pts.push({x, y});
      continue;
    }
    // normal
    let ndx = -dy / len;
    let ndy =  dx / len;

    // local noise
    let nVal = noise(x * generationRules.noiseScale, y * generationRules.noiseScale);
    // offset amplitude ~ 0.05 * distance
    let amplitude = 0.05 * len; 
    let offset = (nVal - 0.5) * amplitude;

    let nx = x + ndx * offset;
    let ny = y + ndy * offset;
    
    pts.push({x:nx, y:ny});
  }
  return pts;
}

/**
 * Pick a random point along one of the four canvas edges, inside the margin
 */
function pickPointOnCanvasEdge() {
  let margin = workAreaMarginPixels;
  let w = width - 2*margin;
  let h = height - 2*margin;

  // 0=left,1=right,2=top,3=bottom
  let edge = floor(random(4));
  let x, y;
  switch(edge) {
    case 0: // left
      x = margin; 
      y = margin + random(h);
      break;
    case 1: // right
      x = width - margin;
      y = margin + random(h);
      break;
    case 2: // top
      x = margin + random(w);
      y = margin;
      break;
    default: // bottom
      x = margin + random(w);
      y = height - margin;
      break;
  }
  return {sx:x, sy:y};
}

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

/**
 * Convert array of points into "M..L.." path string for SVG
 */
function createPathString(points) {
  if (!points || points.length === 0) return '';
  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
  for (let i = 1; i < points.length; i++) {
    d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
  }
  return d;
}

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

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

  let used = selectedColorIndices;
  if (used.length === 0) return;
  let totalGaps = (used.length - 1)*gapSize;
  let segmentLength = (paletteLength - totalGaps)/used.length;
  let xStart = (width - paletteLength)/2;

  strokeWeight(barHeight);
  for (let i=0; i<used.length; i++) {
    let cIndex = used[i];
    let xx = xStart + i*(segmentLength+gapSize);
    applyStrokeWithOpacity(colors[cIndex].hex);
    line(xx, yStart, xx+segmentLength, yStart);
  }
}

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

/**
 * Redraw new ribbons
 */
function resetCanvas() {
  background(255);
  // Clear path data
  selectedColorIndices.forEach(ci => { pathData[ci] = ''; });
  drawArtwork();
}

/**
 * SVG Export
 */
function saveSVGs() {
  let stamp = Date.now();

  // Combined
  let combined = generateSVG(0);
  saveSVGFile(combined, `${dayNumber}-ALL-PORTRAIT-${stamp}.svg`);

  // Single colors
  selectedColorIndices.forEach(ci => {
    let svgOne = generateSVG(ci);
    let cname = colors[ci].name.toUpperCase();
    let fileName = `${dayNumber}-0${ci}-${cname}-PORTRAIT-${stamp}.svg`;
    saveSVGFile(svgOne, fileName);
  });
}

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

  // Markers
  svg += addMarkersSVG();

  if (activeColor === 0) {
    // all
    selectedColorIndices.forEach((ci, idx) => {
      svg += addSegmentsSVG(ci, idx+1, 0);
    });
  } else {
    // single color
    let idx = selectedColorIndices.indexOf(activeColor)+1;
    svg += addSegmentsSVG(activeColor, idx, activeColor);
  }

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

/**
 * Add a group's path data for a color
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
  let col = colors[colorIndex];
  let d = pathData[colorIndex].trim();
  if (d.length === 0) return '';

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

  result += `  <path d="${d}" />n`;

  // Add palette bar (like main code) if single color export
  if (activeColor === colorIndex) {
    let used = selectedColorIndices;
    let i = used.indexOf(colorIndex);
    if (i >= 0) {
      let paletteLength=300, barHeight=2, gapSize=7;
      let yStart = height - (1.25*pixelsPerInch);
      let numC = used.length;
      let totalGaps = (numC-1)*gapSize;
      let segLen = (paletteLength - totalGaps)/numC;
      let xStart = (width - paletteLength)/2;
      let xx = xStart + i*(segLen+gapSize);

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

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

/**
 * Corner markers in SVG
 */
function addMarkersSVG() {
  const sw=1, off=sw/2;
  let marker = `<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+off},${off} L${off},${off} L${off},${5+off}
      M${(width-5-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-5-off).toFixed(2)}"
      stroke-width="${sw}" fill="none" />
    </g>n`;
  return marker;
}

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

/**
 * Simple array shuffle
 */
function shuffleArray(arr) {
  for (let i=arr.length-1; i>0; i--) {
    let j = floor(random(i+1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Stacked Overlaps) - Debugged
=======================================

### Title: *Stacked Overlaps (Debugged)*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              thick strokes, overlapping ribbons, noise-driven paths, stacking order,
              debugging, alpha transparency

### Conceptual Framework

This piece builds upon the thick-stroke “layered ribbon” idea, with a focus on
robustness to prevent any NaN or “empty variable” errors. Each ribbon is a single
semi‐transparent, noise‐bent line drawn with a thick stroke, so that overlapping
ribbons visually stack and blend. We explicitly ensure each randomly chosen edge
point is valid and clamp the margins if needed.

### Technical Approach

1. **Random Edge Points**: We avoid variable‐naming confusion by returning { x, y }
   from the random edge function.
2. **Safety Checks**: We clamp margins and fallback to minimum widths if the margin
   would exceed half the canvas dimension.
3. **Stacking**: Because ribbons are drawn in sequence, the last drawn always appears
   on top. This simulates the organic layering of distinct identity facets.

---
*/

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

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '157';

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

// Semi‐transparent strokes
const strokeOpacity = 0.75;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  ribbonCountMin: 2,
  ribbonCountMax: 5,
  resolution: 60,         // # points along each path
  noiseScale: 0.0015      // perlin noise scale factor
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

// We will store a set of colors chosen for ribbons
let selectedColorIndices = [];

// Store path commands for each color so the SVG matches the canvas.
let pathData = {};

// We'll use a thick stroke for “ribbon” effect
let strokeWeightValue = 20;

function setup() {
  // Canvas dimensions in pixels
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Random margin, but clamp it so we don't exceed half the canvas dimension
  let maxMarginInches = min(canvasWidthInches, canvasHeightInches) / 2;
  workAreaMarginInches = random(1, 2.5);
  if (workAreaMarginInches > maxMarginInches) {
    workAreaMarginInches = maxMarginInches;
  }
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
  if (workAreaMarginPixels < 0) {
    workAreaMarginPixels = 0;
  }

  selectColors();
  // Prepare pathData
  selectedColorIndices.forEach(ci => {
    pathData[ci] = '';
  });

  drawArtwork();
  noLoop();
}

/**
 * Pick 2..5 distinct colors from our dictionary
 */
function selectColors() {
  let n = floor(random(generationRules.ribbonCountMin, generationRules.ribbonCountMax+1));
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffleArray(allIndices);
  selectedColorIndices = allIndices.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Draw thick overlapping ribbons in random order
 */
function drawArtwork() {
  background(255);

  for (let i = 0; i < selectedColorIndices.length; i++) {
    let colorIndex = selectedColorIndices[i];
    // pick start & end
    let startPt = pickPointOnCanvasEdge();
    let endPt   = pickPointOnCanvasEdge();

    let points = buildNoisyLine(startPt.x, startPt.y, endPt.x, endPt.y, generationRules.resolution);

    // draw to canvas
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    beginShape();
    for (let p of points) {
      curveVertex(p.x, p.y);
    }
    endShape();

    // store path for SVG
    let d = createPathString(points);
    pathData[colorIndex] += d + ' ';
  }

  // Markers & palette
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Create a random point on one of the four edges inside the margin
 */
function pickPointOnCanvasEdge() {
  let margin = max(workAreaMarginPixels, 0);
  let w = width - 2*margin;
  let h = height - 2*margin;

  // fallback if margin is huge
  if (w < 10) w = 10;
  if (h < 10) h = 10;

  let edge = floor(random(4));
  let x, y;
  switch (edge) {
    case 0: // left
      x = margin;
      y = margin + random(h);
      break;
    case 1: // right
      x = width - margin;
      y = margin + random(h);
      break;
    case 2: // top
      x = margin + random(w);
      y = margin;
      break;
    default: // bottom
      x = margin + random(w);
      y = height - margin;
      break;
  }
  return {x, y};
}

/**
 * Build a line from (sx, sy) to (ex, ey) with gentle noise
 */
function buildNoisyLine(sx, sy, ex, ey, steps) {
  let pts = [];
  for (let i = 0; i <= steps; i++) {
    let t = i / steps;
    let x = lerp(sx, ex, t);
    let y = lerp(sy, ey, t);

    // direction vector
    let dx = ex - sx;
    let dy = ey - sy;
    let dist = sqrt(dx*dx + dy*dy);
    if (dist < 0.0001) {
      // start & end are basically the same
      pts.push({x, y});
      continue;
    }
    // perpendicular offset
    let ndx = -dy / dist;
    let ndy =  dx / dist;

    let nVal = noise(x * generationRules.noiseScale, y * generationRules.noiseScale);
    let amplitude = 0.05 * dist;  // you can tweak this
    let offset = (nVal - 0.5) * amplitude;

    let nx = x + ndx * offset;
    let ny = y + ndy * offset;

    pts.push({x:nx, y:ny});
  }
  return pts;
}

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

/**
 * Convert array of points into an "M..L.." string for SVG path
 */
function createPathString(points) {
  if (!points || points.length === 0) return '';
  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
  for (let i = 1; i < points.length; i++) {
    d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
  }
  return d;
}

/**
 * Draw small markers in corners
 */
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 for used colors
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let used = selectedColorIndices;
  if (used.length === 0) return;

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

  strokeWeight(barHeight);
  for (let i=0; i<used.length; i++) {
    let ci = used[i];
    applyStrokeWithOpacity(colors[ci].hex);
    let xx = xStart + i*(segmentLength+gapSize);
    line(xx, yStart, xx+segmentLength, yStart);
  }
}

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

function resetCanvas() {
  background(255);
  // clear path data
  selectedColorIndices.forEach(ci => {
    pathData[ci] = '';
  });
  drawArtwork();
}

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

  // single color
  selectedColorIndices.forEach(ci => {
    let colorSVG = generateSVG(ci);
    let cname = colors[ci].name.toUpperCase();
    let fileName = `${dayNumber}-0${ci}-${cname}-PORTRAIT-${stamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

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

  // Markers
  svg += addMarkersSVG();

  if (activeColor === 0) {
    // all
    selectedColorIndices.forEach((ci, idx) => {
      svg += addSegmentsSVG(ci, idx+1, 0);
    });
  } else {
    // single color
    let idx = selectedColorIndices.indexOf(activeColor)+1;
    svg += addSegmentsSVG(activeColor, idx, activeColor);
  }

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

/**
 * Add <path> data for a given color
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
  let col = colors[colorIndex];
  let d = pathData[colorIndex].trim();
  if (d.length === 0) return '';

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

  result += `  <path d="${d}" />n`;

  // If single color export, also show its palette bar
  if (activeColor === colorIndex) {
    let used = selectedColorIndices;
    let i = used.indexOf(colorIndex);
    if (i >= 0) {
      let paletteLength=300, barHeight=2, gapSize=7;
      let yStart = height - (1.25 * pixelsPerInch);
      let numC = used.length;
      let totalGaps = (numC-1)*gapSize;
      let segLen = (paletteLength - totalGaps)/numC;
      let xStart = (width - paletteLength)/2;
      let xx = xStart + i*(segLen+gapSize);

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

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

/**
 * Markers in SVG
 */
function addMarkersSVG() {
  const sw = 1, off=sw/2;
  let marker = `<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+off},${off} L${off},${off} L${off},${5+off}
      M${(width-5-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-5-off).toFixed(2)}"
      stroke-width="${sw}" fill="none" />
    </g>n`;
  return marker;
}

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

/**
 * Shuffle array in place (Fisher-Yates)
 */
function shuffleArray(arr) {
  for (let i = arr.length-1; i>0; i--) {
    let j = floor(random(i+1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              parametric curves, ribbon structures, structured randomness, non-overlapping paths,
              noise-driven curves, fluid forms, identity dynamics

### Conceptual Framework

"Resilient Ribbons" envisions my identity as a series of gently undulating,
paired lines that stretch across the canvas, each pair forming a ribbon of thought.
These ribbons begin at one boundary of awareness and find their way to an opposite edge,
showcasing how internal currents can traverse shifting terrain while remaining cohesive.
The paired lines are offset in parallel, symbolizing the dualities within each facet of self.
Although ribbons may lightly intersect, they never overlap exactly—reflecting a boundary
between shared influence and distinct personal threads.

### Technical Approach

This piece generates several randomly anchored 'ribbons' that each occupy a single color
from the predefined palette. Each ribbon consists of multiple parallel lines—offset
from a shared organic center path—to form a unified band. Noise is incorporated into
the curves to ensure an unpredictable, flowing quality, and intersections are processed
to simulate layer occlusion (where overlapping portions become hidden). All paths are
recorded in the `pathData` object for precise SVG export.

---
*/

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 6,          // Number of ribbons to generate
    resolution: 300,        // Points per ribbon path (higher for smoother curves)
    noiseScale: 0.003,      // Scale for noise offset
    ribbonWidth: 12,        // Total width of each ribbon
    linesPerRibbon: 6,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability to generate a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.3         // Amount of chaotic noise added to the curves
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing (adjusted for pen)
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 * @param {Object} p1 - Start point of first segment {x, y}
 * @param {Object} p2 - End point of first segment {x, y}
 * @param {Object} p3 - Start point of second segment {x, y}
 * @param {Object} p4 - End point of second segment {x, y}
 * @returns {Object|null} - Intersection point {x, y, uA} or null if no intersection
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;
    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;
    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 * @param {Array} points - Array of {x, y} points.
 * @returns {string} - SVG path string.
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data storage
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    
    for (let i = 0; i < generationRules.numRibbons; i++) {
        let colorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random(); // For layering order
        let centerPath = generateOrganicPath();
        
        let ribbon = {
            centerPath: centerPath,
            colorIndex: colorIndex,
            zIndex: zIndex,
            lines: []  // Parallel lines for the ribbon
        };
        
        let spacing = generationRules.ribbonWidth / (generationRules.linesPerRibbon - 1);
        for (let j = 0; j < generationRules.linesPerRibbon; j++) {
            let offset = -generationRules.ribbonWidth / 2 + j * spacing;
            let offsetPath = offsetLine(centerPath, offset);
            ribbon.lines.push({
                points: offsetPath,
                segments: [offsetPath]  // Initially one segment per line
            });
        }
        
        allRibbons.push(ribbon);
    }
    
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion,
 * then draws the visible segments and records paths for SVG export.
 */
function processAndDrawRibbons() {
    // Process intersections: lower z-index ribbons are segmented by higher ones.
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // Draw each ribbon's visible segments.
    for (let ribbon of allRibbons) {
        let colorIndex = ribbon.colorIndex;
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();
        
        for (let line of ribbon.lines) {
            for (let segment of line.segments) {
                if (segment.length >= 2) {
                    beginShape();
                    for (let point of segment) {
                        vertex(point.x, point.y);
                    }
                    endShape();
                    
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Processes intersections between a lower ribbon and a higher ribbon,
 * breaking the lower ribbon's segments at intersection points and toggling visibility.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    for (let line of lowerRibbon.lines) {
        let newSegments = [];
        
        for (let segment of line.segments) {
            if (segment.length < 2) continue;
            
            let intersections = findIntersections(segment, higherRibbon);
            if (intersections.length === 0) {
                newSegments.push(segment);
                continue;
            }
            
            intersections.sort((a, b) => {
                if (a.lineIndex !== b.lineIndex) return a.lineIndex - b.lineIndex;
                return a.t - b.t;
            });
            
            let currentSegment = [segment[0]];
            let skipSegment = false;
            for (let i = 1; i < segment.length; i++) {
                let intsForSegment = intersections.filter(intr => intr.lineIndex === i - 1);
                for (let intr of intsForSegment) {
                    currentSegment.push({ x: intr.point.x, y: intr.point.y });
                    if (currentSegment.length >= 2 && !skipSegment) {
                        newSegments.push([...currentSegment]);
                    }
                    currentSegment = [{ x: intr.point.x, y: intr.point.y }];
                    skipSegment = !skipSegment;
                }
                currentSegment.push(segment[i]);
            }
            if (currentSegment.length >= 2 && !skipSegment) {
                newSegments.push(currentSegment);
            }
        }
        
        line.segments = newSegments;
    }
}

/**
 * Finds intersections between a given segment and all lines of a target ribbon.
 * Returns an array of intersection objects.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    for (let lineIndex = 0; lineIndex < ribbon.lines.length; lineIndex++) {
        let line = ribbon.lines[lineIndex];
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            for (let j = 0; j < line.points.length - 1; j++) {
                let p3 = line.points[j];
                let p4 = line.points[j + 1];
                let intersection = lineIntersection(p1, p2, p3, p4);
                if (intersection) {
                    intersections.push({
                        point: intersection,
                        lineIndex: i,
                        ribbonLine: lineIndex,
                        t: intersection.uA
                    });
                }
            }
        }
    }
    return intersections;
}

/**
 * Generates an organic center path that may include loops and turbulent noise.
 * Returns an array of {x, y} points.
 */
function generateOrganicPath() {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    let orientation = floor(random(4)); // 0: left→right, 1: top→bottom, 2 & 3: diagonal
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    
    let points = [];
    let resolution = generationRules.resolution;
    
    if (hasLoops) {
        let numLoops = floor(random(1, 4));
        let loopFrequency = random(1, 3) * numLoops;
        let loopAmplitude = random(0.1, 0.4) * generationRules.loopIntensity;
        
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            let angle = t * TWO_PI * loopFrequency;
            let x, y;
            if (orientation === 0) {
                x = margin + w * t;
                y = margin + h/2 + sin(angle) * h * loopAmplitude;
                y += noise(t * 5, noiseSeedVal) * h * 0.3 * generationRules.turbulence;
            } else if (orientation === 1) {
                y = margin + h * t;
                x = margin + w/2 + sin(angle) * w * loopAmplitude;
                x += noise(t * 5, noiseSeedVal) * w * 0.3 * generationRules.turbulence;
            } else if (orientation === 2 || orientation === 3) {
                let baseX = (orientation === 2) ? margin + w * t : width - margin - w * t;
                let baseY = margin + h * t;
                let dx = sin(angle) * w * 0.25 * loopAmplitude;
                let dy = cos(angle) * h * 0.25 * loopAmplitude;
                dx += (noise(t * 3, noiseSeedVal) - 0.5) * w * 0.3 * generationRules.turbulence;
                dy += (noise(t * 3, noiseSeedVal2) - 0.5) * h * 0.3 * generationRules.turbulence;
                x = baseX + dx;
                y = baseY + dy;
            }
            points.push({ x, y });
        }
    } else {
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            let x, y;
            if (orientation === 0) {
                x = margin + w * t;
                let ny = noise(t * 5, noiseSeedVal) * 0.6 + noise(t * 10, noiseSeedVal2) * 0.4;
                y = margin + ny * h;
            } else if (orientation === 1) {
                y = margin + h * t;
                let nx = noise(t * 5, noiseSeedVal) * 0.6 + noise(t * 10, noiseSeedVal2) * 0.4;
                x = margin + nx * w;
            } else if (orientation === 2) {
                x = margin + w * t;
                y = margin + h * t;
                x += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.5 * generationRules.turbulence;
                y += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.5 * generationRules.turbulence;
            } else {
                x = width - margin - w * t;
                y = margin + h * t;
                x += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.5 * generationRules.turbulence;
                y += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.5 * generationRules.turbulence;
            }
            points.push({ x, y });
        }
    }
    
    return smoothPoints(points, 0.4);
}

/**
 * Offsets a line by a given distance, generating a parallel curve.
 * @param {Array} points - Original path points.
 * @param {number} offsetDist - Distance to offset.
 * @returns {Array} - Offset path points.
 */
function offsetLine(points, offsetDist) {
    if (points.length < 2) return points;
    let result = [];
    for (let i = 0; i < points.length; i++) {
        let prev = points[max(0, i - 1)];
        let curr = points[i];
        let next = points[min(points.length - 1, i + 1)];
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        let ndx = 0, ndy = 0;
        if (len > 0) {
            ndx = -dy / len;
            ndy = dx / len;
        }
        let ox = curr.x + ndx * offsetDist;
        let oy = curr.y + ndy * offsetDist;
        result.push({ x: ox, y: oy });
    }
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 * @param {Array} points - Array of {x, y} points.
 * @param {number} factor - Smoothing factor (0–1).
 * @returns {Array} - Smoothed points.
 */
function smoothPoints(points, factor) {
    if (points.length < 3) return points;
    let result = [];
    result.push({ x: points[0].x, y: points[0].y });
    for (let i = 1; i < points.length - 1; i++) {
        let prev = points[i - 1];
        let curr = points[i];
        let next = points[i + 1];
        let x = curr.x * (1 - factor) + (prev.x + next.x) * factor / 2;
        let y = curr.y * (1 - factor) + (prev.y + next.y) * factor / 2;
        result.push({ x, y });
    }
    result.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    return result;
}

/**
 * Draws registration markers at the canvas corners.
 */
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);
}

/**
 * Draws color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses: space to save SVG, R to reset.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generates the SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 * @returns {string} - SVG string.
 */
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) {
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }
    svgContent += '</svg>';
    return svgContent;
}

/**
 * Adds path segments for a given color to the SVG.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    let paths = pathData[colorIndex];
    paths.forEach(path => {
        svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    });
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
                 stroke="${col.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none"/>n`;
    }
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to the SVG.
 */
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`;
}

/**
 * Saves the SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons) - Improved Boundary Clipping
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              parametric curves, ribbon structures, structured randomness, non-overlapping paths,
              noise-driven curves, fluid forms, identity dynamics, boundary clipping

### Conceptual Framework

"Resilient Ribbons" portrays identity as a set of flowing, parallel lines forming bands (ribbons) 
that gently intersect, while selectively hiding lower ribbons where they lie beneath higher ones. 
Each ribbon is generated by an organic center path plus several offset lines, yielding a 
lace‐like structure. Crucially, when ribbons overlap, only the *outer boundary* of the higher 
ribbon is used to clip (hide) segments of the lower ribbon—ensuring no stray or “incorrectly 
vanishing” lines.

### Technical Approach

- **Multiple Parallel Lines**: Each ribbon is formed by `linesPerRibbon` parallel offsets from 
  a center path, creating a band of lines rather than a single stroke.
- **Subtle Noise in Offsets**: The function `offsetLineWithNoise` introduces small random 
  deviations so that parallel lines within each ribbon appear more organic, reducing rigid 
  uniformity.
- **Outer Boundary Clipping**: We compute the *outer boundary polygon* of the higher ribbon 
  (by taking the topmost line plus the reversed bottommost line) and clip the lower ribbon’s 
  segments against this polygon. Any portion of the lower ribbon found *inside* the higher 
  boundary is discarded, while *outside* portions remain visible.
- **Point-in-Polygon**: A raycast method (`pointInPolygon`) checks whether a point is inside 
  or outside the boundary. We subdivide each lower segment at boundary intersections, then 
  use a midpoint test to decide whether to keep or discard each sub‐segment.

---
*/

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

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

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

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

const strokeOpacity = 0.8;  // consistent for canvas & SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numRibbons: 6,         // total ribbons
  resolution: 200,       // #points for center path
  noiseScale: 0.0025,    // perlin noise scale for center path
  ribbonWidth: 15,       // total width for each ribbon
  linesPerRibbon: 5,     // # parallel lines in each ribbon
  offsetNoise: 1.0,      // subtle random offset for each parallel line
  turbulence: 0.3,       // center path turbulence
  loopChance: 0.3,       // probability for a "looping" center path
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let strokeWeightValue;       
let pathData = {};           // SVG paths for each color
let allRibbons = [];         // each ribbon: { colorIndex, zIndex, lines[] }

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

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

  adjustStrokeWeight();
  pickColors();

  // init path data
  selectedColorIndices.forEach(ci => { pathData[ci] = []; });

  drawArtwork();
  noLoop();
}

/**
 * Adjust stroke weight for ~0.5mm lines
 */
function adjustStrokeWeight() {
  strokeWeightValue = 1.8;
  workAreaMarginPixels += strokeWeightValue/2;
}

/**
 * Pick some random colors from palette
 */
function pickColors() {
  let n = floor(random(3,7));
  let indices = Object.keys(colors).map(k => parseInt(k));
  shuffleArray(indices);
  selectedColorIndices = indices.slice(0,n).sort((a,b)=>a-b);
}

/**
 * Main drawing function
 */
function drawArtwork() {
  background(255);
  generateAllRibbons();
  clipAndDrawRibbons();

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Generate ribbons with parallel lines
 */
function generateAllRibbons() {
  allRibbons = [];
  for (let i=0; i<generationRules.numRibbons; i++) {
    let cIndex = selectedColorIndices[i % selectedColorIndices.length];
    let zIndex = random();  // layering
    let centerLine = buildCenterPath();

    // build lines
    let spacing = generationRules.ribbonWidth / (generationRules.linesPerRibbon - 1);
    let linesArr = [];
    for (let j=0; j<generationRules.linesPerRibbon; j++) {
      let offsetAmt = -generationRules.ribbonWidth/2 + j*spacing;
      let offsetPath = offsetLineWithNoise(centerLine, offsetAmt, generationRules.offsetNoise);
      linesArr.push({
        points: offsetPath,
        segments: [offsetPath]  // initially one visible segment
      });
    }

    allRibbons.push({
      colorIndex: cIndex,
      zIndex: zIndex,
      lines: linesArr
    });
  }
  // sort by zIndex
  allRibbons.sort((a,b)=>a.zIndex - b.zIndex);
}

/**
 * Build a single "center path" with random start→end plus turbulence
 */
function buildCenterPath() {
  let margin = workAreaMarginPixels;
  let w = width - 2*margin;
  let h = height - 2*margin;

  // pick orientation
  let orientation = floor(random(4));
  let doLoop = random()<generationRules.loopChance;

  let pts = [];
  let steps = generationRules.resolution;

  // simple approach: 
  //  - if doLoop, add some sin-based loops + noise
  //  - else just do a line from one edge to opposite edge w/ noise
  for (let i=0; i<=steps; i++) {
    let t = i/steps;
    let x, y;

    // base (sx, sy) → (ex, ey)
    let sx, sy, ex, ey;
    if (orientation===0) {
      // left→right
      sx=margin; sy=margin + random(h);
      ex=width-margin; ey=margin + random(h);
    } else if (orientation===1) {
      // top→bottom
      sx=margin + random(w); sy=margin;
      ex=margin + random(w); ey=height-margin;
    } else if (orientation===2) {
      // diag top-left → bottom-right
      sx=margin; sy=margin;
      ex=width-margin; ey=height-margin;
    } else {
      // diag top-right → bottom-left
      sx=width-margin; sy=margin;
      ex=margin;        ey=height-margin;
    }

    x = lerp(sx, ex, t);
    y = lerp(sy, ey, t);

    // turbulence
    let dx = (noise(x*generationRules.noiseScale, y*generationRules.noiseScale)-0.5)*w*generationRules.turbulence*0.4;
    let dy = (noise(y*generationRules.noiseScale, x*generationRules.noiseScale)-0.5)*h*generationRules.turbulence*0.4;
    x += dx;
    y += dy;

    // if looping
    if (doLoop) {
      let loopFreq = random(1,3);
      let loopAmp  = 0.3;
      let angle = TWO_PI*loopFreq*t;
      // offset around normal
      let nx = sin(angle)*w*loopAmp*generationRules.turbulence*0.5;
      let ny = cos(angle)*h*loopAmp*generationRules.turbulence*0.5;
      x += nx; 
      y += ny;
    }

    pts.push({x,y});
  }
  return smoothPoints(pts, 0.3);
}

/**
 * Offset a line by offsetDist, adding subtle random noise to avoid rigid parallels
 */
function offsetLineWithNoise(points, offsetDist, noiseFactor=1.0) {
  if (points.length<2) return points;
  let res = [];
  for (let i=0; i<points.length; i++) {
    let prev = points[max(0, i-1)];
    let curr = points[i];
    let next = points[min(points.length-1, i+1)];

    let dx = next.x - prev.x;
    let dy = next.y - prev.y;
    let len = sqrt(dx*dx + dy*dy);

    let ndx=0, ndy=0;
    if (len>0) {
      ndx=-dy/len; 
      ndy= dx/len;
    }
    let ox = curr.x + ndx*offsetDist;
    let oy = curr.y + ndy*offsetDist;

    // small random deviation
    let dev = (random()-0.5)*noiseFactor;
    ox += dev;
    oy += dev;

    res.push({x:ox, y:oy});
  }
  return res;
}

/**
 * Clip & draw ribbons in order, storing path segments for SVG
 */
function clipAndDrawRibbons() {
  // For each ribbon, clip it by all ribbons above it
  for (let i=0; i<allRibbons.length; i++) {
    let lower = allRibbons[i];
    for (let j=i+1; j<allRibbons.length; j++) {
      let higher = allRibbons[j];
      clipRibbonByRibbon(lower, higher);
    }
  }

  // Now draw them
  for (let rib of allRibbons) {
    let cIndex = rib.colorIndex;
    applyStrokeWithOpacity(colors[cIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // draw lines
    for (let line of rib.lines) {
      for (let seg of line.segments) {
        if (seg.length<2) continue;
        beginShape();
        for (let pt of seg) {
          vertex(pt.x, pt.y);
        }
        endShape();

        // store for SVG
        let pathStr = pointsToSVGPath(seg);
        if (pathStr) {
          pathData[cIndex].push(pathStr);
        }
      }
    }
  }
}

/**
 * Build a polygon from the top & bottom lines of 'ribbon'
 */
function buildRibbonBoundaryPolygon(ribbon) {
  if (ribbon.lines.length<2) return [];

  let topLine    = ribbon.lines[0].points;                         // "top" boundary
  let bottomLine = ribbon.lines[ribbon.lines.length-1].points;     // "bottom" boundary
  let polygon = [];
  // go forward along topLine
  for (let p of topLine) polygon.push({x:p.x, y:p.y});
  // then backward along bottomLine
  for (let i=bottomLine.length-1; i>=0; i--) {
    polygon.push({x: bottomLine[i].x, y: bottomLine[i].y});
  }
  return polygon;
}

/**
 * Clip lowerRibbon lines so that any portion inside higherRibbon's boundary is removed.
 */
function clipRibbonByRibbon(lowerRibbon, higherRibbon) {
  // build boundary polygon from higherRibbon's outer lines
  let boundary = buildRibbonBoundaryPolygon(higherRibbon);
  if (boundary.length<3) return; // can't clip

  // for each line in lowerRibbon, clip all segments
  for (let line of lowerRibbon.lines) {
    let newSegs = [];
    for (let seg of line.segments) {
      if (seg.length<2) continue;

      // subdivide at intersections with boundary
      let subSegs = clipSegmentAgainstPolygon(seg, boundary);
      newSegs.push(...subSegs);
    }
    line.segments = newSegs;
  }
}

/**
 * Clip a single polyline 'segment' so that any part inside 'polygon' is removed.
 * We do the following:
 * 1) find intersections with polygon edges
 * 2) break into sub segments
 * 3) test midpoint to see if sub segment is inside or outside
 * 4) keep only outside sub segments
 */
function clipSegmentAgainstPolygon(segment, polygon) {
  // 1) find intersection points along segment
  let ints = [];
  for (let i=0; i<segment.length-1; i++) {
    let p1 = segment[i], p2 = segment[i+1];
    for (let j=0; j<polygon.length; j++) {
      let k=(j+1)%polygon.length;
      let q1=polygon[j], q2=polygon[k];
      let inter = lineIntersection(p1, p2, q1, q2);
      if (inter) {
        ints.push({
          idx: i,     // which edge in 'segment'
          t:  inter.uA,
          pt: {x: inter.x, y: inter.y}
        });
      }
    }
  }
  if (ints.length===0) {
    // no intersection => either entirely inside or entirely outside
    // check midpoint
    let mid = segment[Math.floor(segment.length/2)];
    let inside = pointInPolygon(mid, polygon);
    return inside ? [] : [segment];
  }

  // sort intersection points by segment index, then t
  ints.sort((a,b)=>{
    if (a.idx!==b.idx) return a.idx-b.idx;
    return a.t-b.t;
  });

  // 2) subdivide
  let subs = [];
  let cur = [segment[0]];
  let intIdx=0;
  for (let i=1; i<segment.length; i++) {
    let relevantInts = ints.filter(x=>x.idx===i-1);
    // if we have intersections on this edge, sort by 't'
    relevantInts.sort((a,b)=>a.t-b.t);
    for (let intr of relevantInts) {
      // add intersection to current sub
      cur.push({x: intr.pt.x, y: intr.pt.y});
      // finalize sub
      if (cur.length>1) {
        subs.push(cur);
      }
      // start a new sub from intersection
      cur = [{x: intr.pt.x, y: intr.pt.y}];
    }
    // add the normal point
    cur.push(segment[i]);
  }
  // push last
  if (cur.length>1) subs.push(cur);

  // 3) check midpoint for each sub => keep if outside
  let outsideSubs = [];
  for (let s of subs) {
    let mIdx = floor(s.length/2);
    let mid = s[mIdx];
    let inside = pointInPolygon(mid, polygon);
    if (!inside) {
      outsideSubs.push(s);
    }
  }
  return outsideSubs;
}

/**
 * Raycast method to see if a point is inside a polygon
 */
function pointInPolygon(pt, poly) {
  let inside=false;
  for (let i=0; i<poly.length; i++) {
    let j=(i+1)%poly.length;
    let xi=poly[i].x, yi=poly[i].y;
    let xj=poly[j].x, yj=poly[j].y;
    let intersect=((yi>pt.y)!==(yj>pt.y)) && (pt.x < (xj - xi)*(pt.y - yi)/(yj-yi)+xi);
    if (intersect) inside=!inside;
  }
  return inside;
}

/**
 * Basic line intersection utility
 */
function lineIntersection(p1, p2, p3, p4) {
  let den = (p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y);
  if (abs(den)<1e-9) return null; // parallel
  let ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x))/den;
  let ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x))/den;
  if (ua<0||ua>1||ub<0||ub>1) return null; // out of segment
  let x = p1.x + ua*(p2.x - p1.x);
  let y = p1.y + ua*(p2.y - p1.y);
  return {x, y, uA: ua, uB: ub};
}

/**
 * Smooth points
 */
function smoothPoints(points, factor) {
  if (points.length<3) return points;
  let out=[points[0]];
  for (let i=1; i<points.length-1; i++) {
    let p0=points[i-1], p1=points[i], p2=points[i+1];
    let x = p1.x*(1-factor) + (p0.x+p2.x)*factor/2;
    let y = p1.y*(1-factor) + (p0.y+p2.y)*factor/2;
    out.push({x,y});
  }
  out.push(points[points.length-1]);
  return out;
}

/**
 * Convert points to "M..L.." path for SVG
 */
function pointsToSVGPath(points) {
  if (!points||points.length<2) return '';
  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
  for (let i=1; i<points.length; i++) {
    d+=` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
  }
  return d;
}

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

function resetCanvas() {
  background(255);
  selectedColorIndices.forEach(ci=>{ pathData[ci]=[]; });
  allRibbons=[];
  drawArtwork();
}

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

  // individual
  selectedColorIndices.forEach(ci=>{
    let cname=colors[ci].name.toUpperCase();
    let svgOne=generateSVG(ci);
    let fname=`${dayNumber}-0${ci}-${cname}-PORTRAIT-${stamp}.svg`;
    saveSVGFile(svgOne, fname);
  });
}

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

  if (activeColor===0) {
    // all
    selectedColorIndices.forEach((ci,idx)=>{
      svg+=addSegmentsSVG(ci, idx+1, 0);
    });
  } else {
    let idx=selectedColorIndices.indexOf(activeColor)+1;
    svg+=addSegmentsSVG(activeColor, idx, activeColor);
  }

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

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

  let arr=pathData[colorIndex];
  arr.forEach(pathStr=>{
    svg+=`<path d="${pathStr}" />n`;
  });

  // palette bar if single color
  if (activeColor===colorIndex) {
    let used=selectedColorIndices;
    let i=used.indexOf(colorIndex);
    if (i>=0) {
      let paletteLength=300, barHeight=2, gapSize=7;
      let yStart=height-(1.25*pixelsPerInch);
      let numC=used.length;
      let totalGaps=(numC-1)*gapSize;
      let segLen=(paletteLength - totalGaps)/numC;
      let xStart=(width - paletteLength)/2;
      let xx=xStart + i*(segLen+gapSize);
      svg+=`<path d="M${xx.toFixed(2)},${yStart.toFixed(2)} H${(xx+segLen).toFixed(2)}"
               stroke="${col.hex}"
               stroke-opacity="${strokeOpacity}"
               stroke-width="${barHeight}"
               fill="none"/>n`;
    }
  }
  svg+='</g>n';
  return svg;
}

/**
 * Corner markers in SVG
 */
function addMarkersSVG() {
  const sw=1, off=sw/2;
  let out=`<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+off},${off} L${off},${off} L${off},${5+off}
      M${(width-5-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-off).toFixed(2)}
       L${(width-off).toFixed(2)},${(height-5-off).toFixed(2)}"
      stroke-width="${sw}" fill="none" />
    </g>n`;
  return out;
}

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

/**
 * Simple array shuffle
 */
function shuffleArray(arr) {
  for (let i=arr.length-1; i>0; i--) {
    let j=floor(random(i+1));
    [arr[i], arr[j]]=[arr[j], arr[i]];
  }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a series of flowing bands that span the canvas 
in organic arcs. Each ribbon emerges from a meandering center path and grows into a bundle 
of parallel lines, suggesting the coherence and multiplicity within every facet of self. 
Subtle noise adds an element of spontaneity, and the partial or full-length arrangements 
symbolize the varied reach of ideas. Where ribbons overlap, lower layers partially vanish, 
reflecting how certain aspects of identity become momentarily obscured by others, yet 
remain an essential strand in the broader tapestry.

### Technical Approach

This self-portrait employs p5.js to generate multiple “ribbons,” each defined by:
- A center path influenced by noise-based turbulence and optional looping. 
- A set of parallel lines offset from the center path to form a unified band. 
- A layering system that clips lower ribbons where they intersect with higher ribbons,
  simulating layered occlusion.

A subset of colors is randomly chosen from a limited palette to color the ribbons, 
and each ribbon can be full-length or partial, adding variety to the composition. 
All line segments are tracked for precise SVG export. The result is an evolving, 
interwoven portrait that captures the dynamic interplay of continuity, concealment, 
and emergence within identity.

---
*/

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     
const canvasHeightInches = 11;    
const pixelsPerInch = 100;        
const dayNumber = '157';          

// 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         
    resolution: 300,        
    ribbonWidth: 12,        
    linesPerRibbon: 5,      
    loopProbability: 0.3,   
    loopIntensity: 0.6,     
    turbulence: 0.4,        
    fullLengthProbability: 0.4,
    minLengthFraction: 0.3, 
    maxLengthFraction: 0.5  
};

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

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; 
    let dy = p1.y - p2.y; 
    return dx * dx + dy * dy; 
}
function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

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

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

    adjustForStrokeWeight();
    selectColors();

    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let colorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = isFullLength ? 1.0 : random(generationRules.minLengthFraction, generationRules.maxLengthFraction);
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        let ribbonWidthMult = random(0.85, 1.15);
        let actualRibbonWidth = generationRules.ribbonWidth * ribbonWidthMult;
        
        let ribbon = {
            centerPath: centerPath,
            colorIndex: colorIndex,
            zIndex: zIndex,
            lines: [],
            ribbonWidth: actualRibbonWidth
        };
        
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? actualRibbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            let offset = (numLines > 1) ? (-actualRibbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath]
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections and draws ribbons in order.
 */
function processAndDrawRibbons() {
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    for (let ribbon of allRibbons) {
        let colorIndex = ribbon.colorIndex;
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();
        
        for (let line of ribbon.lines) {
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    beginShape();
                    for (let p of segment) {
                        vertex(p.x, p.y);
                    }
                    endShape();
                    
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Simple estimation of the minimum distance between two ribbons (center-path based).
 */
function getMinDistanceBetweenRibbons(ribbonA, ribbonB) {
    let minDist = Infinity;
    let stepA = max(1, floor(ribbonA.centerPath.length / 30));
    let stepB = max(1, floor(ribbonB.centerPath.length / 30));
    
    for (let i = 0; i < ribbonA.centerPath.length; i += stepA) {
        let p1 = ribbonA.centerPath[i];
        for (let j = 0; j < ribbonB.centerPath.length; j += stepB) {
            let p2 = ribbonB.centerPath[j];
            let d = distBetween(p1, p2);
            if (d < minDist) minDist = d;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon by measuring distance to its center path.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) return false;
    
    let halfWidth = ribbon.ribbonWidth * 0.5;
    let minDistSq = Infinity;
    
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = constrain(t, 0, 1);
        let cx = p1.x + t * (p2.x - p1.x);
        let cy = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, { x: cx, y: cy }));
    }
    
    return minDistSq <= (halfWidth * halfWidth);
}

/**
 * Finds intersections between one segment and the boundary lines of another ribbon.
 */
function findIntersections(segment, ribbon) {
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) return [];
    let intersections = [];
    
    let topLine = ribbon.lines[0].points;
    let bottomLine = ribbon.lines[ribbon.lines.length - 1].points;
    let boundarySets = [topLine, bottomLine];
    
    for (let i = 0; i < segment.length - 1; i++) {
        let s1 = segment[i];
        let s2 = segment[i + 1];
        for (let boundary of boundarySets) {
            for (let j = 0; j < boundary.length - 1; j++) {
                let b1 = boundary[j];
                let b2 = boundary[j + 1];
                let inter = lineIntersection(s1, s2, b1, b2);
                if (inter) {
                    intersections.push({
                        point: inter,
                        segIndex: i,
                        t: inter.uA
                    });
                }
            }
        }
    }
    
    intersections.sort((a, b) => {
        if (a.segIndex !== b.segIndex) return a.segIndex - b.segIndex;
        return a.t - b.t;
    });
    
    return intersections;
}

/**
 * Processes intersections between lowerRibbon and higherRibbon, clipping hidden segments.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon.lines || !higherRibbon.lines) return;
    
    for (let ln of lowerRibbon.lines) {
        let newSegments = [];
        
        for (let seg of ln.segments) {
            if (!seg || seg.length < 2) continue;
            
            let ints = findIntersections(seg, higherRibbon);
            if (ints.length === 0) {
                let mid = seg[floor(seg.length / 2)];
                if (!isPointInsideRibbon(mid, higherRibbon)) newSegments.push(seg);
                continue;
            }
            
            let currentSeg = [ seg[0] ];
            let inside = isPointInsideRibbon(seg[0], higherRibbon);
            let idx = 0;
            
            for (let intr of ints) {
                while (idx < intr.segIndex) {
                    idx++;
                    currentSeg.push(seg[idx]);
                }
                currentSeg.push({ x: intr.point.x, y: intr.point.y });
                
                if (!inside && currentSeg.length >= 2) {
                    newSegments.push([...currentSeg]);
                }
                currentSeg = [{ x: intr.point.x, y: intr.point.y }];
                inside = !inside;
            }
            
            while (idx < seg.length - 1) {
                idx++;
                currentSeg.push(seg[idx]);
            }
            if (!inside && currentSeg.length >= 2) {
                newSegments.push(currentSeg);
            }
        }
        
        ln.segments = newSegments;
    }
}

/**
 * Generates a center path for a ribbon, optionally partial or looping.
 */
function generateOrganicPath(isFullLength, lengthFraction) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    if (w <= 0 || h <= 0) return [];
    
    let orientation = floor(random(4));
    let doLoops = random() < generationRules.loopProbability;
    
    let startX, startY, endX, endY;
    if (isFullLength) {
        if (orientation === 0) {
            startX = margin;       startY = margin + random(h);
            endX   = width-margin; endY   = margin + random(h);
        } else if (orientation === 1) {
            startX = margin + random(w); startY = margin;
            endX   = margin + random(w); endY   = height-margin;
        } else if (orientation === 2) {
            startX = margin;       startY = margin;
            endX   = width-margin; endY   = height-margin;
        } else {
            startX = width-margin; startY = margin;
            endX   = margin;       endY   = height-margin;
        }
    } else {
        let st = random(0, 0.3);
        let et = random(0.7, 1.0);
        if (orientation === 0) {
            startX = margin + st*w; startY = margin + random(h);
            endX   = margin + et*w; endY   = margin + random(h);
        } else if (orientation === 1) {
            startX = margin + random(w); startY = margin + st*h;
            endX   = margin + random(w); endY   = margin + et*h;
        } else if (orientation === 2) {
            startX = margin + st*w; startY = margin + st*h;
            endX   = margin + et*w; endY   = margin + et*h;
        } else {
            startX = width-margin - st*w; startY = margin + st*h;
            endX   = width-margin - et*w; endY   = margin + et*h;
        }
    }
    
    let pts = [];
    let steps = generationRules.resolution;
    for (let i = 0; i <= steps; i++) {
        let t = i / steps;
        let baseX = lerp(startX, endX, t);
        let baseY = lerp(startY, endY, t);
        
        if (doLoops) {
            let freq = random(1,3) * floor(random(1,4));
            let angle = TWO_PI*freq*t;
            let amp = random(0.15,0.4)*generationRules.loopIntensity;
            
            let dirX = endX - startX; let dirY = endY - startY;
            let dirLen = sqrt(dirX*dirX + dirY*dirY);
            if (dirLen>0) {
                dirX/=dirLen; dirY/=dirLen;
                let perpX=-dirY; let perpY=dirX;
                let waveOffset= sin(angle)*amp*min(w,h)*0.3*generationRules.turbulence;
                baseX += perpX*waveOffset;
                baseY += perpY*waveOffset;
            }
        } else {
            let dirX = endX - startX; let dirY = endY - startY;
            let dirLen = sqrt(dirX*dirX + dirY*dirY);
            if (dirLen>0) {
                dirX/=dirLen; dirY/=dirLen;
                let perpX=-dirY; let perpY=dirX;
                let nVal = noise(t*3, i*0.1)-0.5;
                let amp = sin(t*PI)*min(w,h)*0.2*generationRules.turbulence;
                baseX += perpX*nVal*amp; 
                baseY += perpY*nVal*amp;
            }
        }
        
        baseX = constrain(baseX, margin*0.5, width-margin*0.5);
        baseY = constrain(baseY, margin*0.5, height-margin*0.5);
        pts.push({x: baseX, y: baseY});
    }
    
    return smoothPoints(pts, 0.4);
}

/**
 * Offsets a line by a given distance to create parallel curves.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };

    for (let i = 0; i < points.length; i++) {
        let prev = (i > 0) ? points[i - 1] : points[i];
        let curr = points[i];
        let next = (i < points.length - 1) ? points[i + 1] : points[i];

        if (!prev || !next) {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }

        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);

        let nx=0, ny=0;
        if (len>1e-6) {
            nx=-dy/len; 
            ny= dx/len;
            lastValidNormal={x:nx, y:ny};
        } else {
            nx=lastValidNormal.x; 
            ny=lastValidNormal.y;
        }

        let ox = curr.x + nx*offsetDist;
        let oy = curr.y + ny*offsetDist;
        result.push({ x: ox, y: oy });
    }
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    let smoothed = [];
    
    smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i = 1; i < points.length - 1; i++) {
        let p0=points[i-1], p1=points[i], p2=points[i+1];
        if (p0 && p1 && p2) {
            let mx=(p0.x + p2.x)*0.5; 
            let my=(p0.y + p2.y)*0.5;
            let sx=p1.x*(1-factor) + mx*factor;
            let sy=p1.y*(1-factor) + my*factor;
            smoothed.push({ x: sx, y: sy });
        } else {
            smoothed.push({ x: points[i].x, y: points[i].y });
        }
    }
    
    smoothed.push({ x: points[points.length-1].x, y: points[points.length-1].y });
    return smoothed;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds path segments for a given color index as an SVG group.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    
    // Add all paths for this color
    let paths = pathData[colorIndex];
    if (paths && paths.length > 0) {
        paths.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    
    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none" />n`;
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to SVG.
 */
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}"
       fill="none"
       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`;
}

/**
 * Save SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         // Number of ribbons to generate
    resolution: 300,        // Points per ribbon path
    ribbonWidth: 12,        // Width of each ribbon
    linesPerRibbon: 5,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability of generating a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.4,        // Amount of noise added to the curves
    fullLengthProbability: 0.4, // Probability of full-length ribbons
    minLengthFraction: 0.3, // Minimum length for partial ribbons
    maxLengthFraction: 0.5  // Maximum length for partial ribbons
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 * @param {Array} points - Array of {x, y} objects
 * @returns {string} - SVG path string
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; let dy = p1.y - p2.y; 
    return dx * dx + dy * dy; 
}
function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data storage
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let colorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        // Determine if ribbon will be full length or partial
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(
                generationRules.minLengthFraction, 
                generationRules.maxLengthFraction
            );
        }
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        // Vary ribbon width slightly for more visual interest
        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath: centerPath,
            colorIndex: colorIndex,
            zIndex: zIndex,
            lines: [],
            ribbonWidth: ribbonWidth
        };
        
        // Generate parallel lines for the ribbon
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath]
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    
    // Sort ribbons by z-index for rendering order
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion.
 */
function processAndDrawRibbons() {
    // Process ribbon intersections
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            // Skip intersection processing if ribbons are far apart
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // Draw all ribbons
    for (let ribbon of allRibbons) {
        let colorIndex = ribbon.colorIndex;
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();
        
        for (let line of ribbon.lines) {
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    // Draw segment
                    beginShape();
                    for (let point of segment) {
                        if (point && typeof point.x !== 'undefined') {
                            vertex(point.x, point.y);
                        }
                    }
                    endShape();
                    
                    // Record segment path for SVG export
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Simple estimation of minimum distance between ribbons.
 */
function getMinDistanceBetweenRibbons(ribbon1, ribbon2) {
    let minDist = Infinity;
    for (let i = 0; i < ribbon1.centerPath.length; i += 5) {
        let p1 = ribbon1.centerPath[i];
        if (!p1) continue;
        for (let j = 0; j < ribbon2.centerPath.length; j += 5) {
            let p2 = ribbon2.centerPath[j];
            if (!p2) continue;
            let distVal = distBetween(p1, p2);
            if (distVal < minDist) minDist = distVal;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) {
        return false;
    }
    
    // Find minimum distance to center path
    let minDistSq = Infinity;
    let halfWidth = ribbon.ribbonWidth / 2;
    
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        
        if (!p1 || !p2) continue;
        
        // Calculate squared segment length
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        
        // Project point onto line segment
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = min(max(t, 0), 1);
        
        let closestX = p1.x + t * (p2.x - p1.x);
        let closestY = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, {x: closestX, y: closestY}));
    }
    
    return minDistSq < (halfWidth * halfWidth);
}

/**
 * Finds intersections between a segment and a ribbon's boundary lines.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) {
        return intersections;
    }
    
    // Use first and last lines of ribbon as boundaries
    const boundaryIndices = [0, ribbon.lines.length - 1];
    
    for (let boundaryIndex of boundaryIndices) {
        let boundaryLine = ribbon.lines[boundaryIndex];
        if (!boundaryLine || !boundaryLine.points || boundaryLine.points.length < 2) continue;
        
        // Check each segment of the line
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            
            if (!p1 || !p2) continue;
            
            for (let j = 0; j < boundaryLine.points.length - 1; j++) {
                let p3 = boundaryLine.points[j];
                let p4 = boundaryLine.points[j + 1];
                
                if (!p3 || !p4) continue;
                
                let intersection = lineIntersection(p1, p2, p3, p4);
                if (intersection) {
                    intersections.push({
                        point: {x: intersection.x, y: intersection.y},
                        segmentIndex: i,
                        t: intersection.uA
                    });
                }
            }
        }
    }
    
    // Sort intersections by position along the segment
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    
    return intersections;
}

/**
 * Process ribbon intersection by clipping segments.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon.lines || !higherRibbon.lines) return;
    
    // Process each line in the lower ribbon
    for (let line of lowerRibbon.lines) {
        let newSegments = [];
        
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            
            // Find intersections with higher ribbon
            let intersections = findIntersections(segment, higherRibbon);
            
            // If no intersections, check if inside or outside
            if (intersections.length === 0) {
                let midIdx = Math.floor(segment.length / 2);
                if (midIdx < segment.length && !isPointInsideRibbon(segment[midIdx], higherRibbon)) {
                    newSegments.push(segment); 
                }
                continue;
            }
            
            // Process segments with intersections
            let currentPoints = [segment[0]];
            let isInside = isPointInsideRibbon(segment[0], higherRibbon);
            let currentIndex = 0;
            
            for (let intr of intersections) {
                while (currentIndex < intr.segmentIndex) {
                    currentIndex++;
                    if (currentIndex < segment.length) {
                        currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
                    }
                }
                
                currentPoints.push({x: intr.point.x, y: intr.point.y});
                
                if (!isInside && currentPoints.length >= 2) {
                    newSegments.push([...currentPoints]);
                }
                
                currentPoints = [{x: intr.point.x, y: intr.point.y}];
                isInside = !isInside;
            }
            
            while (currentIndex < segment.length - 1) {
                currentIndex++;
                currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
            }
            
            if (currentPoints.length >= 2 && !isInside) {
                newSegments.push(currentPoints);
            }
        }
        
        line.segments = newSegments;
    }
}

/**
 * Generates an organic path for a ribbon.
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    
    if (w <= 0 || h <= 0) return [];

    let orientation = floor(random(4));
    let hasLoops = random() < generationRules.loopProbability;
    
    let startX, startY, endX, endY;
    
    if (isFullLength) {
        if (orientation === 0) {
            startX = margin;        startY = margin + random(h);
            endX   = width - margin; endY   = margin + random(h);
        } else if (orientation === 1) {
            startX = margin + random(w); startY = margin;
            endX   = margin + random(w); endY   = height - margin;
        } else if (orientation === 2) {
            startX = margin;        startY = margin;
            endX   = width - margin; endY   = height - margin;
        } else {
            startX = width - margin; startY = margin;
            endX   = margin;         endY   = height - margin;
        }
    } else {
        let startT = random(0, 0.3);
        let endT   = random(0.7, 1.0);
        
        if (orientation === 0) {
            startX = margin + startT * w; startY = margin + random(h);
            endX   = margin + endT * w;   endY   = margin + random(h);
        } else if (orientation === 1) {
            startX = margin + random(w);  startY = margin + startT * h;
            endX   = margin + random(w);  endY   = margin + endT * h;
        } else if (orientation === 2) {
            startX = margin + startT * w; startY = margin + startT * h;
            endX   = margin + endT * w;   endY   = margin + endT * h;
        } else {
            startX = width - margin - startT * w; startY = margin + startT * h;
            endX   = width - margin - endT * w;   endY   = margin + endT * h;
        }
    }
    
    let points = [];
    let steps = generationRules.resolution;
    
    for (let i = 0; i <= steps; i++) {
        let t = i / steps;
        let baseX = lerp(startX, endX, t);
        let baseY = lerp(startY, endY, t);
        
        if (hasLoops) {
            let freq = random(1,3) * floor(random(1,4));
            let angle = TWO_PI * freq * t;
            let amp = random(0.15, 0.4) * generationRules.loopIntensity;
            
            let dirX = endX - startX, dirY = endY - startY;
            let len = sqrt(dirX * dirX + dirY * dirY);
            if (len > 0) {
                dirX /= len; dirY /= len;
                let perpX = -dirY, perpY = dirX;
                let waveOffset = sin(angle) * amp * min(w, h) * 0.3 * generationRules.turbulence;
                baseX += perpX * waveOffset;
                baseY += perpY * waveOffset;
            }
        } else {
            let dirX = endX - startX, dirY = endY - startY;
            let len = sqrt(dirX * dirX + dirY * dirY);
            if (len > 0) {
                dirX /= len; dirY /= len;
                let perpX = -dirY, perpY = dirX;
                let noiseVal = noise(t * 3, i * 0.1) - 0.5;
                let amplitude = sin(t * PI) * min(w, h) * 0.2 * generationRules.turbulence;
                baseX += perpX * noiseVal * amplitude;
                baseY += perpY * noiseVal * amplitude;
            }
        }
        
        baseX = constrain(baseX, margin*0.5, width - margin*0.5);
        baseY = constrain(baseY, margin*0.5, height - margin*0.5);
        points.push({ x: baseX, y: baseY });
    }
    
    return smoothPoints(points, 0.4);
}

/**
 * Offsets a line by a given distance to create parallel curves.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    
    for (let i = 0; i < points.length; i++) {
        let prev = i > 0 ? points[i - 1] : points[i];
        let curr = points[i];
        let next = i < points.length - 1 ? points[i + 1] : points[i];
        
        if (!prev || !next) {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        
        let nx=0, ny=0;
        if (len>1e-6) {
            nx=-dy/len; ny=dx/len;
            lastValidNormal = {x:nx, y:ny};
        } else {
            nx=lastValidNormal.x; ny=lastValidNormal.y;
        }
        
        let ox = curr.x + nx * offsetDist;
        let oy = curr.y + ny * offsetDist;
        result.push({ x: ox, y: oy });
    }
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    
    let smoothed = [];
    smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i = 1; i < points.length - 1; i++) {
        let p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];
        if (p0 && p1 && p2) {
            let mx = (p0.x + p2.x) * 0.5;
            let my = (p0.y + p2.y) * 0.5;
            let sx = p1.x * (1 - factor) + mx * factor;
            let sy = p1.y * (1 - factor) + my * factor;
            smoothed.push({ x: sx, y: sy });
        } else {
            smoothed.push({ x: points[i].x, y: points[i].y });
        }
    }
    
    smoothed.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    return smoothed;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds path segments for a given color index as an SVG group.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    
    // Add all paths for this color
    let paths = pathData[colorIndex];
    if (paths && paths.length > 0) {
        paths.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    
    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none" />n`;
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to SVG.
 */
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}"
       fill="none"
       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`;
}

/**
 * Save SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         // Number of ribbons to generate
    resolution: 600,        // Points per ribbon path
    ribbonWidth: 12,        // Width of each ribbon
    linesPerRibbon: 5,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability of generating a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.4,        // Amount of noise added to the curves
    fullLengthProbability: 0.4, // Probability of full-length ribbons
    minLengthFraction: 0.3, // Minimum length for partial ribbons
    maxLengthFraction: 0.5  // Maximum length for partial ribbons
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing (adjusted for pen)
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; let dy = p1.y - p2.y; return dx * dx + dy * dy; 
}

function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data storage
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let colorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        // Determine if ribbon will be full length or partial
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(
                generationRules.minLengthFraction, 
                generationRules.maxLengthFraction
            );
        }
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        // Vary ribbon width slightly for more visual interest
        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath: centerPath,
            colorIndex: colorIndex,
            zIndex: zIndex,
            isFullLength: isFullLength,
            ribbonWidth: ribbonWidth,
            lines: []
        };
        
        // Generate parallel lines for the ribbon
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath]
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    
    // Sort ribbons by z-index for rendering order
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion.
 */
function processAndDrawRibbons() {
    // Process ribbon intersections
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            // Skip intersection processing if ribbons are far apart
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // Draw all ribbons
    for (let ribbon of allRibbons) {
        let colorIndex = ribbon.colorIndex;
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();
        
        for (let line of ribbon.lines) {
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    // Draw segment
                    beginShape();
                    for (let point of segment) {
                        if (point && typeof point.x !== 'undefined') {
                            vertex(point.x, point.y);
                        }
                    }
                    endShape();
                    
                    // Record segment path for SVG export
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Simple estimation of minimum distance between ribbons.
 */
function getMinDistanceBetweenRibbons(ribbon1, ribbon2) {
    // Sample points from center paths to estimate minimum distance
    let minDist = Infinity;
    for (let i = 0; i < ribbon1.centerPath.length; i += 5) {
        let p1 = ribbon1.centerPath[i];
        if (!p1) continue;
        
        for (let j = 0; j < ribbon2.centerPath.length; j += 5) {
            let p2 = ribbon2.centerPath[j];
            if (!p2) continue;
            
            let dist = distBetween(p1, p2);
            if (dist < minDist) minDist = dist;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || typeof point.x === 'undefined' || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) {
        return false;
    }
    
    // Find minimum distance to center path
    let minDistSq = Infinity;
    let halfWidth = ribbon.ribbonWidth / 2;
    
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        
        if (!p1 || !p2) continue;
        
        // Calculate squared segment length
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        
        // Project point onto line segment
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = min(max(t, 0), 1);
        
        let closestX = p1.x + t * (p2.x - p1.x);
        let closestY = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, {x: closestX, y: closestY}));
    }
    
    return minDistSq < (halfWidth * halfWidth);
}

/**
 * Finds intersections between a segment and a ribbon's boundary lines.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) {
        return intersections;
    }
    
    // Use first and last lines of ribbon as boundaries
    const boundaryIndices = [0, ribbon.lines.length - 1];
    
    for (let boundaryIndex of boundaryIndices) {
        let boundaryLine = ribbon.lines[boundaryIndex];
        if (!boundaryLine || !boundaryLine.points || boundaryLine.points.length < 2) continue;
        
        // Check each segment against boundary line segments
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            
            if (!p1 || !p2) continue;
            
            for (let j = 0; j < boundaryLine.points.length - 1; j++) {
                let p3 = boundaryLine.points[j];
                let p4 = boundaryLine.points[j + 1];
                
                if (!p3 || !p4) continue;
                
                let intersection = lineIntersection(p1, p2, p3, p4);
                if (intersection) {
                    intersections.push({
                        point: {x: intersection.x, y: intersection.y},
                        segmentIndex: i,
                        t: intersection.uA
                    });
                }
            }
        }
    }
    
    // Sort intersections by position along the segment
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    
    return intersections;
}

/**
 * Process ribbon intersection by clipping segments.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon || !lowerRibbon.lines || !higherRibbon || !higherRibbon.lines) return;
    
    // Process each line in the lower ribbon
    for (let lineIdx = 0; lineIdx < lowerRibbon.lines.length; lineIdx++) {
        let line = lowerRibbon.lines[lineIdx];
        let newSegments = [];
        
        // Process each segment
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            
            // Find intersections with higher ribbon
            let intersections = findIntersections(segment, higherRibbon);
            
            // If no intersections, check if inside or outside
            if (intersections.length === 0) {
                // Use midpoint as a representative point
                let midIdx = Math.floor(segment.length / 2);
                if (midIdx < segment.length && !isPointInsideRibbon(segment[midIdx], higherRibbon)) {
                    newSegments.push(segment); // Keep segment if outside
                }
                continue;
            }
            
            // Process segments with intersections
            let currentPoints = [{x: segment[0].x, y: segment[0].y}]; // Start with first point
            let isInside = isPointInsideRibbon(segment[0], higherRibbon);
            let currentIndex = 0;
            
            // Handle each intersection
            for (let intr of intersections) {
                // Add points up to this intersection
                while (currentIndex < intr.segmentIndex) {
                    currentIndex++;
                    if (currentIndex < segment.length) {
                        currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
                    }
                }
                
                // Add the intersection point
                currentPoints.push({x: intr.point.x, y: intr.point.y});
                
                // Complete current segment if it's outside
                if (currentPoints.length >= 2 && !isInside) {
                    newSegments.push([...currentPoints]);
                }
                
                // Start new segment at intersection
                currentPoints = [{x: intr.point.x, y: intr.point.y}];
                isInside = !isInside; // Toggle inside/outside state
            }
            
            // Add remaining points after last intersection
            while (currentIndex < segment.length - 1) {
                currentIndex++;
                currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
            }
            
            // Add final segment if outside
            if (currentPoints.length >= 2 && !isInside) {
                newSegments.push(currentPoints);
            }
        }
        
        // Replace with new segments
        lowerRibbon.lines[lineIdx].segments = newSegments;
    }
}

/**
 * Generates an organic path for a ribbon.
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    
    if (w <= 0 || h <= 0) return [];

    // Choose ribbon orientation
    let orientation = floor(random(4)); // 0: left→right, 1: top→bottom, 2 & 3: diagonal
    
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    
    let points = [];
    let resolution = generationRules.resolution;
    
    // Determine start/end positions
    let startX, startY, endX, endY;
    
    if (isFullLength) {
        // Full canvas span
        if (orientation === 0) { // Left to right
            startX = margin;
            startY = margin + random(h);
            endX = width - margin;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin;
            endX = margin + random(w);
            endY = height - margin;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin;
            startY = margin;
            endX = width - margin;
            endY = height - margin;
        } else { // Diagonal (TR to BL)
            startX = width - margin;
            startY = margin;
            endX = margin;
            endY = height - margin;
        }
    } else {
        // Partial length ribbons
        let startT = random(0, 0.3);
        let endT = random(0.7, 1.0);
        
        if (orientation === 0) { // Left to right
            startX = margin + startT * w;
            startY = margin + random(h);
            endX = margin + endT * w;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin + startT * h;
            endX = margin + random(w);
            endY = margin + endT * h;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin + startT * w;
            startY = margin + startT * h;
            endX = margin + endT * w;
            endY = margin + endT * h;
        } else { // Diagonal (TR to BL)
            startX = width - margin - startT * w;
            startY = margin + startT * h;
            endX = width - margin - endT * w;
            endY = margin + endT * h;
        }
    }
    
    // Generate path points
    if (hasLoops) {
        let numLoops = floor(random(1, 4));
        let loopFrequency = random(1, 3) * numLoops;
        let loopAmplitude = random(0.15, 0.4) * generationRules.loopIntensity;
        
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            let angle = t * TWO_PI * loopFrequency;
            
            // Base position interpolated along path
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Path direction for perpendicular oscillation
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                // Get perpendicular vector
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply sinusoidal oscillation with varying amplitude
                let oscAmp = sin(t * PI) * loopAmplitude * min(w, h) * 0.3;
                let waveOffset = sin(angle) * oscAmp;
                
                // Calculate final position
                let x = baseX + perpX * waveOffset;
                let y = baseY + perpY * waveOffset;
                
                // Add noise variation
                x += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.2 * generationRules.turbulence;
                y += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.2 * generationRules.turbulence;
                
                // Keep within canvas bounds
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    } else {
        // Generate smooth curve without loops
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            
            // Base path interpolation
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Direction vector for perpendicular noise
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply noise perpendicular to path
                let noiseVal = (noise(t * 3, noiseSeedVal) * 2 - 1);
                let amplitude = sin(t * PI) * min(w, h) * 0.2 * generationRules.turbulence;
                
                let x = baseX + perpX * noiseVal * amplitude;
                let y = baseY + perpY * noiseVal * amplitude;
                
                // Keep within canvas
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    }
    
    // Apply smoothing
    return smoothPoints(points, 0.4);
}

/**
 * Offsets a line by a given distance to create parallel curves.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    
    for (let i = 0; i < points.length; i++) {
        if (!points[i]) continue;
        
        let prev = i > 0 ? points[i - 1] : points[i];
        let curr = points[i];
        let next = i < points.length - 1 ? points[i + 1] : points[i];
        
        if (!prev || !next) continue;
        
        // Calculate direction vectors
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        
        let nx = 0, ny = 0;
        if (len > 1e-6) {
            // Normal vector (perpendicular to path)
            nx = -dy / len;
            ny = dx / len;
            lastValidNormal = { x: nx, y: ny };
        } else if (lastValidNormal.x !== 0 || lastValidNormal.y !== 0) {
            // Use last valid normal if available
            nx = lastValidNormal.x;
            ny = lastValidNormal.y;
        } else {
            // No valid normal yet
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        
        // Apply offset
        let ox = curr.x + nx * offsetDist;
        let oy = curr.y + ny * offsetDist;
        
        result.push({ x: ox, y: oy });
    }
    
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    
    let smoothed = [];
    if (points[0]) smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i = 1; i < points.length - 1; i++) {
        let prev = points[i - 1];
        let curr = points[i];
        let next = points[i + 1];
        
        if (prev && curr && next) {
            let avgX = (prev.x + next.x) / 2;
            let avgY = (prev.y + next.y) / 2;
            let smoothX = curr.x * (1 - factor) + avgX * factor;
            let smoothY = curr.y * (1 - factor) + avgY * factor;
            smoothed.push({ x: smoothX, y: smoothY });
        } else if (curr) {
            smoothed.push({ x: curr.x, y: curr.y });
        }
    }
    
    if (points.length > 1 && points[points.length - 1]) {
        smoothed.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    }
    
    return smoothed;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds path segments for a given color index as an SVG group.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    
    // Add all paths for this color
    let paths = pathData[colorIndex];
    if (paths && paths.length > 0) {
        paths.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    
    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none"/>n`;
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to SVG.
 */
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}"
       fill="none"
       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`;
}

/**
 * Save SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon, except that 
  the outer edges can occasionally be rendered in a contrasting black to accentuate their borders.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         // Number of ribbons to generate
    resolution: 600,        // Points per ribbon path
    ribbonWidth: 18,        // Width of each ribbon
    linesPerRibbon: 6,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability of generating a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.4,        // Amount of noise added to the curves
    fullLengthProbability: 0.4, // Probability of full-length ribbons
    minLengthFraction: 0.3, // Minimum length for partial ribbons
    maxLengthFraction: 0.5, // Maximum length for partial ribbons
    borderContrastProbability: 1.0, // Probability of outer lines having a different color
    edgeColorIndex: 8       // Color index for edge lines (8=BLACK by default, 0=random from palette)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing (adjusted for pen)
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; let dy = p1.y - p2.y; return dx * dx + dy * dy; 
}

function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

/**
 * Returns a complementary or contrasting color from the palette.
 * @param {number} colorIndex - Original color index to contrast with.
 * @returns {number} - Index of a contrasting color.
 */
function getContrastingColor(colorIndex) {
    if (selectedColorIndices.length < 2) return colorIndex;
    
    // Find colors that are not the original
    let availableColors = selectedColorIndices.filter(idx => idx !== colorIndex);
    
    // Pick a random contrasting color
    return availableColors[floor(random(availableColors.length))];
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data storage
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 * Now with option for custom edge color.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let mainColorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        // Determine if this ribbon will have contrasting border
        let hasContrastingBorder = random() < generationRules.borderContrastProbability;
        
        // Handle edge color based on edgeColorIndex in generationRules
        let borderColorIndex;
        if (generationRules.edgeColorIndex === 0) {
            // If set to 0, randomize the edge color
            borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
        } else {
            // Otherwise use the specified edge color
            borderColorIndex = generationRules.edgeColorIndex;
        }
        
        // Determine if ribbon will be full length or partial
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(
                generationRules.minLengthFraction, 
                generationRules.maxLengthFraction
            );
        }
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        // Vary ribbon width slightly for more visual interest
        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath: centerPath,
            mainColorIndex: mainColorIndex,
            borderColorIndex: borderColorIndex,
            hasContrastingBorder: hasContrastingBorder,
            zIndex: zIndex,
            isFullLength: isFullLength,
            ribbonWidth: ribbonWidth,
            lines: []
        };
        
        // Generate parallel lines for the ribbon
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            // Determine color for this line - outer lines use border color, inner lines use main color
            let isOutermostLine = (j === 0 || j === numLines - 1);
            let lineColorIndex = isOutermostLine ? borderColorIndex : mainColorIndex;
            
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath],
                    colorIndex: lineColorIndex,
                    isOutermost: isOutermostLine
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    
    // Sort ribbons by z-index for rendering order
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion.
 * Modified to handle lines with different colors within the same ribbon.
 */
function processAndDrawRibbons() {
    // Process ribbon intersections
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            // Skip intersection processing if ribbons are far apart
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // Draw all ribbons
    for (let ribbon of allRibbons) {
        // Draw each line with its own color
        for (let line of ribbon.lines) {
            let colorIndex = line.colorIndex;
            applyStrokeWithOpacity(colors[colorIndex].hex);
            strokeWeight(strokeWeightValue);
            noFill();
            
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    // Draw segment
                    beginShape();
                    for (let point of segment) {
                        if (point && typeof point.x !== 'undefined') {
                            vertex(point.x, point.y);
                        }
                    }
                    endShape();
                    
                    // Record segment path for SVG export
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Simple estimation of minimum distance between ribbons.
 */
function getMinDistanceBetweenRibbons(ribbon1, ribbon2) {
    // Sample points from center paths to estimate minimum distance
    let minDist = Infinity;
    for (let i = 0; i < ribbon1.centerPath.length; i += 5) {
        let p1 = ribbon1.centerPath[i];
        if (!p1) continue;
        
        for (let j = 0; j < ribbon2.centerPath.length; j += 5) {
            let p2 = ribbon2.centerPath[j];
            if (!p2) continue;
            
            let dist = distBetween(p1, p2);
            if (dist < minDist) minDist = dist;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || typeof point.x === 'undefined' || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) {
        return false;
    }
    
    // Find minimum distance to center path
    let minDistSq = Infinity;
    let halfWidth = ribbon.ribbonWidth / 2;
    
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        
        if (!p1 || !p2) continue;
        
        // Calculate squared segment length
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        
        // Project point onto line segment
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = min(max(t, 0), 1);
        
        let closestX = p1.x + t * (p2.x - p1.x);
        let closestY = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, {x: closestX, y: closestY}));
    }
    
    return minDistSq < (halfWidth * halfWidth);
}

/**
 * Finds intersections between a segment and a ribbon's boundary lines.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) {
        return intersections;
    }
    
    // Use first and last lines of ribbon as boundaries
    const boundaryIndices = [0, ribbon.lines.length - 1];
    
    for (let boundaryIndex of boundaryIndices) {
        let boundaryLine = ribbon.lines[boundaryIndex];
        if (!boundaryLine || !boundaryLine.points || boundaryLine.points.length < 2) continue;
        
        // Check each segment against boundary line segments
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            
            if (!p1 || !p2) continue;
            
            for (let j = 0; j < boundaryLine.points.length - 1; j++) {
                let p3 = boundaryLine.points[j];
                let p4 = boundaryLine.points[j + 1];
                
                if (!p3 || !p4) continue;
                
                let intersection = lineIntersection(p1, p2, p3, p4);
                if (intersection) {
                    intersections.push({
                        point: {x: intersection.x, y: intersection.y},
                        segmentIndex: i,
                        t: intersection.uA
                    });
                }
            }
        }
    }
    
    // Sort intersections by position along the segment
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    
    return intersections;
}

/**
 * Process ribbon intersection by clipping segments.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon || !lowerRibbon.lines || !higherRibbon || !higherRibbon.lines) return;
    
    // Process each line in the lower ribbon
    for (let lineIdx = 0; lineIdx < lowerRibbon.lines.length; lineIdx++) {
        let line = lowerRibbon.lines[lineIdx];
        let newSegments = [];
        
        // Process each segment
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            
            // Find intersections with higher ribbon
            let intersections = findIntersections(segment, higherRibbon);
            
            // If no intersections, check if inside or outside
            if (intersections.length === 0) {
                // Use midpoint as a representative point
                let midIdx = Math.floor(segment.length / 2);
                if (midIdx < segment.length && !isPointInsideRibbon(segment[midIdx], higherRibbon)) {
                    newSegments.push(segment); // Keep segment if outside
                }
                continue;
            }
            
            // Process segments with intersections
            let currentPoints = [{x: segment[0].x, y: segment[0].y}]; // Start with first point
            let isInside = isPointInsideRibbon(segment[0], higherRibbon);
            let currentIndex = 0;
            
            // Handle each intersection
            for (let intr of intersections) {
                // Add points up to this intersection
                while (currentIndex < intr.segmentIndex) {
                    currentIndex++;
                    if (currentIndex < segment.length) {
                        currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
                    }
                }
                
                // Add the intersection point
                currentPoints.push({x: intr.point.x, y: intr.point.y});
                
                // Complete current segment if it's outside
                if (currentPoints.length >= 2 && !isInside) {
                    newSegments.push([...currentPoints]);
                }
                
                // Start new segment at intersection
                currentPoints = [{x: intr.point.x, y: intr.point.y}];
                isInside = !isInside; // Toggle inside/outside state
            }
            
            // Add remaining points after last intersection
            while (currentIndex < segment.length - 1) {
                currentIndex++;
                currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
            }
            
            // Add final segment if outside
            if (currentPoints.length >= 2 && !isInside) {
                newSegments.push(currentPoints);
            }
        }
        
        // Replace with new segments
        lowerRibbon.lines[lineIdx].segments = newSegments;
    }
}

/**
 * Generates an organic path for a ribbon.
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    
    if (w <= 0 || h <= 0) return [];

    // Choose ribbon orientation
    let orientation = floor(random(4)); // 0: left→right, 1: top→bottom, 2 & 3: diagonal
    
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    
    let points = [];
    let resolution = generationRules.resolution;
    
    // Determine start/end positions
    let startX, startY, endX, endY;
    
    if (isFullLength) {
        // Full canvas span
        if (orientation === 0) { // Left to right
            startX = margin;
            startY = margin + random(h);
            endX = width - margin;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin;
            endX = margin + random(w);
            endY = height - margin;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin;
            startY = margin;
            endX = width - margin;
            endY = height - margin;
        } else { // Diagonal (TR to BL)
            startX = width - margin;
            startY = margin;
            endX = margin;
            endY = height - margin;
        }
    } else {
        // Partial length ribbons
        let startT = random(0, 0.3);
        let endT = random(0.7, 1.0);
        
        if (orientation === 0) { // Left to right
            startX = margin + startT * w;
            startY = margin + random(h);
            endX = margin + endT * w;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin + startT * h;
            endX = margin + random(w);
            endY = margin + endT * h;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin + startT * w;
            startY = margin + startT * h;
            endX = margin + endT * w;
            endY = margin + endT * h;
        } else { // Diagonal (TR to BL)
            startX = width - margin - startT * w;
            startY = margin + startT * h;
            endX = width - margin - endT * w;
            endY = margin + endT * h;
        }
    }
    
    // Generate path points
    if (hasLoops) {
        let numLoops = floor(random(1, 4));
        let loopFrequency = random(1, 3) * numLoops;
        let loopAmplitude = random(0.15, 0.4) * generationRules.loopIntensity;
        
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            let angle = t * TWO_PI * loopFrequency;
            
            // Base position interpolated along path
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Path direction for perpendicular oscillation
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                // Get perpendicular vector
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply sinusoidal oscillation with varying amplitude
                let oscAmp = sin(t * PI) * loopAmplitude * min(w, h) * 0.3;
                let waveOffset = sin(angle) * oscAmp;
                
                // Calculate final position
                let x = baseX + perpX * waveOffset;
                let y = baseY + perpY * waveOffset;
                
                // Add noise variation
                x += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.2 * generationRules.turbulence;
                y += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.2 * generationRules.turbulence;
                
                // Keep within canvas bounds
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    } else {
        // Generate smooth curve without loops
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            
            // Base path interpolation
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Direction vector for perpendicular noise
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply noise perpendicular to path
                let noiseVal = (noise(t * 3, noiseSeedVal) * 2 - 1);
                let amplitude = sin(t * PI) * min(w, h) * 0.2 * generationRules.turbulence;
                
                let x = baseX + perpX * noiseVal * amplitude;
                let y = baseY + perpY * noiseVal * amplitude;
                
                // Keep within canvas
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    }
    
    // Apply smoothing
    return smoothPoints(points, 0.4);
}

/**
 * Offsets a line by a given distance to create parallel curves.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    
    for (let i = 0; i < points.length; i++) {
        if (!points[i]) continue;
        
        let prev = i > 0 ? points[i - 1] : points[i];
        let curr = points[i];
        let next = i < points.length - 1 ? points[i + 1] : points[i];
        
        if (!prev || !next) continue;
        
        // Calculate direction vectors
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        
        let nx = 0, ny = 0;
        if (len > 1e-6) {
            // Normal vector (perpendicular to path)
            nx = -dy / len;
            ny = dx / len;
            lastValidNormal = { x: nx, y: ny };
        } else if (lastValidNormal.x !== 0 || lastValidNormal.y !== 0) {
            // Use last valid normal if available
            nx = lastValidNormal.x;
            ny = lastValidNormal.y;
        } else {
            // No valid normal yet
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        
        // Apply offset
        let ox = curr.x + nx * offsetDist;
        let oy = curr.y + ny * offsetDist;
        
        result.push({ x: ox, y: oy });
    }
    
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    
    let smoothed = [];
    if (points[0]) smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i = 1; i < points.length - 1; i++) {
        let prev = points[i - 1];
        let curr = points[i];
        let next = points[i + 1];
        
        if (prev && curr && next) {
            let avgX = (prev.x + next.x) / 2;
            let avgY = (prev.y + next.y) / 2;
            let smoothX = curr.x * (1 - factor) + avgX * factor;
            let smoothY = curr.y * (1 - factor) + avgY * factor;
            smoothed.push({ x: smoothX, y: smoothY });
        } else if (curr) {
            smoothed.push({ x: curr.x, y: curr.y });
        }
    }
    
    if (points.length > 1 && points[points.length - 1]) {
        smoothed.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    }
    
    return smoothed;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds path segments for a given color index as an SVG group.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    
    // Add all paths for this color
    let paths = pathData[colorIndex];
    if (paths && paths.length > 0) {
        paths.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    
    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none"/>n`;
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to SVG.
 */
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}"
       fill="none"
       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`;
}

/**
 * Save SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

        let hasContrastingBorder = random() < generationRules.borderContrastProbability;
        
        // Handle edge color based on edgeColorIndex in generationRules
        let borderColorIndex;
        if (generationRules.edgeColorIndex === 0) {
            // If set to 0, randomize the edge color
            borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
        } else {
            // Otherwise use the specified edge color
            borderColorIndex = generationRules.edgeColorIndex;
        }

        let hasContrastingBorder = random() < generationRules.borderContrastProbability;
        
        // If borderContrastProbability is 0, use the main color for edges.
        let borderColorIndex;
        if (generationRules.borderContrastProbability <= 0) {
            borderColorIndex = mainColorIndex;
        } else {
            if (generationRules.edgeColorIndex === 0) {
                // If edgeColorIndex is 0, pick a contrasting color only if hasContrastingBorder is true.
                borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
            } else {
                // Otherwise, use the specified edge color if hasContrastingBorder is true.
                borderColorIndex = hasContrastingBorder ? generationRules.edgeColorIndex : mainColorIndex;
            }
        }

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon—except that 
  the outer edges can, with a specified probability, be rendered in a contrasting color (black 
  by default) to accentuate their borders.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         // Number of ribbons to generate
    resolution: 600,        // Points per ribbon path
    ribbonWidth: 18,        // Width of each ribbon
    linesPerRibbon: 6,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability of generating a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.4,        // Amount of noise added to the curves
    fullLengthProbability: 0.4, // Probability of full-length ribbons
    minLengthFraction: 0.3, // Minimum length for partial ribbons
    maxLengthFraction: 0.5, // Maximum length for partial ribbons
    borderContrastProbability: 1.0, // Probability of outer lines having a different color
    edgeColorIndex: 8       // Color index for edge lines (8=BLACK by default, 0=random from palette)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing (adjusted for pen)
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

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

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Checks if two line segments intersect and returns the intersection point.
 */
function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (Math.abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

/**
 * Converts an array of points into an SVG path string.
 * @param {Array} points - Array of {x, y} objects
 * @returns {string} - SVG path string
 */
function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; let dy = p1.y - p2.y; return dx * dx + dy * dy; 
}

function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

/**
 * Returns a complementary or contrasting color from the palette.
 * @param {number} colorIndex - Original color index to contrast with.
 * @returns {number} - Index of a contrasting color.
 */
function getContrastingColor(colorIndex) {
    if (selectedColorIndices.length < 2) return colorIndex;
    
    // Find colors that are not the original
    let availableColors = selectedColorIndices.filter(idx => idx !== colorIndex);
    
    // Pick a random contrasting color
    return availableColors[floor(random(availableColors.length))];
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data storage
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

/**
 * Adjusts stroke weight and marginal spacing.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Selects a random subset of colors (3–6 colors).
 */
function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 * Now with option for custom edge color.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let mainColorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        // Determine if this ribbon will have contrasting border
        let hasContrastingBorder = random() < generationRules.borderContrastProbability;
        
        // Use borderContrastProbability: if it's 0, then always use the main color.
        let borderColorIndex;
        if (generationRules.borderContrastProbability <= 0) {
            borderColorIndex = mainColorIndex;
        } else {
            if (generationRules.edgeColorIndex === 0) {
                borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
            } else {
                borderColorIndex = hasContrastingBorder ? generationRules.edgeColorIndex : mainColorIndex;
            }
        }
        
        // Determine if ribbon will be full length or partial
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(
                generationRules.minLengthFraction, 
                generationRules.maxLengthFraction
            );
        }
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        // Vary ribbon width slightly for more visual interest
        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath: centerPath,
            mainColorIndex: mainColorIndex,
            borderColorIndex: borderColorIndex,
            hasContrastingBorder: hasContrastingBorder,
            zIndex: zIndex,
            isFullLength: isFullLength,
            ribbonWidth: ribbonWidth,
            lines: []
        };
        
        // Generate parallel lines for the ribbon
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            // Outer lines use border color, inner lines use main color
            let isOutermostLine = (j === 0 || j === numLines - 1);
            let lineColorIndex = isOutermostLine ? borderColorIndex : mainColorIndex;
            
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath],
                    colorIndex: lineColorIndex,
                    isOutermost: isOutermostLine
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    
    // Sort ribbons by z-index for rendering order
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion.
 * Modified to handle lines with different colors within the same ribbon.
 */
function processAndDrawRibbons() {
    // Process ribbon intersections
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            // Skip intersection processing if ribbons are far apart
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // Draw all ribbons
    for (let ribbon of allRibbons) {
        // Draw each line with its own color
        for (let line of ribbon.lines) {
            let colorIndex = line.colorIndex;
            applyStrokeWithOpacity(colors[colorIndex].hex);
            strokeWeight(strokeWeightValue);
            noFill();
            
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    // Draw segment
                    beginShape();
                    for (let point of segment) {
                        if (point && typeof point.x !== 'undefined') {
                            vertex(point.x, point.y);
                        }
                    }
                    endShape();
                    
                    // Record segment path for SVG export
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * Simple estimation of minimum distance between ribbons.
 */
function getMinDistanceBetweenRibbons(ribbon1, ribbon2) {
    // Sample points from center paths to estimate minimum distance
    let minDist = Infinity;
    for (let i = 0; i < ribbon1.centerPath.length; i += 5) {
        let p1 = ribbon1.centerPath[i];
        if (!p1) continue;
        
        for (let j = 0; j < ribbon2.centerPath.length; j += 5) {
            let p2 = ribbon2.centerPath[j];
            if (!p2) continue;
            
            let distVal = distBetween(p1, p2);
            if (distVal < minDist) minDist = distVal;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || typeof point.x === 'undefined' || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) {
        return false;
    }
    
    // Find minimum distance to center path
    let minDistSq = Infinity;
    let halfWidth = ribbon.ribbonWidth / 2;
    
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        
        if (!p1 || !p2) continue;
        
        // Calculate squared segment length
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        
        // Project point onto line segment
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = min(max(t, 0), 1);
        
        let closestX = p1.x + t * (p2.x - p1.x);
        let closestY = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, {x: closestX, y: closestY}));
    }
    
    return minDistSq < (halfWidth * halfWidth);
}

/**
 * Finds intersections between a segment and a ribbon's boundary lines.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) {
        return intersections;
    }
    
    // Use first and last lines of ribbon as boundaries
    const boundaryIndices = [0, ribbon.lines.length - 1];
    
    for (let boundaryIndex of boundaryIndices) {
        let boundaryLine = ribbon.lines[boundaryIndex];
        if (!boundaryLine || !boundaryLine.points || boundaryLine.points.length < 2) continue;
        
        // Check each segment against boundary line segments
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            
            if (!p1 || !p2) continue;
            
            for (let j = 0; j < boundaryLine.points.length - 1; j++) {
                let p3 = boundaryLine.points[j];
                let p4 = boundaryLine.points[j + 1];
                
                if (!p3 || !p4) continue;
                
                let intersection = lineIntersection(p1, p2, p3, p4);
                if (intersection) {
                    intersections.push({
                        point: {x: intersection.x, y: intersection.y},
                        segmentIndex: i,
                        t: intersection.uA
                    });
                }
            }
        }
    }
    
    // Sort intersections by position along the segment
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    
    return intersections;
}

/**
 * Process ribbon intersection by clipping segments.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon || !lowerRibbon.lines || !higherRibbon || !higherRibbon.lines) return;
    
    // Process each line in the lower ribbon
    for (let lineIdx = 0; lineIdx < lowerRibbon.lines.length; lineIdx++) {
        let line = lowerRibbon.lines[lineIdx];
        let newSegments = [];
        
        // Process each segment
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            
            // Find intersections with higher ribbon
            let intersections = findIntersections(segment, higherRibbon);
            
            // If no intersections, check if inside or outside
            if (intersections.length === 0) {
                // Use midpoint as a representative point
                let midIdx = Math.floor(segment.length / 2);
                if (midIdx < segment.length && !isPointInsideRibbon(segment[midIdx], higherRibbon)) {
                    newSegments.push(segment); // Keep segment if outside
                }
                continue;
            }
            
            // Process segments with intersections
            let currentPoints = [{x: segment[0].x, y: segment[0].y}]; // Start with first point
            let isInside = isPointInsideRibbon(segment[0], higherRibbon);
            let currentIndex = 0;
            
            // Handle each intersection
            for (let intr of intersections) {
                // Add points up to this intersection
                while (currentIndex < intr.segmentIndex) {
                    currentIndex++;
                    if (currentIndex < segment.length) {
                        currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
                    }
                }
                
                // Add the intersection point
                currentPoints.push({x: intr.point.x, y: intr.point.y});
                
                // Complete current segment if it's outside
                if (currentPoints.length >= 2 && !isInside) {
                    newSegments.push([...currentPoints]);
                }
                
                // Start new segment at intersection
                currentPoints = [{x: intr.point.x, y: intr.point.y}];
                isInside = !isInside; // Toggle inside/outside state
            }
            
            // Add remaining points after last intersection
            while (currentIndex < segment.length - 1) {
                currentIndex++;
                currentPoints.push({x: segment[currentIndex].x, y: segment[currentIndex].y});
            }
            
            // Add final segment if outside
            if (currentPoints.length >= 2 && !isInside) {
                newSegments.push(currentPoints);
            }
        }
        
        // Replace with new segments
        lowerRibbon.lines[lineIdx].segments = newSegments;
    }
}

/**
 * Generates an organic path for a ribbon.
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    
    if (w <= 0 || h <= 0) return [];

    // Choose ribbon orientation
    let orientation = floor(random(4)); // 0: left→right, 1: top→bottom, 2 & 3: diagonal
    
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    
    let points = [];
    let resolution = generationRules.resolution;
    
    // Determine start/end positions
    let startX, startY, endX, endY;
    
    if (isFullLength) {
        // Full canvas span
        if (orientation === 0) { // Left to right
            startX = margin;
            startY = margin + random(h);
            endX = width - margin;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin;
            endX = margin + random(w);
            endY = height - margin;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin;
            startY = margin;
            endX = width - margin;
            endY = height - margin;
        } else { // Diagonal (TR to BL)
            startX = width - margin;
            startY = margin;
            endX = margin;
            endY = height - margin;
        }
    } else {
        // Partial length ribbons
        let startT = random(0, 0.3);
        let endT = random(0.7, 1.0);
        
        if (orientation === 0) { // Left to right
            startX = margin + startT * w;
            startY = margin + random(h);
            endX = margin + endT * w;
            endY = margin + random(h);
        } else if (orientation === 1) { // Top to bottom
            startX = margin + random(w);
            startY = margin + startT * h;
            endX = margin + random(w);
            endY = margin + endT * h;
        } else if (orientation === 2) { // Diagonal (TL to BR)
            startX = margin + startT * w;
            startY = margin + startT * h;
            endX = margin + endT * w;
            endY = margin + endT * h;
        } else { // Diagonal (TR to BL)
            startX = width - margin - startT * w;
            startY = margin + startT * h;
            endX = width - margin - endT * w;
            endY = margin + endT * h;
        }
    }
    
    // Generate path points
    if (hasLoops) {
        let numLoops = floor(random(1, 4));
        let loopFrequency = random(1, 3) * numLoops;
        let loopAmplitude = random(0.15, 0.4) * generationRules.loopIntensity;
        
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            let angle = t * TWO_PI * loopFrequency;
            
            // Base position interpolated along path
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Path direction for perpendicular oscillation
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                // Get perpendicular vector
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply sinusoidal oscillation with varying amplitude
                let oscAmp = sin(t * PI) * loopAmplitude * min(w, h) * 0.3;
                let waveOffset = sin(angle) * oscAmp;
                
                // Calculate final position
                let x = baseX + perpX * waveOffset;
                let y = baseY + perpY * waveOffset;
                
                // Add noise variation
                x += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.2 * generationRules.turbulence;
                y += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.2 * generationRules.turbulence;
                
                // Keep within canvas bounds
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    } else {
        // Generate smooth curve without loops
        for (let i = 0; i <= resolution; i++) {
            let t = i / resolution;
            
            // Base path interpolation
            let baseX = lerp(startX, endX, t);
            let baseY = lerp(startY, endY, t);
            
            // Direction vector for perpendicular noise
            let dirX = endX - startX;
            let dirY = endY - startY;
            let dirLen = sqrt(dirX * dirX + dirY * dirY);
            
            if (dirLen > 0) {
                dirX /= dirLen;
                dirY /= dirLen;
                let perpX = -dirY;
                let perpY = dirX;
                
                // Apply noise perpendicular to path
                let noiseVal = (noise(t * 3, noiseSeedVal) * 2 - 1);
                let amplitude = sin(t * PI) * min(w, h) * 0.2 * generationRules.turbulence;
                
                let x = baseX + perpX * noiseVal * amplitude;
                let y = baseY + perpY * noiseVal * amplitude;
                
                // Keep within canvas
                x = min(max(x, margin * 0.5), width - margin * 0.5);
                y = min(max(y, margin * 0.5), height - margin * 0.5);
                
                points.push({ x, y });
            }
        }
    }
    
    // Apply smoothing
    return smoothPoints(points, 0.4);
}

/**
 * Offsets a line by a given distance to create parallel curves.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    
    for (let i = 0; i < points.length; i++) {
        if (!points[i]) continue;
        
        let prev = i > 0 ? points[i - 1] : points[i];
        let curr = points[i];
        let next = i < points.length - 1 ? points[i + 1] : points[i];
        
        if (!prev || !next) continue;
        
        // Calculate direction vectors
        let dx = next.x - prev.x;
        let dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        
        let nx = 0, ny = 0;
        if (len > 1e-6) {
            // Normal vector (perpendicular to path)
            nx = -dy / len;
            ny = dx / len;
            lastValidNormal = { x: nx, y: ny };
        } else if (lastValidNormal.x !== 0 || lastValidNormal.y !== 0) {
            // Use last valid normal if available
            nx = lastValidNormal.x;
            ny = lastValidNormal.y;
        } else {
            // No valid normal yet
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        
        // Apply offset
        let ox = curr.x + nx * offsetDist;
        let oy = curr.y + ny * offsetDist;
        
        result.push({ x: ox, y: oy });
    }
    
    return result;
}

/**
 * Smooths a series of points by averaging neighboring coordinates.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    
    let smoothed = [];
    if (points[0]) smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i = 1; i < points.length - 1; i++) {
        let prev = points[i - 1];
        let curr = points[i];
        let next = points[i + 1];
        
        if (prev && curr && next) {
            let avgX = (prev.x + next.x) / 2;
            let avgY = (prev.y + next.y) / 2;
            let smoothX = curr.x * (1 - factor) + avgX * factor;
            let smoothY = curr.y * (1 - factor) + avgY * factor;
            smoothed.push({ x: smoothX, y: smoothY });
        } else if (curr) {
            smoothed.push({ x: curr.x, y: curr.y });
        }
    }
    
    if (points.length > 1 && points[points.length - 1]) {
        smoothed.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    }
    
    return smoothed;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas and regenerates the artwork.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds path segments for a given color index as an SVG group.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    
    // Add all paths for this color
    let paths = pathData[colorIndex];
    if (paths && paths.length > 0) {
        paths.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    
    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none"/>n`;
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Adds registration markers to SVG.
 */
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}"
       fill="none"
       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`;
}

/**
 * Save SVG file.
 */
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);
}

/**
 * Shuffles an array in place using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon—except that 
  the outer edges can, with a specified probability, be rendered in a contrasting color (black 
  by default) to accentuate their borders.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     
const canvasHeightInches = 11;    
const pixelsPerInch = 100;        
const dayNumber = '157';          

// 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         
    resolution: 600,        
    ribbonWidth: 32,        
    linesPerRibbon: 12,     
    loopProbability: 0.3,   
    loopIntensity: 0.6,     
    turbulence: 0.4,        
    fullLengthProbability: 0.4, 
    minLengthFraction: 0.3, 
    maxLengthFraction: 0.5, 
    borderContrastProbability: 1.0, 
    edgeColorIndex: 8       
};

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

let strokeWeightValue;             
let pathData = {};                 
let allRibbons = [];               

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

function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (abs(den) < 0.0001) return null;

    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;

    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; 
    let dy = p1.y - p2.y; 
    return dx * dx + dy * dy; 
}

function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

function getContrastingColor(colorIndex) {
    if (selectedColorIndices.length < 2) return colorIndex;
    let availableColors = selectedColorIndices.filter(idx => idx !== colorIndex);
    return availableColors[floor(random(availableColors.length))];
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generate ribbons with possible border color
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let mainColorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();

        let hasContrastingBorder = random() < generationRules.borderContrastProbability;

        let borderColorIndex;
        if (generationRules.borderContrastProbability <= 0) {
            borderColorIndex = mainColorIndex;
        } else {
            if (generationRules.edgeColorIndex === 0) {
                borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
            } else {
                borderColorIndex = hasContrastingBorder ? generationRules.edgeColorIndex : mainColorIndex;
            }
        }

        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(generationRules.minLengthFraction, generationRules.maxLengthFraction);
        }

        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;

        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath,
            mainColorIndex,
            borderColorIndex,
            hasContrastingBorder,
            zIndex,
            isFullLength,
            ribbonWidth,
            lines: []
        };

        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            let isOutermostLine = (j === 0 || j === numLines - 1);
            let lineColorIndex = isOutermostLine ? borderColorIndex : mainColorIndex;
            
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath],
                    colorIndex: lineColorIndex,
                    isOutermost: isOutermostLine
                });
            }
        }
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Process intersections + fix partial overshadow with multi-point check
 */
function processAndDrawRibbons() {
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    // draw
    for (let ribbon of allRibbons) {
        for (let line of ribbon.lines) {
            let colorIndex = line.colorIndex;
            applyStrokeWithOpacity(colors[colorIndex].hex);
            strokeWeight(strokeWeightValue);
            noFill();

            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    beginShape();
                    for (let pt of segment) {
                        vertex(pt.x, pt.y);
                    }
                    endShape();

                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * If no intersections, we do a multi-sample check to see if the entire segment is inside.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon || !lowerRibbon.lines || !higherRibbon || !higherRibbon.lines) return;
    
    for (let line of lowerRibbon.lines) {
        let newSegments = [];
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            
            let ints = findIntersections(segment, higherRibbon);
            if (ints.length === 0) {
                // No boundary intersection => multi-sample check
                if (!isSegmentFullyInsideRibbon(segment, higherRibbon)) {
                    newSegments.push(segment);
                }
            } else {
                // Subdivide at intersections
                let splitted = subdivideSegmentByIntersections(segment, ints, higherRibbon);
                newSegments.push(...splitted);
            }
        }
        line.segments = newSegments;
    }
}

/**
 * Subdivide a segment at known intersections, keep outside sub-segments
 */
function subdivideSegmentByIntersections(segment, intersections, higherRibbon) {
    let newSegments = [];
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    
    let currentPoints = [segment[0]];
    let isInside = isPointInsideRibbon(segment[0], higherRibbon);
    let currentIndex = 0;
    
    for (let intr of intersections) {
        while (currentIndex < intr.segmentIndex) {
            currentIndex++;
            if (currentIndex < segment.length) {
                currentPoints.push({ x: segment[currentIndex].x, y: segment[currentIndex].y });
            }
        }
        currentPoints.push({ x: intr.point.x, y: intr.point.y });
        
        if (currentPoints.length >= 2 && !isInside) {
            newSegments.push([...currentPoints]);
        }
        currentPoints = [{ x: intr.point.x, y: intr.point.y }];
        isInside = !isInside;
    }
    
    while (currentIndex < segment.length - 1) {
        currentIndex++;
        currentPoints.push({ x: segment[currentIndex].x, y: segment[currentIndex].y });
    }
    
    if (currentPoints.length >= 2 && !isInside) {
        newSegments.push(currentPoints);
    }
    return newSegments;
}

/**
 * Multi-sample approach: if all sampled points are inside, we consider the entire segment inside.
 */
function isSegmentFullyInsideRibbon(segment, ribbon, samples=5) {
    // If the segment is extremely short, just check midpoint
    if (segment.length < samples) {
        return quickInsideCheck(segment, ribbon);
    }
    let length = segment.length - 1;
    for (let i = 0; i < samples; i++) {
        let t = i / (samples - 1);
        let idx = floor(t * length);
        if (!isPointInsideRibbon(segment[idx], ribbon)) {
            return false; 
        }
    }
    return true;
}

/**
 * Quick check for short segments: if all points are inside, it's inside
 */
function quickInsideCheck(segment, ribbon) {
    for (let pt of segment) {
        if (!isPointInsideRibbon(pt, ribbon)) {
            return false;
        }
    }
    return true;
}

/**
 * Return min distance between two ribbons by sampling center paths
 */
function getMinDistanceBetweenRibbons(r1, r2) {
    let minDist = Infinity;
    for (let i = 0; i < r1.centerPath.length; i += 5) {
        let p1 = r1.centerPath[i];
        if (!p1) continue;
        for (let j = 0; j < r2.centerPath.length; j += 5) {
            let p2 = r2.centerPath[j];
            if (!p2) continue;
            let d = distBetween(p1, p2);
            if (d < minDist) minDist = d;
        }
    }
    return minDist;
}

/**
 * Generate a noisy or looping path
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2*margin;
    let h = height - 2*margin;
    if (w <= 0 || h <= 0) return [];
    
    let orientation = floor(random(4));
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    
    let points = [];
    let steps = generationRules.resolution;
    let { sx, sy, ex, ey } = pickStartEnd(orientation, w, h, margin, isFullLength, lengthFraction);

    if (hasLoops) {
        let numLoops = floor(random(1,4));
        let loopFreq = random(1,3) * numLoops;
        let loopAmp = random(0.15,0.4) * generationRules.loopIntensity;
        for (let i = 0; i <= steps; i++) {
            let t = i / steps;
            let angle = t * TWO_PI * loopFreq;
            let baseX = lerp(sx, ex, t);
            let baseY = lerp(sy, ey, t);

            let dx = ex - sx, dy = ey - sy;
            let len = sqrt(dx*dx + dy*dy);
            if (len > 0) {
                dx /= len; dy /= len;
                let perpX = -dy, perpY = dx;
                let waveOffset = sin(angle) * loopAmp * min(w,h)*0.3;
                baseX += perpX * waveOffset;
                baseY += perpY * waveOffset;

                baseX += (noise(t*5, noiseSeedVal)-0.5)*w*0.2*generationRules.turbulence;
                baseY += (noise(t*5, noiseSeedVal2)-0.5)*h*0.2*generationRules.turbulence;

                baseX = constrain(baseX, margin*0.5, width - margin*0.5);
                baseY = constrain(baseY, margin*0.5, height - margin*0.5);
            }
            points.push({ x: baseX, y: baseY });
        }
    } else {
        for (let i = 0; i <= steps; i++) {
            let t = i / steps;
            let baseX = lerp(sx, ex, t);
            let baseY = lerp(sy, ey, t);

            let dx = ex - sx, dy = ey - sy;
            let len = sqrt(dx*dx + dy*dy);
            if (len > 0) {
                dx /= len; dy /= len;
                let perpX = -dy, perpY = dx;
                let noiseVal = (noise(t*3, noiseSeedVal)*2 - 1);
                let amplitude = sin(t*PI)*min(w,h)*0.2*generationRules.turbulence;
                baseX += perpX*noiseVal*amplitude;
                baseY += perpY*noiseVal*amplitude;

                baseX = constrain(baseX, margin*0.5, width - margin*0.5);
                baseY = constrain(baseY, margin*0.5, height - margin*0.5);
            }
            points.push({ x: baseX, y: baseY });
        }
    }
    return smoothPoints(points, 0.4);
}

/**
 * Helper to pick start/end coords for partial or full ribbons
 */
function pickStartEnd(orientation, w, h, margin, isFullLength, lengthFraction) {
    let sx, sy, ex, ey;
    if (isFullLength) {
        if (orientation === 0) {
            sx = margin; sy = margin + random(h);
            ex = width - margin; ey = margin + random(h);
        } else if (orientation === 1) {
            sx = margin + random(w); sy = margin;
            ex = margin + random(w); ey = height - margin;
        } else if (orientation === 2) {
            sx = margin; sy = margin;
            ex = width - margin; ey = height - margin;
        } else {
            sx = width - margin; sy = margin;
            ex = margin; ey = height - margin;
        }
    } else {
        let startT = random(0,0.3), endT = random(0.7,1.0);
        if (orientation === 0) {
            sx = margin + startT*w; sy = margin + random(h);
            ex = margin + endT*w;   ey = margin + random(h);
        } else if (orientation === 1) {
            sx = margin + random(w); sy = margin + startT*h;
            ex = margin + random(w); ey = margin + endT*h;
        } else if (orientation === 2) {
            sx = margin + startT*w; sy = margin + startT*h;
            ex = margin + endT*w;   ey = margin + endT*h;
        } else {
            sx = width - margin - startT*w; sy = margin + startT*h;
            ex = width - margin - endT*w;   ey = margin + endT*h;
        }
    }
    return { sx, sy, ex, ey };
}

/**
 * Offsets line by offsetDist
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    
    for (let i = 0; i < points.length; i++) {
        let prev = (i>0) ? points[i-1] : points[i];
        let curr = points[i];
        let next = (i<points.length-1) ? points[i+1] : points[i];
        if (!prev || !next) {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        let dx = next.x - prev.x, dy = next.y - prev.y;
        let len = sqrt(dx*dx + dy*dy);
        
        let nx=0, ny=0;
        if (len>1e-6) {
            nx=-dy/len; ny=dx/len;
            lastValidNormal = { x:nx, y:ny };
        } else if (abs(lastValidNormal.x)>1e-9 || abs(lastValidNormal.y)>1e-9) {
            nx=lastValidNormal.x; ny=lastValidNormal.y;
        } else {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        let ox = curr.x + nx*offsetDist;
        let oy = curr.y + ny*offsetDist;
        result.push({ x:ox, y:oy });
    }
    return result;
}

/**
 * Smoothing
 */
function smoothPoints(points, factor) {
    if (!points || points.length<3 || factor<=0) return points;
    let smoothed = [];
    smoothed.push({ x: points[0].x, y: points[0].y });
    
    for (let i=1; i<points.length-1; i++) {
        let p0=points[i-1], p1=points[i], p2=points[i+1];
        if (p0 && p1 && p2) {
            let mx=(p0.x + p2.x)*0.5, my=(p0.y + p2.y)*0.5;
            let sx = p1.x*(1-factor) + mx*factor;
            let sy = p1.y*(1-factor) + my*factor;
            smoothed.push({ x:sx, y:sy });
        } else {
            smoothed.push({ x: points[i].x, y: points[i].y });
        }
    }
    smoothed.push({ x: points[points.length-1].x, y: points[points.length-1].y });
    return smoothed;
}

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

/**
 * Palette bars
 */
function addColorPaletteBars() {
    let paletteLength=300, barHeight=2, gapSize=7;
    let yStart=height-(1.25*pixelsPerInch);
    
    let used=selectedColorIndices;
    if (used.length===0) return;
    
    let totalGaps=(used.length-1)*gapSize;
    let segLength=(paletteLength - totalGaps)/used.length;
    let xStart=(width-paletteLength)/2;
    
    strokeWeight(barHeight);
    used.forEach((cIndex,i)=>{
        let x=xStart + i*(segLength+gapSize);
        applyStrokeWithOpacity(colors[cIndex].hex);
        line(x,yStart,x+segLength,yStart);
    });
}

/**
 * Reset
 */
function resetCanvas() {
    pathData={};
    selectedColorIndices.forEach(ci=>{ pathData[ci]=[]; });
    allRibbons=[];
    drawShapes();
}

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

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

    let used=selectedColorIndices;
    used.forEach(ci=>{
        let cName=colors[ci].name.toUpperCase();
        let one=generateSVG(ci);
        let file=`${dayNumber}-0${ci}-${cName}-PORTRAIT-${stamp}.svg`;
        saveSVGFile(one, file);
    });
}

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

    if (activeColor===0) {
        selectedColorIndices.forEach((ci,idx)=>{
            svg+=addSegmentsSVG(ci, idx+1, 0);
        });
    } else {
        let idx=selectedColorIndices.indexOf(activeColor)+1;
        svg+=addSegmentsSVG(activeColor, idx, activeColor);
    }
    svg+='</svg>';
    return svg;
}

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

    let arr=pathData[colorIndex];
    if (arr && arr.length>0) {
        arr.forEach(path=>{
            svg+=`<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    let used=selectedColorIndices;
    let i=used.indexOf(colorIndex);
    if (i>=0) {
        let paletteLength=300, barHeight=2, gapSize=7;
        let yStart=height-(1.25*pixelsPerInch);
        let numC=used.length;
        let totalGaps=(numC-1)*gapSize;
        let segLen=(paletteLength - totalGaps)/numC;
        let xStart=(width-paletteLength)/2;
        let x=xStart + i*(segLen+gapSize);
        
        svg+=`<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x+segLen).toFixed(2)}"
             stroke-width="${barHeight}" fill="none" />n`;
    }
    svg+='</g>n';
    return svg;
}

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

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

// Day 157
/*

=======================================
  Day 157 Self-Portrait (Resilient Ribbons)
=======================================

### Title: *Resilient Ribbons*

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital art, parametric curves, structured randomness,
              layered identity, noise-driven geometry, ribbon offset, looping paths

### Conceptual Framework

*Resilient Ribbons* envisions identity as a set of long, flowing bands that gracefully stretch 
across the canvas. Each ribbon begins with an organic center line that can loop or travel in 
partial arcs, reflecting the diverse trajectories of thought and experience. Parallel lines 
are offset from this center path to form a distinct yet unified band, capturing how multiple 
perspectives can arise from a single core idea. Subtle randomness, partial spans, and layered 
occlusions convey the interplay of continuity and concealment—some elements are emphasized 
while others temporarily fade, all contributing to the evolving tapestry of self.

### Technical Approach

This artwork is rendered with p5.js, generating multiple ribbons from a shared set of parameters:
- **Center Paths**: Each ribbon’s foundation is a noisy path that can be partial or full‐length, 
  with optional looping behavior driven by Perlin noise and sinusoidal oscillations.
- **Parallel Offsets**: A series of parallel lines flanks each center path, forming a cohesive 
  ribbon that is further shaped by noise, smoothing, and random variation.
- **Occlusion**: Where ribbons overlap, segments of lower ribbons are clipped, simulating an 
  intersection that partially conceals what lies beneath. This process leverages distance checks 
  and boundary intersections to keep each ribbon visually distinct.
- **Randomized Colors**: A subset of colors is chosen from a fixed palette, assigning each ribbon 
  a unique hue. The same color is used consistently for all lines in a given ribbon—except that 
  the outer edges can, with a specified probability, be rendered in a contrasting color (black 
  by default) to accentuate their borders.
- **SVG Export**: All rendered line segments are tracked, ensuring that the final SVG precisely 
  matches the on‐screen drawing. This maintains visual fidelity between the p5.js output and 
  the vector files.

---
*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '157';          // 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' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numRibbons: 12,         // Number of ribbons to generate
    resolution: 600,        // Points per ribbon path
    ribbonWidth: 32,        // Width of each ribbon
    linesPerRibbon: 12,      // Number of parallel lines per ribbon
    loopProbability: 0.3,   // Probability of generating a looping path
    loopIntensity: 0.6,     // How pronounced the loops are
    turbulence: 0.4,        // Amount of noise added to the curves
    fullLengthProbability: 0.4, // Probability of full-length ribbons
    minLengthFraction: 0.3, // Minimum length for partial ribbons
    maxLengthFraction: 0.5, // Maximum length for partial ribbons
    borderContrastProbability: 1.0, // Probability of outer lines having a different color
    edgeColorIndex: 8       // Color index for edge lines (8=BLACK by default, 0=random from palette)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices from the palette

let strokeWeightValue;             // Stroke weight for drawing (adjusted for pen)
let pathData = {};                 // Stores SVG path strings per color
let allRibbons = [];               // Array to hold all generated ribbons

// NEW: Colors used for export (including border colors)
let exportColorIndices = [];

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

function lineIntersection(p1, p2, p3, p4) {
    const den = (p4.y - p3.y) * (p2.x - p1.x) - (p4.x - p3.x) * (p2.y - p1.y);
    if (abs(den) < 0.0001) return null;
    const uA = ((p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x)) / den;
    const uB = ((p2.x - p1.x) * (p1.y - p3.y) - (p2.y - p1.y) * (p1.x - p3.x)) / den;
    if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
        const x = p1.x + uA * (p2.x - p1.x);
        const y = p1.y + uA * (p2.y - p1.y);
        return { x, y, uA };
    }
    return null;
}

function pointsToSVGPath(points) {
    if (!points || points.length < 2) return '';
    let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        d += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    return d;
}

function distSq(p1, p2) { 
    if (!p1 || !p2) return Infinity;
    let dx = p1.x - p2.x; let dy = p1.y - p2.y; return dx * dx + dy * dy; 
}

function distBetween(p1, p2) { 
    return sqrt(distSq(p1, p2)); 
}

function getContrastingColor(colorIndex) {
    if (selectedColorIndices.length < 2) return colorIndex;
    let availableColors = selectedColorIndices.filter(idx => idx !== colorIndex);
    return availableColors[floor(random(availableColors.length))];
}

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

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

    adjustForStrokeWeight();
    selectColors();

    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    drawShapes();
    noLoop();
}

function adjustForStrokeWeight() {
    strokeWeightValue = 1.8;
    workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
    let n = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(n);
}

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

/**
 * =======================================
 * Drawing Functions
 * =======================================
 */
function drawShapes() {
    background(255);
    generateRibbons();
    processAndDrawRibbons();
    updateExportColorIndices();  // NEW: update export colors based on all ribbons
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generates ribbon objects with a center path and multiple parallel offset lines.
 * Now with option for custom edge color.
 */
function generateRibbons() {
    allRibbons = [];
    let colorCount = selectedColorIndices.length;
    if (colorCount === 0) return;

    for (let i = 0; i < generationRules.numRibbons; i++) {
        let mainColorIndex = selectedColorIndices[i % colorCount];
        let zIndex = random();
        
        let hasContrastingBorder = random() < generationRules.borderContrastProbability;
        
        let borderColorIndex;
        if (generationRules.borderContrastProbability <= 0) {
            borderColorIndex = mainColorIndex;
        } else {
            if (generationRules.edgeColorIndex === 0) {
                borderColorIndex = hasContrastingBorder ? getContrastingColor(mainColorIndex) : mainColorIndex;
            } else {
                borderColorIndex = hasContrastingBorder ? generationRules.edgeColorIndex : mainColorIndex;
            }
        }
        
        let isFullLength = random() < generationRules.fullLengthProbability;
        let lengthFraction = 1.0;
        if (!isFullLength) {
            lengthFraction = random(generationRules.minLengthFraction, generationRules.maxLengthFraction);
        }
        
        let centerPath = generateOrganicPath(isFullLength, lengthFraction);
        if (!centerPath || centerPath.length < 2) continue;
        
        let ribbonWidthVariation = random(0.85, 1.15);
        let ribbonWidth = generationRules.ribbonWidth * ribbonWidthVariation;
        
        let ribbon = {
            centerPath,
            mainColorIndex,
            borderColorIndex,
            hasContrastingBorder,
            zIndex,
            isFullLength,
            ribbonWidth,
            lines: []
        };
        
        let numLines = generationRules.linesPerRibbon;
        let spacing = (numLines > 1) ? ribbonWidth / (numLines - 1) : 0;
        
        for (let j = 0; j < numLines; j++) {
            let isOutermostLine = (j === 0 || j === numLines - 1);
            let lineColorIndex = isOutermostLine ? borderColorIndex : mainColorIndex;
            
            let offset = (numLines > 1) ? (-ribbonWidth / 2 + j * spacing) : 0;
            let offsetPath = offsetLine(centerPath, offset);
            
            if (offsetPath && offsetPath.length >= 2) {
                ribbon.lines.push({
                    points: offsetPath,
                    segments: [offsetPath],
                    colorIndex: lineColorIndex,
                    isOutermost: isOutermostLine
                });
            }
        }
        
        if (ribbon.lines.length > 0) {
            allRibbons.push(ribbon);
        }
    }
    allRibbons.sort((a, b) => a.zIndex - b.zIndex);
}

/**
 * Processes intersections between ribbons to simulate layer occlusion.
 */
function processAndDrawRibbons() {
    for (let i = 0; i < allRibbons.length; i++) {
        let lowerRibbon = allRibbons[i];
        for (let j = i + 1; j < allRibbons.length; j++) {
            let higherRibbon = allRibbons[j];
            let minDist = getMinDistanceBetweenRibbons(lowerRibbon, higherRibbon);
            if (minDist > lowerRibbon.ribbonWidth + higherRibbon.ribbonWidth) continue;
            processRibbonIntersection(lowerRibbon, higherRibbon);
        }
    }
    
    for (let ribbon of allRibbons) {
        for (let line of ribbon.lines) {
            let colorIndex = line.colorIndex;
            applyStrokeWithOpacity(colors[colorIndex].hex);
            strokeWeight(strokeWeightValue);
            noFill();
            for (let segment of line.segments) {
                if (segment && segment.length >= 2) {
                    beginShape();
                    for (let pt of segment) {
                        vertex(pt.x, pt.y);
                    }
                    endShape();
                    let pathStr = pointsToSVGPath(segment);
                    if (pathStr) {
                        if (!pathData[colorIndex]) pathData[colorIndex] = [];
                        pathData[colorIndex].push(pathStr);
                    }
                }
            }
        }
    }
}

/**
 * If no intersections, use a multi-sample check; if intersections exist, subdivide.
 */
function processRibbonIntersection(lowerRibbon, higherRibbon) {
    if (!lowerRibbon || !lowerRibbon.lines || !higherRibbon || !higherRibbon.lines) return;
    
    for (let line of lowerRibbon.lines) {
        let newSegments = [];
        for (let segment of line.segments) {
            if (!segment || segment.length < 2) continue;
            let ints = findIntersections(segment, higherRibbon);
            if (ints.length === 0) {
                if (!isSegmentFullyInsideRibbon(segment, higherRibbon)) {
                    newSegments.push(segment);
                }
            } else {
                let splitted = subdivideSegmentByIntersections(segment, ints, higherRibbon);
                newSegments.push(...splitted);
            }
        }
        line.segments = newSegments;
    }
}

/**
 * Subdivide a segment at intersections and keep only outside parts.
 */
function subdivideSegmentByIntersections(segment, intersections, higherRibbon) {
    let newSegments = [];
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    let currentPoints = [segment[0]];
    let isInside = isPointInsideRibbon(segment[0], higherRibbon);
    let currentIndex = 0;
    for (let intr of intersections) {
        while (currentIndex < intr.segmentIndex) {
            currentIndex++;
            if (currentIndex < segment.length) {
                currentPoints.push({ x: segment[currentIndex].x, y: segment[currentIndex].y });
            }
        }
        currentPoints.push({ x: intr.point.x, y: intr.point.y });
        if (currentPoints.length >= 2 && !isInside) {
            newSegments.push([...currentPoints]);
        }
        currentPoints = [{ x: intr.point.x, y: intr.point.y }];
        isInside = !isInside;
    }
    while (currentIndex < segment.length - 1) {
        currentIndex++;
        currentPoints.push({ x: segment[currentIndex].x, y: segment[currentIndex].y });
    }
    if (currentPoints.length >= 2 && !isInside) {
        newSegments.push(currentPoints);
    }
    return newSegments;
}

/**
 * Multi-sample check: if all sampled points are inside, consider the segment fully inside.
 */
function isSegmentFullyInsideRibbon(segment, ribbon, samples=5) {
    if (segment.length < samples) return quickInsideCheck(segment, ribbon);
    let len = segment.length - 1;
    for (let i = 0; i < samples; i++) {
        let t = i / (samples - 1);
        let idx = floor(t * len);
        if (!isPointInsideRibbon(segment[idx], ribbon)) return false;
    }
    return true;
}

function quickInsideCheck(segment, ribbon) {
    for (let pt of segment) {
        if (!isPointInsideRibbon(pt, ribbon)) return false;
    }
    return true;
}

/**
 * Estimate min distance between two ribbons by sampling center paths.
 */
function getMinDistanceBetweenRibbons(ribbon1, ribbon2) {
    let minDist = Infinity;
    for (let i = 0; i < ribbon1.centerPath.length; i += 5) {
        let p1 = ribbon1.centerPath[i];
        if (!p1) continue;
        for (let j = 0; j < ribbon2.centerPath.length; j += 5) {
            let p2 = ribbon2.centerPath[j];
            if (!p2) continue;
            let d = distBetween(p1, p2);
            if (d < minDist) minDist = d;
        }
    }
    return minDist;
}

/**
 * Checks if a point is inside a ribbon.
 */
function isPointInsideRibbon(point, ribbon) {
    if (!point || typeof point.x === 'undefined' || !ribbon || !ribbon.centerPath || ribbon.centerPath.length < 2) {
        return false;
    }
    let minDistSq = Infinity;
    let halfWidth = ribbon.ribbonWidth / 2;
    for (let i = 0; i < ribbon.centerPath.length - 1; i++) {
        let p1 = ribbon.centerPath[i];
        let p2 = ribbon.centerPath[i + 1];
        if (!p1 || !p2) continue;
        let segLenSq = distSq(p1, p2);
        if (segLenSq < 1e-9) {
            minDistSq = min(minDistSq, distSq(point, p1));
            continue;
        }
        let t = ((point.x - p1.x) * (p2.x - p1.x) + (point.y - p1.y) * (p2.y - p1.y)) / segLenSq;
        t = min(max(t, 0), 1);
        let closestX = p1.x + t * (p2.x - p1.x);
        let closestY = p1.y + t * (p2.y - p1.y);
        minDistSq = min(minDistSq, distSq(point, { x: closestX, y: closestY }));
    }
    return minDistSq < (halfWidth * halfWidth);
}

/**
 * Finds intersections between a segment and a ribbon's boundary lines.
 */
function findIntersections(segment, ribbon) {
    let intersections = [];
    if (!segment || segment.length < 2 || !ribbon || !ribbon.lines || ribbon.lines.length < 2) {
        return intersections;
    }
    const boundaryIndices = [0, ribbon.lines.length - 1];
    for (let boundaryIndex of boundaryIndices) {
        let boundaryLine = ribbon.lines[boundaryIndex];
        if (!boundaryLine || !boundaryLine.points || boundaryLine.points.length < 2) continue;
        for (let i = 0; i < segment.length - 1; i++) {
            let p1 = segment[i];
            let p2 = segment[i + 1];
            if (!p1 || !p2) continue;
            for (let j = 0; j < boundaryLine.points.length - 1; j++) {
                let p3 = boundaryLine.points[j];
                let p4 = boundaryLine.points[j + 1];
                if (!p3 || !p4) continue;
                let inter = lineIntersection(p1, p2, p3, p4);
                if (inter) {
                    intersections.push({
                        point: { x: inter.x, y: inter.y },
                        segmentIndex: i,
                        t: inter.uA
                    });
                }
            }
        }
    }
    intersections.sort((a, b) => {
        if (a.segmentIndex !== b.segmentIndex) return a.segmentIndex - b.segmentIndex;
        return a.t - b.t;
    });
    return intersections;
}

/**
 * Generates an organic path for a ribbon.
 */
function generateOrganicPath(isFullLength = true, lengthFraction = 1.0) {
    let margin = workAreaMarginPixels;
    let w = width - 2 * margin;
    let h = height - 2 * margin;
    if (w <= 0 || h <= 0) return [];
    let orientation = floor(random(4));
    let noiseSeedVal = random(1000);
    let noiseSeedVal2 = random(1000);
    let hasLoops = random() < generationRules.loopProbability;
    let points = [];
    let steps = generationRules.resolution;
    let { sx, sy, ex, ey } = pickStartEnd(orientation, w, h, margin, isFullLength, lengthFraction);
    if (hasLoops) {
        let numLoops = floor(random(1, 4));
        let loopFrequency = random(1, 3) * numLoops;
        let loopAmplitude = random(0.15, 0.4) * generationRules.loopIntensity;
        for (let i = 0; i <= steps; i++) {
            let t = i / steps;
            let angle = t * TWO_PI * loopFrequency;
            let baseX = lerp(sx, ex, t);
            let baseY = lerp(sy, ey, t);
            let dx = ex - sx, dy = ey - sy;
            let len = sqrt(dx * dx + dy * dy);
            if (len > 0) {
                dx /= len; dy /= len;
                let perpX = -dy, perpY = dx;
                let waveOffset = sin(angle) * loopAmplitude * min(w, h) * 0.3;
                baseX += perpX * waveOffset;
                baseY += perpY * waveOffset;
                baseX += (noise(t * 5, noiseSeedVal) - 0.5) * w * 0.2 * generationRules.turbulence;
                baseY += (noise(t * 5, noiseSeedVal2) - 0.5) * h * 0.2 * generationRules.turbulence;
                baseX = constrain(baseX, margin * 0.5, width - margin * 0.5);
                baseY = constrain(baseY, margin * 0.5, height - margin * 0.5);
            }
            points.push({ x: baseX, y: baseY });
        }
    } else {
        for (let i = 0; i <= steps; i++) {
            let t = i / steps;
            let baseX = lerp(sx, ex, t);
            let baseY = lerp(sy, ey, t);
            let dx = ex - sx, dy = ey - sy;
            let len = sqrt(dx * dx + dy * dy);
            if (len > 0) {
                dx /= len; dy /= len;
                let perpX = -dy, perpY = dx;
                let noiseVal = (noise(t * 3, noiseSeedVal) * 2 - 1);
                let amplitude = sin(t * PI) * min(w, h) * 0.2 * generationRules.turbulence;
                baseX += perpX * noiseVal * amplitude;
                baseY += perpY * noiseVal * amplitude;
                baseX = constrain(baseX, margin * 0.5, width - margin * 0.5);
                baseY = constrain(baseY, margin * 0.5, height - margin * 0.5);
            }
            points.push({ x: baseX, y: baseY });
        }
    }
    return smoothPoints(points, 0.4);
}

/**
 * Helper to pick start/end coordinates.
 */
function pickStartEnd(orientation, w, h, margin, isFullLength, lengthFraction) {
    let sx, sy, ex, ey;
    if (isFullLength) {
        if (orientation === 0) {
            sx = margin; sy = margin + random(h);
            ex = width - margin; ey = margin + random(h);
        } else if (orientation === 1) {
            sx = margin + random(w); sy = margin;
            ex = margin + random(w); ey = height - margin;
        } else if (orientation === 2) {
            sx = margin; sy = margin;
            ex = width - margin; ey = height - margin;
        } else {
            sx = width - margin; sy = margin;
            ex = margin; ey = height - margin;
        }
    } else {
        let st = random(0, 0.3), et = random(0.7, 1.0);
        if (orientation === 0) {
            sx = margin + st * w; sy = margin + random(h);
            ex = margin + et * w; ey = margin + random(h);
        } else if (orientation === 1) {
            sx = margin + random(w); sy = margin + st * h;
            ex = margin + random(w); ey = margin + et * h;
        } else if (orientation === 2) {
            sx = margin + st * w; sy = margin + st * h;
            ex = margin + et * w; ey = margin + et * h;
        } else {
            sx = width - margin - st * w; sy = margin + st * h;
            ex = width - margin - et * w; ey = margin + et * h;
        }
    }
    return { sx, sy, ex, ey };
}

/**
 * Offsets a line by a given distance.
 */
function offsetLine(points, offsetDist) {
    if (!points || points.length < 2) return points;
    let result = [];
    let lastValidNormal = { x: 0, y: 0 };
    for (let i = 0; i < points.length; i++) {
        if (!points[i]) continue;
        let prev = i > 0 ? points[i - 1] : points[i];
        let curr = points[i];
        let next = i < points.length - 1 ? points[i + 1] : points[i];
        if (!prev || !next) {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        let dx = next.x - prev.x, dy = next.y - prev.y;
        let len = sqrt(dx * dx + dy * dy);
        let nx = 0, ny = 0;
        if (len > 1e-6) {
            nx = -dy / len; ny = dx / len;
            lastValidNormal = { x: nx, y: ny };
        } else if (abs(lastValidNormal.x) > 1e-9 || abs(lastValidNormal.y) > 1e-9) {
            nx = lastValidNormal.x; ny = lastValidNormal.y;
        } else {
            result.push({ x: curr.x, y: curr.y });
            continue;
        }
        let ox = curr.x + nx * offsetDist;
        let oy = curr.y + ny * offsetDist;
        result.push({ x: ox, y: oy });
    }
    return result;
}

/**
 * Smooths a series of points.
 */
function smoothPoints(points, factor) {
    if (!points || points.length < 3 || factor <= 0) return points;
    let smoothed = [];
    if (points[0]) smoothed.push({ x: points[0].x, y: points[0].y });
    for (let i = 1; i < points.length - 1; i++) {
        let prev = points[i - 1];
        let curr = points[i];
        let next = points[i + 1];
        if (prev && curr && next) {
            let avgX = (prev.x + next.x) / 2;
            let avgY = (prev.y + next.y) / 2;
            let smoothX = curr.x * (1 - factor) + avgX * factor;
            let smoothY = curr.y * (1 - factor) + avgY * factor;
            smoothed.push({ x: smoothX, y: smoothY });
        } else if (curr) {
            smoothed.push({ x: curr.x, y: curr.y });
        }
    }
    if (points.length > 1 && points[points.length - 1]) {
        smoothed.push({ x: points[points.length - 1].x, y: points[points.length - 1].y });
    }
    return smoothed;
}

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

/**
 * Draws palette bars using exportColorIndices.
 */
function addColorPaletteBars() {
    let paletteLength = 300, barHeight = 2, gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    if (exportColorIndices.length === 0) return;
    let totalGaps = (exportColorIndices.length - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / exportColorIndices.length;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    exportColorIndices.forEach((cIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[cIndex].hex);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Resets the canvas.
 */
function resetCanvas() {
    pathData = {};
    selectedColorIndices.forEach(ci => { pathData[ci] = []; });
    allRibbons = [];
    drawShapes();
}

/**
 * Handles key presses.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

/**
 * SVG Export Functions
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    exportColorIndices.forEach(cIndex => {
        let colorSVG = generateSVG(cIndex);
        let colorName = colors[cIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${cIndex}-${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) {
        exportColorIndices.forEach((cIndex, idx) => {
            svgContent += addSegmentsSVG(cIndex, idx + 1, 0);
        });
    } else {
        let idx = exportColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   fill="none"
   inkscape:highlight-color="${col.hex}">n`;
    let arr = pathData[colorIndex];
    if (arr && arr.length > 0) {
        arr.forEach(path => {
            svg += `<path d="${path}" stroke-width="${strokeWeightValue}" fill="none" />n`;
        });
    }
    let i = exportColorIndices.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300, barHeight = 2, gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let totalGaps = (exportColorIndices.length - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / exportColorIndices.length;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke-width="${barHeight}" fill="none"/>n`;
    }
    svg += '</g>n';
    return svg;
}

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

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

/**
 * Shuffles an array using Fisher-Yates algorithm.
 */
function shuffleArray(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
        let j = floor(random(i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
}

/**
 * NEW: Update exportColorIndices based on all ribbons (including border colors)
 */
function updateExportColorIndices() {
    let exportSet = new Set();
    for (let ribbon of allRibbons) {
        for (let line of ribbon.lines) {
            exportSet.add(line.colorIndex);
        }
    }
    exportColorIndices = Array.from(exportSet).sort((a, b) => a - b);
}