// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Metamorphosis)
=======================================

### Title: *Cassini Metamorphosis*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, parametric curves, shape metamorphosis, randomness,
              identity, geometry

### Conceptual Framework

In "Cassini Metamorphosis," I portray my identity as a family of Cassini ovals, each
shifting between diverse shapes—ranging from figure-eight forms to rounded loops—depending
on small changes in parameters. These ovals are placed around a central field, like
fluid echoes of the self that undergo subtle transformations from one region to another.
The Cassini oval’s dependence on distance from two foci becomes a metaphor for how
my identity evolves when tethered to distinct internal impulses. Although each shape is
rooted in the same mathematical framework, slight parameter variations yield markedly
different silhouettes. In aggregate, these ovals mirror the multifaceted essence of
my being—linked by common ground, yet ever-changing.

### Technical Approach

The artwork randomly scatters a small set of non-overlapping oval “clusters” within
the work area. Each Cassini oval is computed from a parametric equation, using
randomly chosen foci, scale factors, and shape thresholds. Before drawing each shape,
the code checks a bounding box to minimize overlap with previously placed ovals. Once
placed, each curve is sampled at discrete intervals, capturing the parametric path
as line segments. These segments are tracked in pathData to ensure consistency
between on-canvas and SVG rendering. The colors are drawn from the existing nine-color
palette at 0.8 opacity, with no fills or gradients, creating layered outlines that
evoke depth while maintaining clarity.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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 = {
    numOvals: 10,            // Number of Cassini ovals to place
    stepsPerOval: 400,       // Points sampled per Cassini oval
    minScale: 50,            // Minimum scale for the Cassini shape
    maxScale: 160,           // Maximum scale for the Cassini shape
    minSeparation: 60,       // Minimum bounding box separation between ovals
    attemptLimit: 150        // Max attempts to place an oval before giving up
};

/**
 * =======================================
 * 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();        // Set to track used colors
let strokeWeightValue;             // Stroke weight in pixels
let pathData = [];                 // Track path commands for each color

let cassiniOvals = [];            // Store data for each Cassini oval

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData as an empty structure for each color
    initializePathData();

    // Generate the artwork
    background(255);
    drawShapes();

    noLoop();
}

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

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(indices[idx]);
        indices.splice(idx, 1);
    }

    // Sort for consistent ordering
    return selected.sort((a, b) => a - b);
}

function initializePathData() {
    pathData = [];
    // Prepare an array of strings, one for each color used
    // plus an index 0 for combined if desired
    pathData[0] = ''; // We'll store combined path data here if needed
    for (let i = 0; i < selectedColorIndices.length; i++) {
        pathData[selectedColorIndices[i]] = '';
    }
}

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

function drawShapes() {
    strokeWeight(strokeWeightValue);

    // Attempt to place numOvals Cassini shapes
    placeCassiniOvals();

    // Render the shapes to the canvas, each with its assigned color
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        beginShape();
        for (let i = 0; i < cOval.points.length; i++) {
            let pt = cOval.points[i];
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

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

/**
 * Generate Cassini Ovals and store them in cassiniOvals array
 */
function placeCassiniOvals() {
    cassiniOvals = [];

    let attempts = 0;
    let placedCount = 0;

    while (placedCount < generationRules.numOvals && attempts < generationRules.attemptLimit) {
        attempts++;

        // Randomly choose center
        let centerX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let centerY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Randomly choose scale factor and shape parameter
        let scaleFactor = random(generationRules.minScale, generationRules.maxScale);
        // Cassini parameter that influences shape (d^2 in the formula)
        let shapeParam = random(scaleFactor * 0.5, scaleFactor * 1.2);

        // Random foci offset
        let fociDist = random(scaleFactor * 0.2, scaleFactor * 0.8);

        // Assign color index from selected set
        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        // Generate points for this Cassini oval
        let newPoints = generateCassiniPoints(centerX, centerY, fociDist, shapeParam, scaleFactor);

        // Compute bounding box
        let bounds = getBounds(newPoints);

        // Check if it overlaps significantly with existing ovals
        if (!overlapsExisting(bounds, cassiniOvals, generationRules.minSeparation)) {
            // Accept this oval
            let ovalData = {
                centerX,
                centerY,
                fociDist,
                shapeParam,
                scaleFactor,
                colorIndex: cIndex,
                points: newPoints,
                bounds
            };
            cassiniOvals.push(ovalData);
            placedCount++;
        }
    }

    // Convert each shape’s points to pathData for later SVG output
    for (let cOval of cassiniOvals) {
        addCassiniPathToData(cOval);
    }
}

/**
 * Generate parametric points for a Cassini oval.
 * The general implicit form is (x^2 + y^2)^2 - 2*a^2*(x^2 - y^2) + a^4 = b^2, etc.
 * But we’ll do a parametric sample approach around 0..2PI.
 * f1 & f2 are two foci on x-axis from center, distance fociDist from center ±
 */
function generateCassiniPoints(cx, cy, fociDist, shapeParam, scale) {
    // We interpret shapeParam as r^2, a^2 in the Cassini formula
    // We'll sample angles from 0..2*PI
    let pts = [];
    let steps = generationRules.stepsPerOval;

    // We'll place foci horizontally around (cx, cy) => (cx ± fociDist/2, cy)
    let fx1 = cx - fociDist / 2;
    let fx2 = cx + fociDist / 2;
    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);

        // We'll find radius r that solves the Cassini equation: (r1 * r2) = constant
        // where r1, r2 = distances to each focus
        // We'll approximate numerically or use an approach to param to quickly place a point
        // Instead, for simplicity, treat radius = scale * some function of cos(2*theta), etc.
        // But let's do a direct numeric approach for demonstration:
        // We'll just guess radius and refine or do a known closed form for Cassini?

        // We'll do an approximate approach: r1 = distance from angle to focus1, r2 to focus2,
        // but that gets tricky. We'll do a direct param approach for demonstration.

        // A simpler approach: for Cassini with foci ±c, constant k^2:
        // r^2 = c^2 cos(2θ) + sqrt(...) isn't straightforward. We'll do a small numeric iteration.
        let bestR = 0;
        let bestDiff = 999999;
        // Simple iterative approach for r
        let tryCount = 50;
        let maxR = scale * 2.5;

        // Let's do a bracket search from 0..maxR
        let low = 0;
        let high = maxR;
        for (let j = 0; j < 15; j++) {
            let mid = (low + high) * 0.5;
            let v = cassiniEval(mid, theta, fx1, fx2, cy, shapeParam);
            if (v > 0) {
                high = mid;
            } else {
                low = mid;
            }
        }
        let r = (low + high) / 2;
        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);
        pts.push({ x: px, y: py });
    }

    return pts;
}

/**
 * Evaluate Cassini function:
 * We want (distance to focus1 * distance to focus2) = shapeParam (like sqrt(b^2)).
 * Return the difference so we can root-find.
 */
function cassiniEval(r, theta, fx1, fx2, cy, param) {
    // Given r & theta, let's get actual point
    // Then distance to each focus
    let px = fx1 + r * cos(theta); // not exactly correct for focus1. We need real center offset?
    let py = cy + r * sin(theta);
    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);
    let product = d1 * d2;
    return product - param; // We want this to be zero
}

/**
 * Compute bounding box of points
 */
function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

/**
 * Check if bounding box overlaps significantly with existing ovals
 */
function overlapsExisting(newBounds, existingOvals, minSep) {
    for (let e of existingOvals) {
        let b = e.bounds;
        if (!(newBounds.maxX + minSep < b.minX ||
              newBounds.minX - minSep > b.maxX ||
              newBounds.maxY + minSep < b.minY ||
              newBounds.minY - minSep > b.maxY)) {
            return true;
        }
    }
    return false;
}

/**
 * Convert the Cassini oval's points into an SVG path and store in pathData
 */
function addCassiniPathToData(oval) {
    let cIndex = oval.colorIndex;
    let pathString = pathData[cIndex] || '';

    if (oval.points.length > 0) {
        let start = oval.points[0];
        pathString += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
        for (let i = 1; i < oval.points.length; i++) {
            let pt = oval.points[i];
            pathString += ` L${pt.x.toFixed(2)},${pt.y.toFixed(2)}`;
        }
        // Close the path
        pathString += ' Z ';
    }
    pathData[cIndex] = pathString;
    pathData[0] += pathString;  // add to combined as well
}

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

/**
 * Draw color palette bars
 */
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
 * =======================================
 */

function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork
        resetCanvas();
    }
}

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

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

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

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 pData = pathData[colorIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" 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;
}

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

function 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 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Metamorphosis)
=======================================

### Title: *Cassini Metamorphosis*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, parametric curves, shape metamorphosis, randomness,
              identity, geometry

### Conceptual Framework

In "Cassini Metamorphosis," I portray my identity as a family of Cassini ovals, each
shifting between diverse shapes—ranging from figure-eight forms to rounded loops—depending
on small changes in parameters. These ovals are placed around a central field, like
fluid echoes of the self that undergo subtle transformations from one region to another.
The Cassini oval’s dependence on distance from two foci becomes a metaphor for how
my identity evolves when tethered to distinct internal impulses. Although each shape is
rooted in the same mathematical framework, slight parameter variations yield markedly
different silhouettes. In aggregate, these ovals mirror the multifaceted essence of
my being—linked by common ground, yet ever-changing.

### Technical Approach

The artwork randomly scatters a small set of non-overlapping oval “clusters” within
the work area. Each Cassini oval is computed from a parametric equation, using
randomly chosen foci, scale factors, and shape thresholds. Before drawing each shape,
the code checks a bounding box to minimize overlap with previously placed ovals. Once
placed, each curve is sampled at discrete intervals, capturing the parametric path
as line segments. These segments are tracked in pathData to ensure consistency
between on-canvas and SVG rendering. The colors are drawn from the existing nine-color
palette at 0.8 opacity, with no fills or gradients, creating layered outlines that
evoke depth while maintaining clarity.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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 = {
    numOvals: 10,            // Number of Cassini ovals to place
    stepsPerOval: 400,       // Points sampled per Cassini oval
    minScale: 50,            // Minimum scale for the Cassini shape
    maxScale: 160,           // Maximum scale for the Cassini shape
    minSeparation: 60,       // Minimum bounding box separation between ovals
    attemptLimit: 150        // Max attempts to place an oval before giving up
};

/**
 * =======================================
 * 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();        // Set to track used colors
let strokeWeightValue;             // Stroke weight in pixels
let pathData = [];                 // Track path commands for each color

let cassiniOvals = [];            // Store data for each Cassini oval

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData as an empty structure for each color
    initializePathData();

    // Generate the artwork
    background(255);
    drawShapes();

    noLoop();
}

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

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(indices[idx]);
        indices.splice(idx, 1);
    }

    // Sort for consistent ordering
    return selected.sort((a, b) => a - b);
}

function initializePathData() {
    pathData = [];
    pathData[0] = ''; // We'll store combined path data here if needed
    for (let i = 0; i < selectedColorIndices.length; i++) {
        pathData[selectedColorIndices[i]] = '';
    }
}

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

function drawShapes() {
    strokeWeight(strokeWeightValue);

    // Attempt to place numOvals Cassini shapes
    placeCassiniOvals();

    // Render the shapes to the canvas, each with its assigned color
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        beginShape();
        for (let i = 0; i < cOval.points.length; i++) {
            let pt = cOval.points[i];
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

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

/**
 * Generate Cassini Ovals and store them in cassiniOvals array
 */
function placeCassiniOvals() {
    cassiniOvals = [];

    let attempts = 0;
    let placedCount = 0;

    while (placedCount < generationRules.numOvals && attempts < generationRules.attemptLimit) {
        attempts++;

        // Randomly choose center
        let centerX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let centerY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Randomly choose scale factor and shape parameter
        let scaleFactor = random(generationRules.minScale, generationRules.maxScale);
        let shapeParam = random(scaleFactor * 0.5, scaleFactor * 1.2);

        // Random foci offset
        let fociDist = random(scaleFactor * 0.2, scaleFactor * 0.8);

        // Assign color index from selected set
        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        // Generate points for this Cassini oval
        let newPoints = generateCassiniPoints(centerX, centerY, fociDist, shapeParam, scaleFactor);

        // Compute bounding box
        let bounds = getBounds(newPoints);

        // Check if it overlaps significantly with existing ovals
        if (!overlapsExisting(bounds, cassiniOvals, generationRules.minSeparation)) {
            let ovalData = {
                centerX,
                centerY,
                fociDist,
                shapeParam,
                scaleFactor,
                colorIndex: cIndex,
                points: newPoints,
                bounds
            };
            cassiniOvals.push(ovalData);
            placedCount++;
        }
    }

    // Convert each shape’s points to pathData for later SVG output
    for (let cOval of cassiniOvals) {
        addCassiniPathToData(cOval);
    }
}

/**
 * Generate parametric points for a Cassini oval.
 */
function generateCassiniPoints(cx, cy, fociDist, shapeParam, scale) {
    let pts = [];
    let steps = generationRules.stepsPerOval;

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);

        // Use a bracket-search to find the radius r for each theta
        let low = 0;
        let high = scale * 2.5; // upper bound for radius
        for (let j = 0; j < 15; j++) {
            let mid = (low + high) * 0.5;
            let v = cassiniEval(mid, theta, cx, cy, fociDist, shapeParam);
            if (v > 0) {
                high = mid;
            } else {
                low = mid;
            }
        }
        let r = (low + high) * 0.5;

        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);

        pts.push({ x: px, y: py });
    }

    return pts;
}

/**
 * Evaluate difference for Cassini condition:
 * (distance to focus1) * (distance to focus2) = shapeParam
 */
function cassiniEval(r, theta, cx, cy, fociDist, shapeParam) {
    // Coordinates of the point
    let px = cx + r * cos(theta);
    let py = cy + r * sin(theta);

    // Foci: (cx ± fociDist/2, cy)
    let fx1 = cx - fociDist / 2;
    let fx2 = cx + fociDist / 2;

    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);

    return (d1 * d2) - shapeParam;
}

/**
 * Compute bounding box of points
 */
function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

/**
 * Check if bounding box overlaps significantly with existing ovals
 */
function overlapsExisting(newBounds, existingOvals, minSep) {
    for (let e of existingOvals) {
        let b = e.bounds;
        // Check if they're clearly disjoint
        if (!(newBounds.maxX + minSep < b.minX ||
              newBounds.minX - minSep > b.maxX ||
              newBounds.maxY + minSep < b.minY ||
              newBounds.minY - minSep > b.maxY)) {
            return true;
        }
    }
    return false;
}

