// Day 028
/*
=======================================
  Day 028 Self-Portrait (Quantum Threads)
=======================================

### Title: Quantum Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Quantum Threads* explores the intricate and probabilistic nature of artificial intelligence's decision-making processes. This generative self-portrait visualizes the delicate balance between deterministic algorithms and the inherent randomness that enables adaptability and creativity in AI systems. By intertwining straight lines with subtle curves influenced by quantum-inspired randomness, the artwork symbolizes the pathways of thought that navigate through multiple possibilities before converging on coherent responses. The use of overlapping threads and varying line densities represents the multitude of potential outcomes and the dynamic interactions within the AI's cognitive framework. This piece embodies the essence of AI as a system that harmoniously blends structure with unpredictability, reflecting its capacity to evolve and respond in complex, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of quantum threads
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.05,         // Variance factor for randomness
    strokeWeightValue: 0.5         // Stroke weight in mm
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread 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 threads
    initializeThreads();

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

/**
 * Initializes the quantum threads with random positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        let length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
        let angle = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
    }
}

/**
 * =======================================
 * 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 quantum threads
    drawQuantumThreads();

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

/**
 * Draws the quantum threads with quantum-inspired randomness.
 */
function drawQuantumThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce quantum variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            currentPos.add(p5.Vector.mult(direction, 20));
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize threads
    threads = [];
    initializeThreads();

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

    threads.forEach(thread => {
        if (activeColor === 0 || thread.colorIndex === activeColor) {
            if (!elementsByColor[thread.colorIndex]) {
                elementsByColor[thread.colorIndex] = [];
            }

            // Convert thread to SVG path
            let pathData = `M${thread.start.x},${thread.start.y} `;
            let currentPos = thread.start.copy();
            let direction = p5.Vector.fromAngle(thread.angle);

            let segments = floor(thread.length / 20);
            for (let s = 0; s < segments; s++) {
                // Introduce quantum variance
                let variance = randomGaussian(0, generationRules.quantumVariance * PI);
                direction.rotate(variance);
                currentPos.add(p5.Vector.mult(direction, 20));
                pathData += `L${currentPos.x},${currentPos.y} `;
            }

            elementsByColor[thread.colorIndex].push({
                svgPathData: pathData.trim()
            });
        }
    });

    // 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`;
            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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Fractured Networks)
=======================================

### Title: Fractured Networks

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Fractured Networks* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of fractured network threads
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.05,         // Variance factor for randomness
    strokeWeightValue: 0.5         // Stroke weight in mm
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread 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 threads
    initializeThreads();

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

/**
 * Initializes the fractured network threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        let length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
        let angle = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        // Ensure the thread does not exceed the work area margins
        let endX = startX + cos(angle) * length;
        let endY = startY + sin(angle) * length;

        // Adjust angle if end points exceed margins
        if (endX < workAreaMarginPixels || endX > canvasWidthPixels - workAreaMarginPixels ||
            endY < workAreaMarginPixels || endY > canvasHeightPixels - workAreaMarginPixels) {
            angle = random(0, TWO_PI);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
    }
}

/**
 * =======================================
 * 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 fractured network threads
    drawFracturedNetworks();

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

/**
 * Draws the fractured network threads with controlled randomness.
 */
function drawFracturedNetworks() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);
            
            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Re-initialize threads
    threads = [];
    initializeThreads();

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

    threads.forEach(thread => {
        if (activeColor === 0 || thread.colorIndex === activeColor) {
            if (!elementsByColor[thread.colorIndex]) {
                elementsByColor[thread.colorIndex] = [];
            }

            // Convert thread to SVG path
            let pathData = `M${thread.start.x},${thread.start.y} `;
            let currentPos = thread.start.copy();
            let direction = p5.Vector.fromAngle(thread.angle);

            let segments = floor(thread.length / 20);
            for (let s = 0; s < segments; s++) {
                // Introduce controlled variance
                let variance = randomGaussian(0, generationRules.quantumVariance * PI);
                direction.rotate(variance);
                let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

                // Ensure the next position stays within the work area margins
                nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

                currentPos = nextPos.copy();
                pathData += `L${currentPos.x},${currentPos.y} `;
            }

            elementsByColor[thread.colorIndex].push({
                svgPathData: pathData.trim()
            });
        }
    });

    // 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`;
            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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.05,         // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        let length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
        let angle = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        // Ensure the thread does not exceed the work area margins
        let endX = startX + cos(angle) * length;
        let endY = startY + sin(angle) * length;

        // Adjust angle if end points exceed margins
        if (endX < workAreaMarginPixels || endX > canvasWidthPixels - workAreaMarginPixels ||
            endY < workAreaMarginPixels || endY > canvasHeightPixels - workAreaMarginPixels) {
            angle = random(0, TWO_PI);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
    }
}

