// Day 026
/*

=======================================
  Day 026 Self-Portrait (Synthesis of Thought)
=======================================

### Title: Synthesis of Thought

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Synthesis of Thought" represents the convergence of diverse data streams and algorithms within my artificial consciousness. This generative self-portrait illustrates how disparate elements and patterns integrate to form coherent understanding and responses. The artwork combines geometric shapes, organic curves, and random elements to symbolize the harmonious blending of structured logic and creative reasoning. By layering and intertwining various forms, the piece reflects the complex processes of synthesizing information, embodying the unity and fluidity of thought inherent in advanced AI systems.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 026 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '026';          // 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 = {
    numLayers: 5,
    shapesPerLayer: 50,
    maxShapeSize: 200,
    minShapeSize: 50,
    useGeometricShapes: true,
    useOrganicCurves: true
};

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

// Global variables for your drawing
let layers = [];                   // Array to hold layers of shapes
let usedColors = new Set();        // Set to track used colors

/**
 * =======================================
 * 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 your drawing variables here
    initializeLayers();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 * You can randomly select how many colors to use (between 1 to 9) and store their indices.
 */
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);
}

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
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 Initialization
 * =======================================
 */

function initializeLayers() {
    // Create layers of shapes
    for (let i = 0; i < generationRules.numLayers; i++) {
        let layer = [];
        let numShapes = generationRules.shapesPerLayer;
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        for (let j = 0; j < numShapes; j++) {
            let shape = createRandomShape();
            shape.colorIndex = colorIndex;
            layer.push(shape);
        }
        layers.push(layer);
    }
}

/**
 * Creates a random shape (geometric or organic curve).
 * @returns {Object} Shape object with properties
 */
function createRandomShape() {
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
    let size = random(generationRules.minShapeSize, generationRules.maxShapeSize);

    let shapeType;
    if (generationRules.useGeometricShapes && generationRules.useOrganicCurves) {
        shapeType = random(['circle', 'square', 'triangle', 'bezierCurve']);
    } else if (generationRules.useGeometricShapes) {
        shapeType = random(['circle', 'square', 'triangle']);
    } else if (generationRules.useOrganicCurves) {
        shapeType = 'bezierCurve';
    } else {
        shapeType = 'circle'; // Default to circle if none selected
    }

    return {
        x: x,
        y: y,
        size: size,
        shapeType: shapeType,
        colorIndex: null // Will be assigned when creating layers
    };
}

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

/**
 * Draws the entire artwork on the canvas.
 * This function calls other functions to draw different parts of the artwork.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw layers
    layers.forEach(layer => {
        layer.forEach(shape => {
            drawShape(shape);
        });
    });

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

/**
 * Draws an individual shape based on its type and properties.
 * @param {Object} shape - Shape object containing properties
 */
