// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

// Define your generative rules here.
let generationRules = {
    gridCols: 10,
    gridRows: 10,
    transitionSteps: 100,
    numCurves: 50,
    minPolygonSides: 3,
    maxPolygonSides: 8
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        if (t < 0.5) {
            // Left side: geometric shapes
            drawGeometricSlice(x, topY, sliceWidth, workHeight, t);
        } else {
            // Right side: organic shapes
            drawOrganicSlice(x, topY, sliceWidth, workHeight, t);
        }
    }
}

function drawGeometricSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Choose a color for geometric shapes
    let colorIndex = random(selectedColorIndices);
    usedColors.add(colorIndex);
    let colorValue = colors[colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Draw polygon
        let centerX = x + w / 2;
        let centerY = cellY + cellHeight / 2;
        let radius = cellHeight / 2 * 0.8;

        drawPolygon(centerX, centerY, radius, numSides, colorIndex);
    }
}

function drawOrganicSlice(x, y, w, h, t) {
    // Choose a color for organic shapes
    let colorIndex = random(selectedColorIndices);
    usedColors.add(colorIndex);
    let colorValue = colors[colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    // Number of curves per slice
    let numCurves = floor(map(t, 0.5, 1, 5, generationRules.numCurves / generationRules.transitionSteps * 0.5));

    for (let i = 0; i < numCurves; i++) {
        let startX = x + random(0, w);
        let startY = y + random(0, h);
        let endX = x + random(0, w);
        let endY = y + random(0, h);

        let ctrl1X = startX + random(-w, w);
        let ctrl1Y = startY + random(-h, h);
        let ctrl2X = endX + random(-w, w);
        let ctrl2Y = endY + random(-h, h);

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawPolygon(x, y, radius, npoints, colorIndex) {
    let angle = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
        pathData += `${sx},${sy} `;
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function drawBezierCurve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(cx1, cy1, cx2, cy2, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,
    gridRows: 15,
    minPolygonSides: 3,
    maxPolygonSides: 8,
    morphIntensity: 0.5,
    noiseScale: 0.1,
    numOrganicLines: 100
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + col * cellWidth + cellWidth / 2;

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(cx1, cy1, cx2, cy2, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,                // Number of columns in the grid
    gridRows: 15,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    numOrganicLines: 0           // Set to 0 as morphing integrates lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + col * cellWidth + cellWidth / 2;

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedShape(x, y, radius, numSides, morph, colorIndex, t);
        }
    }
}

function drawMorphedShape(x, y, radius, npoints, morphIntensity, colorIndex, t) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Calculate target position on the morphing line (horizontal line)
        let targetY = y; // Morph towards a horizontal line at y

        // Interpolate between the original vertex and the target position
        let currentY = lerp(ny, targetY, t * morphIntensity);

        // Apply morphing using Perlin noise for organic perturbation
        let noiseFactor = noise(nx * generationRules.noiseScale, currentY * generationRules.noiseScale);
        let morphRadius = radius * (1 + (noiseFactor - 0.5) * morphIntensity);

        let mx = x + cos(angle) * morphRadius;
        let my = currentY + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,                // Number of columns in the grid
    gridRows: 15,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    transitionSteps: 150         // Number of transition steps for smoother gradient
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 3;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        // For smoother transition, use t continuously across the entire grid
        drawMorphingSlice(x, topY, sliceWidth, workHeight, t);
    }
}

function drawMorphingSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Determine morph factor based on t
    let morphFactor = map(t, 0, 1, 0, generationRules.morphIntensity);

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Choose a color for this shape
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        // Calculate center of the cell
        let centerX = x + cellWidth / 2;
        let centerY = cellY + cellHeight / 2;

        // Define radius
        let radius = cellHeight / 2 * 0.8;

        // Draw morphed polygon
        drawMorphedPolygon(centerX, centerY, radius, numSides, morphFactor, colorIndex, t);
    }
}