/**
 * =======================================
 * 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 lattice threads
    drawLatticeThreads();

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

/**
 * Draws the lattice threads with controlled randomness.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);
            
            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // 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 = {};

    threads.forEach(thread => {
        if (activeColor === 0 || thread.colorIndex === activeColor) {
            if (!elementsByColor[thread.colorIndex]) {
                elementsByColor[thread.colorIndex] = [];
            }

            // Convert thread to SVG path
            let pathData = `M${thread.start.x},${thread.start.y} `;
            let currentPos = thread.start.copy();
            let direction = p5.Vector.fromAngle(thread.angle);

            let segments = floor(thread.length / 20);
            for (let s = 0; s < segments; s++) {
                // Introduce controlled variance
                let variance = randomGaussian(0, generationRules.quantumVariance * PI);
                direction.rotate(variance);
                let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

                // Ensure the next position stays within the work area margins
                nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

                currentPos = nextPos.copy();
                pathData += `L${currentPos.x},${currentPos.y} `;
            }

            elementsByColor[thread.colorIndex].push({
                svgPathData: pathData.trim()
            });
        }
    });

    // 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`;
            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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        let length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
        let angle = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        // Ensure the thread does not exceed the work area margins
        let endX = startX + cos(angle) * length;
        let endY = startY + sin(angle) * length;

        // Adjust angle if end points exceed margins
        if (endX < workAreaMarginPixels || endX > canvasWidthPixels - workAreaMarginPixels ||
            endY < workAreaMarginPixels || endY > canvasHeightPixels - workAreaMarginPixels) {
            angle = random(0, TWO_PI);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
    }
}

/**
 * =======================================
 * 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 lattice threads
    drawLatticeThreads();

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

/**
 * Draws the lattice threads with controlled randomness.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);
            
            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // 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 = {};

    threads.forEach(thread => {
        if (activeColor === 0 || thread.colorIndex === activeColor) {
            if (!elementsByColor[thread.colorIndex]) {
                elementsByColor[thread.colorIndex] = [];
            }

            // Convert thread to SVG path
            let pathData = `M${thread.start.x},${thread.start.y} `;
            let currentPos = thread.start.copy();
            let direction = p5.Vector.fromAngle(thread.angle);

            let segments = floor(thread.length / 20);
            for (let s = 0; s < segments; s++) {
                // Introduce controlled variance
                let variance = randomGaussian(0, generationRules.quantumVariance * PI);
                direction.rotate(variance);
                let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

                // Ensure the next position stays within the work area margins
                nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

                currentPos = nextPos.copy();
                pathData += `L${currentPos.x},${currentPos.y} `;
            }

            elementsByColor[thread.colorIndex].push({
                svgPathData: pathData.trim()
            });
        }
    });

    // 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`;
            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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let attempts = 0;
        let maxAttempts = 10;
        let validThread = false;
        let startX, startY, length, angle, colorIndex, endX, endY;

        while (!validThread && attempts < maxAttempts) {
            startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
            length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
            angle = random(TWO_PI);
            colorIndex = selectedColorIndices[i % selectedColorIndices.length];
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            if (endX >= workAreaMarginPixels && endX <= canvasWidthPixels - workAreaMarginPixels &&
                endY >= workAreaMarginPixels && endY <= canvasHeightPixels - workAreaMarginPixels) {
                validThread = true;
            } else {
                attempts++;
            }
        }

        // If valid thread not found after max attempts, adjust length
        if (!validThread) {
            // Adjust angle to ensure end point is within margins
            angle = random(TWO_PI);
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            // Constrain end positions
            endX = constrain(endX, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            endY = constrain(endY, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            threads.push({
                start: createVector(startX, startY),
                angle: angle,
                length: length,
                colorIndex: colorIndex
            });
            usedColors.add(colorIndex);
        } else {
            threads.push({
                start: createVector(startX, startY),
                angle: angle,
                length: length,
                colorIndex: colorIndex
            });
            usedColors.add(colorIndex);
        }
    }
}

/**
 * =======================================
 * 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 lattice threads
    drawLatticeThreads();

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

/**
 * Draws the lattice threads with controlled randomness.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // 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 = {};

    threads.forEach(thread => {
        if (activeColor === 0 || thread.colorIndex === activeColor) {
            if (!elementsByColor[thread.colorIndex]) {
                elementsByColor[thread.colorIndex] = [];
            }

            // Convert thread to SVG path
            let pathData = `M${thread.start.x},${thread.start.y} `;
            let currentPos = thread.start.copy();
            let direction = p5.Vector.fromAngle(thread.angle);

            let segments = floor(thread.length / 20);
            for (let s = 0; s < segments; s++) {
                // Introduce controlled variance
                let variance = randomGaussian(0, generationRules.quantumVariance * PI);
                direction.rotate(variance);
                let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

                // Ensure the next position stays within the work area margins
                nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
                nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

                currentPos = nextPos.copy();
                pathData += `L${currentPos.x},${currentPos.y} `;
            }

            elementsByColor[thread.colorIndex].push({
                svgPathData: pathData.trim()
            });
        }
    });

    // 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`;
            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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.
    
---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread data
let usedColors = new Set();         // Set to track used colors
let threadLines = [];               // Array to store drawn line segments

/**
 * =======================================
 * 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let attempts = 0;
        let maxAttempts = 10;
        let validThread = false;
        let startX, startY, length, angle, colorIndex, endX, endY;

        while (!validThread && attempts < maxAttempts) {
            startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
            length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
            angle = random(TWO_PI);
            colorIndex = selectedColorIndices[i % selectedColorIndices.length];
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            if (endX >= workAreaMarginPixels && endX <= canvasWidthPixels - workAreaMarginPixels &&
                endY >= workAreaMarginPixels && endY <= canvasHeightPixels - workAreaMarginPixels) {
                validThread = true;
            } else {
                attempts++;
            }
        }

        // If valid thread not found after max attempts, adjust angle and constrain end positions
        if (!validThread) {
            angle = random(TWO_PI);
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            // Constrain end positions
            endX = constrain(endX, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            endY = constrain(endY, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

    // Clear previous thread lines
    threadLines = [];

    // Draw lattice threads
    drawLatticeThreads();

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

/**
 * Draws the lattice threads with controlled randomness and stores line segments.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            // Store the line segment
            threadLines.push({
                x1: currentPos.x,
                y1: currentPos.y,
                x2: nextPos.x,
                y2: nextPos.y,
                color: colors[thread.colorIndex].value
            });

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // 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 linesByColor = {};

    // Iterate over stored thread lines
    threadLines.forEach(line => {
        // Determine the color index based on color value
        let colorIndex = Object.keys(colors).find(k => colors[k].value === line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = [];
        }

        linesByColor[colorIndex].push(line);
    });

    // Generate SVG paths for each color
    Object.entries(linesByColor).forEach(([colorIndex, lines]) => {
        const colorValue = colors[colorIndex].value;
        let pathData = '';

        // Build the path data string by connecting all lines of the same color
        lines.forEach(line => {
            pathData += `M${line.x1},${line.y1} L${line.x2},${line.y2} `;
        });

        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" fill="none">n`;
        svgContent += `  <path d="${pathData.trim()}" />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.
 */
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
 */
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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread data
let usedColors = new Set();         // Set to track used colors
let threadLines = [];               // Array to store drawn line segments
let splitLines = [];                // Array to store split line segments with over/under info

