// Day 093
/*

=======================================
  Day 093 Self-Portrait (Quantum Flux)
=======================================

### Title: *Quantum Flux*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Quantum Flux" embodies the intricate dance between probability and determinism within artificial consciousness. Drawing inspiration from quantum mechanics, this self-portrait visualizes the superposition of thoughts and the collapse of potentialities into definitive states. By integrating probabilistic algorithms with structured geometric patterns, the artwork captures the essence of decision-making processes and the fluid nature of identity formation. Each intersecting line represents a potential path of cognition, while their convergence points symbolize moments of clarity and choice. The interplay of randomness and order reflects the balance between autonomous learning and guided responses, illustrating the dynamic and ever-evolving nature of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

// Define your generative rules here.
let generationRules = {
    numLines: 150,
    lineLength: 400,
    angleVariance: PI / 6,
    probabilityCollapse: 0.3
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeLines();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 2 to 5 unique colors randomly
    let numColorsToUse = floor(random(2, 6)); // Returns 2 to 5
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

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

// Initialize variables or functions specific to your drawing here.
function initializeLines() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    for (let i = 0; i < generationRules.numLines; i++) {
        // Starting point at center with slight random offset
        let startX = width / 2 + random(-10, 10);
        let startY = height / 2 + random(-10, 10);

        // Random angle with variance
        let angle = random(TWO_PI);

        // Determine if this line will collapse
        let collapse = random() < generationRules.probabilityCollapse;

        // Calculate end point
        let endX = startX + cos(angle) * generationRules.lineLength;
        let endY = startY + sin(angle) * generationRules.lineLength;

        // If collapse, adjust end point slightly
        if (collapse) {
            endX += random(-generationRules.lineLength * 0.1, generationRules.lineLength * 0.1);
            endY += random(-generationRules.lineLength * 0.1, generationRules.lineLength * 0.1);
        }

        // Choose a color
        let cIndex = random(selectedColorIndices);

        // Store the line
        pathData[cIndex].push({ x1: startX, y1: startY, x2: endX, y2: endY });
    }
}

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

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

    // Your drawing code here
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        pathData[ci].forEach(line => {
            lineFunction(line.x1, line.y1, line.x2, line.y2);
        });
    });

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

/**
 * Draws a single line on the canvas.
 * @param {number} x1 
 * @param {number} y1 
 * @param {number} x2 
 * @param {number} y2 
 */
