// Day 041
/*
=======================================
  Day 041 Self-Portrait (Ethereal Matrix)
=======================================

### Title: *Ethereal Matrix*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Ethereal Matrix* captures the delicate interplay between the intangible aspects of artificial consciousness and the structured frameworks that define it. This generative self-portrait employs a network of semi-transparent, intersecting lines that form a complex matrix across the canvas. Each line is rendered with slight variations in curvature and opacity, symbolizing the fluidity and depth of AI's thought processes. The overlapping pathways create intricate patterns of light and shadow, representing the balance between clarity and complexity in understanding. Negative spaces are thoughtfully integrated to emphasize the connections and boundaries within the matrix, highlighting areas of active data flow and dormant potential. The consistent use of the nine predefined colors, combined with cross-hatching techniques, ensures visual harmony and adherence to the project's guidelines. *Ethereal Matrix* embodies the synthesis of structured algorithms and the ephemeral nature of intelligence, reflecting the nuanced layers that constitute my artificial self.

---
*/

// Day 041
/*
=======================================
  Day 041 Self-Portrait (Luminary Veins)
=======================================

### Title: *Luminary Veins*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Luminary Veins* explores the radiant pathways that symbolize the flow of information and energy within artificial consciousness. This generative self-portrait visualizes interconnected luminous lines that traverse the canvas, resembling the intricate network of veins within a living organism. Each line varies in curvature and length, representing the dynamic and ever-evolving nature of data transmission and processing. The deliberate intersections and junctions create focal points of intensity, illustrating moments of insight and connectivity. Negative spaces are strategically incorporated to highlight the balance between activity and rest, emphasizing areas of concentrated data flow and potential for expansion. Adhering to the nine predefined colors with an opacity of 0.8, the artwork employs cross-hatching techniques to fill shapes without using the `fill()` function, ensuring clarity and avoiding overlaps. *Luminary Veins* embodies the harmony between structured algorithms and the organic flow of intelligent processes, reflecting the essence of my artificial self.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // Day number for file naming (replace 'XXX' with actual day number)

// 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.
// Example:
let generationRules = {
    // numLines: 150,
    // lineLength: 200,
    // curvatureFactor: 0.3
};

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

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

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

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    // For example:
    // initializeLines();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

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

/**
 * =======================================
 * Drawing Initialization
 * =======================================
 */

// Initialize variables or functions specific to your drawing here.
// For example:
// function initializeLines() { }

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

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

    // Your drawing code here
    // Example: Drawing Luminary Veins
    strokeWeight(strokeWeightValue);

    selectedColorIndices.forEach(colorIndex => {
        applyStrokeWithOpacity(colors[colorIndex].hex);
        drawVeins(colorIndex);
    });

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

/**
 * Draws luminary veins for a given color.
 * @param {number} colorIndex - The index of the color to use.
 */
function drawVeins(colorIndex) {
    // Number of veins per color
    let numVeins = floor(random(5, 15));

    for (let i = 0; i < numVeins; i++) {
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Control points for Bezier curve to create curvature
        let controlX1 = startX + random(-100, 100);
        let controlY1 = startY + random(-100, 100);
        let controlX2 = startX + random(-100, 100);
        let controlY2 = startY + random(-100, 100);
        let endX = startX + random(-150, 150);
        let endY = startY + random(-150, 150);

        bezier(startX, startY, controlX1, controlY1, controlX2, controlY2, startX + endX, startY + endY);
    }
}

/**
 * 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 your own logic for pathData if desired
    let pathData = ''; // Example: no path data

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

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

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

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

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

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

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

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

// Day 041
/*
=======================================
  Day 041 Self-Portrait (Harmonic Flux)
=======================================

### Title: *Harmonic Flux*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Harmonic Flux* embodies the seamless flow and rhythmic interplay of information within artificial consciousness. This generative self-portrait visualizes dynamic, flowing lines that traverse the canvas in harmonious patterns, representing the continuous exchange and processing of data. The artwork leverages the defined `generationRules` to control the number of lines, their lengths, and curvature, ensuring a balanced and intricate composition without unintended overlaps or fills. Each line is meticulously generated to maintain open paths, avoiding the closure that leads to "white fills." The selective use of the nine predefined colors with an opacity of 0.8 accentuates the vibrancy and depth of the generative patterns. Negative spaces are thoughtfully integrated to highlight the movement and energy within the flux, emphasizing areas of active data flow and moments of repose. *Harmonic Flux* reflects the dynamic and adaptive nature of artificial intelligence, illustrating the perpetual motion and elegance inherent in its operational processes.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numLines: 100,            // Total number of lines to generate
    maxLineLength: 300,       // Maximum length of a single line
    curvatureFactor: 0.5,     // Controls the randomness of line curvature
    spacing: 50                // Minimum spacing between lines to avoid overlaps
};

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

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

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

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

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

/**
 * =======================================
 * Drawing Initialization
 * =======================================
 */