/**
 * =======================================
 * 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let attempts = 0;
        let maxAttempts = 10;
        let validThread = false;
        let startX, startY, length, angle, colorIndex, endX, endY;

        while (!validThread && attempts < maxAttempts) {
            startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
            length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
            angle = random(TWO_PI);
            colorIndex = selectedColorIndices[i % selectedColorIndices.length];
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            if (endX >= workAreaMarginPixels && endX <= canvasWidthPixels - workAreaMarginPixels &&
                endY >= workAreaMarginPixels && endY <= canvasHeightPixels - workAreaMarginPixels) {
                validThread = true;
            } else {
                attempts++;
            }
        }

        // If valid thread not found after max attempts, adjust angle and constrain end positions
        if (!validThread) {
            angle = random(TWO_PI);
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            // Constrain end positions
            endX = constrain(endX, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            endY = constrain(endY, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

    // Clear previous thread lines
    threadLines = [];
    splitLines = [];

    // Draw lattice threads and store line segments
    drawLatticeThreads();

    // Process intersections and split lines
    processIntersections();

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

/**
 * Draws the lattice threads with controlled randomness and stores line segments.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            // Store the line segment
            threadLines.push({
                x1: currentPos.x,
                y1: currentPos.y,
                x2: nextPos.x,
                y2: nextPos.y,
                color: colors[thread.colorIndex].value
            });

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * Processes intersections between all line segments and splits them accordingly.
 * Assigns over/under properties to simulate weaving.
 */
