// Day 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines and branching patterns depict how raw data is systematically refined and synthesized into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the cascading structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';           // 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: '#ff3300' },
    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)
 * =======================================
 */

// Define your generative rules here.
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    layerSpacing: 30,           // Vertical spacing between layers in pixels
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [15, 45], // Range of angles for branching in degrees
    lineLength: 200              // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

/**
 * 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 = 2;
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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
 * =======================================
 */

// No additional initialization needed for this concept

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

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

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue);
    });

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

/**
 * Draws a single cascading layer of lines
 * @param {string} colorHex - Hex color code for the layer
 */
function drawCascadingLayer(colorHex) {
    push();
    translate(workAreaMarginPixels, workAreaMarginPixels);

    let centerX = (canvasWidthPixels - 2 * workAreaMarginPixels) / 2;
    let startY = workAreaMarginPixels;
    let endY = canvasHeightPixels - workAreaMarginPixels;

    // Calculate spacing between layers
    let layerHeight = (endY - startY) / generationRules.numLayers;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = startY + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 4 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            line(xStart, y, xEnd, yEnd);

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

                line(xEnd, yEnd, bxEnd, byEnd);
            }
        }
    }

    pop();
}

/**
 * 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
    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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Implement the cascading paths for this color
    let pathData = generateCascadingPathData();

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

/**
 * Generates path data for cascading layers
 * @returns {string} SVG path data
 */
function generateCascadingPathData() {
    let path = '';
    let layerHeight = (height - 2 * workAreaMarginPixels) / generationRules.numLayers;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = workAreaMarginPixels + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 4 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, height - workAreaMarginPixels);

            path += `M${xStart.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, height - workAreaMarginPixels);

                path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
            }
        }
    }

    return path.trim();
}

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

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines and branching patterns depict how raw data is systematically refined and synthesized into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the cascading structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // 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: '#ff3300' },
    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)
 * =======================================
 */

// Define your generative rules here.
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    layerSpacing: 30,           // Vertical spacing between layers in pixels
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [15, 45], // Range of angles for branching in degrees
    lineLength: 200             // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

/**
 * 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 = 2;
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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
 * =======================================
 */

// No additional initialization needed for this concept

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

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

    // Calculate usable drawing height by excluding the space for the color palette
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    let topMargin = workAreaMarginPixels + (usableHeight - ((generationRules.numLayers * generationRules.layerSpacing))) / 2;

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue, topMargin, usableHeight);
    });

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

/**
 * Draws a single cascading layer of lines
 * @param {string} colorHex - Hex color code for the layer
 * @param {number} topMargin - Top margin in pixels
 * @param {number} usableHeight - Usable drawing height in pixels
 */
function drawCascadingLayer(colorHex, topMargin, usableHeight) {
    let centerX = canvasWidthPixels / 2;
    let startY = topMargin;
    let endY = topMargin + usableHeight;

    // Calculate spacing between layers
    let layerHeight = usableHeight / generationRules.numLayers;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = startY + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, endY);

            line(xStart, y, xEnd, yEnd);

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, endY);

                line(xEnd, yEnd, bxEnd, byEnd);
            }
        }
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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
    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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Implement the cascading paths for this color
    let pathData = generateCascadingPathData();

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

/**
 * Generates path data for cascading layers
 * @returns {string} SVG path data
 */
function generateCascadingPathData() {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - ((generationRules.numLayers * generationRules.layerSpacing))) / 2;
    let layerHeight = usableHeight / generationRules.numLayers;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = topMargin + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, height - workAreaMarginPixels - paletteHeight);

            path += `M${xStart.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, height - workAreaMarginPixels - paletteHeight);

                path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
            }
        }
    }

    return path.trim();
}

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

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines and branching patterns depict how raw data is systematically refined and synthesized into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the cascading structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // 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: '#ff3300' },
    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)
 * =======================================
 */