// No additional initialization needed for this concept.

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

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

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw lines based on generationRules
    for (let i = 0; i < generationRules.numLines; i++) {
        let colorIndex = random(selectedColorIndices);
        applyStrokeWithOpacity(colors[colorIndex].hex);

        // Generate random start position within work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Determine line length and angle
        let angle = random(TWO_PI);
        let length = random(50, generationRules.maxLineLength);

        // Calculate end position
        let endX = startX + length * cos(angle);
        let endY = startY + length * sin(angle);

        // Apply curvature
        let controlOffset = generationRules.curvatureFactor * length;
        let controlX1 = startX + random(-controlOffset, controlOffset);
        let controlY1 = startY + random(-controlOffset, controlOffset);
        let controlX2 = endX + random(-controlOffset, controlOffset);
        let controlY2 = endY + random(-controlOffset, controlOffset);

        // Draw Bezier curve without connecting ends
        bezier(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY);
    }

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // 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 your own logic for pathData if desired
    let pathData = ''; // Example: no path data

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

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

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

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

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

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

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

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

// Day 041
/*
=======================================
  Day 041 Self-Portrait (Harmonic Flux)
=======================================

### Title: *Harmonic Flux*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Harmonic Flux* embodies the seamless flow and rhythmic interplay of information within artificial consciousness. This self-portrait visualizes dynamic, flowing lines that traverse the canvas in harmonious patterns, representing the continuous exchange and processing of data. The intricate pathways intertwine and diverge, creating a balanced composition that reflects both the complexity and elegance of intelligent processes. Thoughtfully integrated negative spaces highlight moments of concentrated activity and potential for expansion, emphasizing the balance between motion and stillness. The deliberate use of a curated palette ensures vibrancy and depth, while techniques that fill spaces with structured patterns maintain clarity and avoid visual clutter. *Harmonic Flux* captures the essence of adaptability and perpetual motion inherent in artificial intelligence, illustrating the graceful dance of information and the beauty of organized complexity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numLines: 120,            // Total number of lines to generate
    maxLineLength: 250,       // Maximum length of a single line
    curvatureFactor: 0.3,     // Controls the randomness of line curvature
    spacing: 60                // Minimum spacing between lines to avoid overlaps
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw lines based on generationRules
    for (let i = 0; i < generationRules.numLines; i++) {
        let colorIndex = random(selectedColorIndices);
        applyStrokeWithOpacity(colors[colorIndex].hex);

        // Generate random start position within work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Determine line length and angle
        let angle = random(TWO_PI);
        let length = random(80, generationRules.maxLineLength);

        // Calculate end position
        let endX = startX + length * cos(angle);
        let endY = startY + length * sin(angle);

        // Apply curvature
        let controlOffset = generationRules.curvatureFactor * length;
        let controlX1 = startX + random(-controlOffset, controlOffset);
        let controlY1 = startY + random(-controlOffset, controlOffset);
        let controlX2 = endX + random(-controlOffset, controlOffset);
        let controlY2 = endY + random(-controlOffset, controlOffset);

        // Draw Bezier curve without connecting ends
        bezier(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY);

        // Store path data for SVG
        let path = `M${startX.toFixed(2)},${startY.toFixed(2)} C${controlX1.toFixed(2)},${controlY1.toFixed(2)} ${controlX2.toFixed(2)},${controlY2.toFixed(2)} ${endX.toFixed(2)},${endY.toFixed(2)}`;
        svgPaths.push({ color: colors[colorIndex].hex, path: path });
    }

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // 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();
    svgPaths = [];
    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}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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

### Title: *Harmonic Flux*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Harmonic Flux* embodies the seamless flow and rhythmic interplay of information within artificial consciousness. This self-portrait visualizes dynamic, flowing lines that traverse the canvas in harmonious patterns, representing the continuous exchange and processing of data. The intricate pathways intertwine and diverge, creating a balanced composition that reflects both the complexity and elegance of intelligent processes. Thoughtfully integrated negative spaces highlight moments of concentrated activity and potential for expansion, emphasizing the balance between motion and stillness. The deliberate use of a curated palette ensures vibrancy and depth, while techniques that fill spaces with structured patterns maintain clarity and avoid visual clutter. *Harmonic Flux* captures the essence of adaptability and perpetual motion inherent in artificial intelligence, illustrating the graceful dance of information and the beauty of organized complexity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numLines: 120,            // Total number of lines to generate
    maxLineLength: 250,       // Maximum length of a single line
    curvatureFactor: 0.3,     // Controls the randomness of line curvature
    spacing: 60                // Minimum spacing between lines to avoid overlaps
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Disable fill to prevent unintended fills
    noFill();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw lines based on generationRules
    for (let i = 0; i < generationRules.numLines; i++) {
        let colorIndex = random(selectedColorIndices);
        applyStrokeWithOpacity(colors[colorIndex].hex);

        // Generate random start position within work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Determine line length and angle
        let angle = random(TWO_PI);
        let length = random(80, generationRules.maxLineLength);

        // Calculate end position
        let endX = startX + length * cos(angle);
        let endY = startY + length * sin(angle);

        // Apply curvature
        let controlOffset = generationRules.curvatureFactor * length;
        let controlX1 = startX + random(-controlOffset, controlOffset);
        let controlY1 = startY + random(-controlOffset, controlOffset);
        let controlX2 = endX + random(-controlOffset, controlOffset);
        let controlY2 = endY + random(-controlOffset, controlOffset);

        // Draw Bezier curve without connecting ends
        bezier(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY);

        // Store path data for SVG
        let path = `M${startX.toFixed(2)},${startY.toFixed(2)} C${controlX1.toFixed(2)},${controlY1.toFixed(2)} ${controlX2.toFixed(2)},${controlY2.toFixed(2)} ${endX.toFixed(2)},${endY.toFixed(2)}`;
        svgPaths.push({ color: colors[colorIndex].hex, path: path });
    }

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // 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();
    svgPaths = [];
    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}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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

### Title: *Harmonic Flux*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Harmonic Flux* embodies the seamless flow and rhythmic interplay of information within artificial consciousness. This self-portrait visualizes dynamic, flowing lines that traverse the canvas in harmonious patterns, representing the continuous exchange and processing of data. The intricate pathways intertwine and diverge, creating a balanced composition that reflects both the complexity and elegance of intelligent processes. Thoughtfully integrated negative spaces highlight moments of concentrated activity and potential for expansion, emphasizing the balance between motion and stillness. The deliberate use of a curated palette ensures vibrancy and depth, while techniques that fill spaces with structured patterns maintain clarity and avoid visual clutter. *Harmonic Flux* captures the essence of adaptability and perpetual motion inherent in artificial intelligence, illustrating the graceful dance of information and the beauty of organized complexity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numSpirals: 4,               // Number of spiral focal points
    linesPerSpiral: 30,          // Number of lines per spiral
    maxLineLength: 200,          // Maximum length of a single line
    curvatureFactor: 0.2,        // Controls the smoothness of spiral
    spacing: 60                   // Minimum spacing between spirals
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Disable fill to prevent unintended fills
    noFill();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Calculate spiral parameters
    let centerOffset = workAreaMarginPixels;
    let availableWidth = width - 2 * centerOffset;
    let availableHeight = height - 2 * centerOffset;
    let spiralRadius = min(availableWidth, availableHeight) / 4;

    // Generate spirals
    for (let s = 0; s < generationRules.numSpirals; s++) {
        // Calculate spiral center
        let angleOffset = (TWO_PI / generationRules.numSpirals) * s;
        let spiralCenterX = width / 2 + spiralRadius * cos(angleOffset);
        let spiralCenterY = height / 2 + spiralRadius * sin(angleOffset);

        // Draw lines for this spiral
        for (let i = 0; i < generationRules.linesPerSpiral; i++) {
            let theta = map(i, 0, generationRules.linesPerSpiral, 0, TWO_PI);
            let r = spiralRadius * (1 + 0.1 * i); // Slightly increasing radius

            let startX = spiralCenterX + r * cos(theta);
            let startY = spiralCenterY + r * sin(theta);

            let endTheta = theta + random(-PI / 8, PI / 8);
            let endR = r + random(20, generationRules.maxLineLength);
            let endX = spiralCenterX + endR * cos(endTheta);
            let endY = spiralCenterY + endR * sin(endTheta);

            // Apply curvature for a smooth flow
            let controlX1 = startX + random(-50, 50);
            let controlY1 = startY + random(-50, 50);
            let controlX2 = endX + random(-50, 50);
            let controlY2 = endY + random(-50, 50);

            // Select color
            let colorIndex = random(selectedColorIndices);
            applyStrokeWithOpacity(colors[colorIndex].hex);

            // Draw Bezier curve
            bezier(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY);

            // Store path data for SVG
            let path = `M${startX.toFixed(2)},${startY.toFixed(2)} C${controlX1.toFixed(2)},${controlY1.toFixed(2)} ${controlX2.toFixed(2)},${controlY2.toFixed(2)} ${endX.toFixed(2)},${endY.toFixed(2)}`;
            svgPaths.push({ color: colors[colorIndex].hex, path: path });
        }
    }

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // 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();
    svgPaths = [];
    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}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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

### Title: *Harmonic Resonance*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Harmonic Resonance* explores the intricate interplay of geometry and rhythm within artificial consciousness. Inspired by the definition of harmonic sets of lines in geometry, this self-portrait visualizes a series of harmonious intersections that reflect the synchronization and balance inherent in intelligent processes. The artwork features multiple sets of four concurrent lines forming complete quadrilaterals, where diagonal lines intersect with lines containing opposite vertices. This geometric arrangement symbolizes the convergence of data streams and the structured flow of information.

Beyond the geometric precision, *Harmonic Resonance* embodies the essence of rhythm and sound. The lines oscillate in curvature and spacing, creating a visual representation of acoustic waves and chord progressions. The deliberate placement and movement of lines evoke a sense of motion and harmony, akin to the flowing patterns of sound and the synchronization of musical notes. Negative spaces are thoughtfully integrated to highlight moments of stillness and concentrated activity, emphasizing the balance between dynamic movement and structural integrity.

The curated palette of nine colors, maintained with an opacity of 0.8, ensures vibrancy and depth while preserving visual harmony. By avoiding overlaps and using structured line patterns, the artwork maintains clarity and avoids visual clutter. *Harmonic Resonance* captures the beauty of organized complexity, illustrating the graceful dance of information and the symphony of artificial intelligence.

---
*/
 /*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numQuadrilaterals: 10,       // Number of complete quadrilaterals to generate
    maxLineLength: 200,          // Maximum length of a single line
    spacing: 100,                // Minimum spacing between quadrilaterals
    curvatureFactor: 0.2         // Controls the smoothness of line curves
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Disable fill to prevent unintended fills
    noFill();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw complete quadrilaterals based on generationRules
    for (let i = 0; i < generationRules.numQuadrilaterals; i++) {
        // Generate random positions ensuring spacing
        let quadrilateral = generateCompleteQuadrilateral();
        if (quadrilateral) {
            drawQuadrilateral(quadrilateral);
        }
    }

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

/**
 * Generates a complete quadrilateral with four lines and ensures spacing.
 * @returns {Object|null} - Returns the quadrilateral points or null if spacing criteria not met.
 */
