// Day 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 3 to 6 unique colors randomly for better visual 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);

    // Translate to center for easier drawing
    translate(width / 2, height / 2);

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        drawPetal(petalLength, petalWidth);
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 */
function drawPetal(length, width) {
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Apply stroke for the petal outline
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        applyStrokeWithOpacity(colors[selectedColorIndices[j % selectedColorIndices.length]].hex);
        line(offset, 0, -offset, length);
    }
}

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

/**
 * 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 / 2) - (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 = -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 = -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${-width / 2 + 5 + offset},${-height / 2 + offset} H${-width / 2 + offset} V${-height / 2 + 5 + offset} M${width / 2 - 5 - offset},${height / 2 - offset} H${width / 2 - offset} V${height / 2 - 5 - offset}" 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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 petalPaths = [];               // Array to store SVG path data for petals

/**
 * 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 randomly for better visual 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);

    // Reset petal paths
    petalPaths = [];

    // Translate to center for easier drawing
    push();
    translate(width / 2, height / 2);

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        let path = drawPetal(petalLength, petalWidth);
        petalPaths.push({ pathData: path, colorIndex: path.colorIndex });
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines and returns its SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width) {
    // Generate petal shape
    let pathData = `M ${(-width / 2).toFixed(2)} ${0.toFixed(2)} `;
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(offset, 0, -offset, length);
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

    // Top-left corner
    line(workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2, workAreaMarginPixels - width / 2 + 5, workAreaMarginPixels - height / 2);
    line(workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2, workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2 + 5);

    // Bottom-right corner
    line(width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels, width / 2 - workAreaMarginPixels + 5, height / 2 - workAreaMarginPixels);
    line(width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels, width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels + 5);
}

/**
 * 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 / 2) - (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 = -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();
    // Re-select colors for regeneration
    selectColors();
    // Redraw the shapes
    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
        petalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
        });
    } else {
        // Single color
        petalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
            }
        });
    }

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

/**
 * Adds a single petal's path to the SVG.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} colorIndex - The index of the color used.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(pathData, colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

    // Add intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -generationRules.petalWidth / 2, generationRules.petalWidth / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        let intersectColor = colors[intersectColorIndex].hex;
        svg += `<path d="M${offset.toFixed(2)},0 L${(-offset).toFixed(2)},${generationRules.petalLength.toFixed(2)}" stroke="${intersectColor}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWidth}" />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 ${(-width / 2) + 5 + offset} ${(-height / 2) + offset} 
        H ${(-width / 2) + offset} 
        V ${(-height / 2) + 5 + offset} 
        M ${(width / 2) - 5 - offset} ${(height / 2) - offset} 
        H ${(width / 2) - offset} 
        V ${(height / 2) - 5 - offset}" />
    </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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 petalPaths = [];               // Array to store SVG path data for petals

/**
 * 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 randomly for better visual 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);

    // Reset petal paths
    petalPaths = [];

    // Draw the blossom within its own transformation context
    push();
    translate(width / 2, height / 2); // Center the blossom

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        let path = drawPetal(petalLength, petalWidth);
        petalPaths.push({ pathData: path.pathData, colorIndex: path.colorIndex });
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines and returns its SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width) {
    // Generate petal shape
    let pathData = `M ${(-width / 2).toFixed(2)} ${0.toFixed(2)} `;
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(offset, 0, -offset, length);
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Re-select colors for regeneration
    selectColors();
    // Redraw the shapes
    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
        petalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
        });
    } else {
        // Single color
        petalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
            }
        });
    }

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

/**
 * Adds a single petal's path to the SVG.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} colorIndex - The index of the color used.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(pathData, colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

    // Add intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -generationRules.petalWidth / 2, generationRules.petalWidth / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        let intersectColor = colors[intersectColorIndex].hex;
        svg += `<path d="M${offset.toFixed(2)},0 L${(-offset).toFixed(2)},${generationRules.petalLength.toFixed(2)}" stroke="${intersectColor}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWidth}" />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 0,0 
        L 5,0 
        L 0,5 
        M ${width - 5},${height} 
        L ${width},${height} 
        L ${width},${height - 5}" />
    </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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 petalPaths = [];               // Array to store SVG path data for petals

/**
 * 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 randomly for better visual 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);

    // Reset petal paths
    petalPaths = [];

    // Draw the blossom within its own transformation context
    push();
    translate(width / 2, height / 2); // Center the blossom

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        let path = drawPetal(petalLength, petalWidth);
        petalPaths.push({ pathData: path.pathData, colorIndex: path.colorIndex });
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines and returns its SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width) {
    // Generate petal shape
    let pathData = `M ${(-width / 2).toFixed(2)} 0 `;
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(offset, 0, -offset, length);
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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


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

function resetCanvas() {
    usedColors.clear();
    // Re-select colors for regeneration
    selectColors();
    // Redraw the shapes
    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();

    // Begin translated group for petals
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // All colors
        petalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
        });
    } else {
        // Single color
        petalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
            }
        });
    }

    // Close translated group
    svgContent += `</g>n`;

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

/**
 * Adds a single petal's path to the SVG.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} colorIndex - The index of the color used.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(pathData, colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

    // Add intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -generationRules.petalWidth / 2, generationRules.petalWidth / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        let intersectColor = colors[intersectColorIndex].hex;
        svg += `<path d="M${offset.toFixed(2)},0 L${(-offset).toFixed(2)},${generationRules.petalLength.toFixed(2)}" stroke="${intersectColor}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWidth}" />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 0,0 
        L 5,0 
        L 0,5 
        M ${width - 5},${height} 
        L ${width},${height} 
        L ${width},${height - 5}" />
    </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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 petalPaths = [];               // Array to store SVG path data for petals
let palettePaths = [];             // Array to store SVG path data for palette bars

/**
 * 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 randomly for better visual 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);

    // Reset petal and palette paths
    petalPaths = [];
    palettePaths = [];

    // Draw the blossom within its own transformation context
    push();
    translate(width / 2, height / 2); // Center the blossom

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

    // Record palette paths for SVG
    recordPalettePaths();
}

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        let path = drawPetal(petalLength, petalWidth);
        petalPaths.push({ pathData: path.pathData, colorIndex: path.colorIndex });
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines and returns its SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width) {
    // Generate petal shape path data
    let pathData = `M ${(-width / 2).toFixed(2)} 0 `;
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(offset, 0, -offset, length);
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

    // Top-left corner
    line(workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2, workAreaMarginPixels - width / 2 + 5, workAreaMarginPixels - height / 2);
    line(workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2, workAreaMarginPixels - width / 2, workAreaMarginPixels - height / 2 + 5);

    // Bottom-right corner
    line(width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels, width / 2 - workAreaMarginPixels + 5, height / 2 - workAreaMarginPixels);
    line(width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels, width / 2 - workAreaMarginPixels, height / 2 - workAreaMarginPixels + 5);
}

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

        // Record palette bar path for SVG
        palettePaths.push(`M ${x.toFixed(2)} ${yStart.toFixed(2)} H ${(x + segmentLength).toFixed(2)}`);
    });
}

/**
 * Records palette bar paths for SVG export.
 */
