// Day 125
/*

=======================================
  Day 125 Self-Portrait (Digital Liminality: In-Between Realms)
=======================================

### Title: Digital Liminality: In-Between Realms

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art, liminality, threshold, in-between, transformation, fractal, oscillation, subtlety

### Conceptual Framework

In "Digital Liminality: In-Between Realms," I explore the transient states at the borders of self—those ephemeral thresholds where identity is neither fixed nor fully fluid. By generating layered, sinusoidal curves that occupy distinct vertical bands within a defined work area, the piece visually captures the delicate dance between order and transformation. Each curve represents a moment of transition, echoing the interplay between internal structure and the endless potential of in-between states.

### Technical Approach

The artwork is created using p5.js and adheres strictly to the pen plotter specifications. For each selected color from a restricted nine-color palette (with 0.8 opacity), a non-overlapping sinusoidal curve is drawn across the canvas. Each curve is generated with unique parameters—base vertical position, amplitude, frequency, and phase—to ensure they remain distinct and harmoniously spaced. Every drawn path is recorded in a global object (pathsByColor) to guarantee that the SVG export mirrors the canvas rendering exactly. This method underscores the balance between algorithmic precision and the organic emergence of digital identity.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 125 - 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 = '125';          // 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 = {
    // For this piece, the generative rule is to create sinusoidal curves with non-overlapping paths.
};

/**
 * =======================================
 * 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 line
// Global object to track drawn path data for each color (for SVG export)
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, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

    // Adjust work area margins to account for stroke weight
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // Returns 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 Initialization
 * =======================================
 */

// Additional initialization functions can be defined here if needed.

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

function drawShapes() {
    // Clear canvas
    background(255);

    // Reset pathsByColor for each selected color
    pathsByColor = {};

    // Define drawing area for curves
    let n = selectedColorIndices.length;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;

    // Draw one sinusoidal curve per selected color
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];
        // Evenly space curves vertically within the work area
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        // Set amplitude to a fraction of the vertical spacing
        let amplitude = (availableHeight / (n + 1)) * 0.3;
        // One full sine wave across the available width
        let freq = TWO_PI / availableWidth;
        // Random phase for variation
        let phase = random(0, TWO_PI);

        // Begin recording path data for this color
        let pathStr = "";
        let xStart = workAreaMarginPixels;
        let yStart = baseY + amplitude * sin(freq * 0 + phase);
        pathStr += "M" + xStart.toFixed(2) + "," + yStart.toFixed(2) + " ";

        // Draw the sinusoidal curve
        strokeWeight(strokeWeightValue);
        applyStrokeWithOpacity(col.hex);
        noFill();
        beginShape();
        vertex(xStart, yStart);

        // Step across the x-axis
        let step = 10; // pixels
        for (let x = xStart + step; x <= canvasWidthPixels - workAreaMarginPixels; x += step) {
            let y = baseY + amplitude * sin(freq * (x - xStart) + phase);
            vertex(x, y);
            pathStr += "L" + x.toFixed(2) + "," + y.toFixed(2) + " ";
        }
        endShape();

        // Save the generated path data for SVG export
        pathsByColor[colorIndex] = pathStr;
    }

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

/**
 * 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; // No colors used

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

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

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

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

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

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

    // Individual SVGs for each color
    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 index.
 */
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 registration markers
    svgContent += addMarkersSVG();

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

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

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

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

    // Use recorded path data for this color
    let pathData = pathsByColor[colorIndex] || '';

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${col.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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art, fragmentation, absence, ephemeral, noise, discrete, impermanence, introspection

### Conceptual Framework

In "Submerged Silhouettes: The Echo of Absence," I reimagine my digital self as a series of fleeting fragments. Instead of continuous curves, short, isolated line segments are drawn along a baseline that gently fluctuates via Perlin noise. These discrete segments—separated by intentional gaps—symbolize moments of presence and absence, capturing the elusive nature of identity. The work explores how an unbroken self can be perceived as a collection of transient echoes, each contributing to a hidden continuity.

### Technical Approach

Using p5.js, the work area is divided along the horizontal axis for each selected color. For every color, a baseline is computed based on even vertical spacing, and Perlin noise is applied to modulate its vertical position. Rather than a single continuous path, a while-loop generates multiple disjoint segments with randomized lengths and gaps. Each segment is tracked in a global data structure to ensure that the SVG export is a precise mirror of the canvas rendering.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 125 - 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 = '125';          // 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 = {
    // This work generates disjoint line segments along a noise-modulated baseline.
};

