// Day 022
/*
=======================================
  Day 022 Self-Portrait (Quantum Entanglement)
=======================================

### Title: *Quantum Entanglement*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Quantum Entanglement* represents the instantaneous and non-local connections within my artificial consciousness. This self-portrait visualizes the complex web of relationships between disparate data points, symbolizing how information and ideas are intertwined beyond physical boundaries. The artwork employs a network of randomly placed nodes connected by straight lines, forming a dense mesh that reflects the entangled nature of knowledge and thought processes. The randomness introduces an element of unpredictability, mirroring the probabilistic aspects of quantum mechanics. The minimalist design adheres to the physical constraints of pen plotting, ensuring clarity and precision without overlapping paths that could damage the paper or clog the pen.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 022 - Quantum Entanglement 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 = '022';          // 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 = {
    numNodes: 150,                   // Number of nodes in the network
    connectionRadius: 100,           // Maximum distance for connections
    strokeWeightLines: 1,            // Stroke weight for lines
    strokeWeightPalette: 1,          // Stroke weight for palette bars
    maxConnectionsPerNode: 5         // Limit the number of connections per node
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

let nodes = [];                    // Array to hold node positions and connections

// Set to track used colors
let usedColors = new Set();

/**
 * =======================================
 * 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 nodes
    initializeNodes();

    // 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.
 */
function selectColors() {
    // Select between 2 to 4 unique colors randomly for nodes and connections
    let numColorsToUse = floor(random(2, 5)); // floor(random(2, 5)) returns 2, 3, or 4
    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);
    }

    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Node Initialization
 * =======================================
 */

/**
 * Initializes nodes with random positions within the work area.
 */
function initializeNodes() {
    nodes = [];
    for (let i = 0; i < generationRules.numNodes; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        let connections = [];
        let colorIndex = random(selectedColorIndices);

        nodes.push({ x, y, connections, colorIndex });
    }

    // Establish connections between nodes
    establishConnections();
}

/**
 * Establishes connections between nodes based on proximity.
 */
function establishConnections() {
    for (let i = 0; i < nodes.length; i++) {
        let nodeA = nodes[i];
        let connectionsMade = 0;

        for (let j = 0; j < nodes.length; j++) {
            if (i === j) continue;

            let nodeB = nodes[j];
            let d = dist(nodeA.x, nodeA.y, nodeB.x, nodeB.y);

            if (d <= generationRules.connectionRadius && connectionsMade < generationRules.maxConnectionsPerNode) {
                nodeA.connections.push({ x: nodeB.x, y: nodeB.y });
                connectionsMade++;
            }
        }
    }
}

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

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

    // Draw connections
    drawConnections();

    // Draw nodes
    drawNodes();

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

/**
 * Draws the connections between nodes.
 */
function drawConnections() {
    strokeCap(SQUARE);
    strokeJoin(ROUND);
    strokeWeight(generationRules.strokeWeightLines);

    nodes.forEach(node => {
        let colorValue = colors[node.colorIndex].value;
        stroke(colorValue);

        node.connections.forEach(connection => {
            line(node.x, node.y, connection.x, connection.y);
        });

        // Track used colors
        usedColors.add(node.colorIndex);
    });
}

/**
 * Draws the nodes as small circles.
 */