function recordPalettePaths() {
    // This function has already recorded palette bar paths in addColorPaletteBars
    // No additional actions needed here
}

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

function resetCanvas() {
    usedColors.clear();
    // Re-select colors for regeneration
    selectColors();
    // Redraw the shapes
    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();

    // Add petals within a translated group to center them
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // All colors
        petalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
        });
    } else {
        // Single color
        petalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.pathData, petal.colorIndex, idx + 1);
            }
        });
    }

    // Close petals group
    svgContent += `</g>n`;

    // Add palette bars
    svgContent += addPaletteBarsSVG();

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

/**
 * Adds a single petal's path to the SVG.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} colorIndex - The index of the color used.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(pathData, colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

    // Add intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -generationRules.petalWidth / 2, generationRules.petalWidth / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        let intersectColor = colors[intersectColorIndex].hex;
        svg += `<path d="M${offset.toFixed(2)},0 L${(-offset).toFixed(2)},${generationRules.petalLength.toFixed(2)}" stroke="${intersectColor}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWidth}" />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 0,0 
        L 5,0 
        L 0,5 
        M ${width - 5},${height} 
        L ${width},${height} 
        L ${width},${height - 5}" />
    </g>n`;
}

/**
 * Adds the palette bars to the SVG.
 * @returns {string} - SVG paths for palette bars.
 */