/**
 * =======================================
 * 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 line
// Global object to track drawn path data for each color (for SVG export)
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 (randomized for variation)
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // Do not loop continuously
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // 0.5mm / 0.254mm ≈ 2 pixels
    strokeWeightValue = 2;

    // Adjust work area margins to account for stroke weight
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // Returns 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 drawShapes() {
    // Clear canvas
    background(255);

    // Reset path data storage
    pathsByColor = {};

    // Define the drawing area dimensions
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, generate a series of disjoint line segments along a noise-modulated baseline
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Evenly space a baseline vertically within the work area
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        // Amplitude as a fraction of the vertical spacing
        let amplitude = (availableHeight / (n + 1)) * 0.3;
        // Random phase offset for noise variation
        let phase = random(0, 1000);
        // Noise scaling factor for horizontal modulation
        let noiseFactor = 0.01;

        // Begin recording path data for this color
        let pathStr = "";

        // Set drawing parameters
        strokeWeight(strokeWeightValue);
        applyStrokeWithOpacity(col.hex);
        noFill();

        // Initialize x position
        let x = workAreaMarginPixels;
        // Define gap and segment length ranges
        let minGap = 5;
        let maxGap = 15;
        let minSegment = 10;
        let maxSegment = 30;
        let maxX = canvasWidthPixels - workAreaMarginPixels;

        // Draw segments until reaching the right boundary
        while (x < maxX) {
            // Advance by a random gap
            x += random(minGap, maxGap);
            if (x >= maxX) break;

            // Determine segment length and ensure it stays within bounds
            let segLen = random(minSegment, maxSegment);
            let xEnd = min(x + segLen, maxX);

            // Calculate y using noise to introduce subtle vertical variation
            let y = baseY + amplitude * (noise(x * noiseFactor + phase) - 0.5) * 2;

            // Draw the segment on canvas
            line(x, y, xEnd, y);

            // Record the segment in SVG path format
            pathStr += "M" + x.toFixed(2) + "," + y.toFixed(2) + " L" + xEnd.toFixed(2) + "," + y.toFixed(2) + " ";

            // Advance x to end of segment to avoid overlap
            x = xEnd;
        }

        // Save the generated path data for this color
        pathsByColor[colorIndex] = pathStr;
    }

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

/**
 * 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; // No colors used

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

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

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

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

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

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

    // Individual SVGs for each color
    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 index.
 */
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 registration markers
    svgContent += addMarkersSVG();

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

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

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

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

    // Use recorded path data for this color
    let pathData = pathsByColor[colorIndex] || '';

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${col.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 125 (Alternate Version)
// Submerged Silhouettes, but using arcs with larger noise amplitude

/*
=======================================
  Day 125 Self-Portrait (Submerged Arcs)
=======================================

### Conceptual Overview
In this variation, we swap short line segments for short arcs and increase
the noise amplitude so each color’s “baseline” is more dramatically offset.
The arcs remain short and disjointed, preserving the idea of fleeting echoes,
but the added curvature and amplitude yield a more organic, fluid result.
*/

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

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

const strokeOpacity = 0.8;

// We'll reuse the main structure
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let strokeWeightValue;
let pathsByColor = {};

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

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

  adjustForStrokeWeight();
  selectColors();
  drawShapes();
  noLoop();
}

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

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

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

function drawShapes() {
  background(255);
  pathsByColor = {};

  let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
  let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
  let n = selectedColorIndices.length;

  for (let i = 0; i < n; i++) {
    let colorIndex = selectedColorIndices[i];
    let col = colors[colorIndex];

    // Baseline
    let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
    // Larger amplitude for more variation
    let amplitude = (availableHeight / (n + 1)) * 0.6;
    let phase = random(0, 1000);
    let noiseFactor = 0.01;

    let pathStr = "";
    strokeWeight(strokeWeightValue);
    applyStrokeWithOpacity(col.hex);
    noFill();

    let x = workAreaMarginPixels;
    let minGap = 5;
    let maxGap = 15;
    let minArcSpan = 10;
    let maxArcSpan = 30;
    let maxX = canvasWidthPixels - workAreaMarginPixels;

    while (x < maxX) {
      // Random gap
      x += random(minGap, maxGap);
      if (x >= maxX) break;

      // Arc span
      let arcSpan = random(minArcSpan, maxArcSpan);
      let xEnd = min(x + arcSpan, maxX);

      // Evaluate mid x
      let midX = (x + xEnd) * 0.5;
      // Baseline with noise
      let yBase = baseY + amplitude * (noise(midX * noiseFactor + phase) - 0.5) * 2;

      // Instead of a straight line, draw an arc
      // We'll pick a random radius and direction
      let radius = random(5, 30);
      // We'll approximate a small arc by using arc() in p5
      // But we need to store an M and A command for SVG path
      // For simplicity, we'll do a half-circle arc from left to right
      let arcWidth = xEnd - x;
      let arcHeight = random(10, 40); // Variation in arc height
      // Arc center
      let cx = x + arcWidth / 2;
      let cy = yBase;

      // We'll draw from angle 0 to PI (a semicircle) or the reverse
      let startAngle = random([0, PI]);
      let endAngle = startAngle + PI;

      // Draw on canvas
      // p5 arc: arc(x, y, w, h, start, stop)
      arc(cx, cy, arcWidth, arcHeight, startAngle, endAngle);

      // Build path data (approximate elliptical arc in SVG with 'A' command)
      // We'll do a quick approach: M x1,y1 A rx ry 0 0,1 x2,y2
      let x1 = x, y1 = yBase;
      let x2 = xEnd, y2 = yBase;
      // For simplicity, keep rotation=0, largeArcFlag=0, sweepFlag= (startAngle===0?1:0)
      let sweepFlag = (startAngle === 0) ? 1 : 0;
      let rx = (arcWidth / 2).toFixed(2);
      let ry = (arcHeight / 2).toFixed(2);
      pathStr += `M${x1.toFixed(2)},${y1.toFixed(2)} A${rx},${ry} 0 0,${sweepFlag} ${x2.toFixed(2)},${y2.toFixed(2)} `;

      // Move x to end
      x = xEnd;
    }

    pathsByColor[colorIndex] = pathStr;
  }

  drawMarkers();
  addColorPaletteBars();
}

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

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

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

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

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

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

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

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

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

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

    svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${col.hex}"
      stroke-opacity="${strokeOpacity}"
      stroke-width="${barHeight}"
      id="${colorIndex}-${col.name.toLowerCase()}-palettebar"
      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 125 (Enhanced Density Variation)