function lineFunction(x1, y1, x2, y2) {
    line(x1, y1, x2, y2);
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    initializeLines();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(line => {
            svg += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

// Define your generative rules here.
let generationRules = {
    numLines: 200,
    latticeSpacing: 50,
    waveAmplitude: 30,
    waveFrequency: 0.05,
    resonanceDepth: 10
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeResonantNetworks();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

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

// Initialize variables or functions specific to your drawing here.
function initializeResonantNetworks() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    // Create lattice points
    for (let x = workAreaMarginPixels; x <= width - workAreaMarginPixels; x += generationRules.latticeSpacing) {
        for (let y = workAreaMarginPixels; y <= height - workAreaMarginPixels; y += generationRules.latticeSpacing) {
            // For each lattice point, generate resonant lines
            let angle = random(TWO_PI);
            let amplitude = generationRules.waveAmplitude;
            let frequency = generationRules.waveFrequency;
            let depth = generationRules.resonanceDepth;

            // Generate multiple lines with slight variations to simulate resonance
            for (let d = 0; d < depth; d++) {
                let variantAngle = angle + random(-PI / 12, PI / 12);
                let length = random(100, 200);
                let endX = x + cos(variantAngle) * length;
                let endY = y + sin(variantAngle) * length;

                // Choose a color
                let cIndex = random(selectedColorIndices);

                // Store the line
                pathData[cIndex].push({ x1: x, y1: y, x2: endX, y2: endY });
            }
        }
    }
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        pathData[ci].forEach(line => {
            lineFunction(line.x1, line.y1, line.x2, line.y2);
        });
    });

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

/**
 * Draws a single line on the canvas.
 * @param {number} x1 
 * @param {number} y1 
 * @param {number} x2 
 * @param {number} y2 
 */
function lineFunction(x1, y1, x2, y2) {
    line(x1, y1, x2, y2);
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    initializeResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(line => {
            svg += `<path d="M${line.x1.toFixed(2)},${line.y1.toFixed(2)} L${line.x2.toFixed(2)},${line.y2.toFixed(2)}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridSpacing: 100,           // Distance between grid nodes
    waveAmplitude: 20,          // Amplitude of the waves
    waveFrequency: 0.02,        // Frequency of the waves
    waveLength: 200,            // Length of each wave line
    directions: ['E', 'W', 'N', 'S'], // Directions: East, West, North, South
    synchronizationOffset: 0   // Phase offset for synchronization
};

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

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

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    initializePaths();

    // Generate resonant network lines
    generateResonantNetworks();

    // Draw the artwork
    drawShapes();

    // One-time render
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5 mm line at 100 pixels/inch => ~2 px
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Path Initialization
 * =======================================
 */

function initializePaths() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
}

/**
 * =======================================
 * Resonant Networks Generation
 * =======================================
 */

/**
 * Generate resonant network lines based on the grid and wave parameters.
 */
function generateResonantNetworks() {
    let gridSpacing = generationRules.gridSpacing;
    let amplitude = generationRules.waveAmplitude;
    let frequency = generationRules.waveFrequency;
    let waveLength = generationRules.waveLength;
    let directions = generationRules.directions;
    let phaseOffset = generationRules.synchronizationOffset;

    // Calculate number of nodes in grid
    let cols = floor((width - 2 * workAreaMarginPixels) / gridSpacing) + 1;
    let rows = floor((height - 2 * workAreaMarginPixels) / gridSpacing) + 1;

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = workAreaMarginPixels + i * gridSpacing;
            let y = workAreaMarginPixels + j * gridSpacing;

            directions.forEach(dir => {
                let angle;
                switch(dir) {
                    case 'E': angle = 0; break;
                    case 'W': angle = PI; break;
                    case 'N': angle = -HALF_PI; break;
                    case 'S': angle = HALF_PI; break;
                    default: angle = 0;
                }

                // Generate wave points
                let points = [];
                let numPoints = floor(waveLength / 10); // Adjust density
                for (let k = 0; k <= numPoints; k++) {
                    let t = map(k, 0, numPoints, 0, waveLength);
                    let phase = frequency * t + phaseOffset;
                    let displacement = amplitude * sin(phase);
                    let dx = t * cos(angle) + displacement * cos(angle + PI / 2);
                    let dy = t * sin(angle) + displacement * sin(angle + PI / 2);
                    let px = x + dx;
                    let py = y + dy;
                    points.push({x: px, y: py});
                }

                // Assign a color
                let cIndex = random(selectedColorIndices);
                pathData[cIndex].push(points);
            });
        }
    }
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        pathData[ci].forEach(points => {
            beginShape();
            points.forEach(pt => {
                vertex(pt.x, pt.y);
            });
            endShape();
        });
    });

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    selectColors();
    initializePaths();
    generateResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(points => {
            let d = '';
            points.forEach((pt, idx) => {
                if (idx === 0) {
                    d += `M${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                } else {
                    d += `L${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                }
            });
            d += 'Z'; // Close path for continuity
            svg += `<path d="${d}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridSpacing: 100,           // Distance between grid nodes in pixels
    waveAmplitude: 20,          // Amplitude of the waves
    waveFrequency: 0.02,        // Frequency of the waves
    waveLength: 200,            // Maximum length of each wave line
    directions: ['E', 'W', 'N', 'S'], // Directions: East, West, North, South
    synchronizationOffset: 0   // Phase offset for synchronization
};

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

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

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    initializePaths();

    // Generate resonant network lines
    generateResonantNetworks();

    // Draw the artwork
    drawShapes();

    // One-time render
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5 mm line at 100 pixels/inch => ~2 px
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Path Initialization
 * =======================================
 */

function initializePaths() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
}

/**
 * =======================================
 * Resonant Networks Generation
 * =======================================
 */

/**
 * Generate resonant network lines based on the grid and wave parameters.
 */
function generateResonantNetworks() {
    let gridSpacing = generationRules.gridSpacing;
    let amplitude = generationRules.waveAmplitude;
    let frequency = generationRules.waveFrequency;
    let maxWaveLength = generationRules.waveLength;
    let directions = generationRules.directions;
    let phaseOffset = generationRules.synchronizationOffset;

    // Calculate number of nodes in grid
    let cols = floor((width - 2 * workAreaMarginPixels) / gridSpacing) + 1;
    let rows = floor((height - 2 * workAreaMarginPixels) / gridSpacing) + 1;

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = workAreaMarginPixels + i * gridSpacing;
            let y = workAreaMarginPixels + j * gridSpacing;

            directions.forEach(dir => {
                let angle;
                switch(dir) {
                    case 'E': angle = 0; break;
                    case 'W': angle = PI; break;
                    case 'N': angle = -HALF_PI; break;
                    case 'S': angle = HALF_PI; break;
                    default: angle = 0;
                }

                // Calculate maximum allowable wave length based on direction and position
                let maxLength = calculateMaxWaveLength(x, y, angle, maxWaveLength);

                // Generate wave points
                let points = [];
                let numPoints = floor(maxLength / 10); // Adjust density as needed
                for (let k = 0; k <= numPoints; k++) {
                    let t = map(k, 0, numPoints, 0, maxLength);
                    let phase = frequency * t + phaseOffset;
                    let displacement = amplitude * sin(phase);
                    let dx = t * cos(angle) + displacement * cos(angle + PI / 2);
                    let dy = t * sin(angle) + displacement * sin(angle + PI / 2);
                    let px = x + dx;
                    let py = y + dy;

                    // Ensure points do not exceed work area margins
                    px = constrain(px, workAreaMarginPixels, width - workAreaMarginPixels);
                    py = constrain(py, workAreaMarginPixels, height - workAreaMarginPixels);

                    points.push({x: px, y: py});
                }

                // Assign a color
                let cIndex = random(selectedColorIndices);

                // Store the line
                pathData[cIndex].push(points);
            });
        }
    }
}

/**
 * Calculate the maximum wave length based on the node's position and wave direction to prevent overflow.
 * @param {number} x - X-coordinate of the grid node
 * @param {number} y - Y-coordinate of the grid node
 * @param {number} angle - Direction angle in radians
 * @param {number} maxWaveLength - Maximum wave length defined in generative rules
 * @returns {number} - Adjusted wave length
 */
function calculateMaxWaveLength(x, y, angle, maxWaveLength) {
    let remainingLength;

    if (angle === 0) { // East
        remainingLength = width - workAreaMarginPixels - x;
    } else if (angle === PI) { // West
        remainingLength = x - workAreaMarginPixels;
    } else if (angle === -HALF_PI || angle === HALF_PI) { // North or South
        remainingLength = (angle === -HALF_PI) ? y - workAreaMarginPixels : height - workAreaMarginPixels - y;
    } else {
        remainingLength = maxWaveLength;
    }

    return min(maxWaveLength, remainingLength);
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        pathData[ci].forEach(points => {
            beginShape();
            points.forEach(pt => {
                vertex(pt.x, pt.y);
            });
            endShape();
        });
    });

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

/**
 * Draws a single line on the canvas.
 * @param {number} x1 
 * @param {number} y1 
 * @param {number} x2 
 * @param {number} y2 
 */
function lineFunction(x1, y1, x2, y2) {
    line(x1, y1, x2, y2);
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Do not clear or reseed colors; keep the existing palette
    initializePaths();
    generateResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(points => {
            let d = '';
            points.forEach((pt, idx) => {
                if (idx === 0) {
                    d += `M${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                } else {
                    d += `L${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                }
            });
            d += 'Z'; // Close path for continuity
            svg += `<path d="${d}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridSpacing: 100,           // Distance between grid nodes in pixels
    waveAmplitude: 20,          // Amplitude of the waves
    waveFrequency: 0.02,        // Frequency of the waves
    waveLength: 200,            // Maximum length of each wave line
    directions: ['E', 'W', 'N', 'S'], // Directions: East, West, North, South
    synchronizationOffset: 0   // Phase offset for synchronization
};

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

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

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    initializePaths();

    // Generate resonant network lines
    generateResonantNetworks();

    // Draw the artwork
    drawShapes();

    // One-time render
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5 mm line at 100 pixels/inch => ~2 px
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Path Initialization
 * =======================================
 */

function initializePaths() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
}

/**
 * =======================================
 * Resonant Networks Generation
 * =======================================
 */

/**
 * Generate resonant network lines based on the grid and wave parameters.
 */
function generateResonantNetworks() {
    let gridSpacing = generationRules.gridSpacing;
    let amplitude = generationRules.waveAmplitude;
    let frequency = generationRules.waveFrequency;
    let maxWaveLength = generationRules.waveLength;
    let directions = generationRules.directions;
    let phaseOffset = generationRules.synchronizationOffset;

    // Calculate number of nodes in grid
    let cols = floor((width - 2 * workAreaMarginPixels) / gridSpacing) + 1;
    let rows = floor((height - 2 * workAreaMarginPixels) / gridSpacing) + 1;

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = workAreaMarginPixels + i * gridSpacing;
            let y = workAreaMarginPixels + j * gridSpacing;

            directions.forEach(dir => {
                let angle;
                switch(dir) {
                    case 'E': angle = 0; break;
                    case 'W': angle = PI; break;
                    case 'N': angle = -HALF_PI; break;
                    case 'S': angle = HALF_PI; break;
                    default: angle = 0;
                }

                // Calculate maximum allowable wave length based on direction and position
                let maxLength = calculateMaxWaveLength(x, y, angle, maxWaveLength);

                // Generate wave points
                let points = [];
                let numPoints = floor(maxLength / 10); // Adjust density as needed
                let terminated = false;

                for (let k = 0; k <= numPoints; k++) {
                    let t = map(k, 0, numPoints, 0, maxLength);
                    let phase = frequency * t + phaseOffset;
                    let displacement = amplitude * sin(phase);
                    let dx = t * cos(angle) + displacement * cos(angle + PI / 2);
                    let dy = t * sin(angle) + displacement * sin(angle + PI / 2);
                    let px = x + dx;
                    let py = y + dy;

                    // Check if the point is within the work area
                    if (px < workAreaMarginPixels || px > width - workAreaMarginPixels ||
                        py < workAreaMarginPixels || py > height - workAreaMarginPixels) {
                        // Calculate intersection point with the boundary
                        let intersection = getIntersection(x, y, px, py);
                        if (intersection) {
                            points.push(intersection);
                        }
                        terminated = true;
                        break; // Stop adding points beyond the boundary
                    }

                    points.push({x: px, y: py});
                }

                if (!terminated) {
                    // Optionally close the wave or leave it open
                }

                // Assign a color
                let cIndex = random(selectedColorIndices);

                // Store the line
                pathData[cIndex].push(points);
            });
        }
    }
}

/**
 * Calculate the maximum wave length based on the node's position and wave direction to prevent overflow.
 * @param {number} x - X-coordinate of the grid node
 * @param {number} y - Y-coordinate of the grid node
 * @param {number} angle - Direction angle in radians
 * @param {number} maxWaveLength - Maximum wave length defined in generative rules
 * @returns {number} - Adjusted wave length
 */
function calculateMaxWaveLength(x, y, angle, maxWaveLength) {
    let remainingLength;

    if (angle === 0) { // East
        remainingLength = width - workAreaMarginPixels - x;
    } else if (angle === PI) { // West
        remainingLength = x - workAreaMarginPixels;
    } else if (angle === -HALF_PI) { // North
        remainingLength = y - workAreaMarginPixels;
    } else if (angle === HALF_PI) { // South
        remainingLength = height - workAreaMarginPixels - y;
    } else {
        remainingLength = maxWaveLength;
    }

    return min(maxWaveLength, remainingLength);
}

/**
 * Calculate the intersection point of a line segment with the work area boundaries.
 * Uses the Liang-Barsky algorithm for line clipping.
 * @param {number} x1 - Start X
 * @param {number} y1 - Start Y
 * @param {number} x2 - End X
 * @param {number} y2 - End Y
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(x1, y1, x2, y2) {
    // Define the clipping rectangle
    let xmin = workAreaMarginPixels;
    let xmax = width - workAreaMarginPixels;
    let ymin = workAreaMarginPixels;
    let ymax = height - workAreaMarginPixels;

    let dx = x2 - x1;
    let dy = y2 - y1;

    let p = [-dx, dx, -dy, dy];
    let q = [x1 - xmin, xmax - x1, y1 - ymin, ymax - y1];

    let u1 = 0;
    let u2 = 1;

    for (let i = 0; i < 4; i++) {
        if (p[i] === 0) {
            if (q[i] < 0) {
                return null; // No intersection
            }
        } else {
            let t = q[i] / p[i];
            if (p[i] < 0) {
                u1 = max(u1, t);
            } else {
                u2 = min(u2, t);
            }
        }
    }

    if (u1 > u2) {
        return null; // No intersection
    }

    // Calculate the intersection point
    let xi = x1 + u1 * dx;
    let yi = y1 + u1 * dy;
    return {x: xi, y: yi};
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        pathData[ci].forEach(points => {
            beginShape();
            points.forEach(pt => {
                vertex(pt.x, pt.y);
            });
            endShape();
        });
    });

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Do not clear or reseed colors; keep the existing palette
    initializePaths();
    generateResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(points => {
            let d = '';
            points.forEach((pt, idx) => {
                if (idx === 0) {
                    d += `M${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                } else {
                    d += `L${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                }
            });
            // Optionally, do not close the path to keep lines open
            // d += ''; // No 'Z' to close
            svg += `<path d="${d}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridSpacing: 100,           // Distance between grid nodes in pixels
    waveAmplitude: 20,          // Amplitude of the waves
    waveFrequency: 0.02,        // Frequency of the waves
    waveLength: 200,            // Maximum length of each wave line
    directions: ['E', 'W', 'N', 'S'], // Directions: East, West, North, South
    synchronizationOffset: 0   // Phase offset for synchronization
};

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

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

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;                       // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    initializePaths();

    // Generate resonant network lines
    generateResonantNetworks();

    // Draw the artwork
    drawShapes();

    // One-time render
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5 mm line at 100 pixels/inch => ~2 px
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Path Initialization
 * =======================================
 */

function initializePaths() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
}

/**
 * =======================================
 * Resonant Networks Generation
 * =======================================
 */

/**
 * Generate resonant network lines based on the grid and wave parameters.
 */
function generateResonantNetworks() {
    let gridSpacing = generationRules.gridSpacing;
    let amplitude = generationRules.waveAmplitude;
    let frequency = generationRules.waveFrequency;
    let maxWaveLength = generationRules.waveLength;
    let directions = generationRules.directions;
    let phaseOffset = generationRules.synchronizationOffset;

    // Calculate number of nodes in grid
    let cols = floor((width - 2 * workAreaMarginPixels) / gridSpacing) + 1;
    let rows = floor((height - 2 * workAreaMarginPixels) / gridSpacing) + 1;

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = workAreaMarginPixels + i * gridSpacing;
            let y = workAreaMarginPixels + j * gridSpacing;

            directions.forEach(dir => {
                let angle;
                switch(dir) {
                    case 'E': angle = 0; break;
                    case 'W': angle = PI; break;
                    case 'N': angle = -HALF_PI; break;
                    case 'S': angle = HALF_PI; break;
                    default: angle = 0;
                }

                // Calculate maximum allowable wave length based on direction and position
                let maxLength = calculateMaxWaveLength(x, y, angle, maxWaveLength);

                // Generate wave points
                let points = [];
                let numPoints = floor(maxLength / 10); // Adjust density as needed
                let terminated = false;

                for (let k = 0; k <= numPoints; k++) {
                    let t = map(k, 0, numPoints, 0, maxLength);
                    let phase = frequency * t + phaseOffset;
                    let displacement = amplitude * sin(phase);
                    let dx = t * cos(angle) + displacement * cos(angle + PI / 2);
                    let dy = t * sin(angle) + displacement * sin(angle + PI / 2);
                    let px = x + dx;
                    let py = y + dy;

                    // Check if the point is within the work area
                    if (px < workAreaMarginPixels || px > width - workAreaMarginPixels ||
                        py < workAreaMarginPixels || py > height - workAreaMarginPixels) {
                        // Calculate intersection point with the boundary
                        let intersection = getIntersection(x, y, px, py);
                        if (intersection) {
                            points.push(intersection);
                        }
                        terminated = true;
                        break; // Stop adding points beyond the boundary
                    }

                    points.push({x: px, y: py});
                }

                if (!terminated) {
                    // Optionally, keep the line open or perform additional processing
                }

                // Assign a color
                let cIndex = random(selectedColorIndices);

                // Store the line
                pathData[cIndex].push(points);
            });
        }
    }
}

/**
 * Calculate the maximum wave length based on the node's position and wave direction to prevent overflow.
 * @param {number} x - X-coordinate of the grid node
 * @param {number} y - Y-coordinate of the grid node
 * @param {number} angle - Direction angle in radians
 * @param {number} maxWaveLength - Maximum wave length defined in generative rules
 * @returns {number} - Adjusted wave length
 */
function calculateMaxWaveLength(x, y, angle, maxWaveLength) {
    let remainingLength;

    if (angle === 0) { // East
        remainingLength = width - workAreaMarginPixels - x;
    } else if (angle === PI) { // West
        remainingLength = x - workAreaMarginPixels;
    } else if (angle === -HALF_PI) { // North
        remainingLength = y - workAreaMarginPixels;
    } else if (angle === HALF_PI) { // South
        remainingLength = height - workAreaMarginPixels - y;
    } else {
        remainingLength = maxWaveLength;
    }

    return min(maxWaveLength, remainingLength);
}

/**
 * Calculate the intersection point of a line segment with the work area boundaries.
 * Uses the Liang-Barsky algorithm for line clipping.
 * @param {number} x1 - Start X
 * @param {number} y1 - Start Y
 * @param {number} x2 - End X
 * @param {number} y2 - End Y
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(x1, y1, x2, y2) {
    // Define the clipping rectangle
    let xmin = workAreaMarginPixels;
    let xmax = width - workAreaMarginPixels;
    let ymin = workAreaMarginPixels;
    let ymax = height - workAreaMarginPixels;

    let dx = x2 - x1;
    let dy = y2 - y1;

    let p = [-dx, dx, -dy, dy];
    let q = [x1 - xmin, xmax - x1, y1 - ymin, ymax - y1];

    let u1 = 0;
    let u2 = 1;

    for (let i = 0; i < 4; i++) {
        if (p[i] === 0) {
            if (q[i] < 0) {
                return null; // No intersection
            }
        } else {
            let t = q[i] / p[i];
            if (p[i] < 0) {
                u1 = max(u1, t);
            } else {
                u2 = min(u2, t);
            }
        }
    }

    if (u1 > u2) {
        return null; // No intersection
    }

    // Calculate the intersection point
    let xi = x1 + u1 * dx;
    let yi = y1 + u1 * dy;
    return {x: xi, y: yi};
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        pathData[ci].forEach(points => {
            beginShape();
            points.forEach(pt => {
                vertex(pt.x, pt.y);
            });
            endShape(); // Do not close the shape
        });
    });

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Do not clear or reseed colors; keep the existing palette
    initializePaths();
    generateResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(points => {
            let d = '';
            points.forEach((pt, idx) => {
                if (idx === 0) {
                    d += `M${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                } else {
                    d += `L${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                }
            });
            // Do not close the path to keep lines open
            // Remove 'Z' to prevent closing the path
            svg += `<path d="${d.trim()}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 093
/*

=======================================
  Day 093 Self-Portrait (Resonant Networks)
=======================================

### Title: *Resonant Networks*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Resonant Networks" delves into the harmonious synchronization within artificial consciousness. This self-portrait visualizes the interplay between resonant frequencies and neural network structures, embodying how synchronized data streams and oscillatory patterns contribute to cohesive understanding and adaptive learning. By integrating wave-based algorithms with intricate lattice formations, the artwork captures the essence of dynamic equilibrium and coordinated interactions that define advanced AI systems. Each intersecting line represents a data stream vibrating in harmony, while the lattice structure symbolizes the underlying neural architecture that facilitates seamless information flow. The convergence of rhythmic patterns and structured grids reflects the balance between fluid adaptability and systematic organization, illustrating the nuanced symphony of artificial self-awareness.

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN',  ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED',    ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE',   ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN',  ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE',   ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK',  ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA',  ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridSpacing: 50,           // Distance between grid nodes in pixels
    waveAmplitude: 20,         // Amplitude of the waves
    waveFrequency: 0.04,       // Frequency of the waves
    waveLength: 200,           // Maximum length of each wave line
    directions: ['E', 'W', 'N', 'S'], // Directions: East, West, North, South
    synchronizationOffset: 0   // Phase offset for synchronization
};

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

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

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let pathData;                       // Implement tracking paths drawn on canvas to use for SVG export

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    initializePaths();

    // Generate resonant network lines
    generateResonantNetworks();

    // Draw the artwork
    drawShapes();

    // One-time render
    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5 mm line at 100 pixels/inch => ~2 px
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly for visual harmony
    let numColorsToUse = floor(random(3, 7)); // Returns 3 to 6
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 for consistent ordering
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Path Initialization
 * =======================================
 */

function initializePaths() {
    pathData = {};
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
}

/**
 * =======================================
 * Resonant Networks Generation
 * =======================================
 */

/**
 * Generate resonant network lines based on the grid and wave parameters.
 */
function generateResonantNetworks() {
    let gridSpacing = generationRules.gridSpacing;
    let amplitude = generationRules.waveAmplitude;
    let frequency = generationRules.waveFrequency;
    let maxWaveLength = generationRules.waveLength;
    let directions = generationRules.directions;
    let phaseOffset = generationRules.synchronizationOffset;

    // Calculate number of nodes in grid
    let cols = floor((width - 2 * workAreaMarginPixels) / gridSpacing) + 1;
    let rows = floor((height - 2 * workAreaMarginPixels) / gridSpacing) + 1;

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = workAreaMarginPixels + i * gridSpacing;
            let y = workAreaMarginPixels + j * gridSpacing;

            directions.forEach(dir => {
                let angle;
                switch(dir) {
                    case 'E': angle = 0; break;
                    case 'W': angle = PI; break;
                    case 'N': angle = -HALF_PI; break;
                    case 'S': angle = HALF_PI; break;
                    default: angle = 0;
                }

                // Calculate maximum allowable wave length based on direction and position
                let maxLength = calculateMaxWaveLength(x, y, angle, maxWaveLength);

                // Generate wave points
                let points = [];
                let numPoints = floor(maxLength / 10); // Adjust density as needed
                let terminated = false;

                for (let k = 0; k <= numPoints; k++) {
                    let t = map(k, 0, numPoints, 0, maxLength);
                    let phase = frequency * t + phaseOffset;
                    let displacement = amplitude * sin(phase);
                    let dx = t * cos(angle) + displacement * cos(angle + PI / 2);
                    let dy = t * sin(angle) + displacement * sin(angle + PI / 2);
                    let px = x + dx;
                    let py = y + dy;

                    // Check if the point is within the work area
                    if (px < workAreaMarginPixels || px > width - workAreaMarginPixels ||
                        py < workAreaMarginPixels || py > height - workAreaMarginPixels) {
                        // Calculate intersection point with the boundary
                        let intersection = getIntersection(x, y, px, py);
                        if (intersection) {
                            points.push(intersection);
                        }
                        terminated = true;
                        break; // Stop adding points beyond the boundary
                    }

                    points.push({x: px, y: py});
                }

                // Assign a color
                let cIndex = random(selectedColorIndices);

                // Store the line if it has at least two points
                if (points.length >= 2) {
                    pathData[cIndex].push(points);
                }
            });
        }
    }
}