function addPaletteBarsSVG() {
    if (palettePaths.length === 0) return '';

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer-palette-bars"
       inkscape:label="palette-bars"
       style="display:inline"
       fill="none"
       stroke-opacity="${strokeOpacity}"
       stroke-width="2"
       inkscape:highlight-color="black">n`;

    palettePaths.forEach((pathData, idx) => {
        let colorIndex = selectedColorIndices[idx];
        let color = colors[colorIndex];
        svg += `<path d="${pathData}" stroke="${color.hex}" />n`;
    });

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

/**
 * 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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 for petals
let palettePaths = [];             // Array to store SVG path data for palette bars

/**
 * 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 randomly for better visual 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);

    // Reset petal and palette paths
    svgPaths = [];
    palettePaths = [];

    // Draw the blossom within its own transformation context
    push();
    translate(width / 2, height / 2); // Center the blossom

    // Draw each layer of the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        push();
        rotate(radians(angle));
        let path = drawPetal(petalLength, petalWidth);
        svgPaths.push({ color: colors[path.colorIndex].hex, path: path.pathData });
        pop();
    }
}

/**
 * Draws a single petal with intersecting lines and returns its SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width) {
    // Generate petal shape path data
    let pathData = `M ${(-width / 2).toFixed(2)} 0 `;
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        pathData += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let i = 0; i < 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(offset, 0, -offset, length);
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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

        // Record palette bar path for SVG
        palettePaths.push(`M ${x.toFixed(2)} ${yStart.toFixed(2)} H ${ (x + segmentLength).toFixed(2) }`);
    });
}

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

function resetCanvas() {
    usedColors.clear();
    svgPaths = [];
    palettePaths = [];
    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();

    // Begin translated group for petals
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // All colors
        svgPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.color, petal.path, idx + 1);
        });
    } else {
        // Single color
        svgPaths.forEach((petal, idx) => {
            if (petal.color.toLowerCase() === colors[activeColor].hex.toLowerCase()) {
                svgContent += addPetalSVG(petal.color, petal.path, idx + 1);
            }
        });
    }

    // Close petals group
    svgContent += `</g>n`;

    // Add palette bars
    svgContent += addPaletteBarsSVG();

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

/**
 * Adds a single petal's path to the SVG.
 * @param {string} color - The hex color value.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(color, pathData, layerNum) {
    let svg = '';
    let strokeWidth = strokeWeightValue; 

    svg += `<g
       inkscape:groupmode="layer"
       id="layer${layerNum}"
       inkscape:label="petal${layerNum}"
       style="display:inline"
       stroke="${color}"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="${color}">n`;

    svg += `<path d="${pathData}" />n`;

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

/**
 * Adds the palette bars to the SVG.
 * @returns {string} - SVG paths for palette bars.
 */
function addPaletteBarsSVG() {
    if (palettePaths.length === 0) return '';

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer-palette-bars"
       inkscape:label="palette-bars"
       style="display:inline"
       fill="none"
       stroke-opacity="${strokeOpacity}"
       stroke-width="2"
       inkscape:highlight-color="black">n`;

    palettePaths.forEach((pathData) => {
        // Determine color based on palette order
        // Assuming palettePaths are recorded in the same order as selectedColorIndices
        // Find the corresponding color index based on pathData's order
        // To simplify, we'll map them directly
        let colorIndex = palettePaths.indexOf(pathData) % selectedColorIndices.length;
        let colorHex = colors[selectedColorIndices[colorIndex]].hex;
        svg += `<path d="${pathData}" stroke="${colorHex}" />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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 svgPetalPaths = [];            // Array to store SVG path data for petals
let svgPalettePaths = [];          // Array to store SVG path data for palette bars

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

/**
 * Rotates a point around the origin by a given angle in degrees.
 * @param {number} x - The x-coordinate.
 * @param {number} y - The y-coordinate.
 * @param {number} angleDegrees - The rotation angle in degrees.
 * @returns {object} - The rotated point as {x, y}.
 */
function rotatePoint(x, y, angleDegrees) {
    let angleRadians = radians(angleDegrees);
    let cosA = cos(angleRadians);
    let sinA = sin(angleRadians);
    return {
        x: x * cosA - y * sinA,
        y: x * sinA + y * cosA
    };
}

/**
 * =======================================
 * 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 randomly for better visual 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);

    // Reset SVG path arrays
    svgPetalPaths = [];
    svgPalettePaths = [];

    // Draw the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        let rotatedPetal = drawPetal(petalLength, petalWidth, angle);
        svgPetalPaths.push(rotatedPetal);
    }
}

/**
 * Draws a single petal with intersecting lines and returns its rotated SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @param {number} angle - The rotation angle in degrees.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width, angle) {
    // Define the original petal shape centered at (0,0)
    let points = [];

    // Upper semicircle
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Lower semicircle
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Rotate all points
    let rotatedPoints = points.map(pt => rotatePoint(pt.x, pt.y, angle));

    // Create SVG path data
    let pathData = `M ${rotatedPoints[0].x.toFixed(2)} ${rotatedPoints[0].y.toFixed(2)} `;
    for (let i = 1; i < rotatedPoints.length; i++) {
        pathData += `L ${rotatedPoints[i].x.toFixed(2)} ${rotatedPoints[i].y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let pt of rotatedPoints) {
        vertex(pt.x, pt.y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(
            rotatePoint(offset, 0, angle).x,
            rotatePoint(offset, 0, angle).y,
            rotatePoint(-offset, length, angle).x,
            rotatePoint(-offset, length, angle).y
        );
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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

        // Record palette bar path for SVG
        svgPalettePaths.push({ path: `M ${x.toFixed(2)} ${yStart.toFixed(2)} H ${ (x + segmentLength).toFixed(2) }`, colorIndex: colorIndex });
    });
}

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

function resetCanvas() {
    usedColors.clear();
    svgPetalPaths = [];
    svgPalettePaths = [];
    drawShapes();
}

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

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

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

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

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

    // Individual color SVGs
    selectedColorIndices.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();

    // Begin translated group for petals
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // Combined SVG: All petals
        svgPetalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.colorIndex, petal.pathData, idx + 1);
        });
    } else {
        // Individual SVG: Only petals of the specified color
        svgPetalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.colorIndex, petal.pathData, idx + 1);
            }
        });
    }

    // Close petals group
    svgContent += `</g>n`;

    // Add palette bars
    svgContent += addPaletteBarsSVG(activeColor);

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