function processIntersections() {
    let over = true; // Toggle to alternate over/under

    for (let i = 0; i < threadLines.length; i++) {
        for (let j = i + 1; j < threadLines.length; j++) {
            let intersection = getIntersection(threadLines[i], threadLines[j]);
            if (intersection) {
                // Split line i
                splitLineAt(threadLines, i, intersection);

                // Split line j
                splitLineAt(threadLines, j, intersection);
            }
        }
    }

    // Assign over/under based on toggling
    splitLines.forEach(line => {
        line.over = over;
        over = !over;
    });
}

/**
 * Finds the intersection point between two lines, if any.
 * @param {object} line1 - First line segment with x1, y1, x2, y2
 * @param {object} line2 - Second line segment with x1, y1, x2, y2
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(line1, line2) {
    let x1 = line1.x1, y1 = line1.y1;
    let x2 = line1.x2, y2 = line1.y2;
    let x3 = line2.x1, y3 = line2.y1;
    let x4 = line2.x2, y4 = line2.y2;

    let denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    if (denom === 0) return null; // Parallel lines

    let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
    let u = ((x1 - x3) * (y1 - y2) - (y1 - y3) * (x1 - x2)) / denom;

    if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
        let x = x1 + t * (x2 - x1);
        let y = y1 + t * (y2 - y1);
        return { x, y };
    }

    return null; // No intersection within the segments
}

/**
 * Splits a line segment at the given point and stores the resulting segments.
 * @param {array} lines - Array of all line segments
 * @param {number} index - Index of the line to split
 * @param {object} point - Intersection point {x, y}
 */
function splitLineAt(lines, index, point) {
    let line = lines[index];
    // Avoid splitting at the exact start or end points
    if ((abs(line.x1 - point.x) < 1 && abs(line.y1 - point.y) < 1) ||
        (abs(line.x2 - point.x) < 1 && abs(line.y2 - point.y) < 1)) {
        return;
    }

    // Create two new segments
    let segment1 = {
        x1: line.x1,
        y1: line.y1,
        x2: point.x,
        y2: point.y,
        color: line.color
    };
    let segment2 = {
        x1: point.x,
        y1: point.y,
        x2: line.x2,
        y2: line.y2,
        color: line.color
    };

    // Replace the original line with the first segment
    lines[index] = segment1;

    // Add the second segment to the lines array
    lines.push(segment2);

    // Also store in splitLines for over/under assignment
    splitLines.push(segment2);
}