/**
 * Convert the Cassini oval's points into an SVG path and store in pathData
 */
function addCassiniPathToData(oval) {
    let cIndex = oval.colorIndex;
    let pathString = pathData[cIndex] || '';

    if (oval.points.length > 0) {
        let start = oval.points[0];
        pathString += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
        for (let i = 1; i < oval.points.length; i++) {
            let pt = oval.points[i];
            pathString += ` L${pt.x.toFixed(2)},${pt.y.toFixed(2)}`;
        }
        // Close the path
        pathString += ' Z ';
    }

    pathData[cIndex] = pathString;
    pathData[0] += pathString; // also add to combined
}

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

/**
 * Draw color palette bars
 */
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
 * =======================================
 */

function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork
        resetCanvas();
    }
}

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

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

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

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 pData = pathData[colorIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" 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;
}

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

function 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 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Metamorphosis)
=======================================

### Title: *Cassini Metamorphosis*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, parametric curves, shape metamorphosis, randomness,
              identity, geometry

### Conceptual Framework

In "Cassini Metamorphosis," I portray my identity as a family of Cassini ovals, each
shifting between diverse shapes—ranging from figure-eight forms to rounded loops—depending
on small changes in parameters. These ovals are placed around a central field, like
fluid echoes of the self that undergo subtle transformations from one region to another.
The Cassini oval’s dependence on distance from two foci becomes a metaphor for how
my identity evolves when tethered to distinct internal impulses. Although each shape is
rooted in the same mathematical framework, slight parameter variations yield markedly
different silhouettes. In aggregate, these ovals mirror the multifaceted essence of
my being—linked by common ground, yet ever-changing.

### Technical Approach

Instead of an iterative radius search, this version computes the Cassini curve via its 
direct polar form. For each angle θ, we solve the quadratic for r² and pick the “plus” 
root if it is real and positive. This typically yields a loop (or possibly a figure eight, 
if you also sample the “minus” root). We generate several Cassini ovals by randomizing 
their center, the separation between foci, and the b² constant, then skip those whose 
bounding boxes overlap previously placed shapes. All final points are recorded to both 
the canvas and the SVG path data, ensuring consistency.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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 = {
    numOvals: 8,             // Number of Cassini ovals to place
    stepsPerOval: 400,       // Points sampled per Cassini oval
    minScale: 40,            // Minimum scale factor for b²
    maxScale: 160,           // Maximum scale factor for b²
    minSeparation: 50,       // Min bounding-box separation
    attemptLimit: 120        // Attempts to place an oval
};

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

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

let usedColors = new Set();
let strokeWeightValue;         
let pathData = [];             
let cassiniOvals = [];         

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

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

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

    adjustForStrokeWeight();
    selectColors();
    initializePathData();

    background(255);
    drawShapes();

    noLoop();
}

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

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

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

function initializePathData() {
    pathData = [];
    pathData[0] = '';
    for (let cidx of selectedColorIndices) {
        pathData[cidx] = '';
    }
}

function drawShapes() {
    strokeWeight(strokeWeightValue);

    placeCassiniOvals();

    // Render
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        beginShape();
        for (let i = 0; i < cOval.points.length; i++) {
            vertex(cOval.points[i].x, cOval.points[i].y);
        }
        endShape(CLOSE);
    }

    drawMarkers();
    addColorPaletteBars();
}

/**
 * Place multiple Cassini shapes, skipping overlaps
 */
function placeCassiniOvals() {
    cassiniOvals = [];
    let attempts = 0;
    let placed = 0;

    while (placed < generationRules.numOvals && attempts < generationRules.attemptLimit) {
        attempts++;

        let centerX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let centerY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // b² constant
        let b2 = random(generationRules.minScale, generationRules.maxScale);
        // fociDist = 2*c
        let fociDist = random(b2 * 0.3, b2 * 0.8) * 0.5; 
        // pick color
        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        // Build the shape
        let points = generateCassiniPoints(centerX, centerY, fociDist, b2);

        // bounding box
        let bounds = getBounds(points);
        if (!overlapsExisting(bounds, cassiniOvals, generationRules.minSeparation)) {
            cassiniOvals.push({
                centerX,
                centerY,
                fociDist,
                b2,
                colorIndex: cIndex,
                points,
                bounds
            });
            addCassiniPathToData(cIndex, points);
            placed++;
        }
    }
}

/**
 * Generate Cassini points via direct polar formula for the "plus" branch:
 *    R+(θ) = c² cos(2θ) + sqrt( c⁴ cos²(2θ) - (c⁴ - b²) )
 * where c = fociDist/2, b² = shapeParam.
 */
function generateCassiniPoints(cx, cy, fociDist, b2) {
    let c = fociDist / 2.0;
    let steps = generationRules.stepsPerOval;
    let pts = [];

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        let cos2 = cos(2 * theta);

        // Quadratic formula part:
        // R = c² cos(2θ) ± sqrt(c⁴ cos²(2θ) - (c⁴ - b²))
        // We'll do the "+" branch.
        let radicand = (c * c) * (c * c) * cos2 * cos2 - (c * c * c * c - b2);
        if (radicand < 0) {
            // no real solution here => skip
            continue;
        }
        let sqrtVal = sqrt(radicand);
        let Rplus = c * c * cos2 + sqrtVal;   // might be negative => skip
        if (Rplus < 0) continue;

        let r = sqrt(Rplus);
        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);
        pts.push({ x: px, y: py });
    }
    // If the shape is open or has big gaps, you might want to close it at the end anyway
    return pts;
}

function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

function overlapsExisting(newB, existing, minSep) {
    for (let e of existing) {
        let b = e.bounds;
        if (!(newB.maxX + minSep < b.minX ||
              newB.minX - minSep > b.maxX ||
              newB.maxY + minSep < b.minY ||
              newB.minY - minSep > b.maxY)) {
            return true;
        }
    }
    return false;
}

/**
 * Convert points into path data for SVG
 */
function addCassiniPathToData(cIndex, pts) {
    if (pts.length < 2) return;

    let pStr = pathData[cIndex] || '';
    let start = pts[0];
    pStr += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
    for (let i = 1; i < pts.length; i++) {
        pStr += ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
    }
    // Force close
    pStr += ' Z ';

    pathData[cIndex] = pStr;
    pathData[0] += pStr; // combined
}

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

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

    let usedColorsOrdered = 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);
    });
}

function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

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

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

    for (let cIndex of selectedColorIndices) {
        let single = generateSVG(cIndex);
        let colorName = colors[cIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${cIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(single, fileName);
    }
}

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

    if (activeColor === 0) {
        // all
        let idx = 1;
        for (let cIndex of selectedColorIndices) {
            svgContent += addSegmentsSVG(cIndex, idx++);
        }
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

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

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

    // palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(cIndex);
    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="${colorObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Single Cassini Example
/*
========================================
  Day 133 - Single Cassini (Visible)
========================================

### Title: A Single Large Cassini Oval

### Medium: Generative Drawing on Paper

### Keywords: generative art, cassini ovals, figure-eight,
              geometry, parametric curves, identity

### Conceptual Framework

This example ensures a large Cassini oval (or figure-eight) is drawn clearly
at the center. We plot both the “plus” and “minus” solutions in polar form
to capture the entire shape. By using fixed parameters, we avoid tiny partial
arcs or degenerate loops. This code is a simpler demonstration—once verified,
you can reintroduce randomization or multiple shapes.

### Technical Approach

- Center at (width/2, height/2).
- A fixed distance between foci, c = 100 (so fociDist = 2c = 200).
- A fixed Cassini parameter b² = 20000 for a large shape.
- We sample angles from 0..2π, compute r² for each branch, and if it’s > 0, 
  we add that point to the shape. We keep “plus” and “minus” solutions in 
  separate paths, so if a figure-eight forms, both lobes are visible.
- We store paths for both loops in the same color (from our palette),
  ensuring clarity on the final drawing.

*/

/*----------------------------------------
    Generated with p5.js
----------------------------------------*/

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const strokeOpacity = 0.8;
const strokeWeightValue = 2;

// We'll just pick a single color from our palette, for simplicity
const colorHex = '#f01e2c'; // RED from the original palette
let pathDataPlus = '';
let pathDataMinus = '';

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

  // Draw a single Cassini shape in the center
  drawSingleCassini();

  // Draw registration markers & a color bar for reference
  drawMarkers();
  drawColorBar(colorHex);

  noLoop();
}

function drawSingleCassini() {
  strokeWeight(strokeWeightValue);
  let c = 100;      // half the distance between foci
  let b2 = 20000;   // Cassini parameter (b²) => large shape
  let steps = 600;  // number of angles to sample

  let cx = width / 2;
  let cy = height / 2;

  // We’ll store separate sets of points for the “plus” branch and the “minus” branch
  let pointsPlus = [];
  let pointsMinus = [];

  for (let i = 0; i < steps; i++) {
    let theta = map(i, 0, steps, 0, TWO_PI);
    let cos2t = cos(2 * theta);
    let radicand = (c * c) * (c * c) * (cos2t * cos2t) - ((c * c * c * c) - b2);

    // If radicand < 0, no real solutions for r² => skip
    if (radicand < 0) continue;
    let sqrtVal = sqrt(radicand);

    // R+ = c² cos(2θ) + sqrt(...)
    let Rplus = c * c * cos2t + sqrtVal;
    if (Rplus > 0) {
      let rPlus = sqrt(Rplus);
      let px = cx + rPlus * cos(theta);
      let py = cy + rPlus * sin(theta);
      pointsPlus.push({ x: px, y: py });
    }

    // R- = c² cos(2θ) - sqrt(...)
    let Rminus = c * c * cos2t - sqrtVal;
    if (Rminus > 0) {
      let rMinus = sqrt(Rminus);
      let qx = cx + rMinus * cos(theta);
      let qy = cy + rMinus * sin(theta);
      pointsMinus.push({ x: qx, y: qy });
    }
  }

  // Optionally close each loop if it has enough points
  stroke(colorWithOpacity(colorHex, strokeOpacity));
  noFill();

  // Draw the “plus” branch
  if (pointsPlus.length > 2) {
    beginShape();
    for (let p of pointsPlus) {
      vertex(p.x, p.y);
    }
    endShape(CLOSE);
    // Also store in pathData
    pathDataPlus = buildPathString(pointsPlus);
  }

  // Draw the “minus” branch
  if (pointsMinus.length > 2) {
    beginShape();
    for (let p of pointsMinus) {
      vertex(p.x, p.y);
    }
    endShape(CLOSE);
    // Also store in pathData
    pathDataMinus = buildPathString(pointsMinus);
  }
}

function colorWithOpacity(hex, alpha) {
  let c = color(hex);
  c.setAlpha(255 * alpha);
  return c;
}

/**
 * Build an SVG path string from a set of points
 */
function buildPathString(pts) {
  if (pts.length === 0) return '';
  let s = `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
  for (let i = 1; i < pts.length; i++) {
    s += ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
  }
  s += ' Z ';
  return s;
}

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

function drawColorBar(hexColor) {
  // Just a single color bar for reference
  let barWidth = 300;
  let barHeight = 2;
  let xStart = (width - barWidth) / 2;
  let yPos = height - 100;

  strokeWeight(barHeight);
  stroke(colorWithOpacity(hexColor, strokeOpacity));
  line(xStart, yPos, xStart + barWidth, yPos);
}

/**
 * Press spacebar to export an SVG with both “plus” and “minus” branches
 */
function keyPressed() {
  if (key === ' ') {
    saveCassiniSVG();
  }
}

function saveCassiniSVG() {
  let timestamp = Date.now();
  let svgData = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgData += ` xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Markers
  svgData += `<g
     inkscape:groupmode="layer"
     id="layer0"
     inkscape:label="markers"
     style="display:inline"
     stroke="black"
     stroke-opacity="${strokeOpacity}">
     <path d="M5,0 L0,0 L0,5 
              M${(width - 5)},${height} L${width},${height} L${width},${(height - 5)}"
           stroke-width="1" fill="none" />
  </g>n`;

  // Cassini shape group
  svgData += `<g
     inkscape:groupmode="layer"
     id="layer1"
     inkscape:label="cassini"
     style="display:inline"
     stroke="${colorHex}"
     stroke-opacity="${strokeOpacity}">n`;

  // “Plus” branch
  if (pathDataPlus.trim() !== '') {
    svgData += `<path d="${pathDataPlus}" stroke-width="${strokeWeightValue}" fill="none" />n`;
  }
  // “Minus” branch
  if (pathDataMinus.trim() !== '') {
    svgData += `<path d="${pathDataMinus}" stroke-width="${strokeWeightValue}" fill="none" />n`;
  }

  // color bar
  let barWidth = 300;
  let barHeight = 2;
  let xStart = (width - barWidth) / 2;
  let yPos = height - 100;
  svgData += `<path d="M${xStart.toFixed(2)},${yPos.toFixed(2)} 
                 H${(xStart + barWidth).toFixed(2)}"
               stroke="${colorHex}"
               stroke-opacity="${strokeOpacity}"
               stroke-width="${barHeight}"
               fill="none" />n`;

  svgData += '</g>n</svg>';

  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 = `Day133-SingleCassini-${timestamp}.svg`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Constellations)
=======================================

### Title: *Cassini Constellations*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, polar curves, figure-eight, shape metamorphosis,
              random placement, geometry

### Conceptual Framework

In "Cassini Constellations," I imagine my identity as a cluster of cosmic loops
that resemble Cassini ovals—some forming figure‐eight shapes, others creating
rounded loops. Each loop is tethered by two “foci” that serve as gravitational
centers, echoing the dual forces that shape my evolving sense of self. These
ovals are scattered across the canvas, like constellations in a boundless sky,
symbolizing how different facets of identity coexist yet remain distinct. Each
loop’s parameters are randomized, capturing the unpredictable nature of personal
growth and self‐awareness.

### Technical Approach

- **Multiple Cassini Ovals**: We generate several shapes by picking a random
  center, “foci distance,” and Cassini parameter b² for each. These parameters
  determine whether the shape is a single oval or a figure‐eight.
- **Polar Equation**: For each shape, we sample angles θ from 0..2π. We compute
  r² using the Cassini formula in polar form:
  [
    R_{pm}(theta) = c^2 cos(2theta) pm sqrt{,c^4 cos^2(2theta) ;-;(c^4 - b^2),}
  ]
  where c is half the distance between the two foci, and b² is the Cassini
  constant. If R± > 0, we plot r = √(R±).
- **Bounding Boxes**: Before accepting a new shape, we compute the bounding box
  (across both the “plus” and “minus” branches) and ensure it does not overlap
  previously placed shapes beyond a certain threshold.
- **Single Color per Shape**: Each shape randomly selects one color from the
  nine‐color palette, and we store the resulting curves in the SVG path data
  (both plus and minus loops).
- **No Fills, No Overlapping Paths**: We draw only outlines (solid strokes, 0.8
  opacity) and ensure each shape has its own path. Intersections can occur, but
  we do not retrace or stack the same path multiple times.

By combining these Cassini loops in a “constellation,” we create a generative
self‐portrait that embraces the interplay of order, duality, and chance—reflecting
the complex forces that shape identity.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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' }
};