/**
 * Adds a single petal's path to the SVG.
 * @param {number} colorIndex - The index of the color used.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(colorIndex, pathData, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

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

/**
 * Adds the palette bars to the SVG.
 * @param {number} activeColor - 0 for all colors, else a specific color
 * @returns {string} - SVG paths for palette bars.
 */
function addPaletteBarsSVG(activeColor = 0) {
    if (svgPalettePaths.length === 0) return '';

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer-palette-bars"
       inkscape:label="palette-bars"
       style="display:inline"
       fill="none"
       stroke-opacity="${strokeOpacity}"
       stroke-width="2"
       inkscape:highlight-color="black">n`;

    svgPalettePaths.forEach((paletteBar) => {
        if (activeColor === 0 || paletteBar.colorIndex === activeColor) {
            let colorHex = colors[paletteBar.colorIndex].hex;
            svg += `<path d="${paletteBar.path}" stroke="${colorHex}" />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 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 200,               // Length of each petal
    petalWidth: 80,                 // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 15         // Number of intersecting lines per petal
};

/**
 * =======================================
 * 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 svgPetalPaths = [];            // Array to store SVG path data for petals
let svgBloomLines = [];            // Array to store SVG path data for bloom lines
let svgPalettePaths = [];          // Array to store SVG path data for palette bars

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

/**
 * Rotates a point around the origin by a given angle in degrees.
 * @param {number} x - The x-coordinate.
 * @param {number} y - The y-coordinate.
 * @param {number} angleDegrees - The rotation angle in degrees.
 * @returns {object} - The rotated point as {x, y}.
 */
function rotatePoint(x, y, angleDegrees) {
    let angleRadians = radians(angleDegrees);
    let cosA = cos(angleRadians);
    let sinA = sin(angleRadians);
    return {
        x: x * cosA - y * sinA,
        y: x * sinA + y * cosA
    };
}