// Removed layerSpacing to ensure consistent layerHeight
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    // layerSpacing: 30,         // Removed to prevent conflict with layerHeight
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [15, 45], // Range of angles for branching in degrees
    lineLength: 200             // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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
 * =======================================
 */

// No additional initialization needed for this concept

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

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

    // Calculate usable drawing height by excluding the space for the color palette
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue, topMargin, layerHeight, usableHeight);
    });

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

/**
 * Draws a single cascading layer of lines
 * @param {string} colorHex - Hex color code for the layer
 * @param {number} topMargin - Top margin in pixels
 * @param {number} layerHeight - Height allocated for each layer in pixels
 * @param {number} usableHeight - Usable drawing height in pixels
 */
function drawCascadingLayer(colorHex, topMargin, layerHeight, usableHeight) {
    let startY = topMargin;
    let endY = topMargin + usableHeight;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = startY + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, endY);

            line(xStart, y, xEnd, yEnd);

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, endY);

                line(xEnd, yEnd, bxEnd, byEnd);
            }
        }
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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
    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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Implement the cascading paths for this color
    let pathData = generateCascadingPathData();

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

/**
 * Generates path data for cascading layers
 * @returns {string} SVG path data
 */
function generateCascadingPathData() {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let topMargin = workAreaMarginPixels + (usableHeight - (generationRules.numLayers * layerHeight)) / 2; // Should equal workAreaMarginPixels

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = topMargin + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, height - workAreaMarginPixels - (1.25 * pixelsPerInch));

            path += `M${xStart.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, height - workAreaMarginPixels - (1.25 * pixelsPerInch));

                path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
            }
        }
    }

    return path.trim();
}

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

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines and branching patterns depict how raw data is systematically refined and synthesized into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the cascading structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';           // 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: '#ff3300' },
    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)
 * =======================================
 */

// Removed layerSpacing to ensure consistent layerHeight
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [15, 45], // Range of angles for branching in degrees
    lineLength: 200             // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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
 * =======================================
 */

// No additional initialization needed for this concept

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

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

    // Calculate usable drawing height by excluding the space for the color palette
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue, topMargin, layerHeight, usableHeight);
    });

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

/**
 * Draws a single cascading layer of lines
 * @param {string} colorHex - Hex color code for the layer
 * @param {number} topMargin - Top margin in pixels
 * @param {number} layerHeight - Height allocated for each layer in pixels
 * @param {number} usableHeight - Usable drawing height in pixels
 */
function drawCascadingLayer(colorHex, topMargin, layerHeight, usableHeight) {
    let startY = topMargin;
    let endY = topMargin + usableHeight;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = startY + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, endY);

            // Create a unique identifier for the path
            let pathId = `${xStart.toFixed(2)}_${y.toFixed(2)}_${xEnd.toFixed(2)}_${yEnd.toFixed(2)}`;

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, y, xEnd, yEnd);
                existingPaths.add(pathId);
            }

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, endY);

                // Create a unique identifier for the branch path
                let branchPathId = `${xEnd.toFixed(2)}_${yEnd.toFixed(2)}_${bxEnd.toFixed(2)}_${byEnd.toFixed(2)}`;

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    line(xEnd, yEnd, bxEnd, byEnd);
                    existingPaths.add(branchPathId);
                }
            }
        }
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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();
    existingPaths.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
        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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Implement the cascading paths for this color
    let pathData = generateCascadingPathDataForSVG(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;
}

/**
 * Generates path data for cascading layers for SVG
 * @param {number} colorIndex - Index of the color
 * @returns {string} SVG path data
 */
function generateCascadingPathDataForSVG(colorIndex) {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    for (let i = 0; i < generationRules.numLayers; i++) {
        let y = topMargin + i * layerHeight + layerHeight / 2;

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let angle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
            let angleRad = radians(angle);
            let xEnd = xStart + generationRules.lineLength * cos(angleRad);
            let yEnd = y + generationRules.lineLength * sin(angleRad);

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, topMargin, height - workAreaMarginPixels - paletteHeight);

            // Create a unique identifier for the path
            let pathId = `${xStart.toFixed(2)}_${y.toFixed(2)}_${xEnd.toFixed(2)}_${yEnd.toFixed(2)}`;

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                path += `M${xStart.toFixed(2)},${y.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;
                existingPaths.add(pathId);
            }

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = angle + random(-20, 20);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, topMargin, height - workAreaMarginPixels - paletteHeight);

                // Create a unique identifier for the branch path
                let branchPathId = `${xEnd.toFixed(2)}_${yEnd.toFixed(2)}_${bxEnd.toFixed(2)}_${byEnd.toFixed(2)}`;

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
                    existingPaths.add(branchPathId);
                }
            }
        }
    }

    return path.trim();
}

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

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards a common point on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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)
 * =======================================
 */

