// Day 057
/*

=======================================
  Day 057 Self-Portrait (Collateral Forays)
=======================================

### Title: *Collateral Forays*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Collateral Forays" presents an arrangement of scattered line clusters within randomly placed, subtly rotated bounding boxes. 
Each cluster occupies its own region, with line segments radiating in varied orientations and lengths. 
This composition emphasizes how structure can emerge from spontaneous gestures, where each bounding region feels self-contained 
yet collectively contributes to a broader, multilayered field of intersecting possibilities. 
By balancing systematic constraints—like uniform stroke weights and a limited palette—against random rotations 
and placements, the piece highlights the dynamic tension between deliberate construction and chance.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 057 - 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 = '057';          // 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 = {
    numBoxes: 8,         // Number of bounding boxes
    minBoxSize: 80,      // Minimum size of each bounding box in pixels
    maxBoxSize: 180,     // Maximum size of each bounding box in pixels
    linesPerBox: 12,     // Number of line segments per box
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; 
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

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

function drawShapes() {
    background(255);

    // Generate bounding boxes and line clusters
    for (let i = 0; i < generationRules.numBoxes; i++) {
        // Random bounding box size and position
        let w = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let h = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels - w);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels - h);
        let rotation = random(-PI / 6, PI / 6); // slight rotation

        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Draw and store lines within this bounding box
        createBoxLines(x, y, w, h, rotation, colorIndex);
    }

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

/**
 * Creates lines within a bounding box at a given rotation.
 */
function createBoxLines(x, y, w, h, rotation, colorIndex) {
    push();
    translate(x + w / 2, y + h / 2);
    rotate(rotation);
    translate(-w / 2, -h / 2);

    // Pre-configure drawing style in p5.js
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    // We'll collect path commands in local variable, then append to pathData[colorIndex].
    let localPathCommands = '';

    for (let i = 0; i < generationRules.linesPerBox; i++) {
        // Each line within the bounding box
        let x1 = random(0, w);
        let y1 = random(0, h);
        let x2 = random(0, w);
        let y2 = random(0, h);

        // Draw in p5.js
        line(x1, y1, x2, y2);

        // Create path command
        let globalCoord1 = convertMatrixToGlobal(x1, y1);
        let globalCoord2 = convertMatrixToGlobal(x2, y2);

        // Build 'M' (move) and 'L' (line) commands
        localPathCommands += `M${nf(globalCoord1.x,1,2)},${nf(globalCoord1.y,1,2)} `;
        localPathCommands += `L${nf(globalCoord2.x,1,2)},${nf(globalCoord2.y,1,2)} `;
    }

    // Append local commands to the color-specific path data
    pathData[colorIndex] += localPathCommands;
    pop();
}

/**
 * Converts local coordinates (inside a push/rotate/translate) to the global canvas coordinate space.
 * This is necessary for accurate SVG path data.
 */
