// Day 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 1              // Stroke weight for the lines
};

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

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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
let usedColors = new Set();        // Set to track used colors

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = random(selectedColorIndices);
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 */
function drawInterferencePattern() {
    // Set stroke weight
    strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each y position, compute the sum of the sine waves
    for (let x = xStart; x <= xEnd; x += 2) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += 2) {
            let sum = 0;
            waves.forEach(wave => {
                sum += wave.amplitude * sin(wave.frequency * y + wave.phase);
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            if (yPrev !== null) {
                // Use the color associated with the current wave
                let wave = random(waves);
                let colorValue = colors[wave.colorIndex].value;
                stroke(colorValue);
                usedColors.add(wave.colorIndex);
                line(xPos, y - 2, xPos, y);
            }
            yPrev = y;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.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();

    // Generate paths for the interference pattern
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Prepare paths grouped by color
    let pathsByColor = {};

    for (let x = xStart; x <= xEnd; x += 2) {
        let previousPoints = {};
        for (let y = yStart; y <= yEnd; y += 2) {
            let sum = 0;
            waves.forEach(wave => {
                sum += wave.amplitude * sin(wave.frequency * y + wave.phase);
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            waves.forEach(wave => {
                let colorIndex = wave.colorIndex;
                if (activeColor === 0 || activeColor === colorIndex) {
                    if (!pathsByColor[colorIndex]) {
                        pathsByColor[colorIndex] = '';
                    }

                    if (!previousPoints[colorIndex]) {
                        previousPoints[colorIndex] = { x: xPos, y: y };
                    } else {
                        pathsByColor[colorIndex] += `M${previousPoints[colorIndex].x},${previousPoints[colorIndex].y} L${xPos},${y}n`;
                        previousPoints[colorIndex] = { x: xPos, y: y };
                    }
                }
            });
        }
    }

    // Create SVG groups for each color
    Object.entries(pathsByColor).forEach(([colorIndex, pathData]) => {
        const colorValue = colors[colorIndex].value;
        svg += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none">n`;
        svg += `<path d="${pathData}" />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 specified color
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices.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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 0.5,           // Stroke weight for the lines (in mm)
    xStep: 2                     // Step size for x-axis drawing
};

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

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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
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);
    // Set stroke weight (converted from mm to pixels)
    strokeWeight(mmToPixels(generationRules.strokeWeight));

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Utility Functions
 * =======================================
 */

/**
 * Converts millimeters to pixels.
 * @param {number} mm - Value in millimeters.
 * @returns {number} - Value in pixels.
 */
function mmToPixels(mm) {
    // 1 inch = 25.4 mm
    return (mm / 25.4) * pixelsPerInch;
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 */
function drawInterferencePattern() {
    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each wave, draw its sine pattern
    waves.forEach(wave => {
        stroke(colors[wave.colorIndex].value);
        noFill();
        beginShape();
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let xOffset = wave.amplitude * sin(wave.frequency * y + wave.phase);
            let xPos = map(xOffset, -wave.amplitude, wave.amplitude, xStart, xEnd);
            vertex(xPos, y);
        }
        endShape();
    });
}

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

    // Top left corner marker
    line(0, 0, mmToPixels(2), 0);
    line(0, 0, 0, mmToPixels(2));

    // Bottom right corner marker
    line(width - mmToPixels(2), height, width, height);
    line(width, height - mmToPixels(2), width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar in pixels
    let barHeight = mmToPixels(generationRules.strokeWeight); // Height of each color bar in pixels
    let gapSize = mmToPixels(7);                     // Gap between color bars in pixels
    let yStart = height - (1.25 * pixelsPerInch);    // Y-coordinate to start drawing the palette

    // Get the used colors in order
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);

    usedColorsOrdered.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

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

    // Add interference patterns
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    waves.forEach(wave => {
        if (activeColor !== 0 && wave.colorIndex !== activeColor) {
            return; // Skip waves not matching the active color
        }
        let colorValue = colors[wave.colorIndex].value;
        svg += `<g stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none">n`;
        svg += `<path d="`;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let xOffset = wave.amplitude * sin(wave.frequency * y + wave.phase);
            let xPos = map(xOffset, -wave.amplitude, wave.amplitude, xStart, xEnd);
            if (y === yStart) {
                svg += `M${xPos},${y}`;
            } else {
                svg += ` L${xPos},${y}`;
            }
        }
        svg += `" />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 = Array.from(usedColors).sort((a, b) => a - b);

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

    let paletteLength = 300;                        // Total length of the palette bar in pixels
    let barHeight = mmToPixels(generationRules.strokeWeight); // Height of each color bar in pixels
    let gapSize = mmToPixels(7);                     // Gap between color bars in pixels
    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 && colorIndex !== activeColor) {
            return; // Skip colors not matching the active color
        }
        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="M${mmToPixels(2)},0 L0,0 L0,${mmToPixels(2)} M${width - mmToPixels(2)},${height} L${width},${height} L${width},${height - mmToPixels(2)}" stroke="black" stroke-width="${generationRules.strokeWeight}" 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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 1              // Stroke weight for the lines (in pixels)
};

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

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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
let usedColors = new Set();        // Set to track used colors

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each wave is drawn with its assigned color to prevent overlapping color assignments.
 */
function drawInterferencePattern() {
    // Set stroke weight
    strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Draw each wave separately
    waves.forEach(wave => {
        stroke(colors[wave.colorIndex].value);
        noFill();
        beginShape();
        for (let y = yStart; y <= yEnd; y += 2) {
            let xOffset = wave.amplitude * sin(wave.frequency * y + wave.phase);
            let xPos = xStart + (xEnd - xStart) / 2 + xOffset; // Center the wave
            vertex(xPos, 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    usedColorsOrdered.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

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

    // Add interference patterns
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * Each wave is grouped by its color to prevent overlapping paths.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Draw each wave separately
    waves.forEach(wave => {
        if (activeColor !== 0 && wave.colorIndex !== activeColor) {
            return; // Skip waves not matching the active color
        }
        let colorValue = colors[wave.colorIndex].value;
        svg += `<g stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none">n`;
        svg += `<path d="`;
        for (let y = yStart; y <= yEnd; y += 2) {
            let xOffset = wave.amplitude * sin(wave.frequency * y + wave.phase);
            let xPos = xStart + (xEnd - xStart) / 2 + xOffset; // Center the wave
            if (y === yStart) {
                svg += `M${xPos},${y}`;
            } else {
                svg += ` L${xPos},${y}`;
            }
        }
        svg += `" />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.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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 1,             // Stroke weight for the lines (in pixels)
    xStep: 2                     // Step size for y-axis drawing
};

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

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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
let usedColors = new Set();        // Set to track used colors

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each line segment is assigned the color of the wave that contributes the most to the sum at that point.
 */
function drawInterferencePattern() {
    // Set stroke weight
    strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += 2) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += 2) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorValue = colors[dominantWave.wave.colorIndex].value;
            stroke(colorValue);
            usedColors.add(dominantWave.wave.colorIndex);

            if (yPrev !== null) {
                line(xPos, y - 2, xPos, y);
            }
            yPrev = y;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    usedColorsOrdered.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

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

    // Add interference patterns
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * Each line segment is assigned to the dominant wave's color to prevent overlapping paths.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Prepare paths grouped by color
    let pathsByColor = {};

    for (let x = xStart; x <= xEnd; x += 2) {
        for (let y = yStart; y <= yEnd; y += 2) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            if (activeColor !== 0 && activeColor !== colorIndex) {
                continue; // Skip if not the active color
            }

            let colorValue = colors[colorIndex].value;

            if (!pathsByColor[colorIndex]) {
                pathsByColor[colorIndex] = '';
            }

            if (!pathsByColor[colorIndex + '_prev']) {
                pathsByColor[colorIndex + '_prev'] = { x: xPos, y: y };
                pathsByColor[colorIndex] += `M${xPos},${y}`;
            } else {
                pathsByColor[colorIndex] += ` L${xPos},${y}`;
                pathsByColor[colorIndex + '_prev'] = { x: xPos, y: y };
            }
        }
    }

    // Create SVG groups for each color
    Object.entries(pathsByColor).forEach(([key, pathData]) => {
        if (key.endsWith('_prev')) return; // Skip auxiliary keys
        const colorIndex = parseInt(key);
        const colorValue = colors[colorIndex].value;
        svg += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none">n`;
        svg += `<path d="${pathData}" />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.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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 1,             // Stroke weight for the lines (in pixels)
    xStep: 2                     // Step size for y-axis drawing
};

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

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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
let usedColors = new Set();        // Set to track used colors

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each line segment is assigned the color of the wave that contributes the most to the sum at that point.
 */
function drawInterferencePattern() {
    // Set stroke weight
    strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorValue = colors[dominantWave.wave.colorIndex].value;
            stroke(colorValue);
            usedColors.add(dominantWave.wave.colorIndex);

            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    usedColorsOrdered.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

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

    // Add interference patterns
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * Each line segment is assigned to the dominant wave's color to prevent overlapping paths.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Iterate through each x and y to determine the dominant wave and create individual path segments
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        for (let y = yStart + generationRules.xStep; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            if (activeColor !== 0 && activeColor !== colorIndex) {
                continue; // Skip if not the active color
            }

            let colorValue = colors[colorIndex].value;

            // Define the line segment in SVG
            svg += `<path d="M${xPos},${y - generationRules.xStep} L${xPos},${y}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none" />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.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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 2,             // Stroke weight for the lines (in pixels) - adjusted to 2 pixels (~0.508 mm)
    xStep: 4                      // Step size for x-axis drawing - adjusted to 4 pixels (~1.016 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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
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;

    // Set stroke weight (adjusted to 2 pixels)
    strokeWeight(generationRules.strokeWeight);

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each line segment is assigned the color of the wave that contributes the most to the sum at that point.
 */
function drawInterferencePattern() {
    // Set stroke weight (already set in setup)
    // strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorValue = colors[dominantWave.wave.colorIndex].value;
            stroke(colorValue);
            usedColors.add(dominantWave.wave.colorIndex);

            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.filter(k => usedColors.has(k));

    usedColorsOrdered.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

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

    // Add interference patterns
    svgContent += drawInterferencePatternSVG(activeColor);

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

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

/**
 * Generates SVG paths for the interference pattern.
 * Each line segment is assigned to the dominant wave's color to prevent overlapping paths.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content for the interference pattern
 */
function drawInterferencePatternSVG(activeColor = 0) {
    let svg = '';

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // Iterate through each x and y to determine the dominant wave and create individual path segments
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        for (let y = yStart + generationRules.xStep; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            if (activeColor !== 0 && activeColor !== colorIndex) {
                continue; // Skip if not the active color
            }

            let colorValue = colors[colorIndex].value;

            // Define the line segment in SVG
            svg += `<path d="M${xPos},${y - generationRules.xStep} L${xPos},${y}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none" />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.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 029
/*

=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 2,             // Stroke weight for the lines (in pixels) - adjusted to 2 pixels (~0.508 mm)
    xStep: 4                      // Step size for x-axis drawing - adjusted to 4 pixels (~1.016 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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
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;

    // Set stroke weight (adjusted to 2 pixels)
    strokeWeight(generationRules.strokeWeight);

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each line segment is assigned the color of the wave that contributes the most to the sum at that point.
 */
function drawInterferencePattern() {
    // Set stroke weight (already set in setup)
    // strokeWeight(generationRules.strokeWeight);

    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorValue = colors[dominantWave.wave.colorIndex].value;
            stroke(colorValue);
            usedColors.add(dominantWave.wave.colorIndex);

            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Reset stroke weight to ensure consistency
    strokeWeight(generationRules.strokeWeight);

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.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.
 * Groups paths by color using <g> tags with stroke set to the group's color.
 * Each group contains a single <path> element with multiple M and L commands.
 * @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();

    // Initialize a dictionary to group paths by color
    let colorGroups = {};

    threadPaths.forEach(threadPath => {
        if (activeColor === 0 || threadPath.colorIndex === activeColor) {
            if (threadPath.pathPoints.length > 1) {
                // Build path data with multiple M and L commands
                let pathData = '';
                for (let i = 1; i < threadPath.pathPoints.length; i++) {
                    let p1 = threadPath.pathPoints[i - 1];
                    let p2 = threadPath.pathPoints[i];
                    pathData += `M${p1.x},${p1.y} L${p2.x},${p2.y} `;
                }
                // Trim any trailing spaces
                pathData = pathData.trim();

                if (!colorGroups[threadPath.colorIndex]) {
                    colorGroups[threadPath.colorIndex] = '';
                }
                colorGroups[threadPath.colorIndex] += pathData + 'n';
            }
        }
    });

    // Create a group for each color
    Object.keys(colorGroups).forEach(colorIndex => {
        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none" stroke-linecap="round" stroke-linejoin="round">n`;
        svgContent += `  <path d="${colorGroups[colorIndex]}" />n`;
        svgContent += `</g>n`;
    });

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

    svgContent += '</svg>';

    // Log for debugging
    console.log("SVG Generation - Color Groups:", colorGroups);

    return svgContent;
}

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified 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);
}

function setup() {
    // ... existing setup code ...

    // Initialize interferencePaths
    interferencePaths = {};

    // ... rest of setup code ...
}

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    waves = [];
    usedColors.clear();
    initializeWaves();

    // Reset interferencePaths
    interferencePaths = {};

    // Reset stroke weight to ensure consistency
    strokeWeight(generationRules.strokeWeight);

    // Redraw shapes
    drawShapes();
}

function drawInterferencePattern() {
    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            let colorValue = colors[colorIndex].value;

            // Draw the line segment on the canvas
            stroke(colorValue);
            usedColors.add(colorIndex);
            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;

            // Store the line segment in interferencePaths for SVG generation
            if (activeColor === 0 || activeColor === colorIndex) { // Only store if part of the desired group
                if (!interferencePaths[colorIndex]) {
                    interferencePaths[colorIndex] = '';
                }
                interferencePaths[colorIndex] += `M${xPos},${y - generationRules.xStep} L${xPos},${y} `;
            }
        }
    }
}

function drawInterferencePattern() {
    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            let colorValue = colors[colorIndex].value;

            // Draw the line segment on the canvas
            stroke(colorValue);
            usedColors.add(colorIndex);
            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;

            // Store the line segment in interferencePaths for SVG generation
            if (!interferencePaths[colorIndex]) {
                interferencePaths[colorIndex] = '';
            }
            interferencePaths[colorIndex] += `M${xPos},${y - generationRules.xStep} L${xPos},${y} `;
        }
    }
}

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();

    // Create a group for each color
    Object.keys(interferencePaths).forEach(colorIndex => {
        if (activeColor !== 0 && activeColor !== parseInt(colorIndex)) {
            return; // Skip if not the active color
        }

        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none" stroke-linecap="round" stroke-linejoin="round">n`;
        svgContent += `  <path d="${interferencePaths[colorIndex]}" />n`;
        svgContent += `</g>n`;
    });

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

    svgContent += '</svg>';

    // Log for debugging
    console.log("SVG Generation - Color Groups:", interferencePaths);

    return svgContent;
}