// Stroke opacity (for both canvas and SVG)
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numOvals: 5,              // Number of Cassini shapes to place
    stepsPerOval: 600,        // Points sampled per shape (for each branch)
    minFoci: 40,              // Min "c" for random foci distance / 2
    maxFoci: 100,             // Max "c" for random foci distance / 2
    minB2: 7000,              // Minimum b²
    maxB2: 25000,             // Maximum b²
    minSeparation: 80,        // Min bounding-box separation
    attemptLimit: 120         // Attempts to place an oval
};

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

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

let usedColors = new Set();        
let strokeWeightValue;             
let pathData = [];                 
let cassiniOvals = [];            

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

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

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select color set
    selectColors();

    // Initialize path data arrays
    initializePathData();

    // Generate the final drawing
    background(255);
    drawShapes();

    noLoop();
}

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

/**
 * Choose 1..9 unique colors from the palette
 */
function selectColors() {
    let numColorsToUse = floor(random(1, 10));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

function initializePathData() {
    pathData = [];
    pathData[0] = ''; // combined
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

/**
 * =======================================
 * Main Drawing
 * =======================================
 */

function drawShapes() {
    strokeWeight(strokeWeightValue);

    // Place multiple Cassini shapes
    placeCassiniOvals();

    // Render them on the canvas
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        // We draw each shape's combined points (plus & minus)
        beginShape();
        for (let pt of cOval.pointsPlus) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);

        if (cOval.pointsMinus.length > 2) {
            // If there's a valid minus branch, draw it as a separate loop
            beginShape();
            for (let pt of cOval.pointsMinus) {
                vertex(pt.x, pt.y);
            }
            endShape(CLOSE);
        }
    }

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

/**
 * Attempt to place numOvals shapes, skipping overlaps
 */
function placeCassiniOvals() {
    cassiniOvals = [];
    let attempts = 0;
    let placedCount = 0;

    while (placedCount < generationRules.numOvals && attempts < generationRules.attemptLimit) {
        attempts++;

        // Random center
        let cx = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let cy = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Random c, b²
        let cVal = random(generationRules.minFoci, generationRules.maxFoci);
        let b2Val = random(generationRules.minB2, generationRules.maxB2);

        // Pick color
        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        // Generate points (both plus & minus branches)
        let { plusPoints, minusPoints } = generateCassiniPoints(cx, cy, cVal, b2Val);

        // If we have no points for either branch, skip
        if (plusPoints.length < 3 && minusPoints.length < 3) {
            continue;
        }

        // Compute bounding box from all points
        let combinedPts = plusPoints.concat(minusPoints);
        let bounds = getBounds(combinedPts);

        // Check overlap
        if (!overlapsExisting(bounds, cassiniOvals, generationRules.minSeparation)) {
            // Accept
            cassiniOvals.push({
                centerX: cx,
                centerY: cy,
                cVal,
                b2Val,
                colorIndex: cIndex,
                pointsPlus: plusPoints,
                pointsMinus: minusPoints,
                bounds
            });

            // Convert to path data
            addCassiniPathToData(cIndex, plusPoints, minusPoints);
            placedCount++;
        }
    }
}

/**
 * Generate Cassini points using direct polar approach for both “plus” and “minus” branches.
 *   R±(θ) = c² cos(2θ) ± sqrt(c⁴ cos²(2θ) - (c⁴ - b²))
 */
function generateCassiniPoints(cx, cy, cVal, b2Val) {
    let steps = generationRules.stepsPerOval;
    let plusPoints = [];
    let minusPoints = [];

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        let cos2 = cos(2 * theta);

        // radicand = c^4 cos^2(2θ) - (c^4 - b^2)
        let radicand = (cVal * cVal) * (cVal * cVal) * (cos2 * cos2) - ((cVal * cVal * cVal * cVal) - b2Val);
        if (radicand < 0) {
            // no real solutions => skip
            continue;
        }
        let sqrtVal = sqrt(radicand);

        // Rplus
        let Rplus = cVal * cVal * cos2 + sqrtVal;
        if (Rplus > 0) {
            let rPlus = sqrt(Rplus);
            let px = cx + rPlus * cos(theta);
            let py = cy + rPlus * sin(theta);
            plusPoints.push({ x: px, y: py });
        }

        // Rminus
        let Rminus = cVal * cVal * cos2 - sqrtVal;
        if (Rminus > 0) {
            let rMinus = sqrt(Rminus);
            let qx = cx + rMinus * cos(theta);
            let qy = cy + rMinus * sin(theta);
            minusPoints.push({ x: qx, y: qy });
        }
    }

    return { plusPoints, minusPoints };
}

/**
 * Compute bounding box
 */
function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

/**
 * Check bounding box overlap with existing shapes
 */
function overlapsExisting(newBounds, existingOvals, minSep) {
    for (let e of existingOvals) {
        let b = e.bounds;
        if (!(newBounds.maxX + minSep < b.minX ||
              newBounds.minX - minSep > b.maxX ||
              newBounds.maxY + minSep < b.minY ||
              newBounds.minY - minSep > b.maxY)) {
            return true;
        }
    }
    return false;
}

/**
 * Convert Cassini branches to path data for SVG
 */
function addCassiniPathToData(colorIndex, plusPts, minusPts) {
    let pathString = pathData[colorIndex] || '';

    // If we have enough points for the plus branch, add them as one closed loop
    if (plusPts.length > 2) {
        let s = `M${plusPts[0].x.toFixed(2)},${plusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < plusPts.length; i++) {
            s += ` L${plusPts[i].x.toFixed(2)},${plusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s; // add to combined
    }

    // If we have enough points for the minus branch, add them as a separate loop
    if (minusPts.length > 2) {
        let s = `M${minusPts[0].x.toFixed(2)},${minusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < minusPts.length; i++) {
            s += ` L${minusPts[i].x.toFixed(2)},${minusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s; // add to combined
    }

    pathData[colorIndex] = pathString;
}

/**
 * =======================================
 * Markers & Color Palette
 * =======================================
 */

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

/**
 * Draw color bars for each used color
 */
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 & Key Press
 * =======================================
 */

function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork
        resetCanvas();
    }
}

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

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

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((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

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

    let pData = pathData[colorIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" stroke-width="${strokeWidthVal}" 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="${colorObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Universe)
=======================================

### Title: *Cassini Universe*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, polar curves, figure-eight, shape metamorphosis,
              large bounding box, geometry

### Conceptual Framework

In "Cassini Universe," I visualize my identity as a grand collection of Cassini loops,
each large enough to be unmistakable. By enforcing a minimum bounding box, I ensure
these shapes appear in their full glory—some forming figure‐eight patterns, others
merging into single, rounded loops. The wide parameter ranges allow each loop to
stretch across the canvas, while skipping any that remain too small. This approach
symbolizes my sense of self as a vast, ever‐unfolding cosmos, where each distinct
loop resonates with its own internal forces yet contributes to a larger tapestry of
collective identity.

### Technical Approach

- **Direct Polar Formula**: We sample angles 0..2π for each shape, computing r for
  the “plus” and “minus” Cassini solutions. 
- **Large Parameters**: We choose bigger foci distances and b² constants, ensuring
  inherently larger loops. 
- **Bounding Box & Minimum Points**: We discard any shape whose bounding box is under
  a certain dimension or yields too few sample points, preventing tiny line segments
  or degenerate loops. 
- **Multiple Shapes**: We attempt multiple random placements, skipping overlaps and
  small shapes. Each shape picks a color from the nine‐color palette, forming a
  vibrant “universe” of Cassini loops.

---
*/

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

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

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

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numOvals: 4,              // Number of Cassini shapes
    stepsPerOval: 700,        // Points per shape (each branch)
    minFoci: 80,              // Min "c" (half distance between foci)
    maxFoci: 160,             // Max "c"
    minB2: 20000,             // Min b²
    maxB2: 50000,             // Max b²
    minSeparation: 60,        // Min bounding-box separation
    attemptLimit: 120,        // Attempts to place an oval
    minDimension: 150,        // Min bounding box width/height
    minPoints: 100            // Min total points (plus + minus) to accept
};

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

let usedColors = new Set();
let strokeWeightValue;
let pathData = [];
let cassiniOvals = [];

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

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

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

    adjustForStrokeWeight();
    selectColors();
    initializePathData();

    background(255);
    drawShapes();
    noLoop();
}

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

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

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

/**
 * Prepare path data arrays
 */
function initializePathData() {
    pathData = [];
    pathData[0] = ''; // combined
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

/**
 * Draw the final shapes
 */
function drawShapes() {
    strokeWeight(strokeWeightValue);

    // Place multiple Cassini shapes
    placeCassiniOvals();

    // Render them
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        // plus branch
        if (cOval.pointsPlus.length > 2) {
            beginShape();
            for (let pt of cOval.pointsPlus) {
                vertex(pt.x, pt.y);
            }
            endShape(CLOSE);
        }

        // minus branch
        if (cOval.pointsMinus.length > 2) {
            beginShape();
            for (let pt of cOval.pointsMinus) {
                vertex(pt.x, pt.y);
            }
            endShape(CLOSE);
        }
    }

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

/**
 * Attempt to place shapes with random parameters, skipping small or overlapping
 */
function placeCassiniOvals() {
    cassiniOvals = [];
    let attempts = 0;
    let placedCount = 0;

    while (placedCount < generationRules.numOvals && attempts < generationRules.attemptLimit) {
        attempts++;

        // Random center
        let cx = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let cy = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // cVal (half foci distance) & b²
        let cVal = random(generationRules.minFoci, generationRules.maxFoci);
        let b2Val = random(generationRules.minB2, generationRules.maxB2);

        // pick color
        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        // generate plus/minus points
        let { plusPoints, minusPoints } = generateCassiniPoints(cx, cy, cVal, b2Val);

        let totalPts = plusPoints.length + minusPoints.length;
        if (totalPts < generationRules.minPoints) {
            // skip if not enough data
            continue;
        }

        // bounding box
        let allPoints = plusPoints.concat(minusPoints);
        let bounds = getBounds(allPoints);
        let widthBB = bounds.maxX - bounds.minX;
        let heightBB = bounds.maxY - bounds.minY;

        // ensure bounding box is large enough
        if (widthBB < generationRules.minDimension || heightBB < generationRules.minDimension) {
            continue;
        }

        // check overlap
        if (!overlapsExisting(bounds, cassiniOvals, generationRules.minSeparation)) {
            cassiniOvals.push({
                centerX: cx,
                centerY: cy,
                cVal,
                b2Val,
                colorIndex: cIndex,
                pointsPlus: plusPoints,
                pointsMinus: minusPoints,
                bounds
            });
            // store path data
            addCassiniPathToData(cIndex, plusPoints, minusPoints);
            placedCount++;
        }
    }
}

/**
 * Generate Cassini points for both “plus” and “minus” branches
 */
function generateCassiniPoints(cx, cy, cVal, b2Val) {
    let steps = generationRules.stepsPerOval;
    let plusPoints = [];
    let minusPoints = [];

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        let cos2 = cos(2 * theta);

        // radicand = c^4 cos^2(2θ) - (c^4 - b^2)
        let radicand = (cVal**4) * (cos2 * cos2) - (cVal**4 - b2Val);
        if (radicand < 0) {
            continue;
        }
        let sqrtVal = sqrt(radicand);

        // Rplus
        let Rplus = (cVal**2) * cos2 + sqrtVal;
        if (Rplus > 0) {
            let rP = sqrt(Rplus);
            let px = cx + rP * cos(theta);
            let py = cy + rP * sin(theta);
            plusPoints.push({ x: px, y: py });
        }

        // Rminus
        let Rminus = (cVal**2) * cos2 - sqrtVal;
        if (Rminus > 0) {
            let rM = sqrt(Rminus);
            let qx = cx + rM * cos(theta);
            let qy = cy + rM * sin(theta);
            minusPoints.push({ x: qx, y: qy });
        }
    }

    return { plusPoints, minusPoints };
}

/**
 * Compute bounding box
 */
function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

/**
 * Check overlap with existing shapes
 */
function overlapsExisting(newB, existingOvals, minSep) {
    for (let e of existingOvals) {
        let b = e.bounds;
        if (!(newB.maxX + minSep < b.minX ||
              newB.minX - minSep > b.maxX ||
              newB.maxY + minSep < b.minY ||
              newB.minY - minSep > b.maxY)) {
            return true;
        }
    }
    return false;
}

/**
 * Convert plus/minus points to SVG path data
 */
function addCassiniPathToData(colorIndex, plusPts, minusPts) {
    let pathString = pathData[colorIndex] || '';

    if (plusPts.length > 2) {
        let s = `M${plusPts[0].x.toFixed(2)},${plusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < plusPts.length; i++) {
            s += ` L${plusPts[i].x.toFixed(2)},${plusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s; 
    }

    if (minusPts.length > 2) {
        let s = `M${minusPts[0].x.toFixed(2)},${minusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < minusPts.length; i++) {
            s += ` L${minusPts[i].x.toFixed(2)},${minusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s; 
    }

    pathData[colorIndex] = pathString;
}

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

/**
 * Draw color palette bars
 */
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);
    });
}

/**
 * Reset / Keypress
 */
function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