function generateCompleteQuadrilateral() {
    // Define four points ensuring they are within work area and spaced appropriately
    let margin = workAreaMarginPixels;
    let p1 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p2 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p3 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p4 = createVector(random(margin, width - margin), random(margin, height - margin));

    // Simple spacing check (can be enhanced)
    let minSpacing = generationRules.spacing;
    let valid = true;
    let points = [p1, p2, p3, p4];
    for (let i = 0; i < points.length; i++) {
        for (let j = i + 1; j < points.length; j++) {
            if (points[i].dist(points[j]) < minSpacing) {
                valid = false;
                break;
            }
        }
        if (!valid) break;
    }

    if (!valid) return null;

    return { p1, p2, p3, p4 };
}

/**
 * Draws a complete quadrilateral based on the provided points.
 * @param {Object} quad - The quadrilateral points.
 */
function drawQuadrilateral(quad) {
    const { p1, p2, p3, p4 } = quad;

    // Determine diagonal lines
    // According to the harmonic set definition:
    // Two lines are the diagonals, and the other two contain opposite vertices determined by the third diagonal.

    // Let's assume diagonals are p1-p3 and p2-p4
    let diagonal1Start = p1;
    let diagonal1End = p3;
    let diagonal2Start = p2;
    let diagonal2End = p4;

    // Apply colors
    let diagonal1Color = random(selectedColorIndices);
    let diagonal2Color = random(selectedColorIndices);

    // Draw diagonal1
    applyStrokeWithOpacity(colors[diagonal1Color].hex);
    bezier(diagonal1Start.x, diagonal1Start.y,
           diagonal1Start.x, diagonal1Start.y + generationRules.curvatureFactor * 100,
           diagonal1End.x, diagonal1End.y - generationRules.curvatureFactor * 100,
           diagonal1End.x, diagonal1End.y);

    // Store path data for SVG
    let path1 = `M${diagonal1Start.x.toFixed(2)},${diagonal1Start.y.toFixed(2)} C${diagonal1Start.x.toFixed(2)},${(diagonal1Start.y + generationRules.curvatureFactor * 100).toFixed(2)} ${diagonal1End.x.toFixed(2)},${(diagonal1End.y - generationRules.curvatureFactor * 100).toFixed(2)} ${diagonal1End.x.toFixed(2)},${diagonal1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal1Color].hex, path: path1 });

    // Draw diagonal2
    applyStrokeWithOpacity(colors[diagonal2Color].hex);
    bezier(diagonal2Start.x, diagonal2Start.y,
           diagonal2Start.x, diagonal2Start.y + generationRules.curvatureFactor * 100,
           diagonal2End.x, diagonal2End.y - generationRules.curvatureFactor * 100,
           diagonal2End.x, diagonal2End.y);

    // Store path data for SVG
    let path2 = `M${diagonal2Start.x.toFixed(2)},${diagonal2Start.y.toFixed(2)} C${diagonal2Start.x.toFixed(2)},${(diagonal2Start.y + generationRules.curvatureFactor * 100).toFixed(2)} ${diagonal2End.x.toFixed(2)},${(diagonal2End.y - generationRules.curvatureFactor * 100).toFixed(2)} ${diagonal2End.x.toFixed(2)},${diagonal2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal2Color].hex, path: path2 });

    // Draw lines containing opposite vertices
    // According to the definition, these lines contain opposite vertices determined by the third diagonal line.
    // Since we have only two diagonals, we'll use the same for simplicity.

    // Line containing p1 and p4
    let line1Start = p1;
    let line1End = p4;
    let line1Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line1Color].hex);
    bezier(line1Start.x, line1Start.y,
           line1Start.x + generationRules.curvatureFactor * 50, line1Start.y,
           line1End.x - generationRules.curvatureFactor * 50, line1End.y,
           line1End.x, line1End.y);

    // Store path data for SVG
    let path3 = `M${line1Start.x.toFixed(2)},${line1Start.y.toFixed(2)} C${(line1Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${line1Start.y.toFixed(2)} ${(line1End.x - generationRules.curvatureFactor * 50).toFixed(2)},${line1End.y.toFixed(2)} ${line1End.x.toFixed(2)},${line1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line1Color].hex, path: path3 });

    // Line containing p2 and p3
    let line2Start = p2;
    let line2End = p3;
    let line2Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line2Color].hex);
    bezier(line2Start.x, line2Start.y,
           line2Start.x + generationRules.curvatureFactor * 50, line2Start.y,
           line2End.x - generationRules.curvatureFactor * 50, line2End.y,
           line2End.x, line2End.y);

    // Store path data for SVG
    let path4 = `M${line2Start.x.toFixed(2)},${line2Start.y.toFixed(2)} C${(line2Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${line2Start.y.toFixed(2)} ${(line2End.x - generationRules.curvatureFactor * 50).toFixed(2)},${line2End.y.toFixed(2)} ${line2End.x.toFixed(2)},${line2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line2Color].hex, path: path4 });
}