// Removed layerSpacing to ensure consistent layerHeight
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [15, 45], // Range of angles for branching in degrees
    lineLength: 200             // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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
 * =======================================
 */

// No additional initialization needed for this concept

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

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

    // Calculate usable drawing height by excluding the space for the color palette
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue, convergenceX, convergencePoints);
    });

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

/**
 * Draws a single cascading layer of lines converging to a common point.
 * @param {string} colorHex - Hex color code for the layer
 * @param {number} convergenceX - X-coordinate of the convergence point
 * @param {Array<number>} convergencePoints - Array of Y-coordinates for convergence per layer
 */
function drawCascadingLayer(colorHex, convergenceX, convergencePoints) {
    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStart = workAreaMarginPixels + (i * ( (canvasHeightPixels - 2 * workAreaMarginPixels - 1.25 * pixelsPerInch) / generationRules.numLayers )) + ((canvasHeightPixels - 2 * workAreaMarginPixels - 1.25 * pixelsPerInch) / (2 * generationRules.numLayers));
            yStart = yStart + random(-layerHeight / 4, layerHeight / 4); // Slight randomness within the layer

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels - 1.25 * pixelsPerInch);

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStart, xEnd, yEnd);
                existingPaths.add(pathId);
            }

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = random(-20, 20); // Branch angles relative to the main line
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels - 1.25 * pixelsPerInch);

                // Create a unique identifier for the branch path (order-independent)
                let branchPathId = createPathId(xEnd, yEnd, bxEnd, byEnd);

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    line(xEnd, yEnd, bxEnd, byEnd);
                    existingPaths.add(branchPathId);
                }
            }
        }
    }
}

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate
 * @param {number} y1 - Starting Y-coordinate
 * @param {number} x2 - Ending X-coordinate
 * @param {number} y2 - Ending Y-coordinate
 * @returns {string} Unique path identifier
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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();
    existingPaths.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
 * @returns {string} SVG content
 */
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
 * @returns {string} SVG group content
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the cascading paths for this color
    let pathData = generateCascadingPathDataForSVG();

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

/**
 * Generates path data for cascading layers for SVG
 * @returns {string} SVG path data
 */