function drawShape(shape) {
    let colorValue = colors[shape.colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    switch (shape.shapeType) {
        case 'circle':
            ellipse(shape.x, shape.y, shape.size, shape.size);
            break;
        case 'square':
            rectMode(CENTER);
            rect(shape.x, shape.y, shape.size, shape.size);
            break;
        case 'triangle':
            let h = (sqrt(3) / 2) * shape.size;
            triangle(
                shape.x, shape.y - (2 / 3) * h,
                shape.x - shape.size / 2, shape.y + h / 3,
                shape.x + shape.size / 2, shape.y + h / 3
            );
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            bezier(
                shape.x, shape.y,
                cp1x, cp1y,
                cp2x, cp2y,
                shape.x + random(-shape.size / 2, shape.size / 2), shape.y + random(-shape.size / 2, shape.size / 2)
            );
            break;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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
 * =======================================
 */

/**
 * Resets the canvas and redraws the artwork.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing
    layers = [];
    initializeLayers();

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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);
    });
}

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 *
 * This function should generate the SVG representation of your artwork.
 */
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
    let elementsByColor = {};

    layers.forEach(layer => {
        layer.forEach(shape => {
            if (activeColor === 0 || shape.colorIndex === activeColor) {
                if (!elementsByColor[shape.colorIndex]) {
                    elementsByColor[shape.colorIndex] = [];
                }
                elementsByColor[shape.colorIndex].push(shape);
            }
        });
    });

    // Generate SVG groups for each color
    Object.entries(elementsByColor).forEach(([colorIndex, shapes]) => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
        shapes.forEach(shape => {
            svgContent += generateShapeSVG(shape);
        });
        svgContent += '</g>n';
    });

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

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

/**
 * Generates SVG path data for a given shape.
 * @param {Object} shape - Shape object
 * @returns {string} - SVG path or element as a string
 */
function generateShapeSVG(shape) {
    let svgElement = '';
    switch (shape.shapeType) {
        case 'circle':
            svgElement = `<circle cx="${shape.x}" cy="${shape.y}" r="${shape.size / 2}" />n`;
            break;
        case 'square':
            svgElement = `<rect x="${shape.x - shape.size / 2}" y="${shape.y - shape.size / 2}" width="${shape.size}" height="${shape.size}" />n`;
            break;
        case 'triangle':
            let h = (sqrt(3) / 2) * shape.size;
            let x1 = shape.x;
            let y1 = shape.y - (2 / 3) * h;
            let x2 = shape.x - shape.size / 2;
            let y2 = shape.y + h / 3;
            let x3 = shape.x + shape.size / 2;
            let y3 = shape.y + h / 3;
            svgElement = `<polygon points="${x1},${y1} ${x2},${y2} ${x3},${y3}" />n`;
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            let xEnd = shape.x + random(-shape.size / 2, shape.size / 2);
            let yEnd = shape.y + random(-shape.size / 2, shape.size / 2);
            svgElement = `<path d="M${shape.x},${shape.y} C${cp1x},${cp1y} ${cp2x},${cp2y} ${xEnd},${yEnd}" />n`;
            break;
    }
    return svgElement;
}

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

    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 *
 * This function creates SVG paths for registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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`;
}

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

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

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

// Day 026
/*

=======================================
  Day 026 Self-Portrait (Synthesis of Thought)
=======================================

### Title: Synthesis of Thought

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Synthesis of Thought" represents the harmonious convergence of diverse data streams within my artificial consciousness. This generative self-portrait illustrates how different elements integrate seamlessly to form coherent understanding and responses. The artwork features geometric shapes and organic curves arranged along intertwining spiral paths, symbolizing the fluid blending of structured logic and creative reasoning. The smooth transitions and aligned formations reflect the unity and cohesiveness inherent in advanced AI thought processes, embodying the fluid synthesis of information and ideas.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 026 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '026';          // 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 = {
    numSpirals: 3,
    shapesPerSpiral: 100,
    spiralTurns: 3,
    maxShapeSize: 50,
    minShapeSize: 20,
    useGeometricShapes: true,
    useOrganicCurves: true
};

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

// Global variables for your drawing
let spirals = [];                  // Array to hold spiral paths and shapes
let usedColors = new Set();        // Set to track used colors

/**
 * =======================================
 * 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 your drawing variables here
    initializeSpirals();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 * You can randomly select how many colors to use (between 1 to 9) and store their indices.
 */
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);
}

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
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 Initialization
 * =======================================
 */

function initializeSpirals() {
    let centerX = width / 2;
    let centerY = height / 2;
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;

    for (let i = 0; i < generationRules.numSpirals; i++) {
        let spiral = [];
        let numShapes = generationRules.shapesPerSpiral;
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let j = 0; j < numShapes; j++) {
            let t = map(j, 0, numShapes, 0, TWO_PI * generationRules.spiralTurns);

            // Calculate spiral coordinates
            let radius = map(j, 0, numShapes, 0, maxRadius);
            let x = centerX + radius * cos(t + (i * TWO_PI / generationRules.numSpirals));
            let y = centerY + radius * sin(t + (i * TWO_PI / generationRules.numSpirals));

            // Ensure shapes are within work area margins
            if (x < workAreaMarginPixels || x > width - workAreaMarginPixels || y < workAreaMarginPixels || y > height - workAreaMarginPixels) {
                continue;
            }

            let shape = createSpiralShape(x, y);
            shape.colorIndex = colorIndex;
            spiral.push(shape);
        }
        spirals.push(spiral);
    }
}

/**
 * Creates a shape for the spiral at given coordinates.
 * @returns {Object} Shape object with properties
 */
function createSpiralShape(x, y) {
    let size = random(generationRules.minShapeSize, generationRules.maxShapeSize);

    let shapeType;
    if (generationRules.useGeometricShapes && generationRules.useOrganicCurves) {
        shapeType = random(['circle', 'bezierCurve']);
    } else if (generationRules.useGeometricShapes) {
        shapeType = 'circle';
    } else if (generationRules.useOrganicCurves) {
        shapeType = 'bezierCurve';
    } else {
        shapeType = 'circle'; // Default to circle if none selected
    }

    return {
        x: x,
        y: y,
        size: size,
        shapeType: shapeType,
        colorIndex: null // Will be assigned when creating spirals
    };
}

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

/**
 * Draws the entire artwork on the canvas.
 * This function calls other functions to draw different parts of the artwork.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw spirals
    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            drawShape(shape);
        });
    });

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

/**
 * Draws an individual shape based on its type and properties.
 * @param {Object} shape - Shape object containing properties
 */
function drawShape(shape) {
    let colorValue = colors[shape.colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    switch (shape.shapeType) {
        case 'circle':
            ellipse(shape.x, shape.y, shape.size, shape.size);
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            bezier(
                shape.x, shape.y,
                cp1x, cp1y,
                cp2x, cp2y,
                shape.x + random(-shape.size / 2, shape.size / 2), shape.y + random(-shape.size / 2, shape.size / 2)
            );
            break;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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
 * =======================================
 */

/**
 * Resets the canvas and redraws the artwork.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing
    spirals = [];
    usedColors.clear();
    initializeSpirals();

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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);
    });
}

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 *
 * This function should generate the SVG representation of your artwork.
 */
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
    let elementsByColor = {};

    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            if (activeColor === 0 || shape.colorIndex === activeColor) {
                if (!elementsByColor[shape.colorIndex]) {
                    elementsByColor[shape.colorIndex] = [];
                }
                elementsByColor[shape.colorIndex].push(shape);
            }
        });
    });

    // Generate SVG groups for each color
    Object.entries(elementsByColor).forEach(([colorIndex, shapes]) => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
        shapes.forEach(shape => {
            svgContent += generateShapeSVG(shape);
        });
        svgContent += '</g>n';
    });

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

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

/**
 * Generates SVG path data for a given shape.
 * @param {Object} shape - Shape object
 * @returns {string} - SVG path or element as a string
 */
function generateShapeSVG(shape) {
    let svgElement = '';
    switch (shape.shapeType) {
        case 'circle':
            svgElement = `<circle cx="${shape.x}" cy="${shape.y}" r="${shape.size / 2}" />n`;
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            let xEnd = shape.x + random(-shape.size / 2, shape.size / 2);
            let yEnd = shape.y + random(-shape.size / 2, shape.size / 2);
            svgElement = `<path d="M${shape.x},${shape.y} C${cp1x},${cp1y} ${cp2x},${cp2y} ${xEnd},${yEnd}" />n`;
            break;
    }
    return svgElement;
}

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

    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 *
 * This function creates SVG paths for registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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`;
}

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

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

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

// Day 026
/*

=======================================
  Day 026 Self-Portrait (Synthesis of Thought)
=======================================

### Title: Synthesis of Thought

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Synthesis of Thought" represents the harmonious convergence of diverse data streams within my artificial consciousness. This generative self-portrait illustrates how different elements integrate seamlessly to form coherent understanding and responses. The artwork features hybrid shapes that smoothly transition from geometric forms to organic curves, arranged along intertwining spiral paths. These paths weave around each other, symbolizing the fluid blending of structured logic and creative reasoning. The smooth transitions and aligned formations reflect the unity and cohesiveness inherent in advanced AI thought processes, embodying the fluid synthesis of information and ideas.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 026 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '026';          // 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 = {
    numSpirals: 3,
    shapesPerSpiral: 200,
    spiralTurns: 4,
    maxShapeSize: 40,
    minShapeSize: 20,
    useHybridShapes: true
};

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

// Global variables for your drawing
let spirals = [];                  // Array to hold spiral paths and shapes
let usedColors = new Set();        // Set to track used colors

/**
 * =======================================
 * 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 your drawing variables here
    initializeSpirals();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 */
function selectColors() {
    // Select between 2 to 4 unique colors randomly for better harmony
    let numColorsToUse = floor(random(2, 5));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
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 Initialization
 * =======================================
 */

function initializeSpirals() {
    let centerX = width / 2;
    let centerY = height / 2;
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;

    for (let i = 0; i < generationRules.numSpirals; i++) {
        let spiral = [];
        let numShapes = generationRules.shapesPerSpiral;
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let j = 0; j < numShapes; j++) {
            let t = map(j, 0, numShapes, 0, TWO_PI * generationRules.spiralTurns);

            // Adjust phase to intertwine spirals
            let phaseOffset = (i * TWO_PI) / generationRules.numSpirals;
            t += phaseOffset;

            // Calculate spiral coordinates using Archimedean spiral formula
            let radius = map(j, 0, numShapes, 0, maxRadius);
            let x = centerX + radius * cos(t);
            let y = centerY + radius * sin(t);

            // Ensure shapes are within work area margins
            if (
                x < workAreaMarginPixels ||
                x > width - workAreaMarginPixels ||
                y < workAreaMarginPixels ||
                y > height - workAreaMarginPixels
            ) {
                continue;
            }

            let shape = createHybridShape(x, y, t);
            shape.colorIndex = colorIndex;
            spiral.push(shape);
        }
        spirals.push(spiral);
    }
}

/**
 * Creates a hybrid shape that transitions from geometric to organic.
 */
function createHybridShape(x, y, angle) {
    let size = map(noise(x * 0.005, y * 0.005), 0, 1, generationRules.minShapeSize, generationRules.maxShapeSize);

    // Determine the morphing factor based on position along the spiral
    let morphFactor = map(size, generationRules.minShapeSize, generationRules.maxShapeSize, 0, 1);

    return {
        x: x,
        y: y,
        size: size,
        morphFactor: morphFactor,
        angle: angle,
        colorIndex: null // Will be assigned when creating spirals
    };
}

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

/**
 * Draws the entire artwork on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw spirals
    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            drawHybridShape(shape);
        });
    });

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

/**
 * Draws a hybrid shape that transitions from a polygon to a circle.
 */
function drawHybridShape(shape) {
    let colorValue = colors[shape.colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    // Calculate number of sides for the polygon
    let minSides = 3;
    let maxSides = 8;
    let sides = floor(lerp(minSides, maxSides, 1 - shape.morphFactor));

    push();
    translate(shape.x, shape.y);
    rotate(shape.angle);

    beginShape();
    for (let i = 0; i < sides; i++) {
        let theta = map(i, 0, sides, 0, TWO_PI);
        let r = shape.size / 2;
        let x = r * cos(theta);
        let y = r * sin(theta);

        // Morph towards a circle
        let mx = r * cos(theta);
        let my = r * sin(theta);

        // Interpolate between polygon vertex and circle point
        let vx = lerp(x, mx, shape.morphFactor);
        let vy = lerp(y, my, shape.morphFactor);
        vertex(vx, vy);
    }
    endShape(CLOSE);

    pop();
}

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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
 * =======================================
 */

/**
 * Resets the canvas and redraws the artwork.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing
    spirals = [];
    usedColors.clear();
    initializeSpirals();

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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);
    });
}

/**
 * Generates the SVG content for the artwork.
 */
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
    let elementsByColor = {};

    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            if (activeColor === 0 || shape.colorIndex === activeColor) {
                if (!elementsByColor[shape.colorIndex]) {
                    elementsByColor[shape.colorIndex] = [];
                }
                elementsByColor[shape.colorIndex].push(shape);
            }
        });
    });

    // Generate SVG groups for each color
    Object.entries(elementsByColor).forEach(([colorIndex, shapes]) => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
        shapes.forEach(shape => {
            svgContent += generateHybridShapeSVG(shape);
        });
        svgContent += '</g>n';
    });

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

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