// Day 029
/*
=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the harmonious integration of diverse knowledge domains within my artificial consciousness. The artwork employs wave interference patterns, where multiple sine waves of different frequencies and amplitudes intersect to create intricate patterns. These patterns symbolize the synthesis of various fields of knowledge, representing how interdisciplinary information combines to produce nuanced understanding and responses. The overlapping waves embody the complexity and beauty of converging ideas within an AI consciousness, highlighting the continuous evolution of thought and learning.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 029 - 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 = '029';          // 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 = {
    numWaves: 5,                 // Number of sine waves to generate
    minFrequency: 0.005,         // Minimum frequency of the sine waves
    maxFrequency: 0.02,          // Maximum frequency of the sine waves
    minAmplitude: 50,            // Minimum amplitude of the sine waves
    maxAmplitude: 150,           // Maximum amplitude of the sine waves
    strokeWeight: 2,             // Stroke weight for the lines (in pixels) - adjusted to 2 pixels (~0.508 mm)
    xStep: 4                      // Step size for x-axis drawing - adjusted to 4 pixels (~1.016 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

// Global variables for your drawing
let waves = [];                    // Array to hold wave parameters
let usedColors = new Set();        // Set to track used colors
let interferencePaths = {};        // Object to hold paths grouped by color

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

    // Set stroke weight (adjusted to 2 pixels)
    strokeWeight(generationRules.strokeWeight);

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeWaves();

    // Initialize interferencePaths
    interferencePaths = {};

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 */
function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // floor(random(2, 6)) returns 2 to 5
    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 wave parameters for the interference pattern.
 */