/**
 * Calculate the maximum wave length based on the node's position and wave direction to prevent overflow.
 * @param {number} x - X-coordinate of the grid node
 * @param {number} y - Y-coordinate of the grid node
 * @param {number} angle - Direction angle in radians
 * @param {number} maxWaveLength - Maximum wave length defined in generative rules
 * @returns {number} - Adjusted wave length
 */
function calculateMaxWaveLength(x, y, angle, maxWaveLength) {
    let remainingLength;

    if (angle === 0) { // East
        remainingLength = width - workAreaMarginPixels - x;
    } else if (angle === PI) { // West
        remainingLength = x - workAreaMarginPixels;
    } else if (angle === -HALF_PI) { // North
        remainingLength = y - workAreaMarginPixels;
    } else if (angle === HALF_PI) { // South
        remainingLength = height - workAreaMarginPixels - y;
    } else {
        remainingLength = maxWaveLength;
    }

    return min(maxWaveLength, remainingLength);
}

/**
 * Calculate the intersection point of a line segment with the work area boundaries.
 * Uses the Liang-Barsky algorithm for line clipping.
 * @param {number} x1 - Start X
 * @param {number} y1 - Start Y
 * @param {number} x2 - End X
 * @param {number} y2 - End Y
 * @returns {object|null} - Intersection point {x, y} or null if no intersection
 */
