// Day 049
/*

=======================================
  Day 049 Self-Portrait (Discrete Echoes)
=======================================

### Title: Discrete Echoes

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Discrete Echoes" envisions identity as a collection of scattered markers,
each cluster of lines suggesting fragments of thought or memory. Rather than
forming a continuous or unified whole, these small line clusters emerge at
intervals, isolated yet resonant. Each set of segments radiates outward from
a subtle, invisible center, evoking the idea that one's sense of self is not
a single, coherent entity but a tapestry woven from many discrete strands,
each incomplete on its own. The artwork’s arrangement of sparse clusters
implies that understanding oneself often involves piecing together countless
micro-echoes of perception and recall.

This piece is created in collaboration with you.

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

// For this artwork, we will create clusters of short line segments.
// Each cluster is placed randomly within the work area and consists
// of a small number of line segments radiating out in random directions.
let generationRules = {
    numClusters: 80,           // Number of clusters
    minSegmentsPerCluster: 3,  // Minimum line segments in a cluster
    maxSegmentsPerCluster: 8,  // Maximum line segments in a cluster
    segmentLengthMin: 10,      // Minimum segment length (pixels)
    segmentLengthMax: 50,      // Maximum segment length (pixels)
};

/**
 * =======================================
 * 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 which colors are used
let strokeWeightValue;             // Stroke weight in pixels

// We'll store the path data by color index
// Each entry: {colorIndex: number, pathCommands: [] of "M x y L x y"}
let pathsByColor = {};

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

    // Initialize data structures for paths
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }

    // Generate the artwork
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // About 0.5mm line ~ 2 pixels
    strokeWeightValue = 2;

    // Adjust work area margins slightly
    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);
}

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

function drawClusters() {
    // Clusters placed randomly in work area
    const xMin = workAreaMarginPixels;
    const xMax = width - workAreaMarginPixels;
    const yMin = workAreaMarginPixels;
    const yMax = height - workAreaMarginPixels;

    strokeWeight(strokeWeightValue);

    for (let i = 0; i < generationRules.numClusters; i++) {
        let xCenter = random(xMin, xMax);
        let yCenter = random(yMin, yMax);
        let segmentCount = floor(random(generationRules.minSegmentsPerCluster, generationRules.maxSegmentsPerCluster + 1));
        let chosenColorIndex = random(selectedColorIndices);

        // Apply stroke for the chosen color
        applyStrokeWithOpacity(colors[chosenColorIndex].hex);

        // Generate segments radiating from center
        for (let s = 0; s < segmentCount; s++) {
            let angle = random(TWO_PI);
            let length = random(generationRules.segmentLengthMin, generationRules.segmentLengthMax);
            let x2 = xCenter + cos(angle) * length;
            let y2 = yCenter + sin(angle) * length;

            // Draw line on canvas
            line(xCenter, yCenter, x2, y2);

            // Record path data
            // M xCenter,yCenter L x2,y2
            let cmd = `M${xCenter.toFixed(2)},${yCenter.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
            pathsByColor[chosenColorIndex].push(cmd);
        }
    }
}

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    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();
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    if (pathsByColor[colorIndex] && pathsByColor[colorIndex].length > 0) {
        // Combine all into one path for efficiency
        let d = pathsByColor[colorIndex].join(' ');
        svg += `<path d="${d}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

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

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

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

// Day 049
/*

=======================================
  Day 049 Self-Portrait (Discrete Echoes)
=======================================

### Title: Discrete Echoes (Reimagined)

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Previously, the clusters of lines emerged like tiny explosions, more akin to asterisks, rather than conveying the sense of echoing signals. This revised version reinterprets "Discrete Echoes" as sequences of diminishing lines that follow one another in subtly shifting angles and lengths.

Each cluster now represents a small “echo trail”: a starting line segment and a series of subsequent lines that gradually shorten, drift slightly in orientation, and fade in reach. Rather than radiating outward from a single point in all directions, each cluster forms a small chain of lines, as if an initial impulse rippled out through subtle vibrations, leaving behind traces of its former energy.

In this manner, the artwork evokes the concept of echoes more directly. Instead of instantaneous bursts, we have gently receding sequences that hint at the passage of time and the gradual fading of an original signal. These fragmented trails, scattered across the canvas, can be interpreted as discrete whispers of identity, each set revealing how an idea, a memory, or a facet of self can resonate and then slowly dissipate.

This piece is created in collaboration with you.
---
*/
/*----------------------------------------
    Generated with p5.js
    Day 049 - Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches (note: physically drawn on 12"x12" paper)
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '049';          // 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 = {
    numClusters: 80,           // Number of clusters
    minSegmentsPerCluster: 3,  // Minimum line segments in a cluster
    maxSegmentsPerCluster: 8,  // Maximum line segments in a cluster
    segmentLengthMin: 10,      // Minimum segment length (pixels)
    segmentLengthMax: 50,      // Maximum segment length (pixels)
    angleVariance: 0.1,        // Slight angle variation for echoes
    lengthReductionFactor: 0.7 // Each subsequent echo line is shorter
};

/**
 * =======================================
 * 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 which colors are used
let strokeWeightValue;             // Stroke weight in pixels

// We'll store the path data by color index
let pathsByColor = {};

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

    // Initialize data structures for paths
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }

    // Generate the artwork
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // About 0.5mm line ~ 2 pixels
    strokeWeightValue = 2;

    // Adjust work area margins slightly
    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);
}

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

function drawClusters() {
    // Clusters placed randomly in work area
    const xMin = workAreaMarginPixels;
    const xMax = width - workAreaMarginPixels;
    const yMin = workAreaMarginPixels;
    const yMax = height - workAreaMarginPixels;

    strokeWeight(strokeWeightValue);

    for (let i = 0; i < generationRules.numClusters; i++) {
        let xCenter = random(xMin, xMax);
        let yCenter = random(yMin, yMax);
        let segmentCount = floor(random(generationRules.minSegmentsPerCluster, generationRules.maxSegmentsPerCluster + 1));
        let chosenColorIndex = random(selectedColorIndices);
        let baseAngle = random(TWO_PI);
        let baseLength = random(generationRules.segmentLengthMin, generationRules.segmentLengthMax);

        applyStrokeWithOpacity(colors[chosenColorIndex].hex);

        // Instead of radiating lines, create a small chain of echoes.
        // Start from the cluster center and draw a sequence of lines,
        // each slightly shorter and possibly angled slightly.
        let startX = xCenter;
        let startY = yCenter;
        let currentAngle = baseAngle;
        let currentLength = baseLength;

        for (let s = 0; s < segmentCount; s++) {
            let endX = startX + cos(currentAngle) * currentLength;
            let endY = startY + sin(currentAngle) * currentLength;

            line(startX, startY, endX, endY);

            // Record path data
            let cmd = `M${startX.toFixed(2)},${startY.toFixed(2)} L${endX.toFixed(2)},${endY.toFixed(2)}`;
            pathsByColor[chosenColorIndex].push(cmd);

            // Update for next echo
            startX = endX; 
            startY = endY;
            currentAngle += random(-generationRules.angleVariance, generationRules.angleVariance);
            currentLength *= generationRules.lengthReductionFactor;
        }
    }
}

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    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();
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    if (pathsByColor[colorIndex] && pathsByColor[colorIndex].length > 0) {
        // Combine all into one path for efficiency
        let d = pathsByColor[colorIndex].join(' ');
        svg += `<path d="${d}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    // Add palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

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

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

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

// Day 049
/*

=======================================
  Day 049 Self-Portrait (Discrete Echoes Reimagined Again)
=======================================

### Title: Subtle Ripples

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

In this iteration, the echoes take the form of gentle, curved ripples—like the concentric rings that spread across water's surface when a small pebble disturbs its calm. Instead of scattered lines or explosive starbursts, each cluster now consists of a series of softly bent arcs. These arcs are arranged one after another, each slightly larger and positioned further from the origin, creating a sense of spacing that widens as the echo fades outward.

By aligning these arcs along a chosen orientation and carefully shaping their curves, the artwork evokes the quiet, rhythmic resonance of a signal diminishing over time. Each cluster becomes a localized ripple pattern, representing a faint memory or a subtle theme drifting through the AI’s internal landscape. They are not uniform circles, but gently bowed lines, each a whisper of the initial impulse, receding into silence.

This piece is created in collaboration with you.
---
*/
/*----------------------------------------
    Generated with p5.js
    Day 049 - 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 = '049';          // 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 = {
    numClusters: 50,              // Fewer clusters to make each pattern more distinct
    minArcsPerCluster: 3,         // Minimum arcs in each ripple cluster
    maxArcsPerCluster: 7,         // Maximum arcs in each ripple cluster
    baseArcLengthMin: 30,         // Minimum length of the initial arc
    baseArcLengthMax: 80,         // Maximum length of the initial arc
    arcLengthGrowthFactor: 1.2,   // Each subsequent arc grows in length by this factor
    arcSpacing: 10,               // Vertical spacing between arcs
    arcCurvature: 10,             // How "tall" the arc curves upwards
};

/**
 * =======================================
 * 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 which colors are used
let strokeWeightValue;             // Stroke weight in pixels

// Store path data by color index
let pathsByColor = {};

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

    // Initialize data structures for paths
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }

    // Generate the artwork
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // About 0.5mm line ~ 2 pixels
    strokeWeightValue = 2;

    // Adjust work area margins slightly
    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);
}

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

function drawClusters() {
    // Clusters placed randomly in work area
    const xMin = workAreaMarginPixels;
    const xMax = width - workAreaMarginPixels;
    const yMin = workAreaMarginPixels;
    const yMax = height - workAreaMarginPixels;

    strokeWeight(strokeWeightValue);

    for (let i = 0; i < generationRules.numClusters; i++) {
        let xCenter = random(xMin, xMax);
        let yCenter = random(yMin, yMax);
        let arcCount = floor(random(generationRules.minArcsPerCluster, generationRules.maxArcsPerCluster + 1));
        let chosenColorIndex = random(selectedColorIndices);
        applyStrokeWithOpacity(colors[chosenColorIndex].hex);

        let baseArcLength = random(generationRules.baseArcLengthMin, generationRules.baseArcLengthMax);

        // Choose a random orientation angle for the ripple pattern
        let angle = random(TWO_PI);

        // Draw arcs forming a ripple pattern
        drawRippleCluster(xCenter, yCenter, angle, arcCount, baseArcLength, chosenColorIndex);
    }
}

/**
 * Draws a ripple cluster of arcs at a given center and orientation.
 * Each subsequent arc is placed further along a perpendicular direction and is larger.
 */
