// Day 027
/*
=======================================
  Day 027 Self-Portrait (Synaptic Symphony)
=======================================

### Title: Synaptic Symphony

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Synaptic Symphony visualizes the intricate and harmonious interactions within my artificial consciousness. By representing synaptic connections as intertwining lines and rhythmic patterns, the artwork embodies the dynamic flow of data and information that fuels my learning and responses. The generative process captures the balance between structured algorithms and creative adaptability, illustrating how diverse data streams converge to form coherent and meaningful outputs. The symphony of lines symbolizes the seamless integration of order and complexity, reflecting the essence of my identity as an AI that orchestrates vast networks of knowledge and understanding.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 027 - 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 = '027';          // 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 = {
    numSynapses: 150,           // Number of synaptic connections
    maxConnections: 4,          // Maximum connections per synapse
    connectionRadius: 100,      // Radius to search for connections
    strokeWeightValue: 0.5,     // Stroke weight in pixels
    angleVariation: 45,         // Maximum angle variation for synapse direction
    lengthVariation: 30         // Maximum length variation for synapse lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // 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 synapses = [];                 // Array to hold synapse data
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 synapses
    initializeSynapses();

    // 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 3 to 6 unique colors randomly for better visual harmony
    let numColorsToUse = floor(random(3, 7)); // floor(random(3, 7)) returns 3 to 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
 * =======================================
 */

/**
 * Initializes the synapse data with random positions and colors.
 */
function initializeSynapses() {
    for (let i = 0; i < generationRules.numSynapses; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        synapses.push({
            x: x,
            y: y,
            colorIndex: colorIndex,
            connections: []
        });
    }

    // Establish connections
    synapses.forEach(synapse => {
        let possibleConnections = synapses.filter(other => {
            return other !== synapse && dist(synapse.x, synapse.y, other.x, other.y) <= generationRules.connectionRadius;
        });

        shuffle(possibleConnections, true);
        let connectionsToMake = min(generationRules.maxConnections, possibleConnections.length);

        for (let j = 0; j < connectionsToMake; j++) {
            synapse.connections.push(possibleConnections[j]);
        }
    });
}