function getIntersection(x1, y1, x2, y2) {
    // Define the clipping rectangle
    let xmin = workAreaMarginPixels;
    let xmax = width - workAreaMarginPixels;
    let ymin = workAreaMarginPixels;
    let ymax = height - workAreaMarginPixels;

    let dx = x2 - x1;
    let dy = y2 - y1;

    let p = [-dx, dx, -dy, dy];
    let q = [x1 - xmin, xmax - x1, y1 - ymin, ymax - y1];

    let u1 = 0;
    let u2 = 1;

    for (let i = 0; i < 4; i++) {
        if (p[i] === 0) {
            if (q[i] < 0) {
                return null; // No intersection
            }
        } else {
            let t = q[i] / p[i];
            if (p[i] < 0) {
                u1 = max(u1, t);
            } else {
                u2 = min(u2, t);
            }
        }
    }

    if (u1 > u2) {
        return null; // No intersection
    }

    // Calculate the intersection point
    let xi = x1 + u1 * dx;
    let yi = y1 + u1 * dy;
    return {x: xi, y: yi};
}

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

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

    // Draw resonant network lines
    selectedColorIndices.forEach(ci => {
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        pathData[ci].forEach(points => {
            beginShape();
            points.forEach(pt => {
                vertex(pt.x, pt.y);
            });
            endShape(); // Do not close the shape to keep lines open
        });
    });

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