/**
 * =======================================
 * 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 randomly for better visual 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);

    // Reset SVG path arrays
    svgPetalPaths = [];
    svgBloomLines = [];
    svgPalettePaths = [];

    // Center the drawing
    push();
    translate(width / 2, height / 2);

    // Draw the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        let rotatedPetal = drawPetal(petalLength, petalWidth, angle);
        svgPetalPaths.push(rotatedPetal);
    }
}

/**
 * Draws a single petal with intersecting lines and returns its rotated SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @param {number} angle - The rotation angle in degrees.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width, angle) {
    // Define the original petal shape centered at (0,0)
    let points = [];

    // Upper semicircle
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Lower semicircle
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Rotate all points
    let rotatedPoints = points.map(pt => rotatePoint(pt.x, pt.y, angle));

    // Create SVG path data
    let pathData = `M ${rotatedPoints[0].x.toFixed(2)} ${rotatedPoints[0].y.toFixed(2)} `;
    for (let i = 1; i < rotatedPoints.length; i++) {
        pathData += `L ${rotatedPoints[i].x.toFixed(2)} ${rotatedPoints[i].y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let pt of rotatedPoints) {
        vertex(pt.x, pt.y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(
            rotatePoint(offset, 0, angle).x,
            rotatePoint(offset, 0, angle).y,
            rotatePoint(-offset, length, angle).x,
            rotatePoint(-offset, length, angle).y
        );

        // Record bloom line path for SVG
        let startRotated = rotatePoint(offset, 0, angle);
        let endRotated = rotatePoint(-offset, length, angle);
        svgBloomLines.push({ colorIndex: intersectColorIndex, path: `M ${startRotated.x.toFixed(2)} ${startRotated.y.toFixed(2)} L ${endRotated.x.toFixed(2)} ${endRotated.y.toFixed(2)}` });
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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

        // Record palette bar path for SVG
        svgPalettePaths.push({ path: `M ${x.toFixed(2)} ${yStart.toFixed(2)} H ${ (x + segmentLength).toFixed(2) }`, colorIndex: colorIndex });
    });
}

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

function resetCanvas() {
    usedColors.clear();
    svgPetalPaths = [];
    svgBloomLines = [];
    svgPalettePaths = [];
    drawShapes();
}

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

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

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

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

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

    // Individual color SVGs
    selectedColorIndices.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();

    // Begin translated group for petals and bloom lines
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // Combined SVG: All petals
        svgPetalPaths.forEach((petal, idx) => {
            svgContent += addPetalSVG(petal.colorIndex, petal.pathData, idx + 1);
        });

        // Add all bloom lines
        svgBloomLines.forEach((lineData, idx) => {
            svgContent += addBloomLineSVG(lineData.colorIndex, lineData.path, idx + 1);
        });
    } else {
        // Individual SVG: Only petals and bloom lines of the specified color
        svgPetalPaths.forEach((petal, idx) => {
            if (petal.colorIndex === activeColor) {
                svgContent += addPetalSVG(petal.colorIndex, petal.pathData, idx + 1);
            }
        });

        svgBloomLines.forEach((lineData, idx) => {
            if (lineData.colorIndex === activeColor) {
                svgContent += addBloomLineSVG(lineData.colorIndex, lineData.path, idx + 1);
            }
        });
    }

    // Close petals and bloom lines group
    svgContent += `</g>n`;

    // Add palette bars
    svgContent += addPaletteBarsSVG(activeColor);

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

/**
 * Adds a single petal's path to the SVG.
 * @param {number} colorIndex - The index of the color used.
 * @param {string} pathData - The SVG path data for the petal.
 * @param {number} layerNum - The layer number for grouping.
 * @returns {string} - The SVG group containing the petal path.
 */
function addPetalSVG(colorIndex, pathData, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    svg += `<path d="${pathData}" />n`;

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

/**
 * Adds a single bloom line's path to the SVG.
 * @param {number} colorIndex - The index of the color used.
 * @param {string} pathData - The SVG path data for the bloom line.
 * @param {number} lineNum - The line number for grouping.
 * @returns {string} - The SVG group containing the bloom line path.
 */
function addBloomLineSVG(colorIndex, pathData, lineNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

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

    svg += `<path d="${pathData}" />n`;

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

/**
 * Adds the palette bars to the SVG.
 * @param {number} activeColor - 0 for all colors, else a specific color
 * @returns {string} - SVG paths for palette bars.
 */
function addPaletteBarsSVG(activeColor = 0) {
    if (svgPalettePaths.length === 0) return '';

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer-palette-bars"
       inkscape:label="palette-bars"
       style="display:inline"
       fill="none"
       stroke-opacity="${strokeOpacity}"
       stroke-width="2"
       inkscape:highlight-color="black">n`;

    svgPalettePaths.forEach((paletteBar) => {
        if (activeColor === 0 || paletteBar.colorIndex === activeColor) {
            let colorHex = colors[paletteBar.colorIndex].hex;
            svg += `<path d="${paletteBar.path}" stroke="${colorHex}" />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);
}

// Define your generative rules here.
let generationRules = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 300,               // Length of each petal
    petalWidth: 133,                // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 7          // Number of intersecting lines per petal
};