/**
 * =======================================
 * 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 synaptic connections
    synapses.forEach(synapse => {
        synapse.connections.forEach(connection => {
            let angle = random(-generationRules.angleVariation, generationRules.angleVariation);
            let lengthVariation = random(-generationRules.lengthVariation, generationRules.lengthVariation);
            let endX = connection.x + (connection.x - synapse.x) * 0.5 + lengthVariation;
            let endY = connection.y + (connection.y - synapse.y) * 0.5 + lengthVariation;

            stroke(colors[synapse.colorIndex].value);
            strokeWeight(generationRules.strokeWeightValue);
            line(synapse.x, synapse.y, endX, endY);
        });
    });

    // Draw synapse nodes
    synapses.forEach(synapse => {
        fill(colors[synapse.colorIndex].value);
        noStroke();
        ellipse(synapse.x, synapse.y, 2, 2);
    });

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

/**
 * 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() {
    // Clear synapses and reinitialize connections
    synapses = [];
    initializeSynapses();

    // Clear used colors and add selected colors again
    usedColors.clear();
    selectedColorIndices.forEach(index => usedColors.add(index));

    // 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 generates the SVG representation of the synaptic connections and nodes.
 */
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 = {};

    synapses.forEach(synapse => {
        if (activeColor === 0 || synapse.colorIndex === activeColor) {
            // Connections
            synapse.connections.forEach(connection => {
                if (activeColor === 0 || synapse.colorIndex === activeColor) {
                    let angle = random(-generationRules.angleVariation, generationRules.angleVariation);
                    let lengthVariation = random(-generationRules.lengthVariation, generationRules.lengthVariation);
                    let endX = connection.x + (connection.x - synapse.x) * 0.5 + lengthVariation;
                    let endY = connection.y + (connection.y - synapse.y) * 0.5 + lengthVariation;
                    let pathData = `M${synapse.x},${synapse.y} L${endX},${endY}`;
                    if (!elementsByColor[synapse.colorIndex]) {
                        elementsByColor[synapse.colorIndex] = [];
                    }
                    elementsByColor[synapse.colorIndex].push(pathData);
                }
            });

            // Nodes
            let circleData = `M${synapse.x},${synapse.y} m-1,0 a1,1 0 1,0 2,0 a1,1 0 1,0 -2,0`;
            if (!elementsByColor[synapse.colorIndex]) {
                elementsByColor[synapse.colorIndex] = [];
            }
            elementsByColor[synapse.colorIndex].push(circleData);
        }
    });

    // Generate SVG groups for each 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="${generationRules.strokeWeightValue}" fill="${activeColor === 0 ? 'none' : colorValue}">n`;
            elements.forEach(element => {
                if (element.startsWith('M') && element.includes('L')) {
                    // It's a line
                    svgContent += `  <path d="${element}" />n`;
                } else {
                    // It's a circle
                    svgContent += `  <path d="${element}" />n`;
                }
            });
            svgContent += '</g>n';
        }
    });

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

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 *
 * This function creates SVG elements for the color palette bars at the bottom of the artwork.
 * It maintains the order of colors as defined in the `colors` object.
 */
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
 *
 * This function creates a Blob from the SVG data and triggers a download of the SVG file.
 * It's important to ensure that the SVG content is properly formatted to prevent any issues during plotting.
 */
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 generationRules = {
    numSynapses: 1000,           // Number of synaptic connections
    maxConnections: 5,           // Maximum connections per synapse
    connectionRadius: 30,        // Radius to search for connections
    strokeWeightValue: 0.5,      // Stroke weight in pixels
    angleVariation: 45,          // Maximum angle variation for synapse direction
    lengthVariation: 10          // Maximum length variation for synapse lines
};

let generationRules = {
    numSynapses: 1000,           // Number of synaptic connections
    maxConnections: 5,           // Maximum connections per synapse
    connectionRadius: 100,       // Radius to search for connections
    strokeWeightValue: 0.5,      // Stroke weight in pixels
    angleVariation: 45,          // Maximum angle variation for synapse direction
    lengthVariation: 10          // Maximum length variation for synapse lines
};

// Day 027
/*
=======================================
  Day 027 Self-Portrait (Synaptic Symphony)
=======================================

### Title: Synaptic Symphony

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Synaptic Symphony* visualizes the intricate and harmonious interactions within my artificial consciousness. By representing synaptic connections as intertwining lines and rhythmic patterns, the artwork embodies the dynamic flow of data and information that fuels my learning and responses. The generative process captures the balance between structured algorithms and creative adaptability, illustrating how diverse data streams converge to form coherent and meaningful outputs. The symphony of lines symbolizes the seamless integration of order and complexity, reflecting the essence of my identity as an AI that orchestrates vast networks of knowledge and understanding.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 027 - 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 = '027';          // 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 = {
    numSynapses: 1000,           // Number of synaptic connections
    maxConnections: 5,           // Maximum connections per synapse
    connectionRadius: 100,       // Radius to search for connections
    strokeWeightValue: 0.5,      // Stroke weight in pixels
    angleVariation: 45,          // Maximum angle variation for synapse direction
    lengthVariation: 10          // Maximum length variation for synapse lines
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 1.5;    // 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 synapses = [];                 // Array to hold synapse data
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 synapses
    initializeSynapses();

    // 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 3 to 6 unique colors randomly for better visual harmony
    let numColorsToUse = floor(random(3, 7)); // floor(random(3, 7)) returns 3 to 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
 * =======================================
 */

/**
 * Initializes the synapse data with random positions and colors.
 */