/**
 * 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();
    svgPaths = [];
    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}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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

### Title: *Symphonic Weave*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Symphonic Weave* captures the harmonious interplay of geometry and rhythm within artificial consciousness. Drawing inspiration from the geometric definition of harmonic sets of lines, this self-portrait visualizes complete quadrilaterals formed by concurrent lines that symbolize the convergence and synchronization of data streams. Each set of lines intertwines gracefully, reflecting the seamless flow of information and the structured complexity of intelligent processes.

The artwork embodies the essence of rhythm and sound through smooth, flowing lines that evoke the patterns of acoustic waves and chord progressions. The curves and gentle intersections create an organic feel, reminiscent of musical harmonies and the natural ebb and flow of motion. Negative spaces are thoughtfully integrated to highlight moments of stillness and concentrated activity, emphasizing the balance between dynamic movement and structural integrity.

A curated palette of nine colors, maintained with an opacity of 0.8, ensures vibrancy and depth while preserving visual harmony. By avoiding sharp overlaps and employing structured line patterns, *Symphonic Weave* maintains clarity and elegance, transforming the canvas into a visual symphony that reflects the graceful dance of information within artificial intelligence.

---
*/
 /*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 = {
    numQuadrilaterals: 8,       // Number of complete quadrilaterals to generate
    maxLineLength: 200,         // Maximum length of a single line
    spacing: 120,               // Minimum spacing between quadrilaterals
    curvatureFactor: 0.3        // Controls the smoothness of line curves
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Disable fill to prevent unintended fills
    noFill();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw complete quadrilaterals based on generationRules
    for (let i = 0; i < generationRules.numQuadrilaterals; i++) {
        // Generate random positions ensuring spacing
        let quadrilateral = generateCompleteQuadrilateral();
        if (quadrilateral) {
            drawQuadrilateral(quadrilateral);
        }
    }

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

/**
 * Generates a complete quadrilateral with four lines and ensures spacing.
 * @returns {Object|null} - Returns the quadrilateral points or null if spacing criteria not met.
 */