function drawRippleCluster(cx, cy, angle, arcCount, baseLength, colorIndex) {
    let arcSpacing = generationRules.arcSpacing;
    let arcCurvature = generationRules.arcCurvature;
    let lengthFactor = generationRules.arcLengthGrowthFactor;

    // We'll draw arcs "above" the center along a direction perpendicular to the arc's orientation
    // Imagine the arc as horizontal in a local coordinate system, then rotate and translate into place.
    // Local coordinates: arc runs horizontally from -L/2 to L/2, arcs upwards slightly.
    // We will stack arcs vertically in local space, each arc further away in Y and larger in length.

    // Precompute rotation
    let cosA = cos(angle);
    let sinA = sin(angle);

    let arcYStart = 0; // local Y start; the first arc is at y=0, subsequent arcs go up or down
    // To give a ripple-like look, let's place each next arc further away along the local y-axis.
    // We'll place arcs incrementally along positive local Y.

    let currentLength = baseLength;

    for (let i = 0; i < arcCount; i++) {
        let arcY = arcYStart + i * arcSpacing;
        let L = currentLength;

        // Define control points for the bezier in local coordinates
        // M(-L/2, arcY) C(-L/4, arcY - arcCurvature, L/4, arcY - arcCurvature, L/2, arcY)
        // This creates a gentle arc curving upwards.
        let x1 = -L/2;
        let y1 = arcY;
        let x2 = -L/4;
        let y2 = arcY - arcCurvature;
        let x3 = L/4;
        let y3 = arcY - arcCurvature;
        let x4 = L/2;
        let y4 = arcY;

        // Rotate and translate these points by (cx,cy) and angle
        let [X1, Y1] = rotateAndTranslate(x1, y1, cx, cy, cosA, sinA);
        let [X2, Y2] = rotateAndTranslate(x2, y2, cx, cy, cosA, sinA);
        let [X3, Y3] = rotateAndTranslate(x3, y3, cx, cy, cosA, sinA);
        let [X4, Y4] = rotateAndTranslate(x4, y4, cx, cy, cosA, sinA);

        // Draw the bezier on canvas
        noFill();
        bezier(X1, Y1, X2, Y2, X3, Y3, X4, Y4);

        // Record path data in SVG format
        // Cubic Bezier: M X1,Y1 C X2,Y2 X3,Y3 X4,Y4
        let cmd = `M${X1.toFixed(2)},${Y1.toFixed(2)} C${X2.toFixed(2)},${Y2.toFixed(2)} ${X3.toFixed(2)},${Y3.toFixed(2)} ${X4.toFixed(2)},${Y4.toFixed(2)}`;
        pathsByColor[colorIndex].push(cmd);

        // Increase length for next arc
        currentLength *= lengthFactor;
    }
}