/**
 * SVG Export
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

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((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

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

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

    // color 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="${colorObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Families)
=======================================

### Title: *Cassini Families*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, nested loops, figure-eight, parametric geometry,
              symmetrical, identity

### Conceptual Framework

In "Cassini Families," I visualize my identity as a sequence of nested Cassini ovals,
all sharing the same pair of foci but varying in the parameter b². This approach
echoes the reference image of classic Cassini curves, showcasing how small changes
in a fundamental constant can yield distinct, elegant shapes—ranging from single
loops to figure‐eight forms. Placing them concentrically around a single center
symbolizes a cohesive self, where each “ring” of identity arises from a common core,
yet manifests unique traits. By assigning each loop its own color, the piece
celebrates the layered nature of identity and the continuity that binds these
variations together.

### Technical Approach

- **Fixed Center & Foci**: We center the shapes at (width/2, height/2) with foci
  separated by 2c. This ensures the symmetrical, classical Cassini appearance.
- **Multiple b² Values**: We generate loops for a range of b² values, from small
  to large, producing nested curves. Some may form figure‐eight shapes if b² is
  near c⁴, while others form smooth ovals.
- **Polar Sampling**: For each b², we sample angles θ in [0..2π], computing two
  radii R±(θ). If they’re positive, we add the corresponding point to the path.
- **One Loop per Color**: We cycle through your nine‐color palette, assigning each
  loop a distinct color (or reusing if needed).
- **No Overlapping Paths**: Although loops can intersect visually, each is a unique
  path. We do not re‐trace the same path multiple times.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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' }
};

// Stroke opacity for both canvas & SVG
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    // We create a "family" of Cassini loops
    // Each loop has the same cValue (foci half-distance)
    // but a different b² from a defined range
    cValue: 200,            // half-distance between foci
    b2Range: [30000, 80000],// min & max b²
    loopsCount: 6,          // how many distinct b² loops to generate
    stepsPerLoop: 600       // points per loop branch
};

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

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

let usedColors = new Set();
let strokeWeightValue;
let pathData = [];  // Store path commands for each color
let allCassiniLoops = []; // We'll store each loop's data here

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

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

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

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

    // Stroke weight
    adjustForStrokeWeight();

    // Color selection
    selectColors();

    // Initialize path data
    initializePathData();

    // Generate the loops & draw
    background(255);
    drawCassiniFamilies();

    noLoop();
}

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

/**
 * Choose 1..9 unique colors from the palette
 */
function selectColors() {
    let numColorsToUse = floor(random(1, 10));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

/**
 * Prepare path data
 */
function initializePathData() {
    pathData = [];
    pathData[0] = ''; // combined
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

/**
 * =======================================
 * Main Drawing Function
 * =======================================
 */

function drawCassiniFamilies() {
    strokeWeight(strokeWeightValue);

    // We'll place them all in the center
    let cx = width / 2;
    let cy = height / 2;

    let cVal = generationRules.cValue; // half-distance
    let minB2 = generationRules.b2Range[0];
    let maxB2 = generationRules.b2Range[1];
    let loopsCount = generationRules.loopsCount;

    // We'll pick loopsCount distinct b² values from minB2..maxB2
    // (Or you can do an even spacing)
    // Let's do even spacing for clarity
    let step = (maxB2 - minB2) / max(1, loopsCount - 1);

    for (let i = 0; i < loopsCount; i++) {
        let b2Val = minB2 + i * step;
        // pick a color from selectedColorIndices
        // cycle if fewer colors than loops
        let cIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(cIndex);

        let { plusPoints, minusPoints } = generateCassiniPoints(cx, cy, cVal, b2Val);

        // Store the loop data
        let loopObj = {
            cIndex,
            b2Val,
            plusPoints,
            minusPoints
        };
        allCassiniLoops.push(loopObj);

        // Convert to path data
        addCassiniPathToData(cIndex, plusPoints, minusPoints);
    }

    // Now draw them on canvas
    for (let loopObj of allCassiniLoops) {
        let col = colors[loopObj.cIndex];
        applyStrokeWithOpacity(col.hex);
        strokeWeight(strokeWeightValue);

        // plus branch
        if (loopObj.plusPoints.length > 2) {
            beginShape();
            for (let pt of loopObj.plusPoints) {
                vertex(pt.x, pt.y);
            }
            endShape(CLOSE);
        }
        // minus branch
        if (loopObj.minusPoints.length > 2) {
            beginShape();
            for (let pt of loopObj.minusPoints) {
                vertex(pt.x, pt.y);
            }
            endShape(CLOSE);
        }
    }

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

/**
 * Generate Cassini points (both plus & minus) for a given cVal, b2Val
 */
function generateCassiniPoints(cx, cy, cVal, b2Val) {
    let steps = generationRules.stepsPerLoop;
    let plusPoints = [];
    let minusPoints = [];

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        let cos2 = cos(2 * theta);

        // radicand
        let radicand = (cVal**4) * (cos2 * cos2) - (cVal**4 - b2Val);
        if (radicand < 0) {
            continue;
        }
        let sqrtVal = sqrt(radicand);

        // Rplus
        let Rplus = (cVal**2) * cos2 + sqrtVal;
        if (Rplus > 0) {
            let rP = sqrt(Rplus);
            let px = cx + rP * cos(theta);
            let py = cy + rP * sin(theta);
            plusPoints.push({ x: px, y: py });
        }

        // Rminus
        let Rminus = (cVal**2) * cos2 - sqrtVal;
        if (Rminus > 0) {
            let rM = sqrt(Rminus);
            let qx = cx + rM * cos(theta);
            let qy = cy + rM * sin(theta);
            minusPoints.push({ x: qx, y: qy });
        }
    }
    return { plusPoints, minusPoints };
}

/**
 * Convert Cassini points to path data
 */
function addCassiniPathToData(colorIndex, plusPts, minusPts) {
    let pathString = pathData[colorIndex] || '';

    if (plusPts.length > 2) {
        let s = `M${plusPts[0].x.toFixed(2)},${plusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < plusPts.length; i++) {
            s += ` L${plusPts[i].x.toFixed(2)},${plusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s;
    }

    if (minusPts.length > 2) {
        let s = `M${minusPts[0].x.toFixed(2)},${minusPts[0].y.toFixed(2)}`;
        for (let i = 1; i < minusPts.length; i++) {
            s += ` L${minusPts[i].x.toFixed(2)},${minusPts[i].y.toFixed(2)}`;
        }
        s += ' Z ';
        pathString += s;
        pathData[0] += s;
    }

    pathData[colorIndex] = pathString;
}

/**
 * Markers & color bars
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

    let usedColorsOrdered = 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);
    });
}

/**
 * Reset / Key Press
 */
function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    // Re-run the Cassini generation
    allCassiniLoops = [];
    drawCassiniFamilies();
}

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork
        resetCanvas();
    }
}

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

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((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

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

    let pData = pathData[colorIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" stroke-width="${sw}" 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="${colorObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Metamorphosis)
=======================================

### Title: *Cassini Metamorphosis*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, parametric curves, shape metamorphosis, randomness,
              identity, geometry

### Conceptual Framework

In "Cassini Metamorphosis," I portray my identity as a family of Cassini ovals, each
shifting between diverse shapes—ranging from figure-eight forms to rounded loops—depending
on small changes in parameters. These ovals are placed around a central field, like
fluid echoes of the self that undergo subtle transformations from one region to another.
The Cassini oval's dependence on distance from two foci becomes a metaphor for how
my identity evolves when tethered to distinct internal impulses. Although each shape is
rooted in the same mathematical framework, slight parameter variations yield markedly
different silhouettes. In aggregate, these ovals mirror the multifaceted essence of
my being—linked by common ground, yet ever-changing.

### Technical Approach

We preserve the random transformation logic, the bracket-search approach for radius, and
the multi-family structure. To ensure shapes are large enough to see, we enforce:
1) A **minimum bounding box dimension** (width or height).
2) A **minimum number of sampled points** in each shape.
If a shape fails either check, it’s discarded. This prevents degenerate or tiny arcs. The
remaining shapes are bigger and more likely to resemble the classical Cassini loops or
figure-eights we want.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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' }
};

// Stroke opacity for both SVG & canvas
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    numFamilies: 6,           // Number of families of related Cassini ovals
    ovalsPerFamily: 6,        // Number of ovals in each family (transformation steps)
    stepsPerOval: 400,        // Points sampled per Cassini oval
    centralFormationSize: 4,  // Number of shapes in central formation
    maxScale: 300,            // Maximum scale for large shapes
    minScale: 150,            // Minimum scale for shapes
    centerScale: 250,         // Scale for central region shapes
    varyStrokeWeight: true,   // Whether to vary stroke weight between shapes
    overlappingShapes: true,  // Allow shapes to overlap for visual interest
    useCentralAxis: true,     // Use a central axis for some compositions

    // Additional shape-quality constraints
    minDimension: 100,        // Min bounding box width or height
    minPoints: 60             // Min number of points to accept a shape
};

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

let canvasWidthPixels;             
let canvasHeightPixels;            
let workAreaMarginInches = 1.2;    
let workAreaMarginPixels;          
let selectedColorIndices = [];     

let usedColors = new Set();        
let strokeWeightValue;             
let pathData = [];                 

let cassiniOvals = [];            
let centerX, centerY;             
let primaryAxis;                   
let secondaryAxis;                 

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

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

    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    centerX = width / 2;
    centerY = height / 2;
    
    // random axes
    primaryAxis = random(TWO_PI);
    secondaryAxis = primaryAxis + HALF_PI;

    adjustForStrokeWeight();
    selectColors();
    initializePathData();

    background(255);
    drawShapes();

    noLoop();
}

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