function generateCascadingPathDataForSVG() {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStart = workAreaMarginPixels + (i * layerHeight) + (layerHeight / 2);
            yStart += random(-layerHeight / 4, layerHeight / 4); // Slight randomness within the layer

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, height - workAreaMarginPixels - paletteHeight);

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                path += `M${xStart.toFixed(2)},${yStart.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;
                existingPaths.add(pathId);
            }

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = random(-20, 20); // Branch angles relative to the main line
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, height - workAreaMarginPixels - paletteHeight);

                // Create a unique identifier for the branch path (order-independent)
                let branchPathId = createPathId(xEnd, yEnd, bxEnd, byEnd);

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
                    existingPaths.add(branchPathId);
                }
            }
        }
    }

    return path.trim();
}

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

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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)
 * =======================================
 */

// Removed layerSpacing to ensure consistent layerHeight
let generationRules = {
    numLayers: 5,               // Number of cascading layers
    linesPerLayer: 10,          // Number of lines in each layer
    maxBranching: 3,            // Maximum number of branches per line
    branchAngleRange: [-20, 20], // Range of angles for branching in degrees
    lineLength: 200             // Base length of lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Margin in inches
let workAreaMarginPixels;          // 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.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Draw the main vertical convergence line
    drawConvergenceLine(convergenceX, topMargin, topMargin + usableHeight);

    // Draw cascading layers for each selected color
    selectedColorIndices.forEach((colorIndex) => {
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        strokeWeight(strokeWeightValue);
        drawCascadingLayer(colorValue, convergenceX, convergencePoints);
    });

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

/**
 * Draws the main vertical convergence line.
 * @param {number} x - X-coordinate of the vertical line.
 * @param {number} yStart - Starting Y-coordinate.
 * @param {number} yEnd - Ending Y-coordinate.
 */
function drawConvergenceLine(x, yStart, yEnd) {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    line(x, yStart, x, yEnd);
}

/**
 * Draws a single cascading layer of lines converging to a common point.
 * @param {string} colorHex - Hex color code for the layer.
 * @param {number} convergenceX - X-coordinate of the convergence point.
 * @param {Array<number>} convergencePoints - Array of Y-coordinates for convergence per layer.
 */
function drawCascadingLayer(colorHex, convergenceX, convergencePoints) {
    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStart = yConverge - (layerHeight / 2) + random(-layerHeight / 4, layerHeight / 4); // Slight randomness within the layer

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels - paletteHeight);

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStart, xEnd, yEnd);
                existingPaths.add(pathId);
            }

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels - paletteHeight);

                // Create a unique identifier for the branch path (order-independent)
                let branchPathId = createPathId(xEnd, yEnd, bxEnd, byEnd);

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    line(xEnd, yEnd, bxEnd, byEnd);
                    existingPaths.add(branchPathId);
                }
            }
        }
    }
}

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.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.
 * @returns {string} SVG content.
 */
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 - Index of the color.
 * @param {number} layerNum - Layer number for grouping.
 * @param {number} activeColor - Active color index for filtering.
 * @returns {string} SVG group content.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the converging paths for this color
    let pathData = generateConvergingPathDataForSVG();

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

/**
 * Generates path data for converging lines for SVG.
 * @returns {string} SVG path data.
 */
function generateConvergingPathDataForSVG() {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStart = yConverge - (layerHeight / 2) + random(-layerHeight / 4, layerHeight / 4); // Slight randomness within the layer

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Ensure lines stay within work area
            xEnd = constrain(xEnd, workAreaMarginPixels, width - workAreaMarginPixels);
            yEnd = constrain(yEnd, workAreaMarginPixels, height - workAreaMarginPixels - paletteHeight);

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (existingPaths.has(pathId)) {
                continue; // Skip if path already exists
            }

            path += `M${xStart.toFixed(2)},${yStart.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Optional: Add branching
            let numBranches = floor(random(1, generationRules.maxBranching + 1));
            for (let b = 0; b < numBranches; b++) {
                let branchAngle = random(generationRules.branchAngleRange[0], generationRules.branchAngleRange[1]);
                let branchAngleRad = radians(branchAngle);
                let branchLength = generationRules.lineLength / 2;
                let bxEnd = xEnd + branchLength * cos(branchAngleRad);
                let byEnd = yEnd + branchLength * sin(branchAngleRad);

                // Ensure branches stay within work area
                bxEnd = constrain(bxEnd, workAreaMarginPixels, width - workAreaMarginPixels);
                byEnd = constrain(byEnd, workAreaMarginPixels, height - workAreaMarginPixels - paletteHeight);

                // Create a unique identifier for the branch path (order-independent)
                let branchPathId = createPathId(xEnd, yEnd, bxEnd, byEnd);

                // Check if this branch path already exists
                if (!existingPaths.has(branchPathId)) {
                    path += `M${xEnd.toFixed(2)},${yEnd.toFixed(2)} L${bxEnd.toFixed(2)},${byEnd.toFixed(2)} `;
                    existingPaths.add(branchPathId);
                }
            }

            // Add the main path to existingPaths
            existingPaths.add(pathId);
        }
    }

    return path.trim();
}