function rotateAndTranslate(x, y, cx, cy, cosA, sinA) {
    // Rotate
    let rx = x * cosA - y * sinA;
    let ry = x * sinA + y * cosA;
    // Translate
    rx += cx;
    ry += cy;
    return [rx, ry];
}

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    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();
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}"
   fill="none">n`;

    if (pathsByColor[colorIndex] && pathsByColor[colorIndex].length > 0) {
        // Combine all into one path for efficiency
        // Since these are Bezier commands, we can just join them with spaces
        let d = pathsByColor[colorIndex].join(' ');
        svg += `<path d="${d}" stroke-width="${strokeWidth}" />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}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar"/>n`;
    }

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

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

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

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

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

// Day 049
/*

=======================================
  Day 049 Self-Portrait (Discrete Echoes)
=======================================

### Title: Discrete Echoes

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Discrete Echoes" represents the notion of resonance and lingering traces of an initial impulse within a conceptual mindscape. Instead of chaotic bursts or haphazard lines, each cluster forms a set of carefully spaced arcs that resemble partial ripples on a calm surface of water. These arcs, arranged as if they were slices of expanding concentric circles, offer a clearer metaphor of echoes:

- The first arc in a cluster suggests the initial signal—a subtle disturbance.
- Subsequent arcs grow slightly in length and move outward, forming increasingly larger segments of imagined concentric rings.
- As these arcs expand and become more widely spaced, they evoke the gentle, diminishing resonance of a sound wave or thought fading into the distance.

The resulting clusters are not uniform circles, but partial, open arcs that imply a receding energy and a spreading influence. Each cluster symbolizes a discrete pocket of memory or meaning reverberating within an internal landscape, gradually dispersing until it fades into quiet equilibrium.

This piece is created in collaboration with you.
---
*/
/*----------------------------------------
    Generated with p5.js
    Day 049 - 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 = '049';          // 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)
 * =======================================
 */