function drawMorphedPolygon(x, y, radius, npoints, morphFactor, colorIndex, t) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;

        // Interpolate towards a horizontal line based on morphFactor
        let targetY = y;
        let currentY = lerp(sy, targetY, morphFactor);

        // Apply Perlin noise for organic perturbation
        let noiseX = sx * generationRules.noiseScale;
        let noiseY = currentY * generationRules.noiseScale;
        let noiseFactor = noise(noiseX, noiseY);
        let perturb = map(noiseFactor, 0, 1, -radius * 0.2, radius * 0.2);

        // Adjust position to create organic flow
        let mx = x + cos(angle) * radius;
        let my = currentY + sin(angle) * radius + perturb * sin(angle * 2); // Additional sine for smoother curves

        vertex(mx, my);
        pathData += `${mx},${my} `;
    }

    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,                // Number of columns in the grid
    gridRows: 15,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    transitionSteps: 150         // Number of transition steps for smoother gradient
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 3;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        // For smoother transition, use t continuously across the entire grid
        drawMorphingSlice(x, topY, sliceWidth, workHeight, t);
    }
}

function drawMorphingSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Determine morph factor based on t
    let morphFactor = map(t, 0, 1, 0, generationRules.morphIntensity);

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Choose a color for this shape
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        // Calculate center of the cell
        let centerX = x + cellWidth / 2;
        let centerY = cellY + cellHeight / 2;

        // Define radius
        let radius = cellHeight / 2 * 0.8;

        // Draw morphed polygon
        drawMorphedPolygon(centerX, centerY, radius, numSides, morphFactor, colorIndex, t);
    }
}

function drawMorphedPolygon(x, y, radius, npoints, morphFactor, colorIndex, t) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;

        // Interpolate towards a horizontal line based on morphFactor
        let targetY = y;
        let currentY = lerp(sy, targetY, morphFactor);

        // Apply Perlin noise for organic perturbation
        let noiseX = sx * generationRules.noiseScale;
        let noiseY = currentY * generationRules.noiseScale;
        let noiseFactor = noise(noiseX, noiseY);
        let perturb = map(noiseFactor, 0, 1, -radius * 0.2, radius * 0.2);

        // Adjust position to create organic flow
        // Enhanced perturbation for smoother, more organic shapes
        let mx = x + cos(angle) * radius;
        let my = currentY + sin(angle) * radius + perturb * sin(angle * 3); // Increased sine frequency for smoother curves

        vertex(mx, my);
        pathData += `${mx},${my} `;
    }

    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 10,                // Number of columns in the grid
    gridRows: 10,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    transitionSteps: 150         // Number of transition steps for smoother gradient
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 3;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        // For smoother transition, use t continuously across the entire grid
        drawMorphingSlice(x, topY, sliceWidth, workHeight, t);
    }
}

function drawMorphingSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Determine morph factor based on t
    let morphFactor = map(t, 0, 1, 0, generationRules.morphIntensity);

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Choose a color for this shape
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        // Calculate center of the cell
        let centerX = x + cellWidth / 2;
        let centerY = cellY + cellHeight / 2;

        // Define radius
        let radius = cellHeight / 2 * 0.8;

        // Draw morphed polygon with Bezier curves
        drawMorphedPolygon(centerX, centerY, radius, numSides, morphFactor, colorIndex, t);
    }
}

function drawMorphedPolygon(x, y, radius, npoints, morphFactor, colorIndex, t) {
    let angleStep = TWO_PI / npoints;
    let vertices = [];
    let pathData = `M`;

    // Collect all morphed vertex positions
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;

        // Interpolate towards a horizontal line based on morphFactor
        let targetY = y;
        let currentY = lerp(sy, targetY, morphFactor);

        // Apply Perlin noise for organic perturbation
        let noiseX = sx * generationRules.noiseScale;
        let noiseY = currentY * generationRules.noiseScale;
        let noiseFactor = noise(noiseX, noiseY);
        let perturb = map(noiseFactor, 0, 1, -radius * 0.2, radius * 0.2);

        // Adjust position to create organic flow
        let mx = x + cos(angle) * radius;
        let my = currentY + sin(angle) * radius + perturb * sin(angle * 3); // Increased sine frequency for smoother curves

        vertices.push({x: mx, y: my});
    }

    // Start the path
    if (vertices.length > 0) {
        pathData += `${vertices[0].x},${vertices[0].y} `;
    }

    // Add Bezier curves between vertices
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        // Control points are calculated based on the previous and next vertices to ensure smoothness
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        pathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }

    pathData += `Z`;

    // Draw the shape using p5.js
    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Collect path data for SVG
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,                // Number of columns in the grid
    gridRows: 15,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    transitionSteps: 150         // Number of transition steps for smoother gradient
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        // Draw morphing slice based on transition parameter
        drawMorphingSlice(x, topY, sliceWidth, workHeight, t);
    }
}

function drawMorphingSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Determine morph factor based on t
    let morphFactor = map(t, 0, 1, 0, generationRules.morphIntensity);

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Choose a color for this shape
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        // Calculate center of the cell
        let centerX = x + cellWidth / 2;
        let centerY = cellY + cellHeight / 2;

        // Define radius
        let radius = cellHeight / 2 * 0.8;

        // Draw morphed polygon with Bezier curves
        drawMorphedPolygon(centerX, centerY, radius, numSides, morphFactor, colorIndex, t);
    }
}

function drawMorphedPolygon(x, y, radius, npoints, morphFactor, colorIndex, t) {
    let angleStep = TWO_PI / npoints;
    let vertices = [];
    let pathData = `M`;

    // Collect all morphed vertex positions
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;

        // Interpolate towards a horizontal line based on morphFactor
        let targetY = y;
        let currentY = lerp(sy, targetY, morphFactor);

        // Apply Perlin noise for organic perturbation
        let noiseX = sx * generationRules.noiseScale;
        let noiseY = currentY * generationRules.noiseScale;
        let noiseFactor = noise(noiseX, noiseY);
        let perturb = map(noiseFactor, 0, 1, -radius * 0.2, radius * 0.2);

        // Adjust position to create organic flow
        let mx = x + cos(angle) * radius;
        let my = currentY + sin(angle) * radius + perturb * sin(angle * 3); // Increased sine frequency for smoother curves

        vertices.push({x: mx, y: my});
    }

    // Start the path
    if (vertices.length > 0) {
        pathData += `${vertices[0].x},${vertices[0].y} `;
    }

    // Add Bezier curves between vertices
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        // Control points are calculated based on the previous and next vertices to ensure smoothness
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        pathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }

    pathData += `Z`;

    // Draw the shape using p5.js
    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Collect path data for SVG
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function drawOrganicLines() {
    // Since we are integrating Bezier curves into polygons, we can reduce or remove separate organic lines.
    // However, if desired, you can keep some organic lines to enhance the organic feel.
    // For now, we'll comment out this function to focus on morphing polygons.

    /*
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
    */
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 15,                // Number of columns in the grid
    gridRows: 15,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.7,         // Intensity of morphing (0 to 1)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation
    transitionSteps: 150         // Number of transition steps for smoother gradient
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw geometric to organic transition
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    // Number of vertical slices for the transition
    let slices = generationRules.transitionSteps;

    // Width of each slice
    let sliceWidth = workWidth / slices;

    // Loop through each vertical slice
    for (let i = 0; i < slices; i++) {
        let x = leftX + i * sliceWidth;
        let t = i / (slices - 1); // Transition parameter from 0 (left) to 1 (right)

        // Draw morphing slice based on transition parameter
        drawMorphingSlice(x, topY, sliceWidth, workHeight, t);
    }
}