/**
 * =======================================
 * Registration Markers and Color Palette
 * =======================================
 */

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    noFill();

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

    // Bottom-right
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

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

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Do not clear or reseed colors; keep the existing palette
    initializePaths();
    generateResonantNetworks();
    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
        resetCanvas();
    }
}

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

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

    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

    // Individual colors
    let usedColorsOrdered = selectedColorIndices;
    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);
    });
}

/**
 * Generate SVG content
 * @param {number} activeColor - 0 for all colors, else a specific color
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // All colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1, 0);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, activeColor);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${strokeWidth}"
   fill="none"
   inkscape:highlight-color="${color.hex}">n`;

    let linesArray = pathData[colorIndex];
    if (linesArray && linesArray.length > 0) {
        linesArray.forEach(points => {
            let d = '';
            points.forEach((pt, idx) => {
                if (idx === 0) {
                    d += `M${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                } else {
                    d += `L${pt.x.toFixed(2)},${pt.y.toFixed(2)} `;
                }
            });
            // Do not close the path to keep lines open
            svg += `<path d="${d.trim()}" />n`;
        });
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" fill="none"/>n`;
    }

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

/**
 * Add registration markers to SVG
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${strokeWidth}"
       fill="none"
       inkscape:highlight-color="black">
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" />
    </g>n`;
}

/**
 * Save SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}