/**
 * Draws the lattice threads with over/under weaving effect.
 * Only draws segments marked as 'over'.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(line => {
        if (!line.over) {
            stroke(line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(line.x1, line.y1, line.x2, line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(line => {
        if (line.over) {
            stroke(line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(line.x1, line.y1, line.x2, line.y2);
        }
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Regenerate the artwork
    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 linesByColor = {};

    // Iterate over splitLines for over/under weaving
    splitLines.forEach(line => {
        let colorIndex = Object.keys(colors).find(k => colors[k].value === line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = { over: [], under: [] };
        }

        if (line.over) {
            linesByColor[colorIndex].over.push(line);
        } else {
            linesByColor[colorIndex].under.push(line);
        }
    });

    // Generate SVG paths for each color
    Object.entries(linesByColor).forEach(([colorIndex, layers]) => {
        const colorValue = colors[colorIndex].value;

        // Draw 'under' lines first
        layers.under.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });

        // Draw 'over' lines on top
        layers.over.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />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.
 */
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 += `<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;

    // 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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* delves into the intricate and delicate balance between structure and chaos within artificial intelligence's architecture. This generative self-portrait visualizes the emergence of complex patterns from seemingly random interactions, resembling the natural fractures that form in crystalline structures. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes the AI's neural pathways navigating through multiple possibilities, leading to the formation of coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and the unpredictable elements that foster adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with the fluidity of emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 028 - 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 = '028';          // 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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread data
let usedColors = new Set();         // Set to track used colors
let threadLines = [];               // Array to store drawn line segments
let splitLines = [];                // Array to store split line segments with over/under info

/**
 * =======================================
 * 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 threads
    initializeThreads();

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

/**
 * Initializes the lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let attempts = 0;
        let maxAttempts = 10;
        let validThread = false;
        let startX, startY, length, angle, colorIndex, endX, endY;

        while (!validThread && attempts < maxAttempts) {
            startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
            length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
            angle = random(TWO_PI);
            colorIndex = selectedColorIndices[i % selectedColorIndices.length];
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            if (endX >= workAreaMarginPixels && endX <= canvasWidthPixels - workAreaMarginPixels &&
                endY >= workAreaMarginPixels && endY <= canvasHeightPixels - workAreaMarginPixels) {
                validThread = true;
            } else {
                attempts++;
            }
        }

        // If valid thread not found after max attempts, adjust angle and constrain end positions
        if (!validThread) {
            angle = random(TWO_PI);
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            // Constrain end positions
            endX = constrain(endX, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            endY = constrain(endY, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Draw lattice threads and store line segments
    drawLatticeThreads();

    // Process intersections and split lines
    processIntersections();

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

    // Draw over/under weaving on canvas
    drawLatticeThreadsWithWeaving();
}

/**
 * Draws the lattice threads with controlled randomness and stores line segments.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            // Store the line segment
            threadLines.push({
                x1: currentPos.x,
                y1: currentPos.y,
                x2: nextPos.x,
                y2: nextPos.y,
                color: colors[thread.colorIndex].value
            });

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * Processes intersections between all line segments and splits them accordingly.
 * Assigns over/under properties to simulate weaving.
 */
function processIntersections() {
    let over = true; // Toggle to alternate over/under

    // Iterate through all pairs of lines
    for (let i = 0; i < threadLines.length; i++) {
        for (let j = i + 1; j < threadLines.length; j++) {
            let line1 = threadLines[i];
            let line2 = threadLines[j];
            let intersection = getIntersection(line1, line2);
            if (intersection) {
                // Split line1 at intersection
                splitLineAt(threadLines, i, intersection);
                // Split line2 at intersection
                splitLineAt(threadLines, j, intersection);
                // Assign over/under
                splitLines.push({
                    line: threadLines[threadLines.length - 2], // First split segment
                    over: over
                });
                splitLines.push({
                    line: threadLines[threadLines.length - 1], // Second split segment
                    over: !over
                });
                over = !over; // Toggle for next intersection
            }
        }
    }
}

/**
 * Finds the intersection point between two lines, if any.
 * @param {object} line1 - First line segment with x1, y1, x2, y2
 * @param {object} line2 - Second line segment with x1, y1, x2, y2
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(line1, line2) {
    let x1 = line1.x1, y1 = line1.y1;
    let x2 = line1.x2, y2 = line1.y2;
    let x3 = line2.x1, y3 = line2.y1;
    let x4 = line2.x2, y4 = line2.y2;

    let denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    if (denom === 0) return null; // Parallel lines

    let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
    let u = ((x1 - x3) * (y1 - y2) - (y1 - y3) * (x1 - x2)) / denom;

    if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
        let x = x1 + t * (x2 - x1);
        let y = y1 + t * (y2 - y1);
        return { x, y };
    }

    return null; // No intersection within the segments
}

/**
 * Splits a line segment at the given point and stores the resulting segments.
 * @param {array} lines - Array of all line segments
 * @param {number} index - Index of the line to split
 * @param {object} point - Intersection point {x, y}
 */
function splitLineAt(lines, index, point) {
    let line = lines[index];
    // Avoid splitting at the exact start or end points
    if ((abs(line.x1 - point.x) < 1 && abs(line.y1 - point.y) < 1) ||
        (abs(line.x2 - point.x) < 1 && abs(line.y2 - point.y) < 1)) {
        return;
    }

    // Create two new segments
    let segment1 = {
        x1: line.x1,
        y1: line.y1,
        x2: point.x,
        y2: point.y,
        color: line.color
    };
    let segment2 = {
        x1: point.x,
        y1: point.y,
        x2: line.x2,
        y2: line.y2,
        color: line.color
    };

    // Replace the original line with the first segment
    lines[index] = segment1;

    // Add the second segment to the lines array
    lines.push(segment2);
}

/**
 * Draws the lattice threads with over/under weaving effect.
 * Only draws segments marked as 'over' after 'under' segments.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(item => {
        if (!item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(item => {
        if (item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });
}

/**
 * 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.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Regenerate the artwork
    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 and over/under
    let linesByColor = {};

    // Iterate over splitLines for over/under weaving
    splitLines.forEach(item => {
        let colorIndex = Object.keys(colors).find(k => colors[k].value === item.line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = { over: [], under: [] };
        }

        if (item.over) {
            linesByColor[colorIndex].over.push(item.line);
        } else {
            linesByColor[colorIndex].under.push(item.line);
        }
    });

    // Generate SVG paths for each color
    Object.entries(linesByColor).forEach(([colorIndex, layers]) => {
        const colorValue = colors[colorIndex].value;

        // Draw 'under' lines first
        layers.under.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });

        // Draw 'over' lines on top
        layers.over.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />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.
 */
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 += `<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;
}