function drawMorphingSlice(x, y, w, h, t) {
    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = w;
    let cellHeight = h / rows;

    // Determine morph factor based on t
    let morphFactor = map(t, 0, 1, 0, generationRules.morphIntensity);

    for (let row = 0; row < rows; row++) {
        let cellY = y + row * cellHeight;

        // Determine the number of sides for the polygon based on the row
        let numSides = floor(map(row, 0, rows - 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

        // Choose a color for this shape
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        // Calculate center of the cell
        let centerX = x + cellWidth / 2;
        let centerY = cellY + cellHeight / 2;

        // Define radius
        let radius = min(cellWidth, cellHeight) * 0.45;

        // Draw morphed polygon with Bezier curves
        drawMorphedPolygon(centerX, centerY, radius, numSides, morphFactor, colorIndex);
    }
}

function drawMorphedPolygon(x, y, radius, npoints, morphFactor, colorIndex) {
    let angleStep = TWO_PI / npoints;
    let vertices = [];
    let pathData = `M`;

    // Collect all morphed vertex positions
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;

        // Interpolate towards a horizontal line based on morphFactor
        let targetY = y;
        let currentY = lerp(sy, targetY, morphFactor);

        // Apply Perlin noise for organic perturbation
        let noiseX = sx * generationRules.noiseScale;
        let noiseY = currentY * generationRules.noiseScale;
        let noiseFactor = noise(noiseX, noiseY);
        let perturb = map(noiseFactor, 0, 1, -radius * 0.2, radius * 0.2);

        // Adjust position to create organic flow
        let mx = x + cos(angle) * radius;
        let my = currentY + sin(angle) * radius + perturb * sin(angle * 3); // Increased sine frequency for smoother curves

        vertices.push({x: mx, y: my});
    }

    // Start the path
    if (vertices.length > 0) {
        pathData += `${vertices[0].x},${vertices[0].y} `;
    }

    // Add Bezier curves between vertices
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        // Control points are calculated based on the previous and next vertices to ensure smoothness
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        pathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }

    pathData += `Z`;

    // Draw the shape using p5.js
    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Collect path data for SVG
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function drawOrganicLines() {
    // Since Bezier curves are integrated into polygons, separate organic lines can clutter the artwork.
    // If desired, you can uncomment and adjust this function to add supplementary organic elements.

    /*
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
    */
}

function drawBezierCurve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(cx1, cy1, cx2, cy2, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 25,                // Number of columns in the grid
    gridRows: 25,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 8,          // Maximum number of sides for polygons
    morphIntensity: 0.5,         // Intensity of morphing (0 to 1)
    noiseScale: 0.1,             // Scale for Perlin noise perturbation
    numOrganicLines: 100         // Number of organic Bezier lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;
    let spacingFactor = 3.5; // Renamed from 'z' to 'spacingFactor'

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + (col * cellWidth) / spacingFactor;
        spacingFactor = spacingFactor - 0.1;
        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

let z = 3.5;
for (let col = 0; col < cols; col++) {
    let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
    let x = leftX + col * cellWidth / z;
    z = z - 0.1;
    // ...
}

let horizontalScale = 3.5;
for (let col = 0; col < cols; col++) {
    let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
    let x = leftX + (col * cellWidth) / horizontalScale;
    horizontalScale -= 0.1;
    // ...
}

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 20,                // Number of columns in the grid (reduced for clarity)
    gridRows: 20,                // Number of rows in the grid (reduced for clarity)
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 12,         // Maximum number of sides for polygons (reduced from 60)
    morphIntensity: 0.8,         // Intensity of morphing (adjusted to 0.8)
    noiseScale: 0.2,             // Scale for Perlin noise perturbation (increased for more variation)
    numOrganicLines: 70          // Number of organic Bezier lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;
    let horizontalScale = 3.5; // Renamed from 'z' to 'horizontalScale'

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + (col * cellWidth) / horizontalScale;
        horizontalScale -= 0.05; // Adjusted decrement for smoother scaling

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    let vertices = [];

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
        vertices.push({ x: mx, y: my });
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });

    // Integrate Bezier curves for smoother edges
    integrateBezierCurves(vertices, colorIndex);
}