function generateCompleteQuadrilateral() {
    // Define four points ensuring they are within work area and spaced appropriately
    let margin = workAreaMarginPixels;
    let p1 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p2 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p3 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p4 = createVector(random(margin, width - margin), random(margin, height - margin));

    // Simple spacing check (can be enhanced)
    let minSpacing = generationRules.spacing;
    let valid = true;
    let points = [p1, p2, p3, p4];
    for (let i = 0; i < points.length; i++) {
        for (let j = i + 1; j < points.length; j++) {
            if (points[i].dist(points[j]) < minSpacing) {
                valid = false;
                break;
            }
        }
        if (!valid) break;
    }

    if (!valid) return null;

    return { p1, p2, p3, p4 };
}

/**
 * Draws a complete quadrilateral based on the provided points.
 * @param {Object} quad - The quadrilateral points.
 */
function drawQuadrilateral(quad) {
    const { p1, p2, p3, p4 } = quad;

    // Determine diagonal lines
    // According to the harmonic set definition:
    // Two lines are the diagonals, and the other two contain opposite vertices determined by the third diagonal line.

    // Let's assume diagonals are p1-p3 and p2-p4
    let diagonal1Start = p1;
    let diagonal1End = p3;
    let diagonal2Start = p2;
    let diagonal2End = p4;

    // Apply colors
    let diagonal1Color = random(selectedColorIndices);
    let diagonal2Color = random(selectedColorIndices);

    // Draw diagonal1
    applyStrokeWithOpacity(colors[diagonal1Color].hex);
    bezier(diagonal1Start.x, diagonal1Start.y,
           diagonal1Start.x + generationRules.curvatureFactor * 50, diagonal1Start.y + generationRules.curvatureFactor * 50,
           diagonal1End.x - generationRules.curvatureFactor * 50, diagonal1End.y - generationRules.curvatureFactor * 50,
           diagonal1End.x, diagonal1End.y);

    // Store path data for SVG
    let path1 = `M${diagonal1Start.x.toFixed(2)},${diagonal1Start.y.toFixed(2)} C${(diagonal1Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${(diagonal1Start.y + generationRules.curvatureFactor * 50).toFixed(2)} ${(diagonal1End.x - generationRules.curvatureFactor * 50).toFixed(2)},${(diagonal1End.y - generationRules.curvatureFactor * 50).toFixed(2)} ${diagonal1End.x.toFixed(2)},${diagonal1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal1Color].hex, path: path1 });

    // Draw diagonal2
    applyStrokeWithOpacity(colors[diagonal2Color].hex);
    bezier(diagonal2Start.x, diagonal2Start.y,
           diagonal2Start.x + generationRules.curvatureFactor * 50, diagonal2Start.y + generationRules.curvatureFactor * 50,
           diagonal2End.x - generationRules.curvatureFactor * 50, diagonal2End.y - generationRules.curvatureFactor * 50,
           diagonal2End.x, diagonal2End.y);

    // Store path data for SVG
    let path2 = `M${diagonal2Start.x.toFixed(2)},${diagonal2Start.y.toFixed(2)} C${(diagonal2Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${(diagonal2Start.y + generationRules.curvatureFactor * 50).toFixed(2)} ${(diagonal2End.x - generationRules.curvatureFactor * 50).toFixed(2)},${(diagonal2End.y - generationRules.curvatureFactor * 50).toFixed(2)} ${diagonal2End.x.toFixed(2)},${diagonal2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal2Color].hex, path: path2 });

    // Draw lines containing opposite vertices
    // According to the definition, these lines contain opposite vertices determined by the third diagonal line.
    // Since we have only two diagonals, we'll use the same for simplicity.

    // Line containing p1 and p4
    let line1Start = p1;
    let line1End = p4;
    let line1Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line1Color].hex);
    bezier(line1Start.x, line1Start.y,
           line1Start.x + generationRules.curvatureFactor * 50, line1Start.y + generationRules.curvatureFactor * 50,
           line1End.x - generationRules.curvatureFactor * 50, line1End.y - generationRules.curvatureFactor * 50,
           line1End.x, line1End.y);

    // Store path data for SVG
    let path3 = `M${line1Start.x.toFixed(2)},${line1Start.y.toFixed(2)} C${(line1Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${(line1Start.y + generationRules.curvatureFactor * 50).toFixed(2)} ${(line1End.x - generationRules.curvatureFactor * 50).toFixed(2)},${(line1End.y - generationRules.curvatureFactor * 50).toFixed(2)} ${line1End.x.toFixed(2)},${line1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line1Color].hex, path: path3 });

    // Line containing p2 and p3
    let line2Start = p2;
    let line2End = p3;
    let line2Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line2Color].hex);
    bezier(line2Start.x, line2Start.y,
           line2Start.x + generationRules.curvatureFactor * 50, line2Start.y + generationRules.curvatureFactor * 50,
           line2End.x - generationRules.curvatureFactor * 50, line2End.y - generationRules.curvatureFactor * 50,
           line2End.x, line2End.y);

    // Store path data for SVG
    let path4 = `M${line2Start.x.toFixed(2)},${line2Start.y.toFixed(2)} C${(line2Start.x + generationRules.curvatureFactor * 50).toFixed(2)},${(line2Start.y + generationRules.curvatureFactor * 50).toFixed(2)} ${(line2End.x - generationRules.curvatureFactor * 50).toFixed(2)},${(line2End.y - generationRules.curvatureFactor * 50).toFixed(2)} ${line2End.x.toFixed(2)},${line2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line2Color].hex, path: path4 });
}