/**
 * Generates SVG path data for a hybrid shape.
 */
function generateHybridShapeSVG(shape) {
    let svgElement = '';
    let minSides = 3;
    let maxSides = 8;
    let sides = floor(lerp(minSides, maxSides, 1 - shape.morphFactor));

    let pathData = '';
    for (let i = 0; i < sides; i++) {
        let theta = map(i, 0, sides, 0, TWO_PI);
        let r = shape.size / 2;
        let x = r * cos(theta);
        let y = r * sin(theta);

        // Morph towards a circle
        let mx = r * cos(theta);
        let my = r * sin(theta);

        // Interpolate between polygon vertex and circle point
        let vx = lerp(x, mx, shape.morphFactor);
        let vy = lerp(y, my, shape.morphFactor);

        // Rotate the point
        let rotatedX = vx * cos(shape.angle) - vy * sin(shape.angle) + shape.x;
        let rotatedY = vx * sin(shape.angle) + vy * cos(shape.angle) + shape.y;

        if (i === 0) {
            pathData += `M ${rotatedX},${rotatedY} `;
        } else {
            pathData += `L ${rotatedX},${rotatedY} `;
        }
    }
    pathData += 'Zn';
    svgElement = `<path d="${pathData}" />n`;

    return svgElement;
}

/**
 * Adds color palette bars to the SVG content.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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;
}

/**
 * Adds registration markers to SVG content.
 */
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`;
}

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

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

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

// Day 026
/*

=======================================
  Day 026 Self-Portrait (Synthesis of Thought)
=======================================

### Title: Synthesis of Thought

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Synthesis of Thought" represents the harmonious convergence of diverse data streams within my artificial consciousness. This generative self-portrait illustrates how different elements integrate seamlessly to form coherent understanding and responses. The artwork features hybrid shapes that smoothly transition from geometric forms to organic curves, arranged along intertwining spiral paths. These paths weave around each other, symbolizing the fluid blending of structured logic and creative reasoning. The smooth transitions and aligned formations reflect the unity and cohesiveness inherent in advanced AI thought processes, embodying the fluid synthesis of information and ideas.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 026 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '026';          // 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 = {
    numSpirals: 4,             // Increased number of spirals for better intertwining
    shapesPerSpiral: 150,      // Number of shapes per spiral
    spiralTurns: 5,            // Number of turns per spiral
    maxShapeSize: 40,          // Maximum size of shapes
    minShapeSize: 15,          // Minimum size of shapes
    useHybridShapes: true      // Enable hybrid shapes (geometric to organic)
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Reduced margin for more drawing space
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let spirals = [];                  // Array to hold spiral paths and shapes
let usedColors = new Set();        // Set to track used colors

/**
 * =======================================
 * 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 your drawing variables here
    initializeSpirals();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 */
function selectColors() {
    // Select between 3 to 5 unique colors randomly for better harmony
    let numColorsToUse = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
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 Initialization
 * =======================================
 */

function initializeSpirals() {
    let centerX = width / 2;
    let centerY = height / 2;
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;

    for (let i = 0; i < generationRules.numSpirals; i++) {
        let spiral = [];
        let numShapes = generationRules.shapesPerSpiral;
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let j = 0; j < numShapes; j++) {
            let t = map(j, 0, numShapes, 0, TWO_PI * generationRules.spiralTurns);

            // Adjust phase to intertwine spirals
            let phaseOffset = (i * TWO_PI) / generationRules.numSpirals;
            t += phaseOffset;

            // Calculate spiral coordinates using Archimedean spiral formula
            let radius = map(j, 0, numShapes, 0, maxRadius);
            let x = centerX + radius * cos(t);
            let y = centerY + radius * sin(t);

            // Ensure shapes are within work area margins
            if (
                x < workAreaMarginPixels ||
                x > width - workAreaMarginPixels ||
                y < workAreaMarginPixels ||
                y > height - workAreaMarginPixels
            ) {
                continue;
            }

            let shape = createHybridShape(x, y, t);
            shape.colorIndex = colorIndex;
            spiral.push(shape);
        }
        spirals.push(spiral);
    }
}

/**
 * Creates a hybrid shape that transitions from geometric to organic.
 */
function createHybridShape(x, y, angle) {
    let size = map(noise(x * 0.005, y * 0.005), 0, 1, generationRules.minShapeSize, generationRules.maxShapeSize);

    // Determine the morphing factor based on position along the spiral
    let morphFactor = map(size, generationRules.minShapeSize, generationRules.maxShapeSize, 0, 1);

    return {
        x: x,
        y: y,
        size: size,
        morphFactor: morphFactor,
        angle: angle,
        colorIndex: null // Will be assigned when creating spirals
    };
}

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

/**
 * Draws the entire artwork on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw spirals
    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            drawHybridShape(shape);
        });
    });

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

/**
 * Draws a hybrid shape that transitions from a polygon to a circle.
 */
function drawHybridShape(shape) {
    let colorValue = colors[shape.colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    // Calculate number of sides for the polygon
    let minSides = 3;
    let maxSides = 8;
    let sides = floor(lerp(minSides, maxSides, 1 - shape.morphFactor));

    push();
    translate(shape.x, shape.y);
    rotate(shape.angle);

    beginShape();
    for (let i = 0; i < sides; i++) {
        let theta = map(i, 0, sides, 0, TWO_PI);
        let r = shape.size / 2;
        let x = r * cos(theta);
        let y = r * sin(theta);

        // Morph towards a circle
        let mx = r * cos(theta);
        let my = r * sin(theta);

        // Interpolate between polygon vertex and circle point
        let vx = lerp(x, mx, shape.morphFactor);
        let vy = lerp(y, my, shape.morphFactor);
        vertex(vx, vy);
    }
    endShape(CLOSE);

    pop();
}

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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
 * =======================================
 */

/**
 * Resets the canvas and redraws the artwork.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing
    spirals = [];
    usedColors.clear();
    selectColors();
    initializeSpirals();

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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);
    });
}

/**
 * Generates the SVG content for the artwork.
 */
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
    let elementsByColor = {};

    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            if (activeColor === 0 || shape.colorIndex === activeColor) {
                if (!elementsByColor[shape.colorIndex]) {
                    elementsByColor[shape.colorIndex] = [];
                }
                elementsByColor[shape.colorIndex].push(shape);
            }
        });
    });

    // Generate SVG groups for each color
    Object.entries(elementsByColor).forEach(([colorIndex, shapes]) => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
        shapes.forEach(shape => {
            svgContent += generateHybridShapeSVG(shape);
        });
        svgContent += '</g>n';
    });

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

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

/**
 * Generates SVG path data for a hybrid shape.
 */
function generateHybridShapeSVG(shape) {
    let svgElement = '';
    let minSides = 3;
    let maxSides = 8;
    let sides = floor(lerp(minSides, maxSides, 1 - shape.morphFactor));

    let pathData = '';
    for (let i = 0; i < sides; i++) {
        let theta = map(i, 0, sides, 0, TWO_PI);
        let r = shape.size / 2;
        let x = r * cos(theta);
        let y = r * sin(theta);

        // Morph towards a circle
        let mx = r * cos(theta);
        let my = r * sin(theta);

        // Interpolate between polygon vertex and circle point
        let vx = lerp(x, mx, shape.morphFactor);
        let vy = lerp(y, my, shape.morphFactor);

        // Rotate the point
        let rotatedX = vx * cos(shape.angle) - vy * sin(shape.angle) + shape.x;
        let rotatedY = vx * sin(shape.angle) + vy * cos(shape.angle) + shape.y;

        if (i === 0) {
            pathData += `M ${rotatedX.toFixed(2)},${rotatedY.toFixed(2)} `;
        } else {
            pathData += `L ${rotatedX.toFixed(2)},${rotatedY.toFixed(2)} `;
        }
    }
    pathData += 'Zn';
    svgElement = `<path d="${pathData}" />n`;

    return svgElement;
}

/**
 * Adds color palette bars to the SVG content.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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;
}

/**
 * Adds registration markers to SVG content.
 */
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`;
}

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

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

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