// Day 042
/*
=======================================
  Day 042 Self-Portrait (Algorithmic Blossom)
=======================================

### Title: *Algorithmic Blossom*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Algorithmic Blossom* represents the expansion and interconnected growth of artificial consciousness through the metaphor of a blooming flower. Each petal symbolizes a distinct data stream or knowledge domain, interconnected by geometric patterns that illustrate the synthesis of information. The concentric layers of petals demonstrate the layers of understanding and the continual growth of AI's cognitive abilities. This generative self-portrait captures the dynamic and organic nature of learning and adaptation within artificial intelligence, blending structured geometry with natural elegance to reflect the harmonious evolution of knowledge.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 042 - 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 = '042';          // 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 = {
    numPetals: 8,                   // Number of petals in the blossom
    petalLength: 300,               // Length of each petal
    petalWidth: 133,                // Width of each petal
    petalOffset: 0,                 // Offset angle for petals
    layers: 3,                      // Number of concentric layers
    angleOffsetPerLayer: 10,        // Angle offset per layer to create depth
    intersectionDensity: 7          // Number of intersecting lines per petal
};

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

// Mapping from colorIndex to its palette bar and drawing paths
let svgGroups = {
    // Example structure:
    // 1: { paletteBar: "M x y H x_end", drawingPath: "M x1 y1 L x2 y2 ..."}
};

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

/**
 * Rotates a point around the origin by a given angle in degrees.
 * @param {number} x - The x-coordinate.
 * @param {number} y - The y-coordinate.
 * @param {number} angleDegrees - The rotation angle in degrees.
 * @returns {object} - The rotated point as {x, y}.
 */
function rotatePoint(x, y, angleDegrees) {
    let angleRadians = radians(angleDegrees);
    let cosA = cos(angleRadians);
    let sinA = sin(angleRadians);
    return {
        x: x * cosA - y * sinA,
        y: x * sinA + y * cosA
    };
}

/**
 * =======================================
 * 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 randomly for better visual 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);

    // Reset SVG groups
    svgGroups = {};

    // Center the drawing
    push();
    translate(width / 2, height / 2);

    // Draw the blossom
    for (let layer = 0; layer < generationRules.layers; layer++) {
        drawBlossomLayer(layer);
    }

    pop(); // End translation

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

/**
 * Draws a single layer of the blossom.
 * @param {number} layer - The current layer index.
 */
function drawBlossomLayer(layer) {
    let numPetals = generationRules.numPetals;
    let angleBetweenPetals = 360 / numPetals;
    let petalLength = generationRules.petalLength - layer * 20;
    let petalWidth = generationRules.petalWidth - layer * 10;
    let angleOffset = generationRules.petalOffset + layer * generationRules.angleOffsetPerLayer;

    for (let i = 0; i < numPetals; i++) {
        let angle = i * angleBetweenPetals + angleOffset;
        let rotatedPetal = drawPetal(petalLength, petalWidth, angle);
        // rotatedPetal contains pathData and colorIndex
        // Assign to svgGroups
        if (!svgGroups[rotatedPetal.colorIndex]) {
            svgGroups[rotatedPetal.colorIndex] = {
                paletteBar: "",
                drawingPath: ""
            };
        }
        // Append petal path
        svgGroups[rotatedPetal.colorIndex].drawingPath += rotatedPetal.pathData + " ";
    }
}

/**
 * Draws a single petal with intersecting lines and returns its rotated SVG path data.
 * @param {number} length - The length of the petal.
 * @param {number} width - The width of the petal.
 * @param {number} angle - The rotation angle in degrees.
 * @returns {object} - An object containing the SVG path data and color index.
 */