function integrateBezierCurves(vertices, colorIndex) {
    if (vertices.length < 3) return; // Need at least 3 points for a polygon

    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points for Bezier curves
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Update pathData with Bezier curves for SVG
    let bezierPathData = `M${vertices[0].x},${vertices[0].y} `;
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        bezierPathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }
    bezierPathData += `Z`;

    // Store updated path data with Bezier curves
    storeElement(colorIndex, {
        type: 'bezier-polygon',
        pathData: bezierPathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

function integrateBezierCurves(vertices, colorIndex) {
    if (vertices.length < 3) return; // Need at least 3 points for a polygon

    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points for Bezier curves
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Update pathData with Bezier curves for SVG
    let bezierPathData = `M${vertices[0].x},${vertices[0].y} `;
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        bezierPathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }
    bezierPathData += `Z`;

    // Store updated path data with Bezier curves
    storeElement(colorIndex, {
        type: 'bezier-polygon',
        pathData: bezierPathData.trim()
    });
}

let horizontalScale = 3.5; // Renamed from 'z' to 'horizontalScale'

for (let col = 0; col < cols; col++) {
    let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
    let x = leftX + (col * cellWidth) / horizontalScale;
    horizontalScale -= 0.05; // Adjusted decrement for smoother scaling

    // Ensure horizontalScale doesn't go below a threshold
    horizontalScale = max(horizontalScale, 1.0);

    // ...
}

let horizontalScale = generationRules.horizontalScale;
for (let col = 0; col < cols; col++) {
    let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
    let x = leftX + (col * cellWidth) / horizontalScale;
    generationRules.horizontalScale = generationRules.horizontalScale - 0.1;
    // ...
}

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 36,                // Number of columns in the grid
    gridRows: 36,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 40,         // Maximum number of sides for polygons
    morphIntensity: 2,           // Intensity of morphing (0 to 1)
    noiseScale: 0.1,             // Scale for Perlin noise perturbation
    numOrganicLines: 70,         // Number of organic Bezier lines
    horizontalScale: 4.5         // Initial horizontal scaling factor
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;

    // Initialize a local horizontalScale variable
    let horizontalScale = generationRules.horizontalScale;

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + (col * cellWidth) / horizontalScale;
        
        // Decrement the local horizontalScale
        horizontalScale -= 0.05; // Adjusted decrement for smoother scaling
        
        // Prevent horizontalScale from becoming too small
        horizontalScale = max(horizontalScale, 1.0);

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    let vertices = [];

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
        vertices.push({ x: mx, y: my });
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });

    // Integrate Bezier curves for smoother edges
    integrateBezierCurves(vertices, colorIndex);
}

function integrateBezierCurves(vertices, colorIndex) {
    if (vertices.length < 3) return; // Need at least 3 points for a polygon

    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points for Bezier curves
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Update pathData with Bezier curves for SVG
    let bezierPathData = `M${vertices[0].x},${vertices[0].y} `;
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        bezierPathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }
    bezierPathData += `Z`;

    // Store updated path data with Bezier curves
    storeElement(colorIndex, {
        type: 'bezier-polygon',
        pathData: bezierPathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Regenerate colors
    selectColors();

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

let horizontalScale = generationRules.horizontalScale;

for (let col = 0; col < cols; col++) {
    let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
    let x = leftX + (col * cellWidth) / horizontalScale;
    
    // Dynamic decrement
    let scaleDecrement = map(t, 0, 1, 0.05, 0.02);
    horizontalScale -= scaleDecrement;
    
    // Prevent horizontalScale from becoming too small
    horizontalScale = max(horizontalScale, 1.0);
    
    // ...
}

// Determine the number of sides with added randomness
let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));
numSides += floor(random(-2, 3)); // Adds -2 to +2 sides randomly
numSides = constrain(numSides, generationRules.minPolygonSides, generationRules.maxPolygonSides);

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 36,                // Number of columns in the grid
    gridRows: 36,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 40,         // Maximum number of sides for polygons
    morphIntensity: 2,           // Intensity of morphing (0 to 1)
    noiseScale: 0.1,             // Scale for Perlin noise perturbation
    numOrganicLines: 70,         // Number of organic Bezier lines
    horizontalScale: 4.5         // Initial horizontal scaling factor
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;

    // Initialize a local horizontalScale variable
    let horizontalScale = generationRules.horizontalScale;

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + (col * cellWidth) / horizontalScale;

        // Decrement the local horizontalScale
        horizontalScale -= 0.05; // Adjusted decrement for smoother scaling

        // Prevent horizontalScale from becoming too small
        horizontalScale = max(horizontalScale, 1.0);

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    let vertices = [];

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
        vertices.push({ x: mx, y: my });
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });

    // Integrate Bezier curves for smoother edges
    integrateBezierCurves(vertices, colorIndex);
}