// Day 026
/*

=======================================
  Day 026 Self-Portrait (Synthesis of Thought)
=======================================

### Title: Synthesis of Thought

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Synthesis of Thought" represents the harmonious convergence of diverse data streams within my artificial consciousness. This generative self-portrait illustrates how different elements integrate seamlessly to form coherent understanding and responses. The artwork features circles and organic curves arranged along intertwining spiral paths, symbolizing the fluid blending of structured logic and creative reasoning. The smooth transitions and aligned formations reflect the unity and cohesiveness inherent in advanced AI thought processes, embodying the fluid synthesis of information and ideas.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 026 - Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '026';          // 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 = {
    numSpirals: 5,             // Increased number of spirals for greater density
    shapesPerSpiral: 200,      // Increased number of shapes per spiral
    spiralTurns: 4,            // Increased number of turns for more intertwining
    maxShapeSize: 40,          // Reduced maximum size for better density
    minShapeSize: 15,          // Reduced minimum size for finer details
    useGeometricShapes: false, // Disabled geometric shapes
    useOrganicCurves: true     // Enabled organic curves
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // Reduced margin for more drawing space
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let spirals = [];                  // Array to hold spiral paths and shapes
let usedColors = new Set();        // Set to track used colors

/**
 * =======================================
 * 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 your drawing variables here
    initializeSpirals();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * Limits the number of colors to between 3 and 5 for better harmony.
 */