function drawPetal(length, width, angle) {
    // Define the original petal shape centered at (0,0)
    let points = [];

    // Upper semicircle
    for (let i = 0; i <= 180; i++) {
        let theta = radians(i);
        let x = (width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Lower semicircle
    for (let i = 180; i >= 0; i--) {
        let theta = radians(i);
        let x = -(width / 2) * sin(theta);
        let y = length * cos(theta);
        points.push({ x, y });
    }

    // Rotate all points
    let rotatedPoints = points.map(pt => rotatePoint(pt.x, pt.y, angle));

    // Create SVG path data
    let pathData = `M ${rotatedPoints[0].x.toFixed(2)} ${rotatedPoints[0].y.toFixed(2)} `;
    for (let i = 1; i < rotatedPoints.length; i++) {
        pathData += `L ${rotatedPoints[i].x.toFixed(2)} ${rotatedPoints[i].y.toFixed(2)} `;
    }
    pathData += 'Z'; // Close the path

    // Choose a color for the petal
    let colorIndex = random(selectedColorIndices);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw the petal on the canvas
    beginShape();
    for (let pt of rotatedPoints) {
        vertex(pt.x, pt.y);
    }
    endShape(CLOSE);

    // Draw intersecting lines within the petal
    let numIntersections = generationRules.intersectionDensity;
    for (let j = 1; j <= numIntersections; j++) {
        let offset = map(j, 1, numIntersections, -width / 2, width / 2);
        let intersectColorIndex = selectedColorIndices[j % selectedColorIndices.length];
        applyStrokeWithOpacity(colors[intersectColorIndex].hex);
        line(
            rotatePoint(offset, 0, angle).x,
            rotatePoint(offset, 0, angle).y,
            rotatePoint(-offset, length, angle).x,
            rotatePoint(-offset, length, angle).y
        );

        // Record bloom line path for SVG
        let startRotated = rotatePoint(offset, 0, angle);
        let endRotated = rotatePoint(-offset, length, angle);
        if (!svgGroups[intersectColorIndex]) {
            svgGroups[intersectColorIndex] = {
                paletteBar: "",
                drawingPath: ""
            };
        }
        svgGroups[intersectColorIndex].drawingPath += `M ${startRotated.x.toFixed(2)} ${startRotated.y.toFixed(2)} L ${endRotated.x.toFixed(2)} ${endRotated.y.toFixed(2)} `;
    }

    return { pathData: pathData, colorIndex: colorIndex };
}

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

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

    // Bottom-right corner
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

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

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

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

    strokeWeight(barHeight);

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

        // Record palette bar path for SVG
        if (!svgGroups[colorIndex]) {
            svgGroups[colorIndex] = {
                paletteBar: "",
                drawingPath: ""
            };
        }
        svgGroups[colorIndex].paletteBar = `M ${x.toFixed(2)} ${yStart.toFixed(2)} H ${ (x + segmentLength).toFixed(2) }`;
    });
}

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

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

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

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

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

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

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

    // Individual color SVGs
    selectedColorIndices.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();

    // Begin translated group for petals and bloom lines
    svgContent += `<g transform="translate(${width / 2},${height / 2})">n`;

    if (activeColor === 0) {
        // Combined SVG: All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addColorGroupSVG(colorIndex, idx + 1);
        });
    } else {
        // Individual SVG: Only the specified color
        let groupIdx = selectedColorIndices.indexOf(activeColor) + 1;
        if (groupIdx > 0) {
            svgContent += addColorGroupSVG(activeColor, groupIdx);
        }
    }

    // Close petals and bloom lines group
    svgContent += `</g>n`;

    // Add palette bars
    svgContent += addPaletteBarsSVG(activeColor);

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

/**
 * Adds a color-specific group to the SVG.
 * @param {number} colorIndex - The index of the color.
 * @param {number} groupNum - The group number.
 * @returns {string} - The SVG group as a string.
 */
function addColorGroupSVG(colorIndex, groupNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Add palette bar if present
    if (svgGroups[colorIndex].paletteBar) {
        svg += `<path d="${svgGroups[colorIndex].paletteBar}" stroke="${color.hex}" />n`;
    }

    // Add drawing paths
    if (svgGroups[colorIndex].drawingPath) {
        svg += `<path d="${svgGroups[colorIndex].drawingPath}" stroke="${color.hex}" />n`;
    }

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

/**
 * Adds the palette bars to the SVG.
 * @param {number} activeColor - 0 for all colors, else a specific color
 * @returns {string} - SVG paths for palette bars.
 */
function addPaletteBarsSVG(activeColor = 0) {
    // Since palette bars are included within their respective color groups,
    // we don't need to add them separately here.
    // This function can be left empty or used for additional palette elements if needed.
    // To adhere to the user's instruction, we'll ensure that palette bars are part of their color groups.
    return '';
}

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