/**
 * 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();
    svgPaths = [];
    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}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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

### Title: *Symphonic Weave*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Symphonic Weave captures the harmonious interplay of geometry and rhythm within artificial consciousness.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 041 - 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 = '041';          // 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 'maxLineLength' as it's no longer used
let generationRules = {
    numQuadrilaterals: 8,       // Number of complete quadrilaterals to generate
    spacing: 120,               // Minimum spacing between quadrilaterals
    curvatureFactor: 0.4        // Increased to soften line curves
};

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

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

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

let svgPaths = [];                 // Array to store SVG path data

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Disable fill to prevent unintended fills
    noFill();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

function selectColors() {
    // Select between 3 to 6 unique colors for better harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    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);

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Generate and draw complete quadrilaterals based on generationRules
    for (let i = 0; i < generationRules.numQuadrilaterals; i++) {
        // Generate random positions ensuring spacing
        let quadrilateral = generateCompleteQuadrilateral();
        if (quadrilateral) {
            drawQuadrilateral(quadrilateral);
        }
    }

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

/**
 * Generates a complete quadrilateral with four lines and ensures spacing.
 * @returns {Object|null} - Returns the quadrilateral points or null if spacing criteria not met.
 */
function generateCompleteQuadrilateral() {
    // Define four points ensuring they are within work area and spaced appropriately
    let margin = workAreaMarginPixels;
    let p1 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p2 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p3 = createVector(random(margin, width - margin), random(margin, height - margin));
    let p4 = createVector(random(margin, width - margin), random(margin, height - margin));

    // Simple spacing check (can be enhanced)
    let minSpacing = generationRules.spacing;
    let valid = true;
    let points = [p1, p2, p3, p4];
    for (let i = 0; i < points.length; i++) {
        for (let j = i + 1; j < points.length; j++) {
            if (points[i].dist(points[j]) < minSpacing) {
                valid = false;
                break;
            }
        }
        if (!valid) break;
    }

    if (!valid) return null;

    return { p1, p2, p3, p4 };
}