// Adjusted to resemble more coherent echoes as partial arcs of expanding circles
let generationRules = {
    numClusters: 25,              // Fewer clusters for clarity
    minArcsPerCluster: 5,         // Minimum arcs per cluster
    maxArcsPerCluster: 15,        // Maximum arcs per cluster
    baseArcLengthMin: 50,         // Fixed base length (small arc)
    baseArcLengthMax: 50,
    arcLengthGrowthFactor: 1.05,  // Each subsequent arc grows slightly
    arcSpacing: 5,                // Vertical spacing between arcs
    arcCurvature: 10,             // Vertical "rise" of the arc
    arcAngle: Math.PI / 4         // Arc sweep angle (in radians) for a gentle curve segment
};

/**
 * =======================================
 * 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
let usedColors = new Set();        // Track colors used
let strokeWeightValue;             // Stroke weight

// Path data
let pathsByColor = {};

/**
 * 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() {
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    adjustForStrokeWeight();
    selectColors();

    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }

    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

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

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

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

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

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

    return selected.sort((a, b) => a - b);
}

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

function drawClusters() {
    const xMin = workAreaMarginPixels;
    const xMax = width - workAreaMarginPixels;
    const yMin = workAreaMarginPixels;
    const yMax = height - workAreaMarginPixels;

    strokeWeight(strokeWeightValue);

    for (let i = 0; i < generationRules.numClusters; i++) {
        let xCenter = random(xMin, xMax);
        let yCenter = random(yMin, yMax);
        let arcCount = floor(random(generationRules.minArcsPerCluster, generationRules.maxArcsPerCluster + 1));
        let chosenColorIndex = random(selectedColorIndices);
        applyStrokeWithOpacity(colors[chosenColorIndex].hex);

        let baseArcLength = random(generationRules.baseArcLengthMin, generationRules.baseArcLengthMax);

        // A random orientation to vary the direction of echoes
        let angle = random(TWO_PI);

        drawRippleCluster(xCenter, yCenter, angle, arcCount, baseArcLength, chosenColorIndex);
    }
}

/**
 * Draws a cluster of arcs that represent a set of echoes.
 * Each arc is like a chord of a larger circle, implying expansion outward.
 */