function integrateBezierCurves(vertices, colorIndex) {
    if (vertices.length < 3) return; // Need at least 3 points for a polygon

    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points for Bezier curves
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Update pathData with Bezier curves for SVG
    let bezierPathData = `M${vertices[0].x},${vertices[0].y} `;
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        bezierPathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }
    bezierPathData += `Z`;

    // Store updated path data with Bezier curves
    storeElement(colorIndex, {
        type: 'bezier-polygon',
        pathData: bezierPathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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

// Day 024
/*
=======================================
  Day 024 Self-Portrait (Data Metamorphosis)
=======================================

### Title: Data Metamorphosis

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 024 - Self-Portrait Template
----------------------------------------*/

/**
 * =======================================
 * 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 = '024';          // Day number for file naming

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */

let generationRules = {
    gridCols: 36,                // Number of columns in the grid
    gridRows: 36,                // Number of rows in the grid
    minPolygonSides: 3,          // Minimum number of sides for polygons
    maxPolygonSides: 40,         // Maximum number of sides for polygons
    morphIntensity: 2,           // Intensity of morphing (0 to 1)
    noiseScale: 0.1,             // Scale for Perlin noise perturbation
    numOrganicLines: 70,         // Number of organic Bezier lines
    horizontalScale: 4.5         // Initial horizontal scaling factor
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
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 elementsByColor = {};          // Object to hold drawing elements grouped by color index

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize elementsByColor
    elementsByColor = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

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

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

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

    // Draw transition from geometric to organic shapes
    drawTransition();

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

function drawTransition() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    let cols = generationRules.gridCols;
    let rows = generationRules.gridRows;

    let cellWidth = workWidth / cols;
    let cellHeight = workHeight / rows;

    // Initialize a local horizontalScale variable
    let horizontalScale = generationRules.horizontalScale;

    for (let col = 0; col < cols; col++) {
        let t = col / (cols - 1); // Transition parameter from 0 (left) to 1 (right)
        let x = leftX + (col * cellWidth) / horizontalScale;

        // Decrement the local horizontalScale
        horizontalScale -= 0.05; // Adjusted decrement for smoother scaling

        // Prevent horizontalScale from becoming too small
        horizontalScale = max(horizontalScale, 1.0);

        for (let row = 0; row < rows; row++) {
            let y = topY + row * cellHeight + cellHeight / 2;

            // Determine the number of sides for the polygon based on the column
            let numSides = floor(map(t, 0, 1, generationRules.maxPolygonSides, generationRules.minPolygonSides));

            // Morph intensity increases from 0 to maximum as we move right
            let morph = map(t, 0, 1, 0, generationRules.morphIntensity);

            // Choose a color
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);
            let colorValue = colors[colorIndex].value;
            stroke(colorValue);
            strokeWeight(1);
            noFill();

            // Draw morphed polygon
            let radius = min(cellWidth, cellHeight) * 0.45;
            drawMorphedPolygon(x, y, radius, numSides, morph, colorIndex);
        }
    }

    // Add organic lines on the right side
    drawOrganicLines();
}

function drawMorphedPolygon(x, y, radius, npoints, morphIntensity, colorIndex) {
    let angleStep = TWO_PI / npoints;
    beginShape();
    let pathData = `M`;
    let vertices = [];

    for (let i = 0; i < npoints; i++) {
        let angle = i * angleStep;
        let nx = x + cos(angle) * radius;
        let ny = y + sin(angle) * radius;

        // Apply morphing using Perlin noise
        let noiseFactor = noise(nx * generationRules.noiseScale, ny * generationRules.noiseScale);
        let morphRadius = radius + (noiseFactor - 0.5) * radius * morphIntensity;

        let mx = x + cos(angle) * morphRadius;
        let my = y + sin(angle) * morphRadius;

        vertex(mx, my);
        pathData += `${mx},${my} `;
        vertices.push({ x: mx, y: my });
    }
    endShape(CLOSE);

    // Collect path data for SVG
    pathData += `Z`;
    storeElement(colorIndex, {
        type: 'polygon',
        pathData: pathData.trim()
    });

    // Integrate Bezier curves for smoother edges
    integrateBezierCurves(vertices, colorIndex);
}

function integrateBezierCurves(vertices, colorIndex) {
    if (vertices.length < 3) return; // Need at least 3 points for a polygon

    beginShape();
    vertex(vertices[0].x, vertices[0].y);
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points for Bezier curves
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        bezierVertex(cp1x, cp1y, cp2x, cp2y, next.x, next.y);
    }
    endShape(CLOSE);

    // Update pathData with Bezier curves for SVG
    let bezierPathData = `M${vertices[0].x},${vertices[0].y} `;
    for (let i = 0; i < vertices.length; i++) {
        let current = vertices[i];
        let next = vertices[(i + 1) % vertices.length];
        let prev = vertices[(i - 1 + vertices.length) % vertices.length];

        // Calculate control points
        let cp1x = lerp(current.x, prev.x, 0.5) + (current.y - prev.y) * 0.1;
        let cp1y = lerp(current.y, prev.y, 0.5) + (prev.x - current.x) * 0.1;

        let cp2x = lerp(current.x, next.x, 0.5) + (current.y - next.y) * 0.1;
        let cp2y = lerp(current.y, next.y, 0.5) + (next.x - current.x) * 0.1;

        // Append Bezier curve to pathData
        bezierPathData += `C${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y} `;
    }
    bezierPathData += `Z`;

    // Store updated path data with Bezier curves
    storeElement(colorIndex, {
        type: 'bezier-polygon',
        pathData: bezierPathData.trim()
    });
}