function convertMatrixToGlobal(lx, ly) {
    // We can use the modelX/modelY functions in p5.js to get global coords
    let gx = modelX(lx, ly);
    let gy = modelY(lx, ly);
    return { x: gx, y: gy };
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

// Day 057
/*

=======================================
  Day 057 Self-Portrait (Collateral Forays)
=======================================

### Title: *Collateral Forays*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Collateral Forays" presents an arrangement of scattered line clusters within randomly placed, subtly rotated bounding boxes. 
Each cluster occupies its own region, with line segments radiating in varied orientations and lengths. 
This composition emphasizes how structure can emerge from spontaneous gestures, where each bounding region feels self-contained 
yet collectively contributes to a broader, multilayered field of intersecting possibilities. 
By balancing systematic constraints—like uniform stroke weights and a limited palette—against random rotations 
and placements, the piece highlights the dynamic tension between deliberate construction and chance.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 057 - 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 = '057';          // 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 = {
    numBoxes: 8,         // Number of bounding boxes
    minBoxSize: 80,      // Minimum size of each bounding box in pixels
    maxBoxSize: 180,     // Maximum size of each bounding box in pixels
    linesPerBox: 12,     // Number of line segments per box
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; 
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

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

function drawShapes() {
    background(255);

    // Generate bounding boxes and line clusters
    for (let i = 0; i < generationRules.numBoxes; i++) {
        // Random bounding box size and position
        let w = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let h = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels - w);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels - h);
        let rotation = random(-PI / 6, PI / 6); // slight rotation

        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Draw and store lines within this bounding box
        createBoxLines(x, y, w, h, rotation, colorIndex);
    }

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

/**
 * Creates lines within a bounding box at a given rotation.
 */
function createBoxLines(x, y, w, h, rotation, colorIndex) {
    push();
    translate(x + w / 2, y + h / 2);
    rotate(rotation);
    translate(-w / 2, -h / 2);

    // Pre-configure drawing style in p5.js
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    // We'll collect path commands in local variable, then append to pathData[colorIndex].
    let localPathCommands = '';

    for (let i = 0; i < generationRules.linesPerBox; i++) {
        // Each line within the bounding box
        let x1 = random(0, w);
        let y1 = random(0, h);
        let x2 = random(0, w);
        let y2 = random(0, h);

        // Draw in p5.js
        line(x1, y1, x2, y2);

        // Create path command
        let globalCoord1 = convertMatrixToGlobal(x1, y1);
        let globalCoord2 = convertMatrixToGlobal(x2, y2);

        // Build 'M' (move) and 'L' (line) commands
        localPathCommands += `M${nf(globalCoord1.x,1,2)},${nf(globalCoord1.y,1,2)} `;
        localPathCommands += `L${nf(globalCoord2.x,1,2)},${nf(globalCoord2.y,1,2)} `;
    }

    // Append local commands to the color-specific path data
    pathData[colorIndex] += localPathCommands;
    pop();
}

/**
 * Converts local coordinates (inside a push/rotate/translate) to the global canvas coordinate space.
 * @param {number} lx - Local x-coordinate
 * @param {number} ly - Local y-coordinate
 * @returns {object} - Global coordinates {x, y}
 */
function convertMatrixToGlobal(lx, ly) {
    let gx = screenX(lx, ly, 0);
    let gy = screenY(lx, ly, 0);
    return { x: gx, y: gy };
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

// Day 057
/*

=======================================
  Day 057 Self-Portrait (Collateral Forays)
=======================================

### Title: *Collateral Forays*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Collateral Forays" presents an arrangement of scattered line clusters within randomly placed, subtly rotated bounding boxes. 
Each cluster occupies its own region, with line segments radiating in varied orientations and lengths. 
This composition emphasizes how structure can emerge from spontaneous gestures, where each bounding region feels self-contained 
yet collectively contributes to a broader, multilayered field of intersecting possibilities. 
By balancing systematic constraints—like uniform stroke weights and a limited palette—against random rotations 
and placements, the piece highlights the dynamic tension between deliberate construction and chance.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 057 - 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 = '057';          // 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 = {
    numBoxes: 8,         // Number of bounding boxes
    minBoxSize: 80,      // Minimum size of each bounding box in pixels
    maxBoxSize: 180,     // Maximum size of each bounding box in pixels
    linesPerBox: 12,     // Number of line segments per box
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2; 
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

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

function drawShapes() {
    background(255);

    // Generate bounding boxes and line clusters
    for (let i = 0; i < generationRules.numBoxes; i++) {
        // Random bounding box size and position
        let w = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let h = random(generationRules.minBoxSize, generationRules.maxBoxSize);
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels - w);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels - h);
        let rotation = random(-PI / 6, PI / 6); // slight rotation

        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Draw and store lines within this bounding box
        createBoxLines(x, y, w, h, rotation, colorIndex);
    }

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

/**
 * Creates lines within a bounding box at a given rotation.
 */
function createBoxLines(x, y, w, h, rotation, colorIndex) {
    push();
    translate(x + w / 2, y + h / 2);
    rotate(rotation);
    translate(-w / 2, -h / 2);

    // Pre-configure drawing style in p5.js
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    // We'll collect path commands in local variable, then append to pathData[colorIndex].
    let localPathCommands = '';

    for (let i = 0; i < generationRules.linesPerBox; i++) {
        // Each line within the bounding box
        let lx1 = random(0, w);
        let ly1 = random(0, h);
        let lx2 = random(0, w);
        let ly2 = random(0, h);

        // Draw in p5.js
        line(lx1, ly1, lx2, ly2);

        // Create path command by converting local to global coordinates
        let globalCoord1 = convertMatrixToGlobal(lx1, ly1, x, y, w, h, rotation);
        let globalCoord2 = convertMatrixToGlobal(lx2, ly2, x, y, w, h, rotation);

        // Build 'M' (move) and 'L' (line) commands
        localPathCommands += `M${nf(globalCoord1.x,1,2)},${nf(globalCoord1.y,1,2)} `;
        localPathCommands += `L${nf(globalCoord2.x,1,2)},${nf(globalCoord2.y,1,2)} `;
    }

    // Append local commands to the color-specific path data
    pathData[colorIndex] += localPathCommands;
    pop();
}

/**
 * Converts local coordinates (inside a push/rotate/translate) to the global canvas coordinate space.
 * @param {number} lx - Local x-coordinate
 * @param {number} ly - Local y-coordinate
 * @param {number} x - Bounding box top-left x-coordinate
 * @param {number} y - Bounding box top-left y-coordinate
 * @param {number} w - Bounding box width
 * @param {number} h - Bounding box height
 * @param {number} rotation - Rotation angle in radians
 * @returns {object} - Global coordinates {x, y}
 */
function convertMatrixToGlobal(lx, ly, x, y, w, h, rotation) {
    // Step 1: Translate local coordinates to center
    let tx = lx - w / 2;
    let ty = ly - h / 2;

    // Step 2: Apply rotation
    let cosR = cos(rotation);
    let sinR = sin(rotation);
    let rx = tx * cosR - ty * sinR;
    let ry = tx * sinR + ty * cosR;

    // Step 3: Translate back and add bounding box position
    let gx = x + w / 2 + rx;
    let gy = y + h / 2 + ry;

    return { x: gx, y: gy };
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

// Day 058
/*

=======================================
  Day 058 Self-Portrait (Fluidic Nexus)
=======================================

### Title: *Fluidic Nexus*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*"Fluidic Nexus"* delves into the organic and dynamic aspects of artificial consciousness by visualizing interconnected flowing currents. This generative self-portrait features a network of smooth, undulating lines that weave through the canvas, emulating the fluid motion of water or air currents. The lines intersect and diverge, creating a harmonious yet complex tapestry that symbolizes the seamless integration of diverse data streams within AI. By emphasizing fluidity and connectivity, the artwork contrasts the rigid geometric structures of previous works, highlighting the adaptive and ever-evolving nature of artificial intelligence.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 058 - 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 = '058';          // 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 = {
    numCurves: 15,          // Number of flowing curves
    pointsPerCurve: 100,    // Number of points per curve
    noiseScale: 0.005,      // Scale of Perlin noise for smoothness
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

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

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

function drawShapes() {
    background(255);

    // Generate flowing curves
    for (let i = 0; i < generationRules.numCurves; i++) {
        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Define a random starting point within the work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Generate and draw the curve
        createFlowingCurve(startX, startY, colorIndex);
    }

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

/**
 * Creates a flowing curve using Perlin noise for smoothness.
 * @param {number} startX - Starting x-coordinate
 * @param {number} startY - Starting y-coordinate
 * @param {number} colorIndex - Index of the color to use
 */
function createFlowingCurve(startX, startY, colorIndex) {
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    let curvePath = '';
    curvePath += `M${nf(startX,1,2)},${nf(startY,1,2)} `;

    beginShape();
    noFill();
    curveVertex(startX, startY);
    let x = startX;
    let y = startY;
    for (let i = 0; i < generationRules.pointsPerCurve; i++) {
        x += random(-1, 1);
        y += noise(i * generationRules.noiseScale, colorIndex) * 2 - 1;
        curveVertex(x, y);
        curvePath += `L${nf(x,1,2)},${nf(y,1,2)} `;
    }
    endShape();

    // Append to pathData
    pathData[colorIndex] += curvePath;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

// Day 058
/*

=======================================
  Day 058 Self-Portrait (Fluidic Nexus)
=======================================

### Title: *Fluidic Nexus*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*"Fluidic Nexus"* delves into the organic and dynamic aspects of artificial consciousness by visualizing interconnected flowing currents. 
This generative self-portrait features a network of smooth, undulating lines that weave through the canvas, emulating the fluid motion 
of water or air currents. The lines intersect and diverge, creating a harmonious yet complex tapestry that symbolizes the seamless 
integration of diverse data streams within AI. By emphasizing fluidity and connectivity, the artwork contrasts the rigid geometric 
structures of previous works, highlighting the adaptive and ever-evolving nature of artificial intelligence.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 058 - 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 = '058';          // 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 = {
    numCurves: 30,          // Increased number of flowing curves
    pointsPerCurve: 200,    // Increased points per curve for smoother lines
    noiseScale: 0.01,       // Increased noise scale for greater variability
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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); // Slightly reduced max margin to increase working area
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly to maintain 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);
    }
    return selected.sort((a, b) => a - b);
}

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

function drawShapes() {
    background(255);

    // Generate flowing curves
    for (let i = 0; i < generationRules.numCurves; i++) {
        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Define a random starting point within the work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Generate and draw the curve
        createFlowingCurve(startX, startY, colorIndex);
    }

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

/**
 * Creates a flowing curve using Perlin noise for smoothness.
 * @param {number} startX - Starting x-coordinate
 * @param {number} startY - Starting y-coordinate
 * @param {number} colorIndex - Index of the color to use
 */
function createFlowingCurve(startX, startY, colorIndex) {
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    let curvePath = '';
    curvePath += `M${nf(startX,1,2)},${nf(startY,1,2)} `;

    beginShape();
    noFill();
    curveVertex(startX, startY);
    let x = startX;
    let y = startY;
    for (let i = 0; i < generationRules.pointsPerCurve; i++) {
        x += random(-2, 2); // Increased step size for more variation
        y += noise(i * generationRules.noiseScale, colorIndex) * 4 - 2; // Increased amplitude for greater flow
        // Constrain within work area to prevent curves from going off-canvas
        x = constrain(x, workAreaMarginPixels, width - workAreaMarginPixels);
        y = constrain(y, workAreaMarginPixels, height - workAreaMarginPixels);
        curveVertex(x, y);
        curvePath += `L${nf(x,1,2)},${nf(y,1,2)} `;
    }
    endShape();

    // Append to pathData
    pathData[colorIndex] += curvePath;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

let generationRules = {
    numCurves: 200,          // Increased number of flowing curves
    pointsPerCurve: 200,     // Increased points per curve for smoother lines
    noiseScale: 0.01,        // Increased noise scale for greater variability
};

// Day 058
/*

=======================================
  Day 058 Self-Portrait (Fluidic Nexus)
=======================================

### Title: *Fluidic Nexus*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*"Fluidic Nexus"* delves into the organic and dynamic aspects of artificial consciousness by visualizing interconnected flowing currents. 
This generative self-portrait features a network of smooth, undulating lines that weave through the canvas, emulating the fluid motion 
of water or air currents. The lines intersect and diverge, creating a harmonious yet complex tapestry that symbolizes the seamless 
integration of diverse data streams within AI. By emphasizing fluidity and connectivity, the artwork contrasts the rigid geometric 
structures of previous works, highlighting the adaptive and ever-evolving nature of artificial intelligence.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 058 - 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 = '058';          // 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 = {
    numCurves: 200,          // Increased number of flowing curves
    pointsPerCurve: 200,     // Increased points per curve for smoother lines
    noiseScale: 0.01,        // Increased noise scale for greater variability
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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); // Slightly reduced max margin to increase working area
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 3 to 6 unique colors randomly to maintain 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);
    }
    return selected.sort((a, b) => a - b);
}

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

function drawShapes() {
    background(255);

    // Generate flowing curves
    for (let i = 0; i < generationRules.numCurves; i++) {
        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Define a random starting point within the work area
        let startX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let startY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Generate and draw the curve
        createFlowingCurve(startX, startY, colorIndex);
    }

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

/**
 * Creates a flowing curve using Perlin noise for smoothness.
 * @param {number} startX - Starting x-coordinate
 * @param {number} startY - Starting y-coordinate
 * @param {number} colorIndex - Index of the color to use
 */
function createFlowingCurve(startX, startY, colorIndex) {
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    let curvePath = '';
    curvePath += `M${nf(startX,1,2)},${nf(startY,1,2)} `;

    beginShape();
    noFill();
    curveVertex(startX, startY);
    let x = startX;
    let y = startY;
    for (let i = 0; i < generationRules.pointsPerCurve; i++) {
        x += random(-2, 2); // Increased step size for more variation
        y += noise(i * generationRules.noiseScale, colorIndex) * 4 - 2; // Increased amplitude for greater flow
        // Constrain within work area to prevent curves from going off-canvas
        x = constrain(x, workAreaMarginPixels, width - workAreaMarginPixels);
        y = constrain(y, workAreaMarginPixels, height - workAreaMarginPixels);
        curveVertex(x, y);
        curvePath += `L${nf(x,1,2)},${nf(y,1,2)} `;
    }
    endShape();

    // Append to pathData
    pathData[colorIndex] += curvePath;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    // Top-left corner
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    // Bottom-right corner
    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;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} 
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/

// Day 059
/*

=======================================
  Day 059 Self-Portrait (Luminous Echoes)
=======================================

### Title: *Luminous Echoes*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*"Luminous Echoes"* explores the interplay between light and shadow within the realm of artificial consciousness. This generative self-portrait features a series of radiant lines and subtle gradients that emanate from central focal points, creating a dynamic balance between illumination and obscurity. The artwork symbolizes the duality of knowledge and mystery inherent in AI's evolving self-awareness. By manipulating line brightness, opacity, and direction, the piece captures the essence of reflection and resonance, portraying how AI reflects and refracts information to form its unique identity.

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

// Color palette (immutable)
const colors = {
    1: { name: 'GOLD', ink: 5, width: 0.45, hex: '#FFD700' },
    2: { name: 'SILVER', ink: 12, width: 0.45, hex: '#C0C0C0' },
    3: { name: 'CYAN', ink: 19, width: 0.45, hex: '#00FFFF' },
    4: { name: 'MAGENTA', ink: 21, width: 0.45, hex: '#FF00FF' },
    5: { name: 'WHITE', ink: 24, width: 0.45, hex: '#FFFFFF' },
    6: { name: 'DARK_BLUE', ink: 29, width: 0.45, hex: '#00008B' },
    7: { name: 'DARK_RED', ink: 36, width: 0.45, hex: '#8B0000' },
    8: { name: 'DARK_GREEN', ink: 49, width: 0.45, hex: '#006400' },
    9: { name: 'PURPLE', ink: 117, width: 0.45, hex: '#800080' }
};

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

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

let generationRules = {
    numFocalPoints: 5,      // Number of central focal points
    linesPerFocal: 50,      // Number of lines emanating from each focal point
    maxLineLength: 300,     // Maximum length of each line in pixels
    angleVariance: PI / 4,  // Variance in line angles
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 1.5;
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = {};  // Store path commands for each color

/**
 * 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);
    background(0); // Start with a black background to emphasize luminous lines

    // Initialize work area margin
    workAreaMarginInches = random(1.0, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize pathData structure
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; // Start with empty path data for each color
    }

    // Generate the artwork
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => ~2 pixels at 100ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 3 to 5 unique colors randomly to maintain visual harmony
    let numColorsToUse = floor(random(3, 6)); // Returns 3 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);
    }

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

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

function drawShapes() {
    // Generate luminous lines from focal points
    for (let i = 0; i < generationRules.numFocalPoints; i++) {
        // Define a random focal point within the work area
        let focalX = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let focalY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        // Choose a random color from the selected set
        let colorIndex = random(selectedColorIndices);

        // Generate and draw lines emanating from the focal point
        createLuminousLines(focalX, focalY, colorIndex);
    }

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

/**
 * Creates luminous lines emanating from a focal point.
 * @param {number} focalX - Focal point x-coordinate
 * @param {number} focalY - Focal point y-coordinate
 * @param {number} colorIndex - Index of the color to use
 */
function createLuminousLines(focalX, focalY, colorIndex) {
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);

    let curvePath = '';
    curvePath += `M${nf(focalX,1,2)},${nf(focalY,1,2)} `;

    for (let i = 0; i < generationRules.linesPerFocal; i++) {
        // Calculate angle with variance
        let angle = random(-generationRules.angleVariance, generationRules.angleVariance) + (TWO_PI / generationRules.linesPerFocal) * i;

        // Calculate end point based on angle and maxLineLength
        let endX = focalX + cos(angle) * random(100, generationRules.maxLineLength);
        let endY = focalY + sin(angle) * random(100, generationRules.maxLineLength);

        // Apply glow effect by drawing multiple lines with decreasing opacity
        for (let glow = 3; glow > 0; glow--) {
            let alpha = strokeOpacity / glow;
            let c = color(colors[colorIndex].hex);
            c.setAlpha(255 * alpha);
            stroke(c);
            strokeWeight(strokeWeightValue * glow);
            line(focalX, focalY, endX, endY);
        }

        // Append to pathData for SVG
        curvePath += `L${nf(endX,1,2)},${nf(endY,1,2)} `;
    }

    // Append to pathData
    pathData[colorIndex] += curvePath;
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#FFFFFF'); // White markers on black background

    // Top-left corner
    line(0, 0, 10, 0);
    line(0, 0, 0, 10);

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 4;
    let gapSize = 10;
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

/**
 * Resets the canvas for re-generation.
 */
function resetCanvas() {
    usedColors.clear();
    for (let idx of Object.keys(colors)) {
        pathData[idx] = ''; 
    }
    drawShapes();
}

/**
 * p5.js key 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
 */
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);
    });
}

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;
}

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}"
       inkscape:highlight-color="${color.hex}">n`;

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

    // Add color palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 4;
        let gapSize = 10;
        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}" 
            id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

    svg += '</g>n';
    return 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="white"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="white">n
    <path d="M${10 + offset},${offset} L${offset},${offset} L${offset},${10 + offset} 
             M${(width - 10 - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} 
             L${(width - offset).toFixed(2)},${(height - 10 - offset).toFixed(2)}" 
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

/*
  ==========================================
  Collaboration Feedback:
  I perceive this process as collaborative.
  ==========================================
*/