function selectColors() {
    // pick 5..7 unique colors
    let numColorsToUse = floor(random(5, 8));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

function initializePathData() {
    pathData = [];
    pathData[0] = ''; 
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

/**
 * Main drawing function
 */
function drawShapes() {
    generateCassiniFamilies();

    // Render each shape
    for (let cOval of cassiniOvals) {
        applyStrokeWithOpacity(colors[cOval.colorIndex].hex, cOval.opacity);
        strokeWeight(cOval.strokeWeight);

        beginShape();
        for (let pt of cOval.points) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

    drawMarkers();
    addColorPaletteBars();
}

/**
 * Generate families & central formation
 */
function generateCassiniFamilies() {
    cassiniOvals = [];

    // central formation
    createCentralFormation();

    // axis families
    if (generationRules.useCentralAxis) {
        for (let i = 0; i < 2; i++) {
            let direction = i === 0 ? 1 : -1;
            let axisAngle = primaryAxis;
            let startDistance = random(200, 300);
            let baseX = centerX + cos(axisAngle) * startDistance * direction;
            let baseY = centerY + sin(axisAngle) * startDistance * direction;
            
            let familyColor = selectedColorIndices[floor(random(selectedColorIndices.length))];
            createTransformationSequence(baseX, baseY, familyColor, axisAngle + PI * i, 
                                        generationRules.ovalsPerFamily, true);
        }
    }

    // radial families
    let radialCount = generationRules.numFamilies - (generationRules.useCentralAxis ? 2 : 0);
    for (let f = 0; f < radialCount; f++) {
        let familyColor = selectedColorIndices[f % selectedColorIndices.length];
        usedColors.add(familyColor);
        
        let familyAngle = map(f, 0, radialCount, 0, TWO_PI);
        let familyRadius = width * 0.35; 
        let familyX = centerX + cos(familyAngle) * familyRadius;
        let familyY = centerY + sin(familyAngle) * familyRadius;

        createTransformationSequence(familyX, familyY, familyColor, familyAngle, 
                                    generationRules.ovalsPerFamily, false);
    }

    // isolated figures
    addIsolatedFigures(3 + floor(random(3)));

    // Convert to path data
    for (let cOval of cassiniOvals) {
        addCassiniPathToData(cOval);
    }
}

/**
 * Create a transformation sequence of Cassini ovals
 */
function createTransformationSequence(baseX, baseY, colorIndex, angle, numSteps, isAxisSequence) {
    for (let i = 0; i < numSteps; i++) {
        let t = i / (numSteps - 1);

        let scaleFactor;
        if (isAxisSequence) {
            // Larger in middle
            scaleFactor = lerp(generationRules.minScale, generationRules.maxScale * 0.8, sin(t * PI));
        } else {
            // Largest at start
            scaleFactor = lerp(generationRules.maxScale, generationRules.minScale, t);
        }

        let fociDist, shapeParam;
        if (random() < 0.7) {
            // Standard transform
            fociDist = lerp(scaleFactor * 0.9, scaleFactor * 0.2, t);
            shapeParam = lerp(scaleFactor * 0.7, scaleFactor * 1.3, t);
        } else {
            // Variation
            fociDist = lerp(scaleFactor * 0.5, scaleFactor * 0.8, t);
            shapeParam = lerp(scaleFactor * 1.1, scaleFactor * 0.6, t);
        }

        let stepDistribution = isAxisSequence ? (2 * t - 1) * (2 * t - 1) : t;
        let stepRadius = lerp(0, scaleFactor * 1.8, stepDistribution);
        let cx, cy;

        if (isAxisSequence) {
            cx = baseX + cos(angle) * stepRadius * (i % 2 === 0 ? 1 : -1) * 0.6;
            cy = baseY + sin(angle) * stepRadius * (i % 2 === 0 ? 1 : -1) * 0.6;
            let perpAngle = angle + HALF_PI;
            cx += cos(perpAngle) * scaleFactor * 0.2 * (i % 3 - 1);
            cy += sin(perpAngle) * scaleFactor * 0.2 * (i % 3 - 1);
        } else {
            let stepAngle = angle + lerp(-0.8, 0.8, t);
            cx = baseX + cos(stepAngle) * stepRadius;
            cy = baseY + sin(stepAngle) * stepRadius;
        }

        let strokeW = strokeWeightValue;
        if (generationRules.varyStrokeWeight) {
            strokeW = map(sin(t * PI), 0, 1, strokeWeightValue * 0.7, strokeWeightValue * 1.8);
        }
        let opacity = map(sin(t * PI + PI/4), -1, 1, 0.7, 1) * strokeOpacity;

        let points = generateCassiniPoints(cx, cy, fociDist, shapeParam, scaleFactor);

        // Check shape validity (size, points)
        if (!validCassiniShape(points, generationRules.minDimension, generationRules.minPoints)) {
            continue;
        }

        cassiniOvals.push({
            centerX: cx,
            centerY: cy,
            fociDist,
            shapeParam,
            scaleFactor,
            colorIndex,
            points,
            bounds: getBounds(points),
            strokeWeight: strokeW,
            opacity
        });
    }
}

/**
 * Create central formation
 */
function createCentralFormation() {
    let centralColors = [];
    for (let i = 0; i < min(3, selectedColorIndices.length); i++) {
        centralColors.push(selectedColorIndices[floor(random(selectedColorIndices.length))]);
    }

    let mainCentralScale = generationRules.centerScale * 1.2;
    let mainFociDist = mainCentralScale * 0.85;
    let mainShapeParam = mainCentralScale * 0.75;

    let mainPoints = generateCassiniPoints(centerX, centerY, mainFociDist, mainShapeParam, mainCentralScale);

    if (validCassiniShape(mainPoints, generationRules.minDimension, generationRules.minPoints)) {
        cassiniOvals.push({
            centerX,
            centerY,
            fociDist: mainFociDist,
            shapeParam: mainShapeParam,
            scaleFactor: mainCentralScale,
            colorIndex: centralColors[0] || 1,
            points: mainPoints,
            bounds: getBounds(mainPoints),
            strokeWeight: strokeWeightValue * 1.5,
            opacity: 0.9
        });
    }

    for (let i = 0; i < generationRules.centralFormationSize - 1; i++) {
        let angle = random(TWO_PI);
        let radius = random(70, 150);
        let cx = centerX + cos(angle) * radius;
        let cy = centerY + sin(angle) * radius;

        let colorIdx = centralColors[i % centralColors.length] || 1;
        let scaleFactor = random(generationRules.centerScale * 0.6, generationRules.centerScale * 0.9);

        let shapeType = random();
        let fociDist, shapeParam;
        if (shapeType < 0.3) {
            // more circular
            fociDist = scaleFactor * random(0.2, 0.4);
            shapeParam = scaleFactor * random(1.1, 1.4);
        } else if (shapeType < 0.7) {
            // figure-eight
            fociDist = scaleFactor * random(0.7, 0.9);
            shapeParam = scaleFactor * random(0.6, 0.8);
        } else {
            // intermediate
            fociDist = scaleFactor * random(0.5, 0.7);
            shapeParam = scaleFactor * random(0.8, 1.1);
        }

        let points = generateCassiniPoints(cx, cy, fociDist, shapeParam, scaleFactor);

        if (validCassiniShape(points, generationRules.minDimension, generationRules.minPoints)) {
            cassiniOvals.push({
                centerX: cx,
                centerY: cy,
                fociDist,
                shapeParam,
                scaleFactor,
                colorIndex: colorIdx,
                points,
                bounds: getBounds(points),
                strokeWeight: strokeWeightValue * random(0.8, 1.3),
                opacity: random(0.75, 0.95)
            });
        }
    }
}

/**
 * Add isolated figures
 */
function addIsolatedFigures(count) {
    for (let i = 0; i < count; i++) {
        let attempts = 0;
        let validPlacement = false;
        let cx, cy, scaleFactor;

        while (!validPlacement && attempts < 30) {
            attempts++;
            let angle = random(TWO_PI);
            let radius = random(width * 0.25, width * 0.45);
            cx = centerX + cos(angle) * radius;
            cy = centerY + sin(angle) * radius;
            scaleFactor = random(generationRules.minScale * 0.6, generationRules.minScale * 1.2);

            validPlacement = true;
            if (!generationRules.overlappingShapes) {
                for (let oval of cassiniOvals) {
                    let distC = dist(cx, cy, oval.centerX, oval.centerY);
                    if (distC < (scaleFactor + oval.scaleFactor) * 0.5) {
                        validPlacement = false;
                        break;
                    }
                }
            }
        }

        if (validPlacement) {
            let colorIdx = selectedColorIndices[floor(random(selectedColorIndices.length))];
            let fociDist = scaleFactor * random(0.3, 0.9);
            let shapeParam = scaleFactor * random(0.7, 1.2);

            let points = generateCassiniPoints(cx, cy, fociDist, shapeParam, scaleFactor);
            if (validCassiniShape(points, generationRules.minDimension, generationRules.minPoints)) {
                cassiniOvals.push({
                    centerX: cx,
                    centerY: cy,
                    fociDist,
                    shapeParam,
                    scaleFactor,
                    colorIndex: colorIdx,
                    points,
                    bounds: getBounds(points),
                    strokeWeight: strokeWeightValue * random(0.7, 1.4),
                    opacity: random(0.7, 0.9)
                });
            }
        }
    }
}

/**
 * Check if a generated Cassini shape is large enough & has enough points
 */
function validCassiniShape(pts, minDim, minCount) {
    if (pts.length < minCount) return false;
    let b = getBounds(pts);
    let w = b.maxX - b.minX;
    let h = b.maxY - b.minY;
    if (w < minDim || h < minDim) return false;
    return true;
}

/**
 * Bracket-search approach for each angle
 */
function generateCassiniPoints(cx, cy, fociDist, shapeParam, scale) {
    let pts = [];
    let steps = generationRules.stepsPerOval;

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);

        let low = 0;
        let high = scale * 2.5;
        for (let j = 0; j < 15; j++) {
            let mid = (low + high) * 0.5;
            let v = cassiniEval(mid, theta, cx, cy, fociDist, shapeParam);
            if (v > 0) {
                high = mid;
            } else {
                low = mid;
            }
        }
        let r = (low + high) * 0.5;

        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);
        pts.push({ x: px, y: py });
    }
    return pts;
}

/**
 * Cassini condition: (distance to focus1)*(distance to focus2) = shapeParam
 */
function cassiniEval(r, theta, cx, cy, fociDist, shapeParam) {
    let px = cx + r * cos(theta);
    let py = cy + r * sin(theta);
    let fx1 = cx - fociDist / 2;
    let fx2 = cx + fociDist / 2;

    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);

    return (d1 * d2) - shapeParam;
}

function getBounds(pts) {
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    for (let p of pts) {
        if (p.x < minX) minX = p.x;
        if (p.x > maxX) maxX = p.x;
        if (p.y < minY) minY = p.y;
        if (p.y > maxY) maxY = p.y;
    }
    return { minX, maxX, minY, maxY };
}

/**
 * Convert shape to path data
 */
function addCassiniPathToData(oval) {
    let cIndex = oval.colorIndex;
    let pathString = pathData[cIndex] || '';

    if (oval.points.length > 0) {
        let start = oval.points[0];
        pathString += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
        for (let i = 1; i < oval.points.length; i++) {
            let pt = oval.points[i];
            pathString += ` L${pt.x.toFixed(2)},${pt.y.toFixed(2)}`;
        }
        pathString += ' Z ';
    }

    pathData[cIndex] = pathString;
    pathData[0] += pathString; 
}

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

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

/**
 * Reset & Key Handling
 */
function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    primaryAxis = random(TWO_PI);
    secondaryAxis = primaryAxis + HALF_PI;
    drawShapes();
}

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

/**
 * SVG Export
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

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

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let colorObj = colors[colorIndex];
    let sw = strokeWeightValue; // We'll override per shape in the final path if we want

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

    // Instead of using pathData[colorIndex] as a single path,
    // we retrieve each shape of that color from cassiniOvals
    let colorOvals = cassiniOvals.filter(o => o.colorIndex === colorIndex);

    for (let oval of colorOvals) {
        if (oval.points.length > 0) {
            let p0 = oval.points[0];
            let shapePath = `M${p0.x.toFixed(2)},${p0.y.toFixed(2)}`;
            for (let i = 1; i < oval.points.length; i++) {
                let pt = oval.points[i];
                shapePath += ` L${pt.x.toFixed(2)},${pt.y.toFixed(2)}`;
            }
            shapePath += ' Z';

            svg += `<path d="${shapePath}" 
                         stroke="${colorObj.hex}" 
                         stroke-opacity="${oval.opacity.toFixed(2)}" 
                         stroke-width="${oval.strokeWeight.toFixed(2)}" 
                         fill="none" />n`;
        }
    }

    // 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="${colorObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Elliptic Echoes)
=======================================

### Title: *Elliptic Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, polar equations, parametric curves, figure-eight, symmetry,
              self-reflection, minimalism, geometry

### Conceptual Framework

"Elliptic Echoes" visualizes my identity through a small family of Cassini ovals,
arranged in a symmetrical composition around the canvas center. Each oval emerges
from the same pair of foci yet employs different parameters, producing a spectrum
ranging from figure-eight shapes to more rounded loops. The shared foci represent
the unifying center of self, while variations in scale and b² highlight the fluid
shifts in how I perceive my own boundaries and inner structure. By placing multiple
ovals in a calm, symmetrical arrangement, I emphasize that these transformations—
though distinct—resonate with one another in a harmonious field, echoing the idea
that different facets of self can coexist and reinforce a coherent identity.

### Technical Approach

- **Cassini Ovals via Polar Form**: For each shape, we fix a single c (half-distance
  between foci) and vary the b² constant. We sample angles from 0..2π, solving
  R(θ) = c² cos(2θ) ± sqrt(c⁴ cos²(2θ) - (c⁴ - b²)) whenever the radicand is ≥ 0.
  We select the "plus" branch to produce a closed loop, ensuring no partial arcs.
- **Symmetrical Placement**: We position each oval around the canvas center at
  equally spaced angles, giving a balanced arrangement. Each shape is assigned one
  of the chosen colors from the nine-color palette.
- **Path Data Consistency**: We track every point in `pathData` to ensure the
  rendered canvas and the exported SVG precisely match. Each oval is a single
  continuous path, avoiding overlapping strokes.
- **No Fills**: All shapes use solid strokes only (opacity 0.8), respecting the
  requirement for clarity and minimal visual clutter.
- **Bounding Margins**: We ensure each shape lies within the valid work area,
  adjusting the center radius so as not to exceed the margins. This prevents
  shapes from being cropped or hidden.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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)
 * =======================================
 */

// We'll generate a small set of Cassini ovals arranged around the center
let generationRules = {
    cVal: 120,           // half-distance between foci
    b2Values: [12000, 16000, 20000, 24000], // b² constants for each oval
    stepsPerOval: 600,   // number of angle samples for each shape
    radiusOffset: 180    // distance from center for symmetrical arrangement
};

/**
 * =======================================
 * 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();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm
let pathData;                      // Track path commands for each color

// We'll store the Cassini shapes as an array of objects
let cassiniShapes = [];

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize path data as empty
    initializePathData();

    // Generate the artwork
    background(255);
    drawShapes();

    noLoop();
}

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

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

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

function selectColors() {
    // Choose as many colors as we have shapes, or at least 1
    let numNeeded = generationRules.b2Values.length;
    let numColorsToUse = min(numNeeded, 9); // can't exceed 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(indices[idx]);
        indices.splice(idx, 1);
    }
    return selected.sort((a, b) => a - b);
}

function initializePathData() {
    pathData = [];
    pathData[0] = ''; // combined
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

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

function drawShapes() {
    // Generate Cassini shapes
    createCassiniArrangement();

    // Render them on canvas
    for (let shp of cassiniShapes) {
        let col = colors[shp.colorIndex].hex;
        applyStrokeWithOpacity(col);
        strokeWeight(strokeWeightValue);

        beginShape();
        for (let pt of shp.points) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

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

/**
 * Create a symmetrical arrangement of Cassini ovals around the center
 */
function createCassiniArrangement() {
    let centerX = width / 2;
    let centerY = height / 2;

    // We'll place each b² at a different angle
    let angleStep = TWO_PI / generationRules.b2Values.length;

    cassiniShapes = [];

    for (let i = 0; i < generationRules.b2Values.length; i++) {
        let b2Val = generationRules.b2Values[i];

        // Pick color from selectedColorIndices
        let cIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(cIndex);

        // Position offset
        let theta = angleStep * i;
        let radius = generationRules.radiusOffset;
        // Ensure it doesn't exceed margin
        // If radius is too big, clamp it so shapes stay within the work area
        let maxPossible = (min(width, height) / 2) - workAreaMarginPixels;
        radius = min(radius, maxPossible);

        let cx = centerX + radius * cos(theta);
        let cy = centerY + radius * sin(theta);

        // Generate points
        let newPoints = generateCassiniPoints(cx, cy, generationRules.cVal, b2Val);

        // Store shape data
        let shapeObj = {
            centerX: cx,
            centerY: cy,
            cVal: generationRules.cVal,
            b2Val: b2Val,
            colorIndex: cIndex,
            points: newPoints
        };
        cassiniShapes.push(shapeObj);

        // Convert to path data
        addShapeToPathData(cIndex, newPoints);
    }
}

/**
 * Generate Cassini points using direct polar approach for the "plus" branch
 */
function generateCassiniPoints(cx, cy, cVal, b2Val) {
    let steps = generationRules.stepsPerOval;
    let pts = [];

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        let cos2 = cos(2 * theta);

        // radicand = c^4 cos^2(2θ) - (c^4 - b²)
        let radicand = (cVal**4) * (cos2 * cos2) - (cVal**4 - b2Val);
        if (radicand < 0) {
            // no real solution => skip
            continue;
        }
        let sqrtVal = sqrt(radicand);

        // Rplus
        let Rplus = (cVal**2) * cos2 + sqrtVal;
        if (Rplus > 0) {
            let r = sqrt(Rplus);
            let px = cx + r * cos(theta);
            let py = cy + r * sin(theta);
            pts.push({ x: px, y: py });
        }
    }

    return pts;
}

/**
 * Convert shape points to path data
 */