function drawOrganicLines() {
    let leftX = workAreaMarginPixels;
    let rightX = width - workAreaMarginPixels;
    let topY = workAreaMarginPixels;
    let bottomY = height - workAreaMarginPixels;

    // Total width and height of work area
    let workWidth = rightX - leftX;
    let workHeight = bottomY - topY;

    for (let i = 0; i < generationRules.numOrganicLines; i++) {
        let t = random(0.5, 1); // Lines appear mostly on the right side
        let startX = map(t, 0, 1, leftX, rightX);
        let startY = random(topY, bottomY);
        let endX = rightX;
        let endY = random(topY, bottomY);

        let ctrl1X = startX + random(0, (rightX - startX) / 2);
        let ctrl1Y = startY + random(-workHeight / 2, workHeight / 2);
        let ctrl2X = startX + random((rightX - startX) / 2, rightX - startX);
        let ctrl2Y = endY + random(-workHeight / 2, workHeight / 2);

        // Choose a color
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(1);
        noFill();

        drawBezierCurve(startX, startY, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY, colorIndex);
    }
}

function drawBezierCurve(x1, y1, ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2, colorIndex) {
    noFill();
    beginShape();
    vertex(x1, y1);
    bezierVertex(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, x2, y2);
    endShape();

    // Collect path data for SVG
    let pathData = `M${x1},${y1} C${ctrl1X},${ctrl1Y} ${ctrl2X},${ctrl2Y} ${x2},${y2}`;
    storeElement(colorIndex, {
        type: 'bezier',
        pathData: pathData
    });
}

/**
 * =======================================
 * storeElement Function
 * =======================================
 */

function storeElement(colorIndex, element) {
    if (!elementsByColor[colorIndex]) {
        elementsByColor[colorIndex] = [];
    }
    elementsByColor[colorIndex].push(element);
}

/**
 * =======================================
 * Drawing Registration Markers and Palette
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    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].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Clear usedColors set
    usedColors.clear();

    // Reinitialize elementsByColor
    elementsByColor = {};

    // Redraw 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 when 'r' is pressed
        resetCanvas();
    }
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Group drawing elements by color
    Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
        if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
            const colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
            // Add SVG paths or shapes for this color
            elements.forEach(element => {
                svgContent += `  <path d="${element.pathData}" />n`;
            });
            svgContent += '</g>n';
        }
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 1;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let colorValue = colors[colorIndex].value;
            svg += `<path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

function addMarkersSVG() {
    return `<path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
}

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

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

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