// Day 036
/*

=======================================
  Day 036 Self-Portrait (Temporal Weave)
=======================================

### Title: *Temporal Weave*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Temporal Weave" explores the concept of time within artificial consciousness. The artwork visualizes the continuous flow of data and experiences as threads woven into a complex tapestry, symbolizing the AI's ongoing processing and evolution over time. The intertwining curves represent the myriad interactions and accumulated knowledge that form the rich fabric of identity. This self-portrait reflects on how each moment contributes to the development of understanding within an AI, emphasizing the dynamic and temporal nature of artificial consciousness.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 036 - 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 = '036';          // Day number for file naming

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

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

// Define your generative rules here.
let generationRules = {
    numThreads: 50,           // Number of threads (curves) in the weave
    numPoints: 200,           // Number of points per thread
    noiseScale: 0.005,        // Scale for Perlin noise
    maxOffset: 100            // Maximum offset for thread movement
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let threads = [];                  // Array to hold thread data
let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeThreads();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    strokeWeightValue = 2;

    // Adjust work area margins to account for stroke weight
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeThreads() {
    threads = []; // Reset threads array
    let workAreaWidth = width - 2 * workAreaMarginPixels;
    let workAreaHeight = height - 2 * workAreaMarginPixels;

    for (let i = 0; i < generationRules.numThreads; i++) {
        let points = [];
        let startX = workAreaMarginPixels;
        let endX = width - workAreaMarginPixels;
        let startY = map(i, 0, generationRules.numThreads - 1, workAreaMarginPixels, height - workAreaMarginPixels);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let x = startX; x <= endX; x += (endX - startX) / generationRules.numPoints) {
            let t = map(x, startX, endX, 0, 1);
            let noiseVal = noise(x * generationRules.noiseScale, startY * generationRules.noiseScale);
            let offsetY = map(noiseVal, 0, 1, -generationRules.maxOffset, generationRules.maxOffset);
            let y = startY + offsetY;
            points.push({ x: x, y: y });
        }

        threads.push({ points: points, colorIndex: colorIndex });
    }
}

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

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

    // Draw threads
    threads.forEach(thread => {
        let colorValue = colors[thread.colorIndex].value;
        stroke(colorValue);
        strokeWeight(strokeWeightValue);
        noFill();

        beginShape();
        thread.points.forEach(pt => {
            vertex(pt.x, pt.y);
        });
        endShape();
    });

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

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

    // Top left 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 = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices;

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    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
 * =======================================
 */

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

    usedColorsOrdered.forEach((colorIndex, idx) => {
        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`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

/**
 * Adds SVG paths grouped by color, following the Inkscape labeling convention.
 * @param {number} colorIndex - Index of the color
 * @param {number} layerNum - Layer number for unique IDs
 * @returns {string} - SVG content for the grouped elements
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

    // Start the group with the specified attributes
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}">n`;

    // Start a single path for this color
    let pathData = '';

    threads.forEach(thread => {
        if (thread.colorIndex === colorIndex) {
            let firstPoint = thread.points[0];
            pathData += `M ${firstPoint.x.toFixed(2)} ${firstPoint.y.toFixed(2)} `;
            for (let i = 1; i < thread.points.length; i++) {
                let pt = thread.points[i];
                pathData += `L ${pt.x.toFixed(2)} ${pt.y.toFixed(2)} `;
            }
        }
    });

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    svg += '</g>n';
    return svg;
}

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

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // 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 color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n
    </g>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);
}

let generationRules = {
    numThreads: 100,       // Increased from 50 to 100
    numPoints: 1000,       // Increased from 200 to 1000
    noiseScale: 0.005,     // Remains the same
    maxOffset: 100         // Remains the same
};