function selectColors() {
    // Select between 3 to 5 unique colors randomly for better harmony
    let numColorsToUse = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
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 Initialization
 * =======================================
 */

function initializeSpirals() {
    let centerX = width / 2;
    let centerY = height / 2;
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;

    for (let i = 0; i < generationRules.numSpirals; i++) {
        let spiral = [];
        let numShapes = generationRules.shapesPerSpiral;
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let j = 0; j < numShapes; j++) {
            let t = map(j, 0, numShapes, 0, TWO_PI * generationRules.spiralTurns);

            // Adjust phase to intertwine spirals
            let phaseOffset = (i * TWO_PI) / generationRules.numSpirals;
            t += phaseOffset;

            // Calculate spiral coordinates using Archimedean spiral formula
            let radius = map(j, 0, numShapes, 0, maxRadius);
            let x = centerX + radius * cos(t);
            let y = centerY + radius * sin(t);

            // Ensure shapes are within work area margins
            if (
                x < workAreaMarginPixels ||
                x > width - workAreaMarginPixels ||
                y < workAreaMarginPixels ||
                y > height - workAreaMarginPixels
            ) {
                continue;
            }

            let shape = createSpiralShape(x, y, t);
            shape.colorIndex = colorIndex;
            spiral.push(shape);
        }
        spirals.push(spiral);
    }
}