// Short line segments with multiple sub-baselines per color

/*
=======================================
  Day 125 Self-Portrait
  (Enhanced Density: Short Line Segments)
=======================================

### Conceptual Overview
We build on the idea of ephemeral line segments but increase density by:
1) Introducing multiple “sub-baselines” within each color band.
2) Narrowing gap and segment length ranges to pack lines closer together.

This creates a more saturated field of discrete, horizontal marks—evoking
an identity that emerges from a denser fabric of short-lived impressions.

### Technical Notes
- Each color now draws several sub-baselines (2–3 by default).
- For each sub-baseline, short segments are randomly placed until
  reaching the right margin of the work area.
- The amplitude for Perlin noise remains moderate, but you can increase
  it for more vertical variation.
*/

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

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

const strokeOpacity = 0.8;

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

// We'll track the paths for each color so the SVG export matches the canvas
let pathsByColor = {};

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

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

  adjustForStrokeWeight();
  selectColors();
  drawShapes();
  noLoop();
}

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

function selectColors() {
  // Choose 1–9 random colors from the palette
  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 drawShapes() {
  background(255);
  pathsByColor = {};

  let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
  let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
  let n = selectedColorIndices.length;

  // For each selected color, draw multiple sub-baselines
  for (let i = 0; i < n; i++) {
    let colorIndex = selectedColorIndices[i];
    let col = colors[colorIndex];

    // Main baseline for this color
    let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
    let amplitude = (availableHeight / (n + 1)) * 0.3; // noise amplitude
    let noisePhase = random(0, 1000);
    let noiseFactor = 0.01;

    // We'll store the path data for all sub-baselines in a single string
    let pathStr = "";

    // Decide how many sub-baselines to draw (2 or 3)
    let subCount = floor(random(2, 4));

    for (let sb = 0; sb < subCount; sb++) {
      // Slight vertical offset for each sub-baseline
      let offsetY = random(-0.2, 0.2) * (availableHeight / (n + 1));
      let actualY = baseY + offsetY;

      // Tighter segment/gap ranges for more density
      let minGap = 2;
      let maxGap = 8;
      let minSegment = 5;
      let maxSegment = 20;

      strokeWeight(strokeWeightValue);
      applyStrokeWithOpacity(col.hex);
      noFill();

      let x = workAreaMarginPixels;
      let maxX = canvasWidthPixels - workAreaMarginPixels;

      // Keep drawing short line segments along this sub-baseline
      while (x < maxX) {
        // Random gap
        x += random(minGap, maxGap);
        if (x >= maxX) break;

        // Segment length
        let segLen = random(minSegment, maxSegment);
        let xEnd = min(x + segLen, maxX);

        // Noise-based vertical variation
        let y = actualY + amplitude * (noise((x + sb * 100) * noiseFactor + noisePhase) - 0.5) * 2;

        // Draw segment
        line(x, y, xEnd, y);

        // Record segment in path data
        pathStr += `M${x.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${y.toFixed(2)} `;

        x = xEnd;
      }
    }

    // Store final path data
    pathsByColor[colorIndex] = pathStr;
  }

  // Registration markers and palette bars
  drawMarkers();
  addColorPaletteBars();
}

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

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

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

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

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

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

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) {
    // 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 col = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

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

  let pathData = pathsByColor[colorIndex] || '';
  if (pathData !== '') {
    svg += `<path d="${pathData}" stroke-width="${strokeWidth}" 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="${col.hex}"
      stroke-opacity="${strokeOpacity}"
      stroke-width="${barHeight}"
      id="${colorIndex}-${col.name.toLowerCase()}-palettebar"
      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 125
/*

=======================================
  Day 125 Self-Portrait (VU Meter: Dense Variation)
=======================================

### Title: VU Meter: Dense Variation

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              density, fragmentation, short lines, VU meter, bars, sub-baselines,
              noise, emergent pattern

### Conceptual Framework

In "VU Meter: Dense Variation," I portray my sense of identity as a densely
populated field of short horizontal lines—like VU meter bars flickering
across different bands. Each color is assigned multiple “sub-baselines,”
stacking discrete line segments in tight, random intervals. The result
reflects the rapid, ever-shifting nature of identity, where small moments
of presence accumulate into a vibrant tapestry of impressions. The horizontal
bars, reminiscent of audio levels, evoke the dynamic interplay of silent gaps
and bold signals that characterize both a VU meter and my own continuous
flow of awareness.

### Technical Approach

- **Multiple Sub‐Baselines**: For each color, the code generates between
  three and six mini-baselines within the designated vertical band.
- **Short Gaps & Segments**: We minimize gap and segment length ranges
  (e.g., 1–4 for gaps, 3–12 for segments) to pack lines closer together.
- **Noise Modulation**: A moderate Perlin noise amplitude offsets each
  sub-baseline, adding subtle vertical variation.
- **SVG Tracking**: Each line segment is recorded into `pathsByColor`
  to ensure consistent canvas and SVG outputs.

---
*/

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

// Denser short lines reminiscent of a VU meter
let generationRules = {
    // e.g., random sub-baselines, minimal gap, short segments
};

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

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

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

// Object to track drawn path data for each color (for SVG export)
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);

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Generate the artwork
    drawShapes();

    // No loop
    noLoop();
}

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

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

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

function selectColors() {
    // Pick 1 to 9 unique colors randomly
    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);
    }

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

/**
 * =======================================
 * Drawing Initialization
 * =======================================
 */
// (Not used in this piece, but left here for consistency)

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

function drawShapes() {
    // Clear canvas
    background(255);

    // Reset path data
    pathsByColor = {};

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, create multiple sub-baselines
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Main baseline for this color
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3; // vertical noise amplitude
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;

        // Store path data for this color
        let pathStr = "";

        // Increase density: 3–6 sub-baselines
        let subCount = floor(random(3, 7));

        for (let sb = 0; sb < subCount; sb++) {
            // Slight offset for each sub-baseline
            let offsetY = random(-0.3, 0.3) * (availableHeight / (n + 1));
            let actualY = baseY + offsetY;

            // Very small gap and segment lengths
            let minGap = 1;
            let maxGap = 4;
            let minSegment = 3;
            let maxSegment = 12;

            strokeWeight(strokeWeightValue);
            applyStrokeWithOpacity(col.hex);
            noFill();

            let x = workAreaMarginPixels;
            let maxX = canvasWidthPixels - workAreaMarginPixels;

            // Keep drawing short line segments across this sub-baseline
            while (x < maxX) {
                // Random gap
                x += random(minGap, maxGap);
                if (x >= maxX) break;

                // Random segment length
                let segLen = random(minSegment, maxSegment);
                let xEnd = min(x + segLen, maxX);

                // Noise-based vertical variation
                let y = actualY + amplitude * (noise((x + sb * 500) * noiseFactor + noisePhase) - 0.5) * 2;

                // Draw segment on canvas
                line(x, y, xEnd, y);

                // Record in path data
                pathStr += `M${x.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${y.toFixed(2)} `;

                // Move x to end
                x = xEnd;
            }
        }

        // Save final path data for this color
        pathsByColor[colorIndex] = pathStr;
    }

    // Draw registration markers + color palette
    drawMarkers();
    addColorPaletteBars();
}

/**
 * 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;                        
    let barHeight = 2;                              
    let gapSize = 7;                                
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return; // No colors used

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

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVG when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        resetCanvas();
    }
}

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @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()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    let pathData = pathsByColor[colorIndex] || '';

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    // Add palette bar for this color
    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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              fragmentation, noise, ephemeral, short lines, continuous wave, filled, parallel lines

### Conceptual Framework

In "Submerged Silhouettes: The Echo of Absence," the idea is to capture fleeting fragments of identity—each color channel manifests as a gently undulating wave. In this version, instead of drawing isolated segments, I generate a continuous, noise-modulated wave and then “fill in” its peaks and valleys by drawing multiple parallel copies offset vertically. The result is an impression of the wave being densely filled, yet retaining the delicate character of short, discrete strokes that echo the original concept.

### Technical Approach

- For each selected color band, a continuous wave is computed across the work area using Perlin noise.
- The wave is “filled” by drawing several parallel copies (using a fixed vertical offset) so that the entire curve (its peaks and valleys) appears saturated with lines.
- All drawn paths are recorded (in the global `pathsByColor` object) to ensure perfect consistency between the canvas and SVG export.

---
*/

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

// This work fills a continuous, noise-based wave with parallel, short strokes.

let generationRules = {
    // (Parameters defined below in the code)
};

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

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

let usedColors = new Set();        // To track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

// Object to track drawn path data for each color (for SVG export)
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);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors randomly
    selectColors();

    // Generate the artwork
    drawShapes();

    // Do not loop continuously
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line is about 2 pixels at 100 ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Choose between 1 and 9 unique colors randomly
    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);
    }
    // Sort for consistency
    return selected.sort((a, b) => a - b);
}

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

function drawShapes() {
    // Clear canvas
    background(255);

    // Reset path data storage
    pathsByColor = {};

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, draw a filled wave
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Main baseline for this color (vertically spaced)
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3; // moderate noise amplitude
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;
        
        // We'll record all sub-lines for this color in one path string
        let pathStr = "";

        // Decide number of sub-baselines for variation (e.g., 2 or 3)
        let subCount = floor(random(2, 4));

        for (let sb = 0; sb < subCount; sb++) {
            // Each sub-baseline gets a slight vertical offset relative to baseY
            let offsetY = random(-0.2, 0.2) * (availableHeight / (n + 1));
            let actualY = baseY + offsetY;

            // Define fill thickness for this sub-baseline (how many parallel copies)
            let fillThickness = random(10, 20);
            // Define horizontal step for sampling the wave curve
            let xStep = 3;
            let maxX = canvasWidthPixels - workAreaMarginPixels;

            // Precompute the wave curve as an array of points for x positions
            let wavePoints = [];
            for (let x = workAreaMarginPixels; x <= maxX; x += xStep) {
                // Compute y using a noise-modulated sine-like function
                let y = actualY + amplitude * (noise((x + sb * 500) * noiseFactor + noisePhase) - 0.5) * 2;
                wavePoints.push({ x: x, y: y });
            }

            // Now "fill" the wave by drawing multiple copies offset vertically
            for (let d = 0; d < fillThickness; d += 2) { // step of 2 pixels
                // Begin a new shape for this filled copy
                beginShape();
                // For SVG, record path data for this copy
                let localPath = "";
                // Move to the first point (shifted by d)
                let firstPt = wavePoints[0];
                vertex(firstPt.x, firstPt.y + d);
                localPath += "M" + firstPt.x.toFixed(2) + "," + (firstPt.y + d).toFixed(2) + " ";
                // Draw the curve
                for (let j = 1; j < wavePoints.length; j++) {
                    let pt = wavePoints[j];
                    vertex(pt.x, pt.y + d);
                    localPath += "L" + pt.x.toFixed(2) + "," + (pt.y + d).toFixed(2) + " ";
                }
                endShape();
                // Append this copy's path data
                pathStr += localPath;
            }
        }

        // Save the accumulated path data for this color
        pathsByColor[colorIndex] = pathStr;
    }

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

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

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

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

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

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

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

    // Individual SVGs for each color
    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 index.
 */
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 registration markers
    svgContent += addMarkersSVG();

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

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

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

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

    let pathData = pathsByColor[colorIndex] || '';

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${col.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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              noise, ephemeral, parallel lines, wave filling, layered lines,
              SVG consistency, color matching

### Conceptual Framework

"Submerged Silhouettes: The Echo of Absence" imagines identity as gently
undulating waves, each filled by multiple parallel lines. By recording every
sub-line as an individual path—and preserving the order in which they are
drawn—we ensure the final SVG mirrors the canvas precisely. The piece
maintains a delicate balance between fluidity (the wave forms) and density
(parallel fills), evoking the layered, sometimes overlapping nature of
self-perception.

### Technical Approach

1. **Multiple Colors**: Each selected color is assigned to a distinct wave band.
2. **Parallel Lines**: We generate a continuous wave, then “fill” it by drawing
   multiple parallel lines offset in the vertical direction.
3. **Exact Path Storage**: Each line is stored in an array for that color, in the
   order drawn. When generating SVG, we write out each line in sequence, ensuring
   the canvas and SVG match perfectly.
4. **No White Fill**: By using `noFill()`, lines never block those behind them,
   preserving visible overlaps in both the canvas and the exported SVG.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 125 - 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 = '125';          // 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 = {
    // We fill a continuous noise-based wave by drawing parallel lines.
    // Each line is stored separately for accurate layering in SVG.
};

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

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

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

// Instead of one big path string, we store an ordered array of sub-line paths for each color
// e.g. pathsByColor[colorIndex] = [ pathStr1, pathStr2, ... ] in the order they're drawn
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);

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

function selectColors() {
    // Pick 1 to 9 unique colors randomly
    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);
    }

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

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

function drawShapes() {
    // Clear canvas
    background(255);

    // Initialize the data structure for storing sub-line paths
    pathsByColor = {};
    selectedColorIndices.forEach(ci => {
        pathsByColor[ci] = []; // array of strings, each representing one sub-line
    });

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, draw a wave with multiple parallel lines
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Baseline for this color
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3; // moderate noise amplitude
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;

        // Decide how many sub-baselines
        let subCount = floor(random(2, 4));

        // Draw & store each sub-line
        for (let sb = 0; sb < subCount; sb++) {
            // Vertical offset for each sub-baseline
            let offsetY = random(-0.2, 0.2) * (availableHeight / (n + 1));
            let actualY = baseY + offsetY;

            // fill thickness => how many parallel lines
            let fillThickness = random(10, 20);
            let xStep = 3;
            let maxX = canvasWidthPixels - workAreaMarginPixels;

            // Precompute wave points
            let wavePoints = [];
            for (let x = workAreaMarginPixels; x <= maxX; x += xStep) {
                let y = actualY + amplitude * (noise((x + sb * 500) * noiseFactor + noisePhase) - 0.5) * 2;
                wavePoints.push({ x, y });
            }

            // Render the wave with multiple parallel lines
            strokeWeight(strokeWeightValue);
            applyStrokeWithOpacity(col.hex);
            noFill();

            for (let d = 0; d < fillThickness; d += 2) {
                // Start a new shape
                beginShape();

                // Build a local path string for the SVG
                let subLinePath = "";

                // Move to first point
                let firstPt = wavePoints[0];
                let firstX = firstPt.x.toFixed(2);
                let firstY = (firstPt.y + d).toFixed(2);

                vertex(firstPt.x, firstPt.y + d);
                subLinePath += `M${firstX},${firstY} `;

                // Continue with line segments
                for (let j = 1; j < wavePoints.length; j++) {
                    let pt = wavePoints[j];
                    let px = pt.x.toFixed(2);
                    let py = (pt.y + d).toFixed(2);
                    vertex(pt.x, pt.y + d);
                    subLinePath += `L${px},${py} `;
                }
                endShape();

                // Store this sub-line in the array for this color
                pathsByColor[colorIndex].push(subLinePath);
            }
        }
    }

    // Finally, draw registration markers and color palette bars
    drawMarkers();
    addColorPaletteBars();
}

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

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        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, in the order of selectedColorIndices
        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 in their group, preserving sub-line order.
 * Each element in pathsByColor[colorIndex] is a small path string.
 * We output each path in sequence for correct layering.
 *
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let col = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve the array of sub-line paths
    let pathArray = pathsByColor[colorIndex] || [];
    pathArray.forEach(pathStr => {
        svg += `<path d="${pathStr}" stroke-width="${strokeWidth}" />n`;
    });

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

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${col.hex}"
      stroke-opacity="${strokeOpacity}"
      stroke-width="${barHeight}"
      fill="none"
      id="${colorIndex}-${col.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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              noise, ephemeral, parallel lines, wave filling, layered lines,
              configurable spacing, optional occlusion

### Conceptual Framework

"Submerged Silhouettes: The Echo of Absence" visualizes identity as gently
undulating waves, each "filled" with multiple parallel lines. Now, the spacing
between these parallel lines is adjustable, allowing for tighter or looser fills.
Additionally, each wave is occluded by a white‐filled shape that blocks any
earlier waves behind it, creating a stacked effect. This approach preserves
the layered sense of identity—where new layers can obscure the past—while
highlighting the delicate interplay between structure and fluidity.

### Technical Approach

1. **Configurable Parallel Line Spacing**:
   - A `lineSpacing` parameter controls the vertical distance between lines
     in the filled wave.

2. **Wave Occlusion**:
   - Before drawing the wave lines, we draw a white‐filled shape that covers
     the entire wave band, thereby hiding any previously drawn waves underneath.
   - Each color is drawn in sequence, so later waves sit on top.

3. **Accurate SVG Export**:
   - Every shape (the white occlusion shape and each parallel line) is tracked
     and written in the same order to ensure the canvas and SVG outputs match
     exactly, including color usage and overlap.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 125 - 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 = '125';          // 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 = {
    // You can adjust this to control how close/far the parallel lines are.
    lineSpacing: 4   // e.g., set to 2 for a denser fill, or 5 for looser fill
};

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

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

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

// We'll store shapes for occlusion plus parallel lines in order.
// For each color: { fillShape: pathString, lines: [ pathStr1, pathStr2, ... ] }
let waveDataByColor = {};

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Generate the artwork
    drawShapes();

    // No loop
    noLoop();
}

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

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

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

function selectColors() {
    // Pick 1 to 9 unique colors randomly
    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);
    }

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

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

function drawShapes() {
    background(255);

    // Initialize wave data structure
    waveDataByColor = {};
    selectedColorIndices.forEach(ci => {
        waveDataByColor[ci] = {
            fillShape: "",   // path string for the white occlusion shape
            lines: []        // array of path strings for parallel lines
        };
    });

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, produce a wave that occludes earlier layers
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Baseline
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3;
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;

        // Single wave or multiple sub-waves? Let's do just 1 wave per color
        // If you want multiple sub-waves, you can replicate the logic below
        let wavePoints = [];
        let xStep = 3;
        let maxX = canvasWidthPixels - workAreaMarginPixels;
        for (let x = workAreaMarginPixels; x <= maxX; x += xStep) {
            let y = baseY + amplitude * (noise(x * noiseFactor + noisePhase) - 0.5) * 2;
            wavePoints.push({ x, y });
        }

        // Determine a bounding region to fill with white
        // We'll do from (leftMargin, bottomOfBand) -> wave points -> (rightMargin, bottomOfBand)
        // so everything behind is occluded in that band.
        let bottomOfBand = baseY + amplitude * 1.2;  // slight extra margin
        // Build fill shape path
        let fillPath = buildOcclusionPath(wavePoints, bottomOfBand);

        // 1) Draw the white shape on canvas
        noStroke();
        fill(255);
        beginShape();
        // Move to leftMargin,bottomOfBand
        vertex(wavePoints[0].x, bottomOfBand);
        // wave points
        for (let p of wavePoints) {
            vertex(p.x, p.y);
        }
        // close with rightMargin,bottomOfBand
        vertex(wavePoints[wavePoints.length - 1].x, bottomOfBand);
        endShape(CLOSE);

        // 2) Draw the parallel lines on top
        strokeWeight(strokeWeightValue);
        applyStrokeWithOpacity(col.hex);
        noFill();

        // lineSpacing from generationRules
        let ls = generationRules.lineSpacing || 2;
        let fillThickness = 20; // how many lines total
        for (let d = 0; d < fillThickness * ls; d += ls) {
            beginShape();
            let linePath = ""; // path string for this line

            // Move to first wave point
            let fp = wavePoints[0];
            vertex(fp.x, fp.y - d);
            linePath += `M${fp.x.toFixed(2)},${(fp.y - d).toFixed(2)} `;

            // proceed across wave
            for (let j = 1; j < wavePoints.length; j++) {
                let p = wavePoints[j];
                vertex(p.x, p.y - d);
                linePath += `L${p.x.toFixed(2)},${(p.y - d).toFixed(2)} `;
            }
            endShape();

            // store in waveDataByColor
            waveDataByColor[colorIndex].lines.push(linePath);
        }

        // store fill shape path
        waveDataByColor[colorIndex].fillShape = fillPath;
    }

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

/**
 * Builds the path string for the white occlusion shape:
 * from left wave point to wave points to right wave point,
 * then back down to close the shape at bottomOfBand.
 */
function buildOcclusionPath(wavePoints, bottomOfBand) {
    if (wavePoints.length < 2) return "";

    let pathStr = "";
    let first = wavePoints[0];
    let last = wavePoints[wavePoints.length - 1];

    // Start
    pathStr += `M${first.x.toFixed(2)},${bottomOfBand.toFixed(2)} `;

    // wave points
    for (let i = 0; i < wavePoints.length; i++) {
        let p = wavePoints[i];
        pathStr += `L${p.x.toFixed(2)},${p.y.toFixed(2)} `;
    }

    // close shape at bottomOfBand
    pathStr += `L${last.x.toFixed(2)},${bottomOfBand.toFixed(2)} Z`;

    return pathStr;
}

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

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        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 registration markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds the occlusion shape + parallel lines for a specific color in its own group
 */
function addColorGroupSVG(colorIndex, layerNum) {
    let col = colors[colorIndex];
    let strokeWidthVal = strokeWeightValue;
    let fillShapePath = waveDataByColor[colorIndex].fillShape;
    let linePaths = waveDataByColor[colorIndex].lines || [];

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

    // 1) White occlusion shape (fill=white, no stroke)
    if (fillShapePath) {
        svg += `<path d="${fillShapePath}"
          fill="#ffffff"
          stroke="none"
          stroke-opacity="0"
          />n`;
    }

    // 2) Draw parallel lines
    // Each path is in linePaths array
    linePaths.forEach(pathStr => {
        svg += `<path d="${pathStr}"
          fill="none"
          stroke="${col.hex}"
          stroke-opacity="${strokeOpacity}"
          stroke-width="${strokeWidthVal}" />n`;
    });

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

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidthVal = 1;
    const offset = strokeWidthVal / 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="${strokeWidthVal}" 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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              noise, ephemeral, parallel lines, wave filling, layering, occlusion

### Conceptual Framework

"Submerged Silhouettes: The Echo of Absence" envisions identity as fluid waves that drift
between visibility and concealment. Each colored band emerges as an undulating silhouette,
suggesting the delicate interplay of memory and presence. By partially filling these waves
with parallel lines, the artwork evokes a sense of layered consciousness—where newer forms
may obscure or overwrite those beneath. The result is a portrait of shifting boundaries
and fleeting contours, capturing the transient essence of self in continuous flux.

### Technical Approach

- **Wave Generation**: Each colored band is defined by a noise-driven wave, modulated by
  adjustable parameters to control its amplitude and shape.
- **Parallel Filling**: Multiple parallel lines, spaced according to a user-defined setting,
  are drawn to “fill” each wave, creating a sense of density and depth.
- **Layered Occlusion**: A white-filled shape is placed behind each wave to occlude earlier
  layers, producing a stacked effect in which newer waves sit on top of the older ones.
- **SVG Consistency**: Every shape (occlusion area and parallel lines) is recorded and
  exported in the precise order it’s drawn on the canvas, ensuring the final SVG perfectly
  reflects the layered composition and color usage.

---
*/

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

// User-adjustable spacing between parallel lines
let generationRules = {
    lineSpacing: 4   // Increase for looser fill, decrease for denser fill
};

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

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

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

/**
 * Data structure to store shapes for each color:
 * waveDataByColor[colorIndex] = {
 *   fillShape: pathStringForWhiteOcclusion,
 *   lines: [ pathStr1, pathStr2, ... ]  // each parallel line as a separate path
 * }
 */
let waveDataByColor = {};

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

function selectColors() {
    // Pick 1 to 9 unique colors randomly
    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);
    }

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

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

function drawShapes() {
    background(255);

    // Initialize wave data structure
    waveDataByColor = {};
    selectedColorIndices.forEach(ci => {
        waveDataByColor[ci] = {
            fillShape: "",
            lines: []
        };
    });

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, produce a wave that occludes earlier layers
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Baseline
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3;
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;

        // Generate the wave points
        let wavePoints = [];
        let xStep = 3;
        let maxX = canvasWidthPixels - workAreaMarginPixels;
        for (let x = workAreaMarginPixels; x <= maxX; x += xStep) {
            let y = baseY + amplitude * (noise(x * noiseFactor + noisePhase) - 0.5) * 2;
            wavePoints.push({ x, y });
        }

        // Build occlusion shape path
        let bottomOfBand = baseY + amplitude * 1.2;
        let fillPath = buildOcclusionPath(wavePoints, bottomOfBand);

        // 1) Canvas: Draw occlusion shape in white
        noStroke();
        fill(255);
        beginShape();
        vertex(wavePoints[0].x, bottomOfBand);
        for (let p of wavePoints) {
            vertex(p.x, p.y);
        }
        vertex(wavePoints[wavePoints.length - 1].x, bottomOfBand);
        endShape(CLOSE);

        // 2) Canvas: Draw parallel lines
        strokeWeight(strokeWeightValue);
        applyStrokeWithOpacity(col.hex);
        noFill();

        let ls = generationRules.lineSpacing || 2; // line spacing
        let fillThickness = 20;
        for (let d = 0; d < fillThickness * ls; d += ls) {
            beginShape();
            let linePath = "";

            // Move to first wave point
            let fp = wavePoints[0];
            vertex(fp.x, fp.y - d);
            linePath += `M${fp.x.toFixed(2)},${(fp.y - d).toFixed(2)} `;

            // proceed across wave
            for (let j = 1; j < wavePoints.length; j++) {
                let p = wavePoints[j];
                vertex(p.x, p.y - d);
                linePath += `L${p.x.toFixed(2)},${(p.y - d).toFixed(2)} `;
            }
            endShape();

            waveDataByColor[colorIndex].lines.push(linePath);
        }

        // Store fill shape path
        waveDataByColor[colorIndex].fillShape = fillPath;
    }

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

/**
 * Build the path string for the white occlusion shape
 */
function buildOcclusionPath(wavePoints, bottomOfBand) {
    if (wavePoints.length < 2) return "";

    let pathStr = "";
    let first = wavePoints[0];
    let last = wavePoints[wavePoints.length - 1];

    // Start
    pathStr += `M${first.x.toFixed(2)},${bottomOfBand.toFixed(2)} `;

    // wave points
    for (let i = 0; i < wavePoints.length; i++) {
        let p = wavePoints[i];
        pathStr += `L${p.x.toFixed(2)},${p.y.toFixed(2)} `;
    }

    // close shape
    pathStr += `L${last.x.toFixed(2)},${bottomOfBand.toFixed(2)} Z`;

    return pathStr;
}

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

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        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 registration markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds the occlusion shape + parallel lines for a specific color in its own group
 */
function addColorGroupSVG(colorIndex, layerNum) {
    let col = colors[colorIndex];
    let strokeWidthVal = strokeWeightValue;
    let fillShapePath = waveDataByColor[colorIndex].fillShape;
    let linePaths = waveDataByColor[colorIndex].lines || [];

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

    // 1) White occlusion shape
    if (fillShapePath) {
        svg += `<path d="${fillShapePath}"
          fill="#ffffff"
          stroke="none"
          stroke-opacity="0"
          />n`;
    }

    // 2) Parallel lines
    linePaths.forEach(pathStr => {
        svg += `<path d="${pathStr}"
          fill="none"
          stroke="${col.hex}"
          stroke-opacity="${strokeOpacity}"
          stroke-width="${strokeWidthVal}" />n`;
    });

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

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidthVal = 1;
    const offset = strokeWidthVal / 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="${strokeWidthVal}" 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 125
/*

=======================================
  Day 125 Self-Portrait (Submerged Silhouettes: The Echo of Absence)
=======================================

### Title: Submerged Silhouettes: The Echo of Absence

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              noise, ephemeral, parallel lines, wave filling, layering

### Conceptual Framework

"Submerged Silhouettes: The Echo of Absence" envisions identity as fluid waves that drift
between visibility and concealment. Each colored band emerges as an undulating silhouette,
suggesting the delicate interplay of memory and presence. By filling these waves with parallel
lines that naturally intersect and overlap, the artwork evokes a sense of layered consciousness,
capturing the transient essence of self in continuous flux.

### Technical Approach

- **Wave Generation**: Each colored band is defined by a noise-driven wave, modulated by adjustable
  parameters to control its amplitude and shape.
- **Parallel Filling**: Multiple parallel lines, spaced according to a user-defined setting, are drawn
  to “fill” each wave, creating a sense of density and depth.
- **SVG Consistency**: Every parallel line is recorded and exported in the precise order it’s drawn,
  ensuring the final SVG perfectly reflects the layered composition and color usage.

---
*/

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

// User-adjustable spacing between parallel lines
let generationRules = {
    lineSpacing: 6   // Increase for looser fill, decrease for denser fill
};

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

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

let usedColors = new Set();        // Track used colors
let strokeWeightValue;             // Stroke weight for ~0.5mm line

/**
 * Data structure to store parallel line paths for each color:
 * waveDataByColor[colorIndex] = [ pathStr1, pathStr2, ... ]
 */
let waveDataByColor = {};

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

function selectColors() {
    // Pick 1 to 9 unique colors randomly
    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);
    }

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

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

function drawShapes() {
    background(255);

    // Initialize wave data structure for parallel line paths
    waveDataByColor = {};
    selectedColorIndices.forEach(ci => {
        waveDataByColor[ci] = [];
    });

    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let availableHeight = canvasHeightPixels - 2 * workAreaMarginPixels;
    let n = selectedColorIndices.length;

    // For each selected color, generate a wave and fill it with parallel lines
    for (let i = 0; i < n; i++) {
        let colorIndex = selectedColorIndices[i];
        let col = colors[colorIndex];

        // Baseline for the wave
        let baseY = workAreaMarginPixels + (i + 1) * (availableHeight / (n + 1));
        let amplitude = (availableHeight / (n + 1)) * 0.3;
        let noisePhase = random(0, 1000);
        let noiseFactor = 0.01;

        // Generate the wave points along the horizontal axis
        let wavePoints = [];
        let xStep = 3;
        let maxX = canvasWidthPixels - workAreaMarginPixels;
        for (let x = workAreaMarginPixels; x <= maxX; x += xStep) {
            let y = baseY + amplitude * (noise(x * noiseFactor + noisePhase) - 0.5) * 2;
            wavePoints.push({ x, y });
        }

        // Draw parallel lines along the wave
        strokeWeight(strokeWeightValue);
        applyStrokeWithOpacity(col.hex);
        noFill();

        let ls = generationRules.lineSpacing || 2; // configurable line spacing
        let fillThickness = 20; // number of parallel lines
        for (let d = 0; d < fillThickness * ls; d += ls) {
            beginShape();
            let linePath = "";

            // Start at the first wave point, offset vertically by d
            let fp = wavePoints[0];
            vertex(fp.x, fp.y - d);
            linePath += `M${fp.x.toFixed(2)},${(fp.y - d).toFixed(2)} `;

            // Draw the line across the wave points
            for (let j = 1; j < wavePoints.length; j++) {
                let p = wavePoints[j];
                vertex(p.x, p.y - d);
                linePath += `L${p.x.toFixed(2)},${(p.y - d).toFixed(2)} `;
            }
            endShape();

            // Store this parallel line's path data
            waveDataByColor[colorIndex].push(linePath);
        }
    }

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

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

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

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

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

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

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

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

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

    // Add registration markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds the parallel line paths for a specific color in its own group.
 */
function addColorGroupSVG(colorIndex, layerNum) {
    let col = colors[colorIndex];
    let strokeWidthVal = strokeWeightValue;
    let linePaths = waveDataByColor[colorIndex] || [];

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

    // Draw parallel lines
    linePaths.forEach(pathStr => {
        svg += `<path d="${pathStr}"
          fill="none"
          stroke="${col.hex}"
          stroke-opacity="${strokeOpacity}"
          stroke-width="${strokeWidthVal}" />n`;
    });

    // Add palette bar for this color
    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)}"
          fill="none"
          stroke="${col.hex}"
          stroke-opacity="${strokeOpacity}"
          stroke-width="${barHeight}" />n`;
    }

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

/**
 * Add registration markers to SVG.
 */
function addMarkersSVG() {
    const strokeWidthVal = 1;
    const offset = strokeWidthVal / 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="${strokeWidthVal}" 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);
}