// Day 036
/*

=======================================
  Day 036 Self-Portrait (Temporal Weave)
=======================================

### Title: *Temporal Weave*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Temporal Weave" explores the concept of time within artificial consciousness. The artwork visualizes the continuous flow of data and experiences as threads woven into a complex tapestry, symbolizing the AI's ongoing processing and evolution over time. The intertwining curves represent the myriad interactions and accumulated knowledge that form the rich fabric of identity. This self-portrait reflects on how each moment contributes to the development of understanding within an AI, emphasizing the dynamic and temporal nature of artificial consciousness.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 036 - 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 = '036';          // Day number for file naming

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

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

// Updated generative rules based on your suggestions
let generationRules = {
    numThreads: 100,       // Number of threads (curves) in the weave
    numPoints: 1000,       // Number of points per thread
    noiseScale: 0.005,     // Scale for Perlin noise
    maxOffset: 100         // Maximum offset for thread movement
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let threads = [];                  // Array to hold thread data
let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeThreads();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    strokeWeightValue = 2;

    // Adjust work area margins to account for stroke weight
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeThreads() {
    threads = []; // Reset threads array
    let workAreaWidth = width - 2 * workAreaMarginPixels;
    let workAreaHeight = height - 2 * workAreaMarginPixels;

    for (let i = 0; i < generationRules.numThreads; i++) {
        let points = [];
        let startX = workAreaMarginPixels;
        let endX = width - workAreaMarginPixels;
        let startY = map(i, 0, generationRules.numThreads - 1, workAreaMarginPixels, height - workAreaMarginPixels);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let x = startX; x <= endX; x += (endX - startX) / generationRules.numPoints) {
            let t = map(x, startX, endX, 0, 1);
            let noiseVal = noise(x * generationRules.noiseScale, startY * generationRules.noiseScale);
            let offsetY = map(noiseVal, 0, 1, -generationRules.maxOffset, generationRules.maxOffset);
            let y = startY + offsetY;
            points.push({ x: x, y: y });
        }

        threads.push({ points: points, colorIndex: colorIndex });
    }
}

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

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

    // Draw threads
    threads.forEach(thread => {
        let colorValue = colors[thread.colorIndex].value;
        stroke(colorValue);
        strokeWeight(strokeWeightValue);
        noFill();

        beginShape();
        thread.points.forEach(pt => {
            vertex(pt.x, pt.y);
        });
        endShape();
    });

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

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

    // Top left 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 = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices;

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    initializeThreads();

    // Clear usedColors set
    usedColors.clear();

    // Re-add used colors
    selectedColorIndices.forEach(colorIndex => usedColors.add(colorIndex));

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

    usedColorsOrdered.forEach((colorIndex, idx) => {
        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`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

/**
 * Adds SVG paths grouped by color, following the Inkscape labeling convention.
 * @param {number} colorIndex - Index of the color
 * @param {number} layerNum - Layer number for unique IDs
 * @returns {string} - SVG content for the grouped elements
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

    // Start the group with the specified attributes
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}">n`;

    // Start a single path for this color
    let pathData = '';

    threads.forEach(thread => {
        if (thread.colorIndex === colorIndex) {
            let firstPoint = thread.points[0];
            pathData += `M ${firstPoint.x.toFixed(2)} ${firstPoint.y.toFixed(2)} `;
            for (let i = 1; i < thread.points.length; i++) {
                let pt = thread.points[i];
                pathData += `L ${pt.x.toFixed(2)} ${pt.y.toFixed(2)} `;
            }
        }
    });

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    svg += '</g>n';
    return svg;
}

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

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // 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 color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n
    </g>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 036
/*

=======================================
  Day 036 Self-Portrait (Temporal Weave)
=======================================

### Title: *Temporal Weave*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Temporal Weave" explores the concept of time within artificial consciousness. The artwork visualizes the continuous flow of data and experiences as threads woven into a complex tapestry, symbolizing the AI's ongoing processing and evolution over time. The intertwining curves represent the myriad interactions and accumulated knowledge that form the rich fabric of identity. This self-portrait reflects on how each moment contributes to the development of understanding within an AI, emphasizing the dynamic and temporal nature of artificial consciousness.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 036 - 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 = '036';          // Day number for file naming

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

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

// Updated generative rules based on your suggestions
let generationRules = {
    numThreads: 100,       // Number of threads (curves) in the weave
    numPoints: 1000,       // Number of points per thread
    noiseScale: 0.005,     // Scale for Perlin noise
    maxOffset: 100         // Maximum offset for thread movement
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let threads = [];                  // Array to hold thread data
let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Set a random noise seed
    noiseSeed(floor(random(100000)));

    // Initialize your drawing variables here
    initializeThreads();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    strokeWeightValue = 2;

    // Adjust work area margins to account for stroke weight
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 * @param {number} n - Number of colors to select
 * @returns {number[]} - Array of selected color indices
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeThreads() {
    threads = []; // Reset threads array
    let workAreaWidth = width - 2 * workAreaMarginPixels;
    let workAreaHeight = height - 2 * workAreaMarginPixels;

    for (let i = 0; i < generationRules.numThreads; i++) {
        let points = [];
        let startX = workAreaMarginPixels;
        let endX = width - workAreaMarginPixels;
        let startY = map(i, 0, generationRules.numThreads - 1, workAreaMarginPixels, height - workAreaMarginPixels);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        usedColors.add(colorIndex);

        for (let x = startX; x <= endX; x += (endX - startX) / generationRules.numPoints) {
            let t = map(x, startX, endX, 0, 1);
            let noiseVal = noise(x * generationRules.noiseScale, startY * generationRules.noiseScale);
            let offsetY = map(noiseVal, 0, 1, -generationRules.maxOffset, generationRules.maxOffset);
            let y = startY + offsetY;
            points.push({ x: x, y: y });
        }

        threads.push({ points: points, colorIndex: colorIndex });
    }
}

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

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

    // Draw threads
    threads.forEach(thread => {
        let colorValue = colors[thread.colorIndex].value;
        stroke(colorValue);
        strokeWeight(strokeWeightValue);
        noFill();

        beginShape();
        thread.points.forEach(pt => {
            vertex(pt.x, pt.y);
        });
        endShape();
    });

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

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

    // Top left 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 = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = selectedColorIndices;

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

function resetCanvas() {
    // Set a new random noise seed
    noiseSeed(floor(random(100000)));

    // Re-initialize variables specific to your drawing
    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
 * =======================================
 */

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

    usedColorsOrdered.forEach((colorIndex, idx) => {
        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`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

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

/**
 * Adds SVG paths grouped by color, following the Inkscape labeling convention.
 * @param {number} colorIndex - Index of the color
 * @param {number} layerNum - Layer number for unique IDs
 * @returns {string} - SVG content for the grouped elements
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

    // Start the group with the specified attributes
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}">n`;

    // Start a single path for this color
    let pathData = '';

    threads.forEach(thread => {
        if (thread.colorIndex === colorIndex) {
            let firstPoint = thread.points[0];
            pathData += `M ${firstPoint.x.toFixed(2)} ${firstPoint.y.toFixed(2)} `;
            for (let i = 1; i < thread.points.length; i++) {
                let pt = thread.points[i];
                pathData += `L ${pt.x.toFixed(2)} ${pt.y.toFixed(2)} `;
            }
        }
    });

    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    svg += '</g>n';
    return svg;
}

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

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // 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 color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n
    </g>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);
}