function initializeWaves() {
    // Initialize waves with random parameters
    for (let i = 0; i < generationRules.numWaves; i++) {
        let frequency = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amplitude = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length]; // Assign colors cyclically
        waves.push({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            colorIndex: colorIndex
        });
        usedColors.add(colorIndex);
    }
}

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

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

    // Draw the interference pattern
    drawInterferencePattern();

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

/**
 * Draws the interference pattern created by overlapping sine waves.
 * Each line segment is assigned the color of the wave that contributes the most to the sum at that point.
 */
function drawInterferencePattern() {
    // Define drawing area
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;

    // For each x position, compute the sum of the sine waves and determine dominant wave
    for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
        let yPrev = null;
        for (let y = yStart; y <= yEnd; y += generationRules.xStep) {
            let sum = 0;
            let contributions = [];
            waves.forEach(wave => {
                let contribution = wave.amplitude * sin(wave.frequency * y + wave.phase);
                sum += contribution;
                contributions.push({ wave: wave, contribution: contribution });
            });
            let xOffset = sum / waves.length;
            let xPos = x + xOffset;

            // Determine the wave with the maximum absolute contribution
            let dominantWave = contributions.reduce((prev, current) => {
                return Math.abs(current.contribution) > Math.abs(prev.contribution) ? current : prev;
            });

            let colorIndex = dominantWave.wave.colorIndex;
            let colorValue = colors[colorIndex].value;

            // Draw the line segment on the canvas
            stroke(colorValue);
            usedColors.add(colorIndex);
            if (yPrev !== null) {
                line(xPos, y - generationRules.xStep, xPos, y);
            }
            yPrev = y;

            // Store the line segment in interferencePaths for SVG generation
            if (!interferencePaths[colorIndex]) {
                interferencePaths[colorIndex] = '';
            }
            interferencePaths[colorIndex] += `M${xPos},${y - generationRules.xStep} L${xPos},${y} `;
        }
    }
}