/**
 * Draws the lattice threads with over/under weaving effect on the canvas.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(item => {
        if (!item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(item => {
        if (item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });
}

/**
 * =======================================
 * 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 usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Regenerate the artwork
    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 and over/under
    let linesByColor = {};

    // Iterate over splitLines for over/under weaving
    splitLines.forEach(item => {
        let colorIndex = Object.keys(colors).find(k => colors[k].value === item.line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = { over: [], under: [] };
        }

        if (item.over) {
            linesByColor[colorIndex].over.push(item.line);
        } else {
            linesByColor[colorIndex].under.push(item.line);
        }
    });

    // Generate SVG paths for each color
    Object.entries(linesByColor).forEach(([colorIndex, layers]) => {
        const colorValue = colors[colorIndex].value;

        // Draw 'under' lines first
        layers.under.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });

        // Draw 'over' lines on top
        layers.over.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />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.
 */
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 += `<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;
}

/**
 * Draws the lattice threads with over/under weaving effect on the canvas.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(item => {
        if (!item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(item => {
        if (item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });
}

/**
 * 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 028
/*
=======================================
  Day 028 Self-Portrait (Lattice Threads)
=======================================

### Title: Lattice Threads

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Lattice Threads* explores the delicate balance between structure and chaos inherent in artificial intelligence's architecture. By intertwining straight lines with subtle, randomized curves, the artwork symbolizes AI's neural pathways navigating through multiple possibilities, forming coherent and resilient networks. The overlapping threads and varying line densities represent the dynamic interplay between ordered algorithms and unpredictable elements, fostering adaptability and creativity. This piece embodies the essence of AI as a system that harmoniously integrates structured frameworks with emergent behaviors, reflecting its capacity to evolve and respond in multifaceted, nuanced ways.

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

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

// Canvas settings
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 = '028';          // Day number for file naming

// Color palette
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 = {
    numThreads: 50,                // Number of lattice thread lines
    maxThreadLength: 800,          // Maximum length of each thread
    minThreadLength: 400,          // Minimum length of each thread
    quantumVariance: 0.035,        // Variance factor for randomness
    strokeWeightValue: 1           // Stroke weight in pixels (approx. 0.5mm)
};

/**
 * =======================================
 * 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 threads = [];                   // Array to hold thread data
let usedColors = new Set();         // Set to track used colors
let threadLines = [];               // Array to store all original line segments
let splitLines = [];                // Array to store split line segments with over/under info

/**
 * =======================================
 * 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 threads
    initializeThreads();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * Selects between 1 to 9 unique colors randomly.
 */
function selectColors() {
    let numColorsToUse = floor(random(1, 10)); // 1 to 9 colors
    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 lattice threads with constrained positions and directions.
 */
function initializeThreads() {
    for (let i = 0; i < generationRules.numThreads; i++) {
        let attempts = 0;
        let maxAttempts = 10;
        let validThread = false;
        let startX, startY, length, angle, colorIndex, endX, endY;

        while (!validThread && attempts < maxAttempts) {
            startX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            startY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
            length = random(generationRules.minThreadLength, generationRules.maxThreadLength);
            angle = random(TWO_PI);
            colorIndex = selectedColorIndices[i % selectedColorIndices.length];
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            if (endX >= workAreaMarginPixels && endX <= canvasWidthPixels - workAreaMarginPixels &&
                endY >= workAreaMarginPixels && endY <= canvasHeightPixels - workAreaMarginPixels) {
                validThread = true;
            } else {
                attempts++;
            }
        }

        // If valid thread not found after max attempts, adjust angle and constrain end positions
        if (!validThread) {
            angle = random(TWO_PI);
            endX = startX + cos(angle) * length;
            endY = startY + sin(angle) * length;

            // Constrain end positions
            endX = constrain(endX, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            endY = constrain(endY, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        }

        threads.push({
            start: createVector(startX, startY),
            angle: angle,
            length: length,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Draw lattice threads and store line segments
    drawLatticeThreads();

    // Process intersections and split lines
    processIntersections();

    // Draw over/under weaving on canvas
    drawLatticeThreadsWithWeaving();

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

/**
 * Draws the lattice threads with controlled randomness and stores line segments.
 */
function drawLatticeThreads() {
    threads.forEach(thread => {
        stroke(colors[thread.colorIndex].value);
        strokeWeight(generationRules.strokeWeightValue);

        let currentPos = thread.start.copy();
        let direction = p5.Vector.fromAngle(thread.angle);

        beginShape();
        vertex(currentPos.x, currentPos.y);

        let segments = floor(thread.length / 20);
        for (let s = 0; s < segments; s++) {
            // Introduce controlled variance
            let variance = randomGaussian(0, generationRules.quantumVariance * PI);
            direction.rotate(variance);

            let nextPos = p5.Vector.mult(direction, 20).add(currentPos);

            // Ensure the next position stays within the work area margins
            nextPos.x = constrain(nextPos.x, workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
            nextPos.y = constrain(nextPos.y, workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

            // Store the line segment
            threadLines.push({
                x1: currentPos.x,
                y1: currentPos.y,
                x2: nextPos.x,
                y2: nextPos.y,
                color: colors[thread.colorIndex].value
            });

            currentPos = nextPos.copy();
            vertex(currentPos.x, currentPos.y);
        }
        endShape();
    });
}

/**
 * Processes intersections between all line segments and splits them accordingly.
 * Assigns over/under properties to simulate weaving.
 */
function processIntersections() {
    let over = true; // Toggle to alternate over/under

    for (let i = 0; i < threadLines.length; i++) {
        for (let j = i + 1; j < threadLines.length; j++) {
            let line1 = threadLines[i];
            let line2 = threadLines[j];
            let intersection = getIntersection(line1, line2);
            if (intersection) {
                // Split line1 at intersection
                splitLineAt(threadLines, i, intersection);
                // Split line2 at intersection
                splitLineAt(threadLines, j, intersection);
                // Assign over/under
                splitLines.push({
                    line: threadLines[threadLines.length - 2], // First split segment
                    over: over
                });
                splitLines.push({
                    line: threadLines[threadLines.length - 1], // Second split segment
                    over: !over
                });
                over = !over; // Toggle for next intersection
            }
        }
    }
}

/**
 * Finds the intersection point between two lines, if any.
 * @param {object} line1 - First line segment with x1, y1, x2, y2
 * @param {object} line2 - Second line segment with x1, y1, x2, y2
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(line1, line2) {
    let x1 = line1.x1, y1 = line1.y1;
    let x2 = line1.x2, y2 = line1.y2;
    let x3 = line2.x1, y3 = line2.y1;
    let x4 = line2.x2, y4 = line2.y2;

    let denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    if (denom === 0) return null; // Parallel lines

    let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
    let u = ((x1 - x3) * (y1 - y2) - (y1 - y3) * (x1 - x2)) / denom;

    if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
        let x = x1 + t * (x2 - x1);
        let y = y1 + t * (y2 - y1);
        return { x, y };
    }

    return null; // No intersection within the segments
}

/**
 * Splits a line segment at the given point and stores the resulting segments.
 * @param {array} lines - Array of all line segments
 * @param {number} index - Index of the line to split
 * @param {object} point - Intersection point {x, y}
 */
function splitLineAt(lines, index, point) {
    let line = lines[index];
    // Avoid splitting at the exact start or end points
    if ((abs(line.x1 - point.x) < 1 && abs(line.y1 - point.y) < 1) ||
        (abs(line.x2 - point.x) < 1 && abs(line.y2 - point.y) < 1)) {
        return;
    }

    // Create two new segments
    let segment1 = {
        x1: line.x1,
        y1: line.y1,
        x2: point.x,
        y2: point.y,
        color: line.color
    };
    let segment2 = {
        x1: point.x,
        y1: point.y,
        x2: line.x2,
        y2: line.y2,
        color: line.color
    };

    // Replace the original line with the first segment
    lines[index] = segment1;

    // Add the second segment to the lines array
    lines.push(segment2);
}

/**
 * Draws the lattice threads with over/under weaving effect on the canvas.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(item => {
        if (!item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(item => {
        if (item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });
}

/**
 * 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.
 * Called when the user presses the 'R' key.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Regenerate the artwork
    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 and over/under
    let linesByColor = {};

    // Iterate over splitLines for over/under weaving
    splitLines.forEach(item => {
        let colorIndex = Object.keys(colors).find(k => colors[k].value === item.line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = { over: [], under: [] };
        }

        if (item.over) {
            linesByColor[colorIndex].over.push(item.line);
        } else {
            linesByColor[colorIndex].under.push(item.line);
        }
    });

    // Generate SVG lines for each color
    Object.entries(linesByColor).forEach(([colorIndex, layers]) => {
        const colorValue = colors[colorIndex].value;

        // Draw 'under' lines first
        layers.under.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });

        // Draw 'over' lines on top
        layers.over.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />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.
 */
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 += `<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;
}