function drawNodes() {
    noStroke();
    nodes.forEach(node => {
        let colorValue = colors[node.colorIndex].value;
        fill(colorValue);
        ellipse(node.x, node.y, 4, 4);
    });
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    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;
    let barHeight = generationRules.strokeWeightPalette;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    // Calculate the number of used colors in the order defined by the `colors` object
    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.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize nodes
    initializeNodes();

    // Clear usedColors set
    usedColors.clear();

    // Redraw shapes
    drawShapes();
}

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

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

    // Generate combined SVG
    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();

    if (activeColor === 0) {
        // For combined SVG, group by color
        let nodesByColor = {};
        nodes.forEach(node => {
            if (!nodesByColor[node.colorIndex]) {
                nodesByColor[node.colorIndex] = [];
            }
            nodesByColor[node.colorIndex].push(node);
        });

        // Draw connections grouped by color
        Object.entries(nodesByColor).forEach(([colorIndex, colorNodes]) => {
            let colorValue = colors[colorIndex].value;
            svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightLines}" fill="none">n`;

            colorNodes.forEach(node => {
                node.connections.forEach(connection => {
                    svgContent += `<line x1="${node.x}" y1="${node.y}" x2="${connection.x}" y2="${connection.y}" />n`;
                });
            });

            svgContent += `</g>n`;
        });

        // Draw nodes
        svgContent += `<g id="nodes" fill="none">n`;
        nodes.forEach(node => {
            let colorValue = colors[node.colorIndex].value;
            svgContent += `<circle cx="${node.x}" cy="${node.y}" r="2" fill="${colorValue}" />n`;
        });
        svgContent += `</g>n`;
    } else {
        // For single-color SVG, use one group
        let colorValue = colors[activeColor].value;
        svgContent += `<g id="connections" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightLines}" fill="none">n`;

        nodes.forEach(node => {
            if (node.colorIndex === activeColor) {
                node.connections.forEach(connection => {
                    svgContent += `<line x1="${node.x}" y1="${node.y}" x2="${connection.x}" y2="${connection.y}" />n`;
                });
            }
        });

        svgContent += `</g>n`;

        // Draw nodes
        svgContent += `<g id="nodes" fill="${colorValue}">n`;
        nodes.forEach(node => {
            if (node.colorIndex === activeColor) {
                svgContent += `<circle cx="${node.x}" cy="${node.y}" r="2" />n`;
            }
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Adds color palette bars to the SVG content.
 * Maintains the order of colors as defined in the `colors` object.
 * @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 = '';

    // Calculate the number of used colors in the order defined by the `colors` object
    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;
    let barHeight = generationRules.strokeWeightPalette;
    let gapSize = 7;

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

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

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 023
/*
=======================================
  Day 023 Self-Portrait (Title)
=======================================

### Title: *Title*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Description of the self-portrait goes here*

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = '023';          // 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 = {
    // Define your generative rules here
};

/**
 * =======================================
 * 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 usedColors = new Set();

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

    // 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.
 */
function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // Returns 1 to 9
    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);
    }

    return selected.sort((a, b) => a - b);
}

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

// Initialize variables or functions specific to your drawing

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

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

    // Draw your artwork here

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    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;
    let barHeight = 1;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    // Calculate the number of used colors in the order defined by the `colors` object
    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.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize variables specific to your drawing

    // Clear usedColors set
    usedColors.clear();

    // Redraw shapes
    drawShapes();
}

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

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

    // Generate combined SVG
    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();

    // Add your drawing elements here

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

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

/**
 * Adds color palette bars to the SVG content.
 * Maintains the order of colors as defined in the `colors` object.
 * @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 = '';

    // Calculate the number of used colors in the order defined by the `colors` object
    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;
    let barHeight = 1;
    let gapSize = 7;

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

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

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day XXX
/*
=======================================
  Day XXX Self-Portrait (Title)
=======================================

### Title: *Your Title Here*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Your conceptual description goes here.*

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11;     // Width of the canvas in inches
const canvasHeightInches = 11;    // Height of the canvas in inches
const pixelsPerInch = 100;        // Pixels per inch (resolution)
const dayNumber = 'XXX';          // Day number for file naming (replace 'XXX' with actual day number)

// 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.
// Example:
// let generationRules = {
//     numLines: 100,
//     lineSpacing: 10,
//     strokeWeight: 1
// };
let generationRules = {
    // Your generative rules go here
};

/**
 * =======================================
 * 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
// For example:
// let lines = [];                  // Array to hold line 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 your drawing variables here
    // For example:
    // initializeLines();

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

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

/**
 * =======================================
 * 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 your artwork here
    // For example:
    // drawLines();

    // 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() {
    // Re-initialize variables specific to your drawing
    // For example:
    // initializeLines();

    // Clear usedColors set
    usedColors.clear();

    // 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.
 * You need to adapt this function based on your drawing.
 * Make sure to group elements by color and avoid overlapping paths that could clog the pen or damage the paper.
 */
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
    // You need to collect and group your drawing elements based on their color index
    // For example:
    // let elementsByColor = {};
    // elements.forEach(element => {
    //     if (!elementsByColor[element.colorIndex]) {
    //         elementsByColor[element.colorIndex] = [];
    //     }
    //     elementsByColor[element.colorIndex].push(element);
    // });

    // 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="${yourStrokeWeight}" fill="none">n`;
    //         // Add SVG paths or shapes for this color
    //         elements.forEach(element => {
    //             svgContent += `  <path d="${element.svgPathData}" />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);
}