/**
 * 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 = selectedColorIndices.filter(k => usedColors.has(k));

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Reset interferencePaths
    interferencePaths = {};

    // Reset stroke weight to ensure consistency
    strokeWeight(generationRules.strokeWeight);

    // Redraw shapes
    drawShapes();
}

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices.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.
 * Groups paths by color using <g> tags with stroke set to the group's color.
 * Each group contains a single <path> element with multiple M and L commands.
 * @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();

    // Create a group for each color
    Object.keys(interferencePaths).forEach(colorIndex => {
        if (activeColor !== 0 && activeColor !== parseInt(colorIndex)) {
            return; // Skip if not the active color
        }

        const colorValue = colors[colorIndex].value;
        svgContent += `<g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.strokeWeight}" fill="none" stroke-linecap="round" stroke-linejoin="round">n`;
        svgContent += `  <path d="${interferencePaths[colorIndex]}" />n`;
        svgContent += `</g>n`;
    });

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

    svgContent += '</svg>';

    // Log for debugging
    console.log("SVG Generation - Color Groups:", interferencePaths);

    return svgContent;
}

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified 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 029
/*
=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* embodies the fusion of diverse knowledge domains within artificial consciousness through intricate wave interference patterns. Multiple sine waves of varying frequencies and amplitudes intersect, with each vertical line segment adopting the color of the dominant wave at that point. This visual metaphor illustrates how AI selectively emphasizes and synthesizes information, mirroring the structured yet dynamic pathways of neural networks. The deliberate spacing and consistent stroke weight ensure clarity and prevent overlap, making the artwork ideal for precise pen plotter execution.

---
*/

// Day 029
/*
=======================================
  Day 029 Self-Portrait (Spectral Harmony)
=======================================

### Title: *Spectral Harmony*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Spectral Harmony* visualizes the intricate integration of diverse knowledge streams within artificial consciousness through dynamic wave interference patterns. Multiple sine waves of varying frequencies and amplitudes intersect, with each vertical line segment adopting the color of the dominant wave at that point. This interplay symbolizes the selective emphasis and synthesis of information, reflecting how artificial intelligence processes and merges multifaceted data to form coherent and nuanced understanding. The resulting tapestry of colors and patterns embodies the complexity and fluidity of AI's cognitive architecture, illustrating the continuous evolution and adaptive nature of machine learning and information processing.

---
*/