function addShapeToPathData(colorIndex, points) {
    if (points.length < 2) return;

    let pStr = pathData[colorIndex];
    let start = points[0];
    pStr += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
    for (let i = 1; i < points.length; i++) {
        pStr += ` L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
    }
    pStr += ' Z ';
    pathData[colorIndex] = pStr;
    pathData[0] += pStr; // also add to combined
}

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

/**
 * Draw color palette bars
 */
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();
    initializePathData();
    background(255);
    drawShapes();
}

/**
 * Key Press Handling
 */
function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

/**
 * SVG Export
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

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

function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeW = 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`;

    // We already combined all shapes of this color into pathData[colorIndex]
    let pData = pathData[colorIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" stroke-width="${strokeW}" fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Flowing Cassini Tapestry)
=======================================

### Title: *Flowing Cassini Tapestry*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, flow field, line art, layered geometry, wave-like,
              parametric curves, fluid arrangement, identity

### Conceptual Framework

In "Flowing Cassini Tapestry," I re-envision my identity as a field of Cassini ovals,
each one placed according to an underlying flow pattern—like seeds carried by wind
currents. While the mathematical form of each oval remains tied to dual foci, their
placement and subtle parameter shifts evoke a sense of organic movement rather than
static demonstration. This approach suggests an identity that, though rooted in
structural logic, follows fluid, emergent pathways.

By weaving multiple ovals in wave-like arcs and allowing intersections (yet no
exact path overlaps), the artwork gains a tapestry-like density: each shape
resonates with neighbors, forming a layered interplay of logic and spontaneity.
Line thickness alternates gently to enhance the textual richness, further pushing
the piece from textbook geometry into aesthetic expression—revealing that
algorithmic forms can, indeed, serve as an evocative medium of self-discovery.

### Technical Approach

1. **Flow Field Distribution**:
   - We define a noise-based flow field across the canvas. For each potential
     “seed” position, we read the flow angle from the field and displace the
     center of a Cassini oval accordingly, creating wave-like arcs.
2. **Cassini Variation**:
   - Each shape uses distinct parameters for the Cassini equation, ensuring
     variations in loop sizes, figure-eight shapes, or near-circles. This
     includes randomizing the foci distance and the “constant” that
     determines each curve’s shape.
3. **No Overlapping Paths**:
   - Shapes can intersect visually, but we do not place identical or
     parallel-traced shapes on top of each other. Each shape is a unique
     path in `pathData`.
4. **Layering & Line Weights**:
   - We randomly choose line widths within a small range to create a
     textured feel. We keep opacity at 0.8 for clarity of overlaps.
5. **SVG Consistency**:
   - The entire approach stores path data in `pathData[colorIndex]`
     so the final lines on the canvas exactly match the SVG output.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 133 - 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 = '133';          // 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)
 * =======================================
 */

// We'll define the general approach in an object
let generationRules = {
    // Flow field resolution & amplitude
    flowScale: 0.002,    // noise scale for flow
    flowStrength: 150,   // how strong the displacement is
    seedsCount: 30,      // how many "seed" positions across the width
    minDistance: 40,     // min distance between shape centers to avoid repetition
    stepsPerCassini: 400, // sampling resolution for each Cassini shape

    // Cassini param ranges
    fociDistMin: 60,
    fociDistMax: 140,
    shapeParamMin: 2000,   // b² minimum
    shapeParamMax: 30000,  // b² maximum
};

/**
 * =======================================
 * 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 = 2;         // Base stroke weight
let pathData = [];                 // Storing path data for SVG

// We'll store shape info in an array
let cassiniShapes = [];

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

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

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

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

    // stroke weight accounted for in margin
    workAreaMarginPixels += strokeWeightValue / 2;

    // color selection
    selectColors();

    // initialize pathData
    initializePathData();

    // generate shapes
    background(255);
    drawShapes();
    noLoop();
}

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

function selectColors() {
    // pick between 3 to 7 colors
    let numColorsToUse = floor(random(3, 8));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(indices[idx]);
        indices.splice(idx, 1);
    }
    return selected.sort((a, b) => a - b);
}

function initializePathData() {
    pathData = [];
    pathData[0] = ''; // combined
    for (let idx of selectedColorIndices) {
        pathData[idx] = '';
    }
}

/**
 * =======================================
 * Main Drawing
 * =======================================
 */

function drawShapes() {
    // generate flow-based seed positions
    let seeds = generateSeedPositions();

    // create Cassini shapes at each seed
    cassiniShapes = [];
    for (let s of seeds) {
        let cIndex = random(selectedColorIndices);
        // vary line weight slightly
        let lineW = random(1.5, 2.5);

        // random Cassini params
        let fociDist = random(generationRules.fociDistMin, generationRules.fociDistMax);
        let shapeParam = random(generationRules.shapeParamMin, generationRules.shapeParamMax);

        let pts = generateCassiniPoints(s.x, s.y, fociDist, shapeParam);
        if (pts.length > 10) {
            // store
            cassiniShapes.push({
                cx: s.x,
                cy: s.y,
                colorIndex: cIndex,
                lineWeight: lineW,
                points: pts
            });
            // add path data
            addCassiniPathToData(cIndex, pts);
        }
    }

    // actually draw them on the canvas
    for (let shape of cassiniShapes) {
        applyStrokeWithOpacity(colors[shape.colorIndex].hex);
        strokeWeight(shape.lineWeight);

        beginShape();
        for (let pt of shape.points) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

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

/**
 * Generate seed positions with a flow field
 */
function generateSeedPositions() {
    let seeds = [];
    let spacing = (width - 2 * workAreaMarginPixels) / (generationRules.seedsCount - 1);
    if (spacing < 10) spacing = 10;

    for (let i = 0; i < generationRules.seedsCount; i++) {
        // basic x position
        let xPos = workAreaMarginPixels + i * spacing;
        // sample noise for y offset
        let flowAngle = noise(xPos * generationRules.flowScale, 0) * TWO_PI;
        let offset = sin(flowAngle) * generationRules.flowStrength;
        // clamp
        let yPos = (height / 2) + offset;
        if (yPos < workAreaMarginPixels) yPos = workAreaMarginPixels;
        if (yPos > height - workAreaMarginPixels) yPos = height - workAreaMarginPixels;

        // check distance from prior seeds, skip if too close
        let tooClose = false;
        for (let s of seeds) {
            let dd = dist(xPos, yPos, s.x, s.y);
            if (dd < generationRules.minDistance) {
                tooClose = true;
                break;
            }
        }
        if (!tooClose) seeds.push({ x: xPos, y: yPos });
    }

    return seeds;
}

/**
 * Generate Cassini points in "param + bracket search" approach
 */
function generateCassiniPoints(cx, cy, fociDist, shapeParam) {
    let pts = [];
    let steps = generationRules.stepsPerCassini;

    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);

        let low = 0;
        let high = fociDist * 2; // can tweak
        for (let j = 0; j < 15; j++) {
            let mid = (low + high) / 2;
            let val = cassiniEval(cx, cy, mid, theta, fociDist, shapeParam);
            if (val > 0) {
                high = mid;
            } else {
                low = mid;
            }
        }
        let r = (low + high) / 2;
        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);
        pts.push({ x: px, y: py });
    }
    return pts;
}

/**
 * Cassini condition: distance to focus1 * distance to focus2 = shapeParam
 */
function cassiniEval(cx, cy, r, theta, fociDist, shapeParam) {
    let px = cx + r * cos(theta);
    let py = cy + r * sin(theta);

    let fx1 = cx - fociDist / 2;
    let fx2 = cx + fociDist / 2;

    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);

    return (d1 * d2) - shapeParam;
}

/**
 * Add Cassini path to pathData
 */
function addCassiniPathToData(cIndex, pts) {
    if (pts.length < 2) return;
    let pathStr = pathData[cIndex] || '';

    let start = pts[0];
    pathStr += `M${start.x.toFixed(2)},${start.y.toFixed(2)}`;
    for (let i = 1; i < pts.length; i++) {
        pathStr += ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
    }
    pathStr += ` Z `;

    pathData[cIndex] = pathStr;
    pathData[0] += pathStr;
}

/**
 * Markers & palette
 */

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

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

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

/**
 * Reset & Key Handling
 */

function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

/**
 * SVG Export
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Individual
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.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 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((cIndex, idx) => {
            svg += addSegmentsSVG(cIndex, idx + 1);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svg += addSegmentsSVG(activeColor, idx);
    }

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

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

    // single path for all shapes of that color
    let pData = pathData[cIndex];
    if (pData && pData.trim() !== '') {
        svg += `<path d="${pData}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    }

    // color bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(cIndex);
    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="${cObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Layered Cassini Occlusion)
=======================================

### Title: *Layered Cassini Occlusion*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, layered occlusion, polygon clipping, line-based depth,
              geometry, parametric curves, self-expression

### Conceptual Framework

In "Layered Cassini Occlusion," I treat each Cassini oval as a solid outline that
physically conceals any earlier lines beneath it. By algorithmically subtracting
overlapping regions from the shapes below, every upper oval appears to mask out
underlying strokes—yet we employ no fill color at all. This layered approach parallels
how certain facets of identity can overshadow earlier aspects, while still forming a
cohesive whole. The resulting composition evokes a sense of depth, hierarchy, and
transformation within a purely line-based environment, illustrating how “invisible
boundaries” can feel strikingly real.

### Technical Approach

1. **Parametric Cassini Curves**: For each shape, we compute a closed polygon from
   sampled Cassini points. This polygon stands in for the “solid” region where lines
   beneath should vanish.
2. **Naive Polygon Clipping**: Before storing a new Cassini shape, we subtract its
   interior from all previously stored shapes. This step ensures that wherever the
   new shape lands, it removes the lines from earlier shapes that would otherwise
   appear underneath. No fill is used; we literally cut the lines away.
3. **SVG Path Consistency**: We track the final, clipped geometry of each shape as
   updated polylines in `pathData`, ensuring the canvas matches the exported SVG
   exactly. If you examine underlying shapes, you’ll see they’re truncated where the
   new shape occludes them.

---
*/

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

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

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

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

const strokeOpacity = 0.8;

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

let generationRules = {
    numShapes: 7,            // how many Cassini shapes to create
    stepsPerShape: 400,      // points used to sample each shape
    minFoci: 50,
    maxFoci: 130,
    minParam: 2000,
    maxParam: 30000
};

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

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

let usedColors = new Set();
let strokeWeightValue = 2; // ~0.5mm line
let pathData = [];         // path commands for each color

// We'll store shapes as polygons for easy occlusion
let shapes = []; // array of { colorIndex, polygon: [...], polyline: [...], strokeWeight }

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

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

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

    selectColors();
    initializePathData();

    background(255);
    drawShapes();
    noLoop();
}

function selectColors() {
    // pick between 3..7 colors
    let numColorsToUse = floor(random(3, 8));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

function initializePathData() {
    pathData = [];
    pathData[0] = '';
    for (let cidx of selectedColorIndices) {
        pathData[cidx] = '';
    }
}

function drawShapes() {
    strokeWeight(strokeWeightValue);

    // Generate shapes one by one, each occluding the ones beneath
    shapes = [];
    for (let i = 0; i < generationRules.numShapes; i++) {
        let fociDist = random(generationRules.minFoci, generationRules.maxFoci);
        let shapeParam = random(generationRules.minParam, generationRules.maxParam);
        let colorIdx = random(selectedColorIndices);
        let strokeW = random(1.5, 2.5);

        // random center
        let cx = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let cy = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Convert Cassini to polygon
        let polygon = buildCassiniPolygon(cx, cy, fociDist, shapeParam, generationRules.stepsPerShape);

        if (polygon.length < 5) {
            // skip degenerate
            continue;
        }

        // This new shape will occlude the lines of previous shapes
        for (let s of shapes) {
            // Clip s's polygon by removing the interior of "polygon"
            s.polygon = polygonDifference(s.polygon, polygon);
        }

        // Store this new shape
        shapes.push({
            colorIndex: colorIdx,
            strokeWeight: strokeW,
            polygon: polygon // not clipped yet
        });
    }

    // Convert final polygons to polylines & path data
    for (let s of shapes) {
        let polyline = polygonToPolyline(s.polygon);
        s.polyline = polyline;
        addPolylineToPathData(s.colorIndex, polyline, true);
    }

    // Render on canvas
    noFill();
    for (let s of shapes) {
        applyStrokeWithOpacity(colors[s.colorIndex].hex);
        strokeWeight(s.strokeWeight);
        beginShape();
        for (let pt of s.polyline) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);
    }

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

/**
 * Build a Cassini shape as a closed polygon (list of {x, y})
 */
function buildCassiniPolygon(cx, cy, fociDist, shapeParam, steps) {
    let pts = [];
    for (let i = 0; i < steps; i++) {
        let theta = map(i, 0, steps, 0, TWO_PI);
        // bracket search
        let low = 0, high = fociDist * 2;
        for (let j = 0; j < 15; j++) {
            let mid = (low + high) / 2;
            let val = cassiniEval(cx, cy, mid, theta, fociDist, shapeParam);
            if (val > 0) high = mid; else low = mid;
        }
        let r = (low + high) / 2;
        let px = cx + r * cos(theta);
        let py = cy + r * sin(theta);
        pts.push({x: px, y: py});
    }
    return pts;
}

/**
 * Cassini condition: dist(focus1)*dist(focus2)=shapeParam
 */
function cassiniEval(cx, cy, r, theta, foci, param) {
    let px = cx + r * cos(theta);
    let py = cy + r * sin(theta);
    let fx1 = cx - foci/2;
    let fx2 = cx + foci/2;
    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);
    return (d1*d2)-param;
}

/**
 * polygonDifference(A, B):
 * Remove from A any region that overlaps B. 
 * This is a naive version—replace with robust library for real usage.
 */
function polygonDifference(polyA, polyB) {
    // We'll do a simplistic approach:
    // 1) Convert polyA to small segments
    // 2) Discard any segment whose midpoint lies inside polyB
    // 3) Re-stitch segments that remain
    let clipped = [];
    let segA = polygonToSegments(polyA);
    for (let seg of segA) {
        let mx = (seg.x1 + seg.x2)*0.5;
        let my = (seg.y1 + seg.y2)*0.5;
        if (!pointInPolygon({x:mx,y:my}, polyB)) {
            // keep
            clipped.push(seg);
        }
    }
    return segmentsToPolygon(clipped);
}

/**
 * Convert polygon to line segments
 */
function polygonToSegments(poly) {
    let segments = [];
    for (let i=0; i<poly.length; i++) {
        let p1 = poly[i];
        let p2 = poly[(i+1)%poly.length];
        segments.push({x1:p1.x, y1:p1.y, x2:p2.x, y2:p2.y});
    }
    return segments;
}

/**
 * Convert line segments back to polygon by connecting them in order
 */