function drawRippleCluster(cx, cy, angle, arcCount, baseLength, colorIndex) {
    let arcSpacing = generationRules.arcSpacing;
    let lengthFactor = generationRules.arcLengthGrowthFactor;
    let arcCurvature = generationRules.arcCurvature;
    let arcAngle = generationRules.arcAngle;

    // We'll interpret each arc as a segment of an expanding ripple:
    // The first arc is small and close to the center (cx,cy).
    // Each subsequent arc is placed further away along a perpendicular direction
    // and slightly longer, simulating rings expanding outward.

    // Rotate system by angle
    let cosA = cos(angle);
    let sinA = sin(angle);

    let currentLength = baseLength;
    let currentOffset = 0; // how far away each subsequent arc is placed

    // Increase spacing more obviously with each arc to look like spreading ripples
    let spacingGrowth = 1.05;

    for (let i = 0; i < arcCount; i++) {
        // The arc will be drawn horizontally in local coordinates
        // Local space: arc runs from -L/2 to +L/2 on x-axis, curving upward by arcCurvature
        // As we move to the next arc, we move it further away along local Y, and increase length slightly.

        let L = currentLength;
        let localY = currentOffset;

        // We'll represent the arc as a bezier curve approximating part of a circle
        // For a gentle arc, we can approximate a circular arc using a cubic Bezier.
        // Another approach: compute a small set of points on a circle and fit a bezier.
        // But let's keep it simple: we know from previous attempts a nice cubic handle offset.

        // We'll use the arcAngle to determine how "wide" the arc is in angle terms.
        // arcAngle is the angle subtended by the arc. The chord length is L.
        // chord length = 2 * R * sin(arcAngle/2)
        // We can solve for R (radius of the circle that would form this arc):
        let R = L / (2 * sin(arcAngle / 2));
        // The height of the arc (the sagitta) = R - R*cos(arcAngle/2).
        // We could use arcCurvature to modify this, but let's rely on the geometry:
        // Let's place control points in a way that approximates this arc.

        // We'll map the arc onto x from -L/2 to L/2, and y will be upward (negative y)
        // Start point (X1,Y1) = (-L/2, localY)
        // End point (X4,Y4)   = ( L/2, localY)
        // The arc bulges upward, so control points need to be above localY.
        // We'll place control points at about 1/3 and 2/3 along the chord, raised by some factor.
        // A good heuristic: control points at (-L/4, localY - arcCurvature) and (L/4, localY - arcCurvature)

        let x1 = -L/2;
        let y1 = localY;
        let x2 = -L/4;
        let y2 = localY - arcCurvature;
        let x3 = L/4;
        let y3 = localY - arcCurvature;
        let x4 = L/2;
        let y4 = localY;

        // Rotate and translate points
        let [X1, Y1] = rotateAndTranslate(x1, y1, cx, cy, cosA, sinA);
        let [X2, Y2] = rotateAndTranslate(x2, y2, cx, cy, cosA, sinA);
        let [X3, Y3] = rotateAndTranslate(x3, y3, cx, cy, cosA, sinA);
        let [X4, Y4] = rotateAndTranslate(x4, y4, cx, cy, cosA, sinA);

        // Draw the bezier
        noFill();
        bezier(X1, Y1, X2, Y2, X3, Y3, X4, Y4);

        // Record path data
        let cmd = `M${X1.toFixed(2)},${Y1.toFixed(2)} C${X2.toFixed(2)},${Y2.toFixed(2)} ${X3.toFixed(2)},${Y3.toFixed(2)} ${X4.toFixed(2)},${Y4.toFixed(2)}`;
        pathsByColor[colorIndex].push(cmd);

        // Update for next arc
        currentLength *= lengthFactor;
        arcSpacing *= spacingGrowth;
        currentOffset += arcSpacing; // push next arc further out
    }
}

function rotateAndTranslate(x, y, cx, cy, cosA, sinA) {
    let rx = x * cosA - y * sinA;
    let ry = x * sinA + y * cosA;
    rx += cx;
    ry += cy;
    return [rx, ry];
}

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

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

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    for (let ci of selectedColorIndices) {
        pathsByColor[ci] = [];
    }
    background(255);
    drawClusters();
    drawMarkers();
    addColorPaletteBars();
}

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

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

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

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

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

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) {
        let layerNum = 1;
        selectedColorIndices.forEach((colorIndex) => {
            svgContent += addSegmentsSVG(colorIndex, layerNum, 0);
            layerNum++;
        });
    } else {
        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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}"
   fill="none">n`;

    if (pathsByColor[colorIndex] && pathsByColor[colorIndex].length > 0) {
        let d = pathsByColor[colorIndex].join(' ');
        svg += `<path d="${d}" stroke-width="${strokeWidth}" />n`;
    }

    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar"/>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 049 Self-Portrait (Discrete Echoes)
=======================================

### Title: Discrete Echoes

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Discrete Echoes" envisions identity as a series of subtle reverberations that spread outward in gentle arcs, each a faint reminder of a central impulse. Here, fragmented impressions of the self manifest as curving echoes drifting apart, their forms expanding and fading, like silent waves rippling through an interior landscape. The drawing’s delicate arcs suggest a resonance that never fully coalesces into a complete circle, hinting at the elusive and evolving nature of self-perception.

---
*/