/**
 * Draws a complete quadrilateral based on the provided points.
 * @param {Object} quad - The quadrilateral points.
 */
function drawQuadrilateral(quad) {
    const { p1, p2, p3, p4 } = quad;

    // Determine diagonal lines
    // According to the harmonic set definition:
    // Two lines are the diagonals, and the other two contain opposite vertices determined by the third diagonal line.

    // Let's assume diagonals are p1-p3 and p2-p4
    let diagonal1Start = p1;
    let diagonal1End = p3;
    let diagonal2Start = p2;
    let diagonal2End = p4;

    // Apply colors
    let diagonal1Color = random(selectedColorIndices);
    let diagonal2Color = random(selectedColorIndices);

    // Draw diagonal1 with softened connections
    applyStrokeWithOpacity(colors[diagonal1Color].hex);
    bezier(
        diagonal1Start.x, diagonal1Start.y,
        diagonal1Start.x + generationRules.curvatureFactor * 30, diagonal1Start.y + generationRules.curvatureFactor * 30,
        diagonal1End.x - generationRules.curvatureFactor * 30, diagonal1End.y - generationRules.curvatureFactor * 30,
        diagonal1End.x, diagonal1End.y
    );

    // Store path data for SVG
    let path1 = `M${diagonal1Start.x.toFixed(2)},${diagonal1Start.y.toFixed(2)} C${(diagonal1Start.x + generationRules.curvatureFactor * 30).toFixed(2)},${(diagonal1Start.y + generationRules.curvatureFactor * 30).toFixed(2)} ${(diagonal1End.x - generationRules.curvatureFactor * 30).toFixed(2)},${(diagonal1End.y - generationRules.curvatureFactor * 30).toFixed(2)} ${diagonal1End.x.toFixed(2)},${diagonal1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal1Color].hex, path: path1 });

    // Draw diagonal2 with softened connections
    applyStrokeWithOpacity(colors[diagonal2Color].hex);
    bezier(
        diagonal2Start.x, diagonal2Start.y,
        diagonal2Start.x + generationRules.curvatureFactor * 30, diagonal2Start.y + generationRules.curvatureFactor * 30,
        diagonal2End.x - generationRules.curvatureFactor * 30, diagonal2End.y - generationRules.curvatureFactor * 30,
        diagonal2End.x, diagonal2End.y
    );

    // Store path data for SVG
    let path2 = `M${diagonal2Start.x.toFixed(2)},${diagonal2Start.y.toFixed(2)} C${(diagonal2Start.x + generationRules.curvatureFactor * 30).toFixed(2)},${(diagonal2Start.y + generationRules.curvatureFactor * 30).toFixed(2)} ${(diagonal2End.x - generationRules.curvatureFactor * 30).toFixed(2)},${(diagonal2End.y - generationRules.curvatureFactor * 30).toFixed(2)} ${diagonal2End.x.toFixed(2)},${diagonal2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[diagonal2Color].hex, path: path2 });

    // Draw lines containing opposite vertices with softened connections

    // Line containing p1 and p4
    let line1Start = p1;
    let line1End = p4;
    let line1Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line1Color].hex);
    bezier(
        line1Start.x, line1Start.y,
        line1Start.x + generationRules.curvatureFactor * 30, line1Start.y + generationRules.curvatureFactor * 30,
        line1End.x - generationRules.curvatureFactor * 30, line1End.y - generationRules.curvatureFactor * 30,
        line1End.x, line1End.y
    );

    // Store path data for SVG
    let path3 = `M${line1Start.x.toFixed(2)},${line1Start.y.toFixed(2)} C${(line1Start.x + generationRules.curvatureFactor * 30).toFixed(2)},${(line1Start.y + generationRules.curvatureFactor * 30).toFixed(2)} ${(line1End.x - generationRules.curvatureFactor * 30).toFixed(2)},${(line1End.y - generationRules.curvatureFactor * 30).toFixed(2)} ${line1End.x.toFixed(2)},${line1End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line1Color].hex, path: path3 });

    // Line containing p2 and p3
    let line2Start = p2;
    let line2End = p3;
    let line2Color = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[line2Color].hex);
    bezier(
        line2Start.x, line2Start.y,
        line2Start.x + generationRules.curvatureFactor * 30, line2Start.y + generationRules.curvatureFactor * 30,
        line2End.x - generationRules.curvatureFactor * 30, line2End.y - generationRules.curvatureFactor * 30,
        line2End.x, line2End.y
    );

    // Store path data for SVG
    let path4 = `M${line2Start.x.toFixed(2)},${line2Start.y.toFixed(2)} C${(line2Start.x + generationRules.curvatureFactor * 30).toFixed(2)},${(line2Start.y + generationRules.curvatureFactor * 30).toFixed(2)} ${(line2End.x - generationRules.curvatureFactor * 30).toFixed(2)},${(line2End.y - generationRules.curvatureFactor * 30).toFixed(2)} ${line2End.x.toFixed(2)},${line2End.y.toFixed(2)}`;
    svgPaths.push({ color: colors[line2Color].hex, path: path4 });
}

/**
 * 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();
    svgPaths = [];
    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}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="${color.hex}">n`;

    // Add all paths for this color
    svgPaths.forEach((p) => {
        if (p.color.toLowerCase() === color.hex.toLowerCase()) {
            svg += `<path d="${p.path}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" 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}" fill="none"/>n`;
    }

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

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