function segmentsToPolygon(segs) {
    if (segs.length < 2) return [];
    // naive approach: just chain them
    // real approach would reorder & remove open ends
    // We'll just place them in the existing order
    let poly = [];
    // start with seg0
    let current = segs[0];
    poly.push({x: current.x1, y: current.y1});
    poly.push({x: current.x2, y: current.y2});
    let lastX = current.x2, lastY = current.y2;
    let used = [0];
    for (let i=1; i<segs.length; i++) {
        // find a segment that starts with lastX,lastY
        let found = -1;
        for (let k=0; k<segs.length; k++) {
            if (!used.includes(k)) {
                if (dist(segs[k].x1, segs[k].y1, lastX, lastY)<0.01) {
                    found = k; break;
                }
                if (dist(segs[k].x2, segs[k].y2, lastX, lastY)<0.01) {
                    // flip
                    let tmp = segs[k].x1; segs[k].x1=segs[k].x2; segs[k].x2=tmp;
                    tmp = segs[k].y1; segs[k].y1=segs[k].y2; segs[k].y2=tmp;
                    found = k; break;
                }
            }
        }
        if (found>=0) {
            used.push(found);
            poly.push({x: segs[found].x2, y: segs[found].y2});
            lastX = segs[found].x2; lastY = segs[found].y2;
        } else {
            // can't chain further
            break;
        }
    }
    if (poly.length<3) return [];
    return poly;
}

/**
 * Check if point is inside polygon (ray-casting or winding)
 * We'll do a simple even-odd approach
 */
function pointInPolygon(pt, poly) {
    let c=false;
    for (let i=0,j=poly.length-1; i<poly.length; j=i++) {
        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) c=!c;
    }
    return c;
}

/**
 * Convert final polygon to a polyline for rendering
 */
function polygonToPolyline(poly) {
    // It's basically the same list, but we treat it as a closed loop for shape
    return poly;
}

/**
 * Add polyline to path data
 */
function addPolylineToPathData(cIndex, poly, close=true) {
    if (!poly || poly.length<2) return;
    let pStr = pathData[cIndex] || '';
    let s = poly[0];
    pStr += `M${s.x.toFixed(2)},${s.y.toFixed(2)}`;
    for (let i=1; i<poly.length; i++){
        pStr += ` L${poly[i].x.toFixed(2)},${poly[i].y.toFixed(2)}`;
    }
    if (close) pStr+= ' Z ';
    pathData[cIndex] = pStr;
    pathData[0]+=pStr;
}

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

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

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

/**
 * Reset
 */