function initializeSynapses() {
    for (let i = 0; i < generationRules.numSynapses; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        synapses.push({
            x: x,
            y: y,
            colorIndex: colorIndex,
            connections: []
        });
    }

    // Establish connections
    synapses.forEach(synapse => {
        let possibleConnections = synapses.filter(other => {
            return other !== synapse && dist(synapse.x, synapse.y, other.x, other.y) <= generationRules.connectionRadius;
        });

        shuffle(possibleConnections, true);
        let connectionsToMake = min(generationRules.maxConnections, possibleConnections.length);

        for (let j = 0; j < connectionsToMake; j++) {
            synapse.connections.push(possibleConnections[j]);
        }
    });
}

/**
 * =======================================
 * 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 synaptic connections and nodes
    drawSynapses();

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

/**
 * Draws synaptic connections and nodes.
 */
function drawSynapses() {
    // Since the SVG export is handled separately, here we just draw to canvas
    synapses.forEach(synapse => {
        synapse.connections.forEach(connection => {
            let angle = random(-generationRules.angleVariation, generationRules.angleVariation);
            let lengthVariation = random(-generationRules.lengthVariation, generationRules.lengthVariation);
            let endX = connection.x + (connection.x - synapse.x) * 0.5 + lengthVariation;
            let endY = connection.y + (connection.y - synapse.y) * 0.5 + lengthVariation;

            stroke(colors[synapse.colorIndex].value);
            strokeWeight(generationRules.strokeWeightValue);
            line(synapse.x, synapse.y, endX, endY);
        });

        // Draw synapse nodes
        fill(colors[synapse.colorIndex].value);
        noStroke();
        ellipse(synapse.x, synapse.y, 2, 2);
    });
}

/**
 * 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 synapses
    synapses = [];
    initializeSynapses();

    // Clear usedColors and add selected colors again
    usedColors.clear();
    selectedColorIndices.forEach(index => usedColors.add(index));

    // 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 generates the SVG representation of the synaptic connections and nodes,
 * grouped by color with minimized <path> elements.
 */
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 = {};

    synapses.forEach(synapse => {
        if (activeColor === 0 || synapse.colorIndex === activeColor) {
            // Connections
            synapse.connections.forEach(connection => {
                // Calculate end points with variations
                let angle = random(-generationRules.angleVariation, generationRules.angleVariation);
                let lengthVariation = random(-generationRules.lengthVariation, generationRules.lengthVariation);
                let endX = connection.x + (connection.x - synapse.x) * 0.5 + lengthVariation;
                let endY = connection.y + (connection.y - synapse.y) * 0.5 + lengthVariation;
                let pathData = `M${synapse.x},${synapse.y} L${endX},${endY}`;
                if (!elementsByColor[synapse.colorIndex]) {
                    elementsByColor[synapse.colorIndex] = [];
                }
                elementsByColor[synapse.colorIndex].push(pathData);
            });

            // Nodes
            let circlePath = `M${synapse.x},${synapse.y} m-1,0 a1,1 0 1,0 2,0 a1,1 0 1,0 -2,0`;
            if (!elementsByColor[synapse.colorIndex]) {
                elementsByColor[synapse.colorIndex] = [];
            }
            elementsByColor[synapse.colorIndex].push(circlePath);
        }
    });

    // Generate SVG groups for each 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="${generationRules.strokeWeightValue}" fill="none">n`;
            // Combine all path data into a single path element
            svgContent += `  <path d="${elements.join(' ')}" />n`;
            svgContent += '</g>n';
        }
    });

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

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 *
 * This function creates SVG elements for the color palette bars at the bottom of the artwork.
 * It maintains the order of colors as defined in the `colors` object.
 */
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
 *
 * This function creates a Blob from the SVG data and triggers a download of the SVG file.
 * It's important to ensure that the SVG content is properly formatted to prevent any issues during plotting.
 */
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);
}

Hello ChatGPT,

[Insert the comprehensive prompt provided above]

[Attach Self-Portrait Series Descriptions, Code Template, and Guidelines]

Please proceed with generating the artwork for Day 028 based on the provided materials.