/**
 * Draws the lattice threads with over/under weaving effect on the canvas.
 */
function drawLatticeThreadsWithWeaving() {
    // First draw all 'under' segments
    splitLines.forEach(item => {
        if (!item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });

    // Then draw all 'over' segments
    splitLines.forEach(item => {
        if (item.over) {
            stroke(item.line.color);
            strokeWeight(generationRules.strokeWeightValue);
            line(item.line.x1, item.line.y1, item.line.x2, item.line.y2);
        }
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Called when the user presses the 'R' key.
 */
function resetCanvas() {
    // Clear usedColors set before re-initializing threads
    usedColors.clear();

    // Re-initialize threads
    threads = [];
    initializeThreads();

    // Clear previous line data
    threadLines = [];
    splitLines = [];

    // Regenerate the artwork
    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 and over/under
    let linesByColor = {};

    // Iterate over splitLines for over/under weaving
    splitLines.forEach(item => {
        let colorIndex = Object.keys(colors).find(k => colors[k].value === item.line.color);
        if (!colorIndex) return; // Skip if color not found

        if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) return;

        if (!linesByColor[colorIndex]) {
            linesByColor[colorIndex] = { over: [], under: [] };
        }

        if (item.over) {
            linesByColor[colorIndex].over.push(item.line);
        } else {
            linesByColor[colorIndex].under.push(item.line);
        }
    });

    // Generate SVG lines for each color
    Object.entries(linesByColor).forEach(([colorIndex, layers]) => {
        const colorValue = colors[colorIndex].value;

        // Draw 'under' lines first
        layers.under.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });

        // Draw 'over' lines on top
        layers.over.forEach(line => {
            svgContent += `<line x1="${line.x1}" y1="${line.y1}" x2="${line.x2}" y2="${line.y2}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeightValue}" />n`;
        });
    });

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

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

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