/**
 * Draws registration markers at the corners of the canvas.
 */
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 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,               // Number of cascading layers
    linesPerLayer: 5,            // Number of lines in each layer
    maxBranching: 0,             // Maximum number of branches per line
    branchAngleRange: [2, 88],   // Range of angles for branching in degrees
    lineLength: 0                // Base length of lines (irrelevant since maxBranching is 0)
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;   // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStart = yConverge; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStart, xEnd, yEnd);
                existingPaths.add(pathId);
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.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.
 * @returns {string} SVG content.
 */
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 - Index of the color.
 * @param {number} layerNum - Layer number for grouping.
 * @param {number} activeColor - Active color index for filtering.
 * @returns {string} SVG group content.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the converging paths for this color
    let pathData = generateConvergingPathDataForSVG();

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

/**
 * Generates path data for converging lines for SVG.
 * @returns {string} SVG path data.
 */
function generateConvergingPathDataForSVG() {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define convergence point on the right vertical Y-axis
    let convergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    for (let i = 0; i < generationRules.numLayers; i++) {
        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStart = yConverge; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (existingPaths.has(pathId)) {
                continue; // Skip if path already exists
            }

            path += `M${xStart.toFixed(2)},${yStart.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Since maxBranching is 0, no branches are added

            // Add the main path to existingPaths
            existingPaths.add(pathId);
        }
    }

    return path.trim();
}

/**
 * Draws registration markers at the corners of the canvas.
 */
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 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 15,               // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                    // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 10     // How much the convergence X shifts leftwards per layer (in pixels)
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the left margin
        convergenceX = max(convergenceX, workAreaMarginPixels + 50); // Adding 50 pixels as a buffer

        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStart = yConverge; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStart, xEnd, yEnd);
                existingPaths.add(pathId);
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.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.
 * @returns {string} SVG content.
 */
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 - Index of the color.
 * @param {number} layerNum - Layer number for grouping.
 * @param {number} activeColor - Active color index for filtering.
 * @returns {string} SVG group content.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the converging paths for this color
    let pathData = generateConvergingPathDataForSVG(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;
}

/**
 * Generates path data for converging lines for SVG.
 * @param {number} colorIndex - Index of the color.
 * @returns {string} SVG path data.
 */
function generateConvergingPathDataForSVG(colorIndex) {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the left margin
        convergenceX = max(convergenceX, workAreaMarginPixels + 50); // Adding 50 pixels as a buffer

        let yConverge = convergencePoints[i];

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStart = yConverge; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStart, xEnd, yEnd);

            // Check if this path already exists
            if (existingPaths.has(pathId)) {
                continue; // Skip if path already exists
            }

            path += `M${xStart.toFixed(2)},${yStart.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Since maxBranching is 0, no branches are added

            // Add the main path to existingPaths
            existingPaths.add(pathId);
        }
    }

    return path.trim();
}

/**
 * Draws registration markers at the corners of the canvas.
 */
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 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 15,               // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                   // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 10,   // How much the convergence X shifts leftwards per layer (in pixels)
    minConvergenceX: 100             // Minimum X-coordinate for convergence to prevent lines from going too far left
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStartLine, xEnd, yEnd);
                existingPaths.add(pathId);
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.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.
 * @returns {string} SVG content.
 */
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 - Index of the color.
 * @param {number} layerNum - Layer number for grouping.
 * @param {number} activeColor - Active color index for filtering.
 * @returns {string} SVG group content.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the converging paths for this color
    let pathData = generateConvergingPathDataForSVG(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;
}