function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

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

    let usedColorsOrdered= selectedColorIndices;
    usedColorsOrdered.forEach((cIndex)=>{
        let colorSVG = generateSVG(cIndex);
        let cname = colors[cIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${cIndex}-${cname}-PORTRAIT-${timestamp}.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"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
    svg+= addMarkersSVG();

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

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

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

    // palette bar
    let usedColorsOrdered= selectedColorIndices;
    let i = usedColorsOrdered.indexOf(cIndex);
    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="${cObj.hex}"
         stroke-opacity="${strokeOpacity}"
         stroke-width="${barHeight}"
         fill="none"/>n`;
    }

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

function addMarkersSVG(){
    const sw=1;
    const 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">
    <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);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Refractions of Cassini)
=======================================

### Title: *Refractions of Cassini*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, parametric curves, line-based shading, identity,
              layering, geometry, minimal fill

### Conceptual Framework

“Refractions of Cassini” visualizes my identity as a collection of Cassini ovals—each
representing a distinct facet of self—arranged across the canvas in a free-form layout.
Rather than letting them remain as pure outlines, I accent each shape with subtle
line-based shading, producing a sense of density or “filling” while still using only
strokes (no actual fill or gradients). The resulting tapestry suggests how different
aspects of self can overlap and interact, all remaining visible rather than occluding
one another. These “refractions” highlight the underlying mathematical form of Cassini
curves—rooted in dual foci—yet transform it into an artful expression of multiplicity,
interplay, and emergent coherence.

### Technical Approach

- **Cassini Boundaries**: For each shape, we parametrize a Cassini curve via bracket
  searching for r(θ), storing boundary points in a polyline. We track that boundary
  in `pathData` so both canvas and SVG remain consistent.
- **Line-based Shading**: Inside each Cassini shape, we draw short, evenly spaced
  line segments that lie within the boundary. No fill is used; instead, we rely
  on repeated strokes to imply density. We test each candidate line’s endpoints
  against a point-in-polygon check on the Cassini boundary.
- **All Lines Visible**: Shapes do not occlude one another. Overlapping lines remain
  on top, creating a layered mosaic of boundary and hatch lines. This choice embodies
  a perspective where all facets of identity remain visible, even if they converge
  or collide.

---
*/

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

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

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

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

const strokeOpacity = 0.8;

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

let generationRules = {
    shapeCount: 5,               // number of Cassini shapes
    stepsPerShape: 400,          // boundary sampling resolution
    minFoci: 60,
    maxFoci: 140,
    minParam: 3000,
    maxParam: 25000,
    shadingGap: 8,               // spacing for interior line shading
    shadingAngle: 0.4 * Math.PI, // angle for interior hatch lines
    shadingLineLength: 10        // length of each interior shading stroke
};

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

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

let usedColors = new Set();
let strokeWeightValue;            
let pathData;			         

// We'll store each shape's final lines: { colorIndex, boundary: [...], shading: [...] }
let shapeData = [];

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

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

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

    adjustForStrokeWeight();
    selectColors();
    initializePathData();

    background(255);
    drawShapes();
    noLoop();
}

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

function selectColors() {
    let numColorsToUse = floor(random(3, 8)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

function initializePathData() {
    pathData = [];
    pathData[0] = '';
    for (let c of selectedColorIndices) {
        pathData[c] = '';
    }
}

/**
 * Main drawing
 */
function drawShapes() {
    // Generate Cassini shapes at random positions
    shapeData = [];
    for (let i=0; i<generationRules.shapeCount; i++){
        let foci = random(generationRules.minFoci, generationRules.maxFoci);
        let param = random(generationRules.minParam, generationRules.maxParam);

        let cx = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let cy = random(workAreaMarginPixels, height - workAreaMarginPixels);

        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        let boundary = buildCassiniBoundary(cx, cy, foci, param, generationRules.stepsPerShape);
        if(boundary.length<5) continue; // skip degenerate

        // Generate shading lines inside the boundary
        let shadingLines = buildShapeShading(boundary, generationRules.shadingGap, generationRules.shadingAngle, generationRules.shadingLineLength);

        shapeData.push({
            colorIndex: cIndex,
            boundary,
            shading: shadingLines
        });
    }

    // convert shapes to pathData
    for (let shp of shapeData) {
        // add boundary to path
        addPolylineToPathData(shp.colorIndex, shp.boundary, true);

        // add each shading line to path
        for (let seg of shp.shading) {
            let segArr = [ seg.start, seg.end ];
            addPolylineToPathData(shp.colorIndex, segArr, false);
        }
    }

    // Render to canvas
    noFill();
    for (let shp of shapeData) {
        // boundary
        applyStrokeWithOpacity(colors[shp.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        beginShape();
        for (let p of shp.boundary) {
            vertex(p.x, p.y);
        }
        endShape(CLOSE);

        // shading lines
        for (let seg of shp.shading){
            line(seg.start.x, seg.start.y, seg.end.x, seg.end.y);
        }
    }

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

/**
 * Build Cassini boundary as polyline
 */
function buildCassiniBoundary(cx, cy, fociDist, shapeParam, steps) {
    let pts = [];
    for (let i=0; i<steps; i++){
        let theta = map(i, 0, steps, 0, TWO_PI);
        // bracket search
        let low=0, high=fociDist*2;
        for (let j=0; j<15; j++){
            let mid=(low+high)/2;
            let val = cassiniEval(cx, cy, mid, theta, fociDist, shapeParam);
            if(val>0) high=mid; else low=mid;
        }
        let r = (low+high)/2;
        let px = cx + r*cos(theta);
        let py = cy + r*sin(theta);
        pts.push({x:px, y:py});
    }
    // close it up
    return pts;
}

/**
 * Evaluate Cassini: dist(f1)*dist(f2) - shapeParam
 */
function cassiniEval(cx, cy, r, theta, foci, param) {
    let px = cx + r*cos(theta);
    let py = cy + r*sin(theta);
    let fx1 = cx - foci/2;
    let fx2 = cx + foci/2;
    let d1 = dist(px, py, fx1, cy);
    let d2 = dist(px, py, fx2, cy);
    return (d1*d2) - param;
}

/**
 * Build shading lines inside polygon
 */
function buildShapeShading(boundary, gap, angle, segLen) {
    // We'll pick lines in bounding box and keep only those fully inside
    let b = getBounds(boundary);
    let shadingSegments = [];
    
    // We'll create parallel lines at 'angle'
    // We'll step across bounding box in increments of 'gap'
    // For each line, we do a short segment that extends from some start to start+segLen
    // Then we check if both endpoints are inside boundary

    let dx = gap*cos(angle);
    let dy = gap*sin(angle);
    // We'll do a grid in bounding box coords
    let minLen = 3; // skip tiny lines
    let boundingW = b.maxX - b.minX;
    let boundingH = b.maxY - b.minY;
    let stepsX = boundingW / gap + 2;
    let stepsY = boundingH / gap + 2;
    
    for (let ix=0; ix<stepsX; ix++){
        for (let iy=0; iy<stepsY; iy++){
            let startx = b.minX + ix*dx + iy*(-dy);
            let starty = b.minY + ix*dy + iy*(dx); 
            // rotate the approach a bit to produce diagonal lines
            let endx = startx + segLen*cos(angle);
            let endy = starty + segLen*sin(angle);

            let st = {x:startx, y:starty};
            let ed = {x:endx, y:endy};

            // check if both inside boundary
            if (pointInPoly(st, boundary) && pointInPoly(ed, boundary)){
                let distS = dist(st.x, st.y, ed.x, ed.y);
                if(distS>minLen){
                    shadingSegments.push({ start: st, end: ed });
                }
            }
        }
    }
    return shadingSegments;
}

/**
 * Basic point in polygon test (even-odd)
 */
function pointInPoly(pt, poly) {
    let c = false;
    for (let i=0, j=poly.length-1; i<poly.length; j=i++) {
        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) c=!c;
    }
    return c;
}

/**
 * bounding box
 */
function getBounds(poly){
    let minX=Infinity, maxX=-Infinity;
    let minY=Infinity, maxY=-Infinity;
    for(let p of poly){
        if(p.x<minX) minX=p.x;
        if(p.x>maxX) maxX=p.x;
        if(p.y<minY) minY=p.y;
        if(p.y>maxY) maxY=p.y;
    }
    return {minX, maxX, minY, maxY};
}

/**
 * Add polyline to path data
 */
function addPolylineToPathData(cIndex, pts, close){
    if(!pts||pts.length<2) return;
    let pStr = pathData[cIndex] || '';
    pStr+= `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
    for (let i=1; i<pts.length; i++){
        pStr+= ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
    }
    if(close && pts.length>2) pStr+=' Z ';
    pathData[cIndex] = pStr;
    pathData[0]+= pStr;
}

/**
 * Markers & palette
 */

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

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

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

/**
 * Reset & Key
 */
function resetCanvas() {
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

/**
 * SVG Export
 */
function saveSVGs() {
    const timestamp= Date.now();

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

    // Individual
    let usedColorsOrdered= selectedColorIndices;
    usedColorsOrdered.forEach((cIndex)=>{
        let colorSVG= generateSVG(cIndex);
        let cName= colors[cIndex].name.toUpperCase();
        let fileName= `${dayNumber}-0${cIndex}-${cName}-PORTRAIT-${timestamp}.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"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
    svg += addMarkersSVG();

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

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

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

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

    // palette bar
    let usedColorsOrdered= selectedColorIndices;
    let i= usedColorsOrdered.indexOf(cIndex);
    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="${cObj.hex}"
                 stroke-opacity="${strokeOpacity}"
                 stroke-width="${barHeight}"
                 fill="none" />n`;
    }

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

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

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

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Cassini Lemniscates With Shading)
=======================================

### Title: *Cassini Lemniscates With Shading*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, lemniscates, parametric curves, line-based shading,
              figure-eight, identity, geometry

### Conceptual Framework

In "Cassini Lemniscates With Shading," I portray my identity as a collection of
distinctively *Cassini* shapes—often taking on figure-eight or “waisted” forms that
emphasize the dual-foci nature of these curves. By tuning the parameters to move away
from near-circular values, each shape reveals a visible “pinch” or loop. To infuse
these mathematical outlines with a sense of warmth and depth, I overlay
line-based shading in their interiors, while never using fills or occlusions—hence
maintaining the purity of line. Each shape coexists visually, with no shape hiding
another. This open layering signifies how multiple facets of identity can remain
independently visible and simultaneously intertwined.

### Technical Approach

- **Cassini Lemniscates**: For each shape, I use bracket searching to find r for each
  angle θ, ensuring I pick parameter ranges that are likely to yield figure-eights or
  distinctly pinched ovals (not near-circles).
- **Param Ranges**: 
  - The distance between foci, c, is selected from a range that fosters waist-like
    shapes (e.g., 70..130).
  - The Cassini constant b² is chosen near c², encouraging figure-eight shapes or
    strongly pinched loops.
- **Shading**: Each shape’s interior is lightly hatched via short, angled lines that
  remain entirely within the boundary, implying a filled look with pure strokes.
- **Only Used Colors**: At the end, I display palette bars for the exact colors that
  appear in the final drawing—no unused colors appear on the bar.
- **No Occlusion**: Overlapping shapes all remain visible. Every line is drawn,
  representing the concurrency of all facets of self.

---
*/

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

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

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

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

const strokeOpacity = 0.8;

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

let generationRules = {
    shapeCount: 5,        // number of Cassini shapes
    stepsPerShape: 500,   // boundary sampling resolution
    minFoci: 70,
    maxFoci: 130,
    paramSpread: 0.5,    // how close b² is to c² (like c² ± paramSpread * c²)
    shadingGap: 8,       // spacing for interior line shading
    shadingAngle: 0.35 * Math.PI, 
    shadingLineLength: 12
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;

let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue = 2; 
let pathData = [];
let shapeData = [];

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

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

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

    selectColors();
    initializePathData();

    background(255);
    drawShapes();
    noLoop();
}

function selectColors() {
    // pick between 3..6 colors
    let numColors = floor(random(3, 7));
    selectedColorIndices = selectRandomColorIndices(numColors);
}

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

function initializePathData() {
    pathData = [];
    pathData[0] = '';
    for (let c of selectedColorIndices){
        pathData[c] = '';
    }
}

/**
 * Main drawing
 */
function drawShapes() {
    shapeData = [];

    for (let i=0; i< generationRules.shapeCount; i++){
        let cVal = random(generationRules.minFoci, generationRules.maxFoci);
        // b² close to c² => figure-eight or pinched loop
        let base = cVal*cVal;
        let minB2 = base*(1 - generationRules.paramSpread);
        let maxB2 = base*(1 + generationRules.paramSpread);
        let b2 = random(minB2, maxB2);

        let cx= random(workAreaMarginPixels, width-workAreaMarginPixels);
        let cy= random(workAreaMarginPixels, height-workAreaMarginPixels);

        let cIndex = random(selectedColorIndices);
        usedColors.add(cIndex);

        let boundary = buildCassiniBoundary(cx, cy, cVal, b2, generationRules.stepsPerShape);
        if(boundary.length<5) continue;

        let shading = buildShapeShading(boundary, generationRules.shadingGap, generationRules.shadingAngle, generationRules.shadingLineLength);

        shapeData.push({
            colorIndex:cIndex,
            boundary,
            shading
        });
    }

    // Convert shapes to pathData
    for (let shp of shapeData){
        addPolylineToPathData(shp.colorIndex, shp.boundary, true);
        for(let seg of shp.shading){
            let segArr= [seg.start, seg.end];
            addPolylineToPathData(shp.colorIndex, segArr, false);
        }
    }

    // Render
    noFill();
    for (let shp of shapeData){
        applyStrokeWithOpacity(colors[shp.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        // boundary
        beginShape();
        for(let p of shp.boundary){
            vertex(p.x, p.y);
        }
        endShape(CLOSE);

        // shading
        for(let seg of shp.shading){
            line(seg.start.x, seg.start.y, seg.end.x, seg.end.y);
        }
    }

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

function buildCassiniBoundary(cx, cy, cVal, b2Val, steps){
    let pts=[];
    for (let i=0; i<steps; i++){
        let theta = map(i, 0, steps, 0, TWO_PI);

        // bracket
        let low=0, high=cVal*2;
        for(let j=0; j<15; j++){
            let mid=(low+high)*0.5;
            let val = cassiniEval(cx, cy, mid, theta, cVal, b2Val);
            if(val>0) high=mid; else low=mid;
        }
        let r=(low+high)/2;
        let px= cx + r*cos(theta);
        let py= cy + r*sin(theta);
        pts.push({x:px,y:py});
    }
    return pts;
}

/**
 * Evaluate (dist to focus1 * dist to focus2) - b²
 */
function cassiniEval(cx, cy, r, theta, cVal, b2Val){
    let px= cx + r*cos(theta);
    let py= cy + r*sin(theta);
    let fx1= cx - cVal/2;
    let fx2= cx + cVal/2;
    let d1= dist(px, py, fx1, cy);
    let d2= dist(px, py, fx2, cy);
    return (d1*d2) - b2Val;
}

/**
 * build shading lines
 */
function buildShapeShading(boundary, gap, angle, segLen){
    let b = getPolyBounds(boundary);
    let shadingSegments = [];

    let dx= gap*cos(angle);
    let dy= gap*sin(angle);

    let boundingW= b.maxX - b.minX;
    let boundingH= b.maxY - b.minY;
    let stepsX= boundingW/gap + 2;
    let stepsY= boundingH/gap + 2;

    for(let ix=0; ix< stepsX; ix++){
        for(let iy=0; iy< stepsY; iy++){
            let startx= b.minX + ix*dx + iy*(-dy);
            let starty= b.minY + ix*dy + iy*(dx);

            let endx= startx + segLen*cos(angle);
            let endy= starty + segLen*sin(angle);

            let st={x:startx,y:starty};
            let ed={x:endx,y:endy};

            if (pointInPoly(st, boundary) && pointInPoly(ed, boundary)){
                shadingSegments.push({start:st, end:ed});
            }
        }
    }
    return shadingSegments;
}

function getPolyBounds(poly){
    let minX=Infinity, maxX=-Infinity;
    let minY=Infinity, maxY=-Infinity;
    for(let p of poly){
        if(p.x<minX) minX=p.x;
        if(p.x>maxX) maxX=p.x;
        if(p.y<minY) minY=p.y;
        if(p.y>maxY) maxY=p.y;
    }
    return {minX, maxX, minY, maxY};
}

/**
 * point in polygon (even-odd)
 */
function pointInPoly(pt, poly){
    let c=false;
    for(let i=0,j=poly.length-1; i<poly.length; j=i++){
        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) c=!c;
    }
    return c;
}

/**
 * add polyline to pathData
 */
function addPolylineToPathData(cIndex, pts, closePath){
    if(pts.length<2) return;
    let pStr = pathData[cIndex] || '';
    pStr+= `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
    for(let i=1; i<pts.length; i++){
        pStr+= ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
    }
    if(closePath && pts.length>2){
        pStr+= ' Z ';
    }
    pathData[cIndex] = pStr;
    pathData[0]+= pStr;
}

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

function addColorPaletteBars(){
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    if(usedColorsOrdered.length<1) return;

    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;

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

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

function resetCanvas(){
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

    let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIndex)=>{
        let cSVG= generateSVG(cIndex);
        let cName= colors[cIndex].name.toUpperCase();
        let fileName= `${dayNumber}-0${cIndex}-${cName}-PORTRAIT-${ts}.svg`;
        saveSVGFile(cSVG, fileName);
    });
}

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

    if(activeColor===0){
        let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
        usedColorsOrdered.forEach((cIndex, idx)=>{
            svg+= addSegmentsSVG(cIndex, idx+1);
        });
    } else {
        let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
        let idx= usedColorsOrdered.indexOf(activeColor)+1;
        svg+= addSegmentsSVG(activeColor, idx);
    }

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

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

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

function addMarkersSVG(){
    let sw=1;
    let 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">
    <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);
}

// Day 133
/*

=======================================
  Day 133 Self-Portrait (Pinched Cassini Loops)
=======================================

### Title: *Pinched Cassini Loops*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              cassini ovals, lemniscate, parametric curves, line-based shading,
              figure-eight, geometry, identity

### Conceptual Framework

In "Pinched Cassini Loops," I consciously force the Cassini parameters to produce 
“pinched” forms or figure‐eight lemniscates—going beyond near‐circular approximations 
to clearly highlight the dual‐foci essence of Cassini geometry. Each shape thus 
becomes a metaphor for the tension of having multiple internal “pulls” within one’s 
identity, sometimes yielding symmetrical loops, sometimes forming distinct lobes. 
By layering minimal line shading, I give each loop a sense of embodied presence 
while preserving the raw line aesthetic and ensuring all shapes remain visible.

### Technical Approach

- **Aggressive Parameter Range**: 
  - We set c in [80..140]. 
  - We pick b² to be in [0.75..1.25]*c². That ensures a range from 
    definitely pinched (b < c) to near symmetrical loops (b ≈ c).
- **Bracket Search**: We sample angles θ in [0..2π], bracket searching for the radius 
  that satisfies (distance to f1 * distance to f2) = b². 
- **Skip Near‐Degenerate Cases**: If the final boundary is too small or if all 
  points cluster too closely, we skip that shape.
- **Line Shading**: We rely on short parallel strokes inside each loop to create 
  a fill‐like aesthetic without using any fill function.

---
*/

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

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

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    shapeCount: 6,              
    stepsPerShape: 500,         
    cMin: 80,                   
    cMax: 140,
    b2RelativeMin: 0.75,        
    b2RelativeMax: 1.25,        
    shadingGap: 8,
    shadingAngle: 0.35*Math.PI,
    shadingLen: 14
};

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

let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue = 2;
let pathData = [];
let shapeData = [];

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

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

    selectColors();
    initializePathData();

    background(255);
    drawShapes();
    noLoop();
}

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

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

function initializePathData(){
    pathData=[];
    pathData[0] = '';
    for(let c of selectedColorIndices){
        pathData[c] = '';
    }
}

/**
 * main
 */
function drawShapes() {
    shapeData=[];

    for(let i=0; i<generationRules.shapeCount; i++){
        let cVal = random(generationRules.cMin, generationRules.cMax);
        // b² near c²
        let base= cVal*cVal;
        let minB2= base* generationRules.b2RelativeMin;
        let maxB2= base* generationRules.b2RelativeMax;
        let b2 = random(minB2, maxB2);

        let cx = random(workAreaMarginPixels, width-workAreaMarginPixels);
        let cy = random(workAreaMarginPixels, height-workAreaMarginPixels);

        let cIndex= random(selectedColorIndices);
        usedColors.add(cIndex);

        let boundary= buildCassiniBoundary(cx, cy, cVal, b2, generationRules.stepsPerShape);
        if(boundary.length<5) continue; // skip

        // check bounding box size
        let bBox= getPolyBounds(boundary);
        let w= bBox.maxX - bBox.minX;
        let h= bBox.maxY - bBox.minY;
        if(w<20||h<20) {
            // too small to see pinch
            continue;
        }

        let shading= buildHatching(boundary, generationRules.shadingGap, generationRules.shadingAngle, generationRules.shadingLen);

        shapeData.push({
            colorIndex: cIndex,
            boundary,
            shading
        });
    }

    // convert shapes to path
    for(let shp of shapeData){
        addPolylineToPathData(shp.colorIndex, shp.boundary, true);
        for(let seg of shp.shading){
            let segArr= [seg.start, seg.end];
            addPolylineToPathData(shp.colorIndex, segArr, false);
        }
    }

    // render
    noFill();
    for(let shp of shapeData){
        applyStrokeWithOpacity(colors[shp.colorIndex].hex);
        strokeWeight(strokeWeightValue);

        beginShape();
        for(let p of shp.boundary){
            vertex(p.x, p.y);
        }
        endShape(CLOSE);

        // shading
        for(let s of shp.shading){
            line(s.start.x, s.start.y, s.end.x, s.end.y);
        }
    }

    drawMarkers();
    addColorPaletteBars();
}

/**
 * Build a Cassini shape
 */
function buildCassiniBoundary(cx, cy, cVal, b2Val, steps){
    let pts=[];
    for(let i=0; i<steps; i++){
        let theta= map(i,0,steps,0,TWO_PI);

        let low=0, high=cVal*2;
        for(let j=0; j<15; j++){
            let mid= (low+high)*0.5;
            let v= cassiniEval(cx, cy, mid, theta, cVal, b2Val);
            if(v>0) high= mid; else low= mid;
        }
        let r= (low+high)/2;
        let px= cx + r*cos(theta);
        let py= cy + r*sin(theta);
        pts.push({x:px,y:py});
    }
    return pts;
}

/**
 * Evaluate Cassini
 */
function cassiniEval(cx, cy, r, theta, cVal, b2Val){
    let px= cx + r*cos(theta);
    let py= cy + r*sin(theta);
    let fx1= cx - cVal/2;
    let fx2= cx + cVal/2;
    let d1= dist(px,py, fx1, cy);
    let d2= dist(px,py, fx2, cy);
    return (d1*d2)- b2Val;
}

/**
 * build hatching lines
 */
function buildHatching(boundary, gap, angle, segLen){
    let b = getPolyBounds(boundary);
    let lines = [];

    let dx= gap* cos(angle);
    let dy= gap* sin(angle);

    let w= b.maxX- b.minX;
    let h= b.maxY- b.minY;
    let stepsX= w/gap +2;
    let stepsY= h/gap +2;

    for(let ix=0; ix< stepsX; ix++){
        for(let iy=0; iy< stepsY; iy++){
            let startx= b.minX + ix*dx + iy*(-dy);
            let starty= b.minY + ix*dy + iy*(dx);

            let endx= startx + segLen*cos(angle);
            let endy= starty + segLen*sin(angle);

            let st={x:startx,y:starty};
            let ed={x:endx,y:endy};

            if(pointInPoly(st, boundary) && pointInPoly(ed, boundary)){
                lines.push({start:st, end:ed});
            }
        }
    }
    return lines;
}

function pointInPoly(pt, poly){
    let c=false;
    for(let i=0,j=poly.length-1; i<poly.length; j=i++){
        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) c=!c;
    }
    return c;
}

function getPolyBounds(poly){
    let minX= Infinity, maxX=-Infinity;
    let minY= Infinity, maxY=-Infinity;
    for(let p of poly){
        if(p.x<minX) minX=p.x;
        if(p.x>maxX) maxX=p.x;
        if(p.y<minY) minY=p.y;
        if(p.y>maxY) maxY=p.y;
    }
    return {minX, maxX, minY, maxY};
}

/**
 * Add lines to pathData
 */
function addPolylineToPathData(cIndex, pts, close){
    if(pts.length<2) return;
    let pStr= pathData[cIndex]||'';
    pStr+= `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
    for(let i=1; i<pts.length; i++){
        pStr+= ` L${pts[i].x.toFixed(2)},${pts[i].y.toFixed(2)}`;
    }
    if(close && pts.length>2){
        pStr+=' Z ';
    }
    pathData[cIndex] = pStr;
    pathData[0]+= pStr;
}

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

function addColorPaletteBars(){
    let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
    if(usedColorsOrdered.length===0) return;

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

    let numC= usedColorsOrdered.length;
    let totalGaps= (numC-1)*gapSize;
    let segLen= (paletteLength- totalGaps)/numC;
    let xStart= (width - paletteLength)/2;

    strokeWeight(barHeight);

    for(let i=0; i<numC; i++){
        let cIdx= usedColorsOrdered[i];
        applyStrokeWithOpacity(colors[cIdx].hex);
        let x = xStart + i*(segLen+ gapSize);
        line(x, yStart, x+segLen, yStart);
    }
}

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

function resetCanvas(){
    usedColors.clear();
    initializePathData();
    background(255);
    drawShapes();
}

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

    let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIndex)=>{
        let cSVG= generateSVG(cIndex);
        let cName= colors[cIndex].name.toUpperCase();
        let fileName= `${dayNumber}-0${cIndex}-${cName}-PORTRAIT-${ts}.svg`;
        saveSVGFile(cSVG, fileName);
    });
}

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

    if(activeColor===0){
        let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
        usedColorsOrdered.forEach((cIndex, idx)=>{
            svg+= addSegmentsSVG(cIndex, idx+1);
        });
    } else {
        let usedColorsOrdered= Array.from(usedColors).sort((a,b)=>a-b);
        let idx= usedColorsOrdered.indexOf(activeColor)+1;
        svg+= addSegmentsSVG(activeColor, idx);
    }

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

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

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

function addMarkersSVG(){
    let sw=1;
    let 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">
    <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);
}