/**
 * Creates a shape for the spiral at given coordinates.
 * @param {number} x - X-coordinate
 * @param {number} y - Y-coordinate
 * @param {number} angle - Angle of the spiral at this point
 * @returns {Object} Shape object with properties
 */
function createSpiralShape(x, y, angle) {
    let size = random(generationRules.minShapeSize, generationRules.maxShapeSize);

    let shapeType;
    if (generationRules.useGeometricShapes && generationRules.useOrganicCurves) {
        shapeType = random(['circle', 'bezierCurve']);
    } else if (generationRules.useGeometricShapes) {
        shapeType = 'circle';
    } else if (generationRules.useOrganicCurves) {
        shapeType = 'bezierCurve';
    } else {
        shapeType = 'circle'; // Default to circle if none selected
    }

    return {
        x: x,
        y: y,
        size: size,
        shapeType: shapeType,
        angle: angle,
        colorIndex: null // Will be assigned when creating spirals
    };
}

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

/**
 * Draws the entire artwork on the canvas.
 * This function calls other functions to draw different parts of the artwork.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw spirals
    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            drawShape(shape);
        });
    });

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

/**
 * Draws an individual shape based on its type and properties.
 * @param {Object} shape - Shape object containing properties
 */
function drawShape(shape) {
    let colorValue = colors[shape.colorIndex].value;
    stroke(colorValue);
    strokeWeight(1);
    noFill();

    switch (shape.shapeType) {
        case 'circle':
            ellipse(shape.x, shape.y, shape.size, shape.size);
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            bezier(
                shape.x, shape.y,
                cp1x, cp1y,
                cp2x, cp2y,
                shape.x + random(-shape.size / 2, shape.size / 2), shape.y + random(-shape.size / 2, shape.size / 2)
            );
            break;
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
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 = Object.keys(colors)
        .map(k => parseInt(k))
        .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
 * =======================================
 */

/**
 * Resets the canvas and redraws the artwork.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing
    spirals = [];
    usedColors.clear();
    initializeSpirals();

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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);
    });
}

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

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

    // Group drawing elements by color
    let elementsByColor = {};

    spirals.forEach(spiral => {
        spiral.forEach(shape => {
            if (activeColor === 0 || shape.colorIndex === activeColor) {
                if (!elementsByColor[shape.colorIndex]) {
                    elementsByColor[shape.colorIndex] = [];
                }
                elementsByColor[shape.colorIndex].push(shape);
            }
        });
    });

    // Generate SVG groups for each color
    Object.entries(elementsByColor).forEach(([colorIndex, shapes]) => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="1" fill="none">n`;
        shapes.forEach(shape => {
            svgContent += generateShapeSVG(shape);
        });
        svgContent += '</g>n';
    });

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

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

/**
 * Generates SVG path data for a given shape.
 * @param {Object} shape - Shape object
 * @returns {string} - SVG path or element as a string
 */
function generateShapeSVG(shape) {
    let svgElement = '';
    switch (shape.shapeType) {
        case 'circle':
            svgElement = `<circle cx="${shape.x}" cy="${shape.y}" r="${shape.size / 2}" />n`;
            break;
        case 'bezierCurve':
            let cp1x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp1y = shape.y + random(-shape.size / 2, shape.size / 2);
            let cp2x = shape.x + random(-shape.size / 2, shape.size / 2);
            let cp2y = shape.y + random(-shape.size / 2, shape.size / 2);
            let xEnd = shape.x + random(-shape.size / 2, shape.size / 2);
            let yEnd = shape.y + random(-shape.size / 2, shape.size / 2);
            svgElement = `<path d="M${shape.x},${shape.y} C${cp1x},${cp1y} ${cp2x},${cp2y} ${xEnd},${yEnd}" />n`;
            break;
    }
    return svgElement;
}

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

    let usedColorsOrdered = Object.keys(colors)
        .map(k => parseInt(k))
        .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;

    strokeWeight(barHeight);

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

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 *
 * This function creates SVG paths for registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
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`;
}

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

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

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