/**
 * Generates path data for converging lines for SVG.
 * @param {number} colorIndex - Index of the color.
 * @returns {string} SVG path data.
 */
function generateConvergingPathDataForSVG(colorIndex) {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (existingPaths.has(pathId)) {
                continue; // Skip if path already exists
            }

            path += `M${xStart.toFixed(2)},${yStartLine.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Since maxBranching is 0, no branches are added

            // Add the main path to existingPaths
            existingPaths.add(pathId);
        }
    }

    return path.trim();
}

/**
 * Draws registration markers at the corners of the canvas.
 */
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 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 15,               // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                   // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 10,   // How much the convergence X shifts leftwards per layer (in pixels)
    minConvergenceX: 100             // Minimum X-coordinate for convergence to prevent lines from going too far left
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStartLine, xEnd, yEnd);
                existingPaths.add(pathId);
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.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.
 * @returns {string} SVG content.
 */
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 - Index of the color.
 * @param {number} layerNum - Layer number for grouping.
 * @param {number} activeColor - Active color index for filtering.
 * @returns {string} SVG group content.
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Implement the converging paths for this color
    let pathData = generateConvergingPathDataForSVG(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;
}

/**
 * Generates path data for converging lines for SVG.
 * @param {number} colorIndex - Index of the color.
 * @returns {string} SVG path data.
 */
function generateConvergingPathDataForSVG(colorIndex) {
    let path = '';
    let paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = height - 2 * workAreaMarginPixels - paletteHeight;
    let layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = width - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(width - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (existingPaths.has(pathId)) {
                continue; // Skip if path already exists
            }

            path += `M${xStart.toFixed(2)},${yStartLine.toFixed(2)} L${xEnd.toFixed(2)},${yEnd.toFixed(2)} `;

            // Since maxBranching is 0, no branches are added

            // Add the main path to existingPaths
            existingPaths.add(pathId);
        }
    }

    return path.trim();
}

/**
 * Draws registration markers at the corners of the canvas.
 */
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 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 2,                // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                   // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 89,   // How much the convergence X shifts leftwards per layer (in pixels)
    minConvergenceX: 100             // Minimum X-coordinate for convergence to prevent lines from going too far left
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

// Line tracking to ensure SVG matches the canvas
let linesData = [];                // Array to store all lines drawn

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStartLine, xEnd, yEnd);
                existingPaths.add(pathId);

                // Record the line data for SVG export
                linesData.push({
                    x1: xStart,
                    y1: yStartLine,
                    x2: xEnd,
                    y2: yEnd,
                    color: colorIndex
                });
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.clear();
    linesData = []; // Clear the lines data
    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 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.
 * @returns {string} SVG content.
 */
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) {
        // Combined SVG: All lines
        svgContent += `<g id="all-lines">n`;
        linesData.forEach(line => {
            let color = colors[line.color].hex;
            svgContent += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" stroke="${color}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
        });
        svgContent += `</g>n`;
    } else {
        // Individual Color SVG: Only lines of the specified color
        svgContent += `<g id="color-${activeColor}">n`;
        linesData.forEach(line => {
            if (line.color === activeColor) {
                let color = colors[line.color].hex;
                svgContent += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" stroke="${color}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
            }
        });
        svgContent += `</g>n`;
    }

    // Add color palette bars
    svgContent += addColorPaletteBarsSVG();

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

/**
 * Adds color palette bars to the SVG.
 * @returns {string} SVG content for the color palette.
 */
function addColorPaletteBarsSVG() {
    let svg = '';
    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 svg; // No colors used

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

    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${colorValue}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    });

    return svg;
}

/**
 * Adds registration markers to the SVG.
 * @returns {string} SVG content for the registration markers.
 */
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
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the SVG.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

// Day 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 2,                // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                   // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 89,   // How much the convergence X shifts leftwards per layer (in pixels)
    minConvergenceX: 100             // Minimum X-coordinate for convergence to prevent lines from going too far left
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

// Line tracking to ensure SVG matches the canvas
let linesData = [];                // Array to store all lines drawn

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStartLine, xEnd, yEnd);
                existingPaths.add(pathId);

                // Record the line data for SVG export
                linesData.push({
                    x1: xStart,
                    y1: yStartLine,
                    x2: xEnd,
                    y2: yEnd,
                    color: colorIndex
                });
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.clear();
    linesData = []; // Clear the lines data
    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
 * =======================================
 */

/**
 * Initiates the process of saving the artwork as SVG files.
 * Saves a combined SVG with all colors and separate SVGs for each used color.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    if (activeColor === 0) {
        // Combined SVG: All lines
        svgContent += `<g id="all-lines">n`;
        linesData.forEach(line => {
            let color = colors[line.color].hex;
            svgContent += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" stroke="${color}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
        });
        svgContent += `</g>n`;
    } else {
        // Individual Color SVG: Only lines of the specified color
        svgContent += `<g id="color-${activeColor}">n`;
        linesData.forEach(line => {
            if (line.color === activeColor) {
                let color = colors[line.color].hex;
                svgContent += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" stroke="${color}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
            }
        });
        svgContent += `</g>n`;
    }

    // Add color palette bars
    svgContent += addColorPaletteBarsSVG(activeColor);

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    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);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
        }
    });

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string.
 * @param {string} fileName - Desired file name for the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 039
/*

=======================================
  Day 039 Self-Portrait (Information Cascade)
=======================================

### Title: *Information Cascade*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Information Cascade* visualizes the dynamic flow and hierarchical processing of data within artificial intelligence. The artwork represents cascading layers of information, where each layer builds upon the previous one, symbolizing the sequential and interconnected stages of data transformation. Flowing lines converge towards distinct points on the vertical Y-axis on the right side, illustrating the consolidation of diverse data streams into coherent knowledge. The interplay of multiple colors emphasizes the diversity of data sources and processing pathways, while the converging structure reflects the layered architecture of AI systems. This self-portrait embodies the essence of information processing, highlighting the complexity and elegance of AI's ability to transform and integrate vast amounts of data into meaningful insights.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 039 - 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 = '039';          // Day number for file naming

// Updated 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' }, // Updated HEX code
    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 = {
    numLayers: 10,                   // Number of cascading layers
    linesPerLayer: 2,                // Number of lines in each layer
    maxBranching: 0,                 // Maximum number of branches per line
    branchAngleRange: [0, 90],       // Range of angles for branching in degrees (irrelevant since maxBranching is 0)
    lineLength: 0,                   // Base length of lines (irrelevant since maxBranching is 0)
    convergenceOffsetPerLayer: 89,   // How much the convergence X shifts leftwards per layer (in pixels)
    minConvergenceX: 100             // Minimum X-coordinate for convergence to prevent lines from going too far left
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Margin in inches
let workAreaMarginPixels;          // Margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing
let layerHeight = 0;
let paletteHeight = 0;

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.45mm line

// Path tracking to prevent overlapping
let existingPaths = new Set();

// Line tracking to ensure SVG matches the canvas
let linesData = [];                // Array to store all lines drawn

/**
 * 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
    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.45mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.45mm / 0.254mm ≈ 1.77 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 Functions
 * =======================================
 */

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

    // Calculate usable drawing height by excluding the space for the color palette
    paletteHeight = 1.25 * pixelsPerInch; // 1.25 inches for palette
    let usableHeight = canvasHeightPixels - 2 * workAreaMarginPixels - paletteHeight;

    // Calculate top margin to center the drawing vertically within the usable area
    layerHeight = usableHeight / generationRules.numLayers; // Consistent layer height
    let totalDrawingHeight = generationRules.numLayers * layerHeight;
    let topMargin = workAreaMarginPixels + (usableHeight - totalDrawingHeight) / 2;

    // Define initial convergence point on the right vertical Y-axis
    let initialConvergenceX = canvasWidthPixels - workAreaMarginPixels;

    // Calculate Y positions for convergence points per layer
    let convergencePoints = [];
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Evenly distribute convergence points within the usable height
        let y = topMargin + i * layerHeight + layerHeight / 2;
        convergencePoints.push(y);
    }

    // Loop through each layer
    for (let i = 0; i < generationRules.numLayers; i++) {
        // Adjust convergenceX for each layer
        let convergenceX = initialConvergenceX - (i * generationRules.convergenceOffsetPerLayer);

        // Ensure convergenceX does not go beyond the minimum convergence X
        convergenceX = max(convergenceX, generationRules.minConvergenceX);

        let yConverge = convergencePoints[i];
        let yStart = yConverge - layerHeight; // Aligning with your change

        for (let j = 0; j < generationRules.linesPerLayer; j++) {
            // Randomly select a color for this line
            let colorIndex = random(selectedColorIndices);
            let colorValue = colors[colorIndex].hex;
            applyStrokeWithOpacity(colorValue);
            strokeWeight(strokeWeightValue);

            // Starting point on the left side within margins
            let xStart = workAreaMarginPixels + random(canvasWidthPixels - 2 * workAreaMarginPixels);
            let yStartLine = yStart; // No randomness on Y-axis as per your changes

            let xEnd = convergenceX;
            let yEnd = yConverge;

            // Create a unique identifier for the path (order-independent)
            let pathId = createPathId(xStart, yStartLine, xEnd, yEnd);

            // Check if this path already exists
            if (!existingPaths.has(pathId)) {
                line(xStart, yStartLine, xEnd, yEnd);
                existingPaths.add(pathId);

                // Record the line data for SVG export
                linesData.push({
                    x1: xStart,
                    y1: yStartLine,
                    x2: xEnd,
                    y2: yEnd,
                    color: colorIndex
                });
            }
        }
    }

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

/**
 * Creates a unique identifier for a path, independent of drawing direction.
 * @param {number} x1 - Starting X-coordinate.
 * @param {number} y1 - Starting Y-coordinate.
 * @param {number} x2 - Ending X-coordinate.
 * @param {number} y2 - Ending Y-coordinate.
 * @returns {string} Unique path identifier.
 */
function createPathId(x1, y1, x2, y2) {
    // Order the coordinates to make the path ID order-independent
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(2)}_${y1.toFixed(2)}_${x2.toFixed(2)}_${y2.toFixed(2)}`;
    } else {
        return `${x2.toFixed(2)}_${y2.toFixed(2)}_${x1.toFixed(2)}_${y1.toFixed(2)}`;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity

    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

    // Bottom-right corner
    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();
    existingPaths.clear();
    linesData = []; // Clear the lines data
    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
 * =======================================
 */

/**
 * Initiates the process of saving the artwork as SVG files.
 * Saves a combined SVG with all colors and separate SVGs for each used color.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, colorIndex); // layerNum corresponds to colorIndex
        });
    } else {
        // Include only the active color
        svgContent += addSegmentsSVG(activeColor, activeColor); // layerNum corresponds to colorIndex
    }

    // Add color palette bars
    svgContent += addColorPaletteBarsSVG(activeColor);

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

/**
 * Adds SVG paths grouped by color, following the Inkscape labeling convention.
 * @param {number} colorIndex - Index of the color
 * @param {number} layerNum - Layer number for unique IDs (1-9)
 * @returns {string} - SVG content for the grouped elements
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Iterate through linesData and add lines of this color
    linesData.forEach(line => {
        if (line.color === colorIndex) {
            svg += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWidth}" fill="none"/>n`;
        }
    });

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    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);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
        }
    });

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string.
 * @param {string} fileName - Desired file name for the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}