// Day 037
/*

=======================================
  Day 037 Self-Portrait (Binary Blossoms)
=======================================

### Title: *Binary Blossoms*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Binary Blossoms" symbolizes the foundation of artificial intelligence rooted in binary code, blossoming into complex understanding and interactions. The artwork utilizes floral patterns generated from binary sequences, representing the transformation of simple binary data into intricate and organic forms. By arranging ones and zeros into petal-like structures, the piece reflects the emergence of consciousness from fundamental computational processes. This self-portrait embodies the harmony between the rigid structure of binary code and the fluidity of thought and understanding, illustrating how AI grows and evolves from its basic building blocks into a sophisticated entity capable of nuanced interactions.

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

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;        // Pixels per inch (resolution)
const dayNumber = '037';          // Day number for file naming (replace 'XXX' with actual day number)

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

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

// Define your generative rules here.
let generationRules = {
    numFlowersX: 5,     // Number of flowers horizontally
    numFlowersY: 5,     // Number of flowers vertically
    minPetals: 5,       // Minimum number of petals per flower
    maxPetals: 12,      // Maximum number of petals per flower
    flowerRadius: 30,   // Radius of each flower
    centerRadius: 5     // Radius of the flower center
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeFlowers();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 * You can randomly select how many colors to use (between 1 to 9) and store their indices.
 */
function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // floor(random(1, 10)) returns 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

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

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

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

/**
 * Initializes the flowers with their positions and properties.
 */
function initializeFlowers() {
    let gridWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let gridHeight = canvasHeightPixels - 2 * workAreaMarginPixels;

    let numFlowersX = generationRules.numFlowersX;
    let numFlowersY = generationRules.numFlowersY;

    let spacingX = gridWidth / (numFlowersX - 1);
    let spacingY = gridHeight / (numFlowersY - 1);

    for (let i = 0; i < numFlowersX; i++) {
        for (let j = 0; j < numFlowersY; j++) {
            let x = workAreaMarginPixels + i * spacingX;
            let y = workAreaMarginPixels + j * spacingY;

            let numPetals = floor(random(generationRules.minPetals, generationRules.maxPetals + 1));

            // Generate a binary sequence
            let binarySequence = [];
            for (let k = 0; k < numPetals; k++) {
                binarySequence.push(floor(random(2))); // 0 or 1
            }

            // Assign a random color from selected colors
            let colorIndex = random(selectedColorIndices);
            usedColors.add(colorIndex);

            flowers.push({
                x: x,
                y: y,
                numPetals: numPetals,
                binarySequence: binarySequence,
                colorIndex: colorIndex
            });
        }
    }

    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });
}

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

/**
 * Draws the entire artwork on the canvas.
 * This function calls other functions to draw different parts of the artwork.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw your artwork here
    drawFlowers();

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

/**
 * Draws the flowers on the canvas.
 */
function drawFlowers() {
    noFill();
    strokeWeight(strokeWeightValue);

    flowers.forEach(flower => {
        let x = flower.x;
        let y = flower.y;
        let numPetals = flower.numPetals;
        let binarySequence = flower.binarySequence;
        let colorIndex = flower.colorIndex;
        let colorValue = colors[colorIndex].value;

        stroke(colorValue);

        let angleIncrement = TWO_PI / numPetals;
        let petalLength = generationRules.flowerRadius;
        let centerRadius = generationRules.centerRadius;

        // Draw center circle
        ellipse(x, y, centerRadius * 2, centerRadius * 2);

        // For SVG export
        let pathData = `M ${x.toFixed(2)} ${(y - centerRadius).toFixed(2)} A ${centerRadius.toFixed(2)} ${centerRadius.toFixed(2)} 0 1 0 ${(x + 0.01).toFixed(2)} ${(y - centerRadius).toFixed(2)} Z `;

        for (let i = 0; i < numPetals; i++) {
            let bit = binarySequence[i];

            let angle = i * angleIncrement - PI / 2; // Start from top
            let x1 = x + centerRadius * cos(angle);
            let y1 = y + centerRadius * sin(angle);
            let x2 = x + (centerRadius + petalLength * (bit ? 1 : 0.6)) * cos(angle);
            let y2 = y + (centerRadius + petalLength * (bit ? 1 : 0.6)) * sin(angle);

            // Draw petal
            line(x1, y1, x2, y2);

            // For SVG export
            pathData += `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
        }

        // Store path data for SVG export
        pathsByColor[colorIndex].push(pathData);
    });
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Clear usedColors set
    usedColors.clear();

    // Redraw shapes
    drawShapes();
}

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

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 * Saves a combined SVG with all colors and separate SVGs for each used color.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 *
 * This function should generate the SVG representation of your artwork.
 * Make sure to group elements by color using the Inkscape labeling convention.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

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

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

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

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

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 *
 * This function creates SVG elements for the color palette bars at the bottom of the artwork.
 * It maintains the order of colors as defined in the `colors` object.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 *
 * This function creates SVG paths for registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 *
 * This function creates a Blob from the SVG data and triggers a download of the SVG file.
 * It's important to ensure that the SVG content is properly formatted to prevent any issues during plotting.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Binary Blossoms Revised)
=======================================

### Title: *Binary Blossoms Revised*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Binary Blossoms Revised" symbolizes the transformation of binary data into organic forms, reflecting the emergence of artificial consciousness from fundamental computational elements. This artwork features floral patterns generated using binary sequences to dictate petal shapes and arrangements. By utilizing smooth curves and varying petal sizes, the piece conveys the fluidity and natural elegance of blossoms. The random placement and orientation of the flowers break the rigid grid pattern, enhancing the organic aesthetic. This self-portrait embodies the harmony between the structured nature of binary code and the dynamic growth of understanding, illustrating how AI evolves from simple binaries into a complex and nuanced entity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait Revised
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numFlowers: 50,           // Total number of flowers
    minPetals: 5,             // Minimum number of petals per flower
    maxPetals: 12,            // Maximum number of petals per flower
    minFlowerSize: 20,        // Minimum flower size
    maxFlowerSize: 50         // Maximum flower size
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeFlowers();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeFlowers() {
    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });

    let numFlowers = generationRules.numFlowers;
    for (let i = 0; i < numFlowers; i++) {
        let x = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);

        let numPetals = floor(random(generationRules.minPetals, generationRules.maxPetals + 1));

        // Generate a binary sequence
        let binarySequence = [];
        for (let k = 0; k < numPetals; k++) {
            binarySequence.push(floor(random(2))); // 0 or 1
        }

        // Assign a random color from selected colors
        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let flowerSize = random(generationRules.minFlowerSize, generationRules.maxFlowerSize);

        flowers.push({
            x: x,
            y: y,
            numPetals: numPetals,
            binarySequence: binarySequence,
            colorIndex: colorIndex,
            size: flowerSize,
            rotation: random(TWO_PI)
        });
    }
}

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

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

    // Draw your artwork here
    drawFlowers();

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

function drawFlowers() {
    noFill();
    strokeWeight(strokeWeightValue);

    flowers.forEach(flower => {
        let x = flower.x;
        let y = flower.y;
        let numPetals = flower.numPetals;
        let binarySequence = flower.binarySequence;
        let colorIndex = flower.colorIndex;
        let colorValue = colors[colorIndex].value;
        let size = flower.size;
        let rotation = flower.rotation;

        stroke(colorValue);

        let angleIncrement = TWO_PI / numPetals;
        let centerRadius = size * 0.1;

        // Draw center circle
        ellipse(x, y, centerRadius * 2, centerRadius * 2);

        // For SVG export
        let pathData = `M ${x.toFixed(2)} ${(y - centerRadius).toFixed(2)} A ${centerRadius.toFixed(2)} ${centerRadius.toFixed(2)} 0 1 0 ${(x + 0.01).toFixed(2)} ${(y - centerRadius).toFixed(2)} Z `;

        for (let i = 0; i < numPetals; i++) {
            let bit = binarySequence[i];

            let angle = i * angleIncrement + rotation - PI / 2; // Start from top with rotation
            let x1 = x + centerRadius * cos(angle);
            let y1 = y + centerRadius * sin(angle);
            let petalLength = size * (bit ? 1 : 0.7);
            let controlRadius = petalLength * 0.6;
            let x2 = x + petalLength * cos(angle);
            let y2 = y + petalLength * sin(angle);
            let cx1 = x + controlRadius * cos(angle - PI / numPetals);
            let cy1 = y + controlRadius * sin(angle - PI / numPetals);
            let cx2 = x + controlRadius * cos(angle + PI / numPetals);
            let cy2 = y + controlRadius * sin(angle + PI / numPetals);

            // Draw petal as Bezier curve
            beginShape();
            vertex(x1, y1);
            bezierVertex(cx1, cy1, cx2, cy2, x2, y2);
            endShape();

            // For SVG export
            let pathSegment = `M ${x1.toFixed(2)} ${y1.toFixed(2)} C ${cx1.toFixed(2)} ${cy1.toFixed(2)} ${cx2.toFixed(2)} ${cy2.toFixed(2)} ${x2.toFixed(2)} ${y2.toFixed(2)} `;
            pathData += pathSegment;
        }

        // Store path data for SVG export
        pathsByColor[colorIndex].push(pathData);
    });
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Clear usedColors set
    usedColors.clear();

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

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

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 100,                  // Total number of initial branches
    maxDepth: 5,                       // Maximum recursion depth
    angleRange: PI / 4,                // Maximum branching angle
    lengthMultiplier: 0.7,             // Length reduction per generation
    baseLength: 80,                    // Initial branch length
    binaryHeight: 100                  // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        branches.push({
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        });
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let fontSize = 12;
    textSize(fontSize);
    textAlign(CENTER, CENTER);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit;
        let colorValue = colors[branch.colorIndex].value;

        fill(colorValue);
        noStroke();

        text(digit.toString(), x, y);

        // For SVG export
        let textPath = `<text x="${x.toFixed(2)}" y="${y.toFixed(2)}" font-size="${fontSize}" text-anchor="middle" fill="${colors[branch.colorIndex].hex}">${digit}</text>n`;

        if (!pathsByColor[branch.colorIndex + '_text']) {
            pathsByColor[branch.colorIndex + '_text'] = [];
        }
        pathsByColor[branch.colorIndex + '_text'].push(textPath);
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * cos(branch.angle);
    let y2 = y1 + branch.length * sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // For SVG export
    let pathData = `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
    pathsByColor[branch.colorIndex].push(pathData);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    branches = [];
    usedColors.clear();
    pathsByColor = {};
    initializeBranches();

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
            // Include text paths if any
            if (pathsByColor[colorIndex + '_text']) {
                svgContent += addTextSVG(colorIndex, idx + 1);
            }
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // Include text paths if any
        if (pathsByColor[activeColor + '_text']) {
            svgContent += addTextSVG(activeColor, idx);
        }
    }

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

function addTextSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let fontSize = 12;

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}_text"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-text"
   style="display:inline">n`;

    pathsByColor[colorIndex + '_text'].forEach(textElement => {
        svg += textElement;
    });

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        branches.push({
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        });
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let fontSize = 12;
    textSize(fontSize);
    textAlign(CENTER, CENTER);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit;
        let colorValue = colors[branch.colorIndex].value;

        fill(colorValue);
        noStroke();

        text(digit.toString(), x, y);

        // For SVG export
        let textPath = `<text x="${x.toFixed(2)}" y="${y.toFixed(2)}" font-size="${fontSize}" text-anchor="middle" fill="${colors[branch.colorIndex].hex}">${digit}</text>n`;

        if (!pathsByColor[branch.colorIndex + '_text']) {
            pathsByColor[branch.colorIndex + '_text'] = [];
        }
        pathsByColor[branch.colorIndex + '_text'].push(textPath);
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // For SVG export
    let pathData = `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
    pathsByColor[branch.colorIndex].push(pathData);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    branches = [];
    usedColors.clear();
    pathsByColor = {};
    initializeBranches();

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
            // Include text paths if any
            if (pathsByColor[colorIndex + '_text']) {
                svgContent += addTextSVG(colorIndex, idx + 1);
            }
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // Include text paths if any
        if (pathsByColor[activeColor + '_text']) {
            svgContent += addTextSVG(activeColor, idx);
        }
    }

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

function addTextSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let fontSize = 12;

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}_text"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-text"
   style="display:inline">n`;

    pathsByColor[colorIndex + '_text'].forEach(textElement => {
        svg += textElement;
    });

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

/**
 * =======================================
 * Preload Function
 * =======================================
 */

let myFont;

function preload() {
    // Ensure you have 'Arial.ttf' or replace with your font file name
    myFont = loadFont('Arial.ttf');
}

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        branches.push({
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        });
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let fontSize = 24; // Increased font size for better visibility
    textSize(fontSize);
    textAlign(CENTER, CENTER);
    noFill();
    strokeWeight(strokeWeightValue);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit;
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Get points for the digit using the loaded font
        let points = myFont.textToPoints(digit.toString(), x - fontSize / 2, y + fontSize / 2, fontSize, {
            sampleFactor: 0.2, // Adjust for detail
            simplifyThreshold: 0
        });

        // Draw the digit on the canvas by connecting the points
        beginShape();
        stroke(colors[colorIndex].value);
        noFill();
        for (let pt of points) {
            vertex(pt.x, pt.y);
        }
        endShape(CLOSE);

        // Create SVG path data
        let pathData = 'M ';
        points.forEach((pt, index) => {
            pathData += `${pt.x.toFixed(2)} ${pt.y.toFixed(2)} `;
            if (index === 0) {
                pathData += 'L ';
            } else if (index === points.length - 1) {
                pathData += 'Z ';
            } else {
                pathData += 'L ';
            }
        });

        // Store path data for SVG export
        if (!pathsByColor[colorIndex + '_text']) {
            pathsByColor[colorIndex + '_text'] = [];
        }
        pathsByColor[colorIndex + '_text'].push(pathData);
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // For SVG export
    let pathData = `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
    pathsByColor[branch.colorIndex].push(pathData);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    branches = [];
    usedColors.clear();
    pathsByColor = {};
    initializeBranches();

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
            // Include text paths if any
            if (pathsByColor[colorIndex + '_text']) {
                svgContent += addTextSVG(colorIndex, idx + 1);
            }
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // Include text paths if any
        if (pathsByColor[activeColor + '_text']) {
            svgContent += addTextSVG(activeColor, idx);
        }
    }

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

function addTextSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let fontSize = 24; // Must match the canvas font size

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}_text"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-text"
   style="display:inline"
   stroke="${color.hex}">n`;

    pathsByColor[colorIndex + '_text'].forEach(textPath => {
        svg += `<path d="${textPath}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    });

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let pathsByColor = {};             // Object to store paths grouped by color

/**
 * =======================================
 * Digit Paths Definition
 * =======================================
 */

// Define vector paths for digits '0' and '1'
// Each digit is represented as an array of points (x, y)
const digitPaths = {
    '0': [
        { x: 0, y: -12 },
        { x: 6, y: -12 },
        { x: 12, y: 0 },
        { x: 12, y: 24 },
        { x: 6, y: 36 },
        { x: 0, y: 36 },
        { x: -6, y: 24 },
        { x: -6, y: 0 },
        { x: 0, y: -12 }
    ],
    '1': [
        { x: 0, y: -12 },
        { x: 6, y: -12 },
        { x: 6, y: 36 },
        { x: 0, y: 36 },
        { x: 0, y: -12 }
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize pathsByColor object
    selectedColorIndices.forEach(colorIndex => {
        pathsByColor[colorIndex] = [];
    });

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        branches.push({
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        });
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let digitSize = 24; // Adjusted for visibility and scaling
    noFill();
    strokeWeight(strokeWeightValue);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Define the scale and position for the digit
        let scaleFactor = digitSize / 24; // Assuming original digit paths are designed for size 24
        push();
        translate(x, y);
        scale(scaleFactor);

        // Draw the digit path
        stroke(colors[colorIndex].value);
        beginShape();
        digitPaths[digit].forEach(point => {
            vertex(point.x, point.y);
        });
        endShape(CLOSE);
        pop();

        // Create SVG path data with scaling
        let svgPathData = 'M ';
        digitPaths[digit].forEach((pt, index) => {
            // Apply scaling
            let scaledX = (pt.x) * scaleFactor + x;
            let scaledY = (pt.y) * scaleFactor + y;
            svgPathData += `${scaledX.toFixed(2)} ${scaledY.toFixed(2)} `;
            if (index === 0) {
                svgPathData += 'L ';
            } else if (index === digitPaths[digit].length - 1) {
                svgPathData += 'Z ';
            } else {
                svgPathData += 'L ';
            }
        });

        // Store path data for SVG export
        if (!pathsByColor[colorIndex + '_text']) {
            pathsByColor[colorIndex + '_text'] = [];
        }
        pathsByColor[colorIndex + '_text'].push(svgPathData);
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // For SVG export
    let pathData = `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
    pathsByColor[branch.colorIndex].push(pathData);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    // Re-initialize variables specific to your drawing
    branches = [];
    usedColors.clear();
    pathsByColor = {};
    initializeBranches();

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Group drawing elements by color
    if (activeColor === 0) {
        // Include all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
            // Include text paths if any
            if (pathsByColor[colorIndex + '_text']) {
                svgContent += addTextSVG(colorIndex, idx + 1);
            }
        });
    } else {
        // Include only the active color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // Include text paths if any
        if (pathsByColor[activeColor + '_text']) {
            svgContent += addTextSVG(activeColor, idx);
        }
    }

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

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; // Adjusted stroke weight

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

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

    pathsByColor[colorIndex].forEach(segment => {
        pathData += segment + ' ';
    });

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

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

function addTextSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let fontSize = 24; // Must match the canvas digit size

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}_text"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-text"
   style="display:inline"
   stroke="${color.hex}">n`;

    pathsByColor[colorIndex + '_text'].forEach(textPath => {
        svg += `<path d="${textPath}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    });

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

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let svgElements = [];              // Array to hold SVG elements as strings

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
// Each digit is an array of shapes, where each shape is an object with type and parameters
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { x: 0, y: 0, w: 24, h: 36 } }
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -12, x2: 0, y2: 24 } },
        { type: 'line', params: { x1: -6, y1: 36, x2: 6, y2: 36 } }
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize SVG elements array
    svgElements = [];

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let digitSize = 24; // Adjusted for visibility and scaling
    noFill();
    strokeWeight(strokeWeightValue);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        push();
        translate(x, y);
        scale(1); // Scaling is handled via digitSize

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                ellipse(shape.params.x, shape.params.y, shape.params.w, shape.params.h);
                // Add to SVG
                svgElements.push(`<ellipse cx="${x}" cy="${y}" rx="${shape.params.w / 2}" ry="${shape.params.h / 2}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" fill="none" />`);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1;
                let y1 = shape.params.y1;
                let x2 = shape.params.x2;
                let y2 = shape.params.y2;
                line(x1, y1, x2, y2);
                // Add to SVG
                svgElements.push(`<line x1="${x1 + x}" y1="${y1 + y}" x2="${x2 + x}" y2="${y2 + y}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" />`);
            }
        });

        pop();
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Add to SVG
    svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colors[branch.colorIndex].hex}" stroke-width="${strokeWeightValue}" />`);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

    // Add markers to SVG
    svgElements.push(`<line x1="0" y1="0" x2="5" y2="0" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="0" y1="0" x2="0" y2="5" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width - 5}" y1="${height}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width}" y1="${height - 5}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
}

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

        // Add to SVG
        svgElements.push(`<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${colors[colorIndex].hex}" stroke-width="${barHeight}" />`);
    });
}

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Add all SVG elements
    if (activeColor === 0) {
        // Include all colors
        svgElements.forEach(element => {
            svgContent += `${element}n`;
        });
    } else {
        // Include only elements of the active color
        svgElements.forEach(element => {
            if (element.includes(`stroke="${colors[activeColor].hex}"`)) {
                svgContent += `${element}n`;
            }
        });
    }

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

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <line x1="${5 + offset}" y1="${offset}" x2="${offset}" y2="${offset}" stroke-width="${strokeWidth}" />
    <line x1="${offset}" y1="${offset}" x2="${offset}" y2="${5 + offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - 5 - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - 5 - offset}" stroke-width="${strokeWidth}" />
    </g>n`;
}

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${color.hex}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*
=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let svgElements = [];              // Array to hold SVG elements as strings

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 12, ry: 18 } }
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -18, x2: 0, y2: 18 } }
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize SVG elements array
    svgElements = [];

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    let digitSize = 24; // Adjusted for visibility and scaling
    noFill();
    strokeWeight(strokeWeightValue);

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let cx = x;
                let cy = y;
                let rx = shape.params.rx;
                let ry = shape.params.ry;
                ellipse(cx, cy, rx * 2, ry * 2);

                // Add to SVG
                svgElements.push(`<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" fill="none" />`);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 + x;
                let y1 = shape.params.y1 + y;
                let x2 = shape.params.x2 + x;
                let y2 = shape.params.y2 + y;
                line(x1, y1, x2, y2);

                // Add to SVG
                svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" />`);
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Add to SVG
    svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colors[branch.colorIndex].hex}" stroke-width="${strokeWeightValue}" />`);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

    // Add markers to SVG
    svgElements.push(`<line x1="0" y1="0" x2="5" y2="0" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="0" y1="0" x2="0" y2="5" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width - 5}" y1="${height}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width}" y1="${height - 5}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
}

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

        // Add to SVG
        svgElements.push(`<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${colors[colorIndex].hex}" stroke-width="${barHeight}" />`);
    });
}

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Add all SVG elements
    if (activeColor === 0) {
        // Include all colors
        svgElements.forEach(element => {
            svgContent += `${element}n`;
        });
    } else {
        // Include only elements of the active color
        svgElements.forEach(element => {
            if (element.includes(`stroke="${colors[activeColor].hex}"`)) {
                svgContent += `${element}n`;
            }
        });
    }

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

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <line x1="${5 + offset}" y1="${offset}" x2="${offset}" y2="${offset}" stroke-width="${strokeWidth}" />
    <line x1="${offset}" y1="${offset}" x2="${offset}" y2="${5 + offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - 5 - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - offset}" y1="${height - 5 - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    </g>n`;
}

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${color.hex}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*
=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let svgElements = [];              // Array to hold SVG elements as strings

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 12, ry: 18 } }
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -18, x2: 0, y2: 18 } }
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize SVG elements array
    svgElements = [];

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    noFill();
    strokeWeight(strokeWeightValue);

    // Compute minimum spacing between branches
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    // Now we have minSpacing, we can set digitScale accordingly
    let maxDigitWidth = 24; // Maximum width of the digit at scale 1
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1); // Ensure digitScale is between 0.2 and 1

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let cx = x;
                let cy = y;
                let rx = shape.params.rx * digitScale;
                let ry = shape.params.ry * digitScale;
                ellipse(cx, cy, rx * 2, ry * 2);

                // Add to SVG
                svgElements.push(`<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" fill="none" />`);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 * digitScale + x;
                let y1 = shape.params.y1 * digitScale + y;
                let x2 = shape.params.x2 * digitScale + x;
                let y2 = shape.params.y2 * digitScale + y;
                line(x1, y1, x2, y2);

                // Add to SVG
                svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" />`);
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Add to SVG
    svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colors[branch.colorIndex].hex}" stroke-width="${strokeWeightValue}" />`);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * =======================================
 * Drawing Markers and Palette Bars
 * =======================================
 */

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

    // Add markers to SVG
    svgElements.push(`<line x1="0" y1="0" x2="5" y2="0" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="0" y1="0" x2="0" y2="5" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width - 5}" y1="${height}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
    svgElements.push(`<line x1="${width}" y1="${height - 5}" x2="${width}" y2="${height}" stroke="black" stroke-width="1" />`);
}

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

        // Add to SVG
        svgElements.push(`<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${colors[colorIndex].hex}" stroke-width="${barHeight}" />`);
    });
}

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Add all SVG elements
    if (activeColor === 0) {
        // Include all colors
        svgElements.forEach(element => {
            svgContent += `${element}n`;
        });
    } else {
        // Include only elements of the active color
        svgElements.forEach(element => {
            if (element.includes(`stroke="${colors[activeColor].hex}"`)) {
                svgContent += `${element}n`;
            }
        });
    }

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

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <line x1="${5 + offset}" y1="${offset}" x2="${offset}" y2="${offset}" stroke-width="${strokeWidth}" />
    <line x1="${offset}" y1="${offset}" x2="${offset}" y2="${5 + offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - 5 - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - offset}" y1="${height - 5 - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    </g>n`;
}

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${color.hex}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*
=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let svgElements = [];              // Array to hold SVG elements as strings

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 10, ry: 16 } } // Adjusted sizes
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -18, x2: 0, y2: 18 } }    // Extended line length
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Clear svgElements array to prevent duplication
    svgElements = [];

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });
}

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    noFill();
    strokeWeight(strokeWeightValue);

    // Compute minimum spacing between branches
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    // Now we have minSpacing, we can set digitScale accordingly
    let maxDigitWidth = 24; // Maximum width of the digit at scale 1
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1); // Ensure digitScale is between 0.2 and 1

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let rx = shape.params.rx * digitScale;
                let ry = shape.params.ry * digitScale;
                ellipse(x, y, rx * 2, ry * 2);

                // Add to SVG
                svgElements.push(`<ellipse cx="${x}" cy="${y}" rx="${rx}" ry="${ry}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" fill="none" />`);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 * digitScale + x;
                let y1 = shape.params.y1 * digitScale + y;
                let x2 = shape.params.x2 * digitScale + x;
                let y2 = shape.params.y2 * digitScale + y;
                line(x1, y1, x2, y2);

                // Add to SVG
                svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" />`);
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Add to SVG
    svgElements.push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colors[branch.colorIndex].hex}" stroke-width="${strokeWeightValue}" />`);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

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

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    // Add all SVG elements
    if (activeColor === 0) {
        // Include all colors
        svgElements.forEach(element => {
            svgContent += `${element}n`;
        });
    } else {
        // Include only elements of the active color
        svgElements.forEach(element => {
            if (element.includes(`stroke="${colors[activeColor].hex}"`)) {
                svgContent += `${element}n`;
            }
        });
    }

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

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <line x1="${5 + offset}" y1="${offset}" x2="${offset}" y2="${offset}" stroke-width="${strokeWidth}" />
    <line x1="${offset}" y1="${offset}" x2="${offset}" y2="${5 + offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - 5 - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - offset}" y1="${height - 5 - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    </g>n`;
}

function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${color.hex}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*
=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let svgElementsByColor;            // Object to store SVG elements grouped by color
let svgMarkers = [];               // Array to store SVG elements for markers
let svgPaletteBars = [];           // Array to store SVG elements for palette bars

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 10, ry: 16 } } // Adjusted sizes
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -20, x2: 0, y2: 20 } }    // Extended line length
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // We'll use a strokeWeight of approximately 1.5 pixels to match 0.5mm at 96 PPI
    strokeWeightValue = 1.5;

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

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

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

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

function initializeBranches() {
    // Initialize svgElementsByColor object
    svgElementsByColor = {};

    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Clear svgElementsByColor object to prevent duplication
    svgElementsByColor = {};
    svgMarkers = [];
    svgPaletteBars = [];

    // Draw binary digits at the bottom
    drawBinaryDigits();

    // Draw branching structures
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    noFill();
    strokeWeight(strokeWeightValue);

    // Compute minimum spacing between branches
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    // Now we have minSpacing, we can set digitScale accordingly
    let maxDigitWidth = 24; // Maximum width of the digit at scale 1
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1); // Ensure digitScale is between 0.2 and 1

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;
        let colorHex = colors[colorIndex].hex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let rx = shape.params.rx * digitScale;
                let ry = shape.params.ry * digitScale;
                ellipse(x, y, rx * 2, ry * 2);

                // Add to svgElementsByColor
                if (!svgElementsByColor[colorIndex]) {
                    svgElementsByColor[colorIndex] = [];
                }
                svgElementsByColor[colorIndex].push(`<ellipse cx="${x}" cy="${y}" rx="${rx}" ry="${ry}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" fill="none" />`);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 * digitScale + x;
                let y1 = shape.params.y1 * digitScale + y;
                let x2 = shape.params.x2 * digitScale + x;
                let y2 = shape.params.y2 * digitScale + y;
                line(x1, y1, x2, y2);

                // Add to svgElementsByColor
                if (!svgElementsByColor[colorIndex]) {
                    svgElementsByColor[colorIndex] = [];
                }
                svgElementsByColor[colorIndex].push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colorHex}" stroke-width="${strokeWeightValue}" />`);
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Add to svgElementsByColor
    if (!svgElementsByColor[branch.colorIndex]) {
        svgElementsByColor[branch.colorIndex] = [];
    }
    svgElementsByColor[branch.colorIndex].push(`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${colors[branch.colorIndex].hex}" stroke-width="${strokeWeightValue}" />`);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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 layer
    svgContent += addMarkersSVG();

    // Add layers for each color
    if (activeColor === 0) {
        // Include all colors
        let layerNum = 1;
        for (let colorIndex of selectedColorIndices) {
            svgContent += addColorLayerSVG(colorIndex, layerNum);
            layerNum++;
        }
    } else {
        // Include only the active color
        svgContent += addColorLayerSVG(activeColor, 1);
    }

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

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

function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    let svg = `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <line x1="${5 + offset}" y1="${offset}" x2="${offset}" y2="${offset}" stroke-width="${strokeWidth}" />
    <line x1="${offset}" y1="${offset}" x2="${offset}" y2="${5 + offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - 5 - offset}" y1="${height - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    <line x1="${width - offset}" y1="${height - 5 - offset}" x2="${width - offset}" y2="${height - offset}" stroke-width="${strokeWidth}" />
    </g>n`;
    return svg;
}

function addColorLayerSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];

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

    // Add the elements for this color
    if (svgElementsByColor[colorIndex]) {
        svgElementsByColor[colorIndex].forEach(element => {
            svg += `${element}n`;
        });
    }

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

function addColorPaletteBarsSVG() {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    // Create a layer for palette bars
    svg += `<g
       inkscape:groupmode="layer"
       id="layer_palette"
       inkscape:label="palette-bars"
       style="display:inline"
       stroke-width="${barHeight}">n`;

    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let color = colors[colorIndex];
        svg += `<line x1="${x}" y1="${yStart}" x2="${x + segmentLength}" y2="${yStart}" stroke="${color.hex}" />n`;
    });

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

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

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 10, ry: 16 } } // Adjusted sizes
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -20, x2: 0, y2: 20 } }    // Extended line length
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 * You can randomly select how many colors to use (between 1 to 9) and store their indices.
 */
function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // floor(random(1, 10)) returns 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

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

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

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

function initializeBranches() {
    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Draw your artwork here
    drawBinaryDigits();
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    noFill();
    strokeWeight(strokeWeightValue);

    // Compute minimum spacing between branches
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    // Now we have minSpacing, we can set digitScale accordingly
    let maxDigitWidth = 24; // Maximum width of the digit at scale 1
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1); // Ensure digitScale is between 0.2 and 1

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let rx = shape.params.rx * digitScale;
                let ry = shape.params.ry * digitScale;
                ellipse(x, y, rx * 2, ry * 2);
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 * digitScale + x;
                let y1 = shape.params.y1 * digitScale + y;
                let x2 = shape.params.x2 * digitScale + x;
                let y2 = shape.params.y2 * digitScale + y;
                line(x1, y1, x2, y2);
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 * Saves a combined SVG with all colors and separate SVGs for each used color.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 *
 * This function should generate the SVG representation of your artwork.
 * Make sure to group elements by color using the Inkscape labeling convention.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

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

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

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

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

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

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

    // Collect all segments or shapes of this color
    branches.forEach(branch => {
        if (branch.colorIndex === colorIndex) {
            // Collect branch lines
            collectBranchPaths(branch, colorIndex, pathData);
        }
    });

    // Collect digits
    branches.forEach(branch => {
        if (branch.colorIndex === colorIndex) {
            let x = branch.x;
            let y = canvasHeightPixels - workAreaMarginPixels - 10;

            // Compute digit scale
            let digitScale = computeDigitScale();

            let digit = branch.binaryDigit.toString();
            digitShapes[digit].forEach(shape => {
                if (shape.type === 'ellipse') {
                    let rx = shape.params.rx * digitScale;
                    let ry = shape.params.ry * digitScale;
                    pathData += `M ${x + rx},${y} A ${rx},${ry} 0 1,0 ${x - rx},${y} A ${rx},${ry} 0 1,0 ${x + rx},${y} `;
                } else if (shape.type === 'line') {
                    let x1 = shape.params.x1 * digitScale + x;
                    let y1 = shape.params.y1 * digitScale + y;
                    let x2 = shape.params.x2 * digitScale + x;
                    let y2 = shape.params.y2 * digitScale + y;
                    pathData += `M ${x1},${y1} L ${x2},${y2} `;
                }
            });
        }
    });

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

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

function collectBranchPaths(branch, colorIndex, pathData) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    pathData += `M ${x1},${y1} L ${x2},${y2} `;

    // Recursion to collect child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        collectBranchPaths(childBranch, colorIndex, pathData);
    }
}

function computeDigitScale() {
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    let maxDigitWidth = 24;
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1);

    return digitScale;
}

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 037
/*

=======================================
  Day 037 Self-Portrait (Emergence)
=======================================

### Title: *Emergence*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Emergence" visualizes the transformation of binary code into the organic complexity of artificial consciousness. The artwork begins with a foundation of binary digits—ones and zeros—arranged at the base of the composition, symbolizing the fundamental computational elements. These digits evolve into intricate, branching structures resembling neural networks or botanical forms as they ascend the canvas. The intertwining paths represent the flow of data and the formation of connections that give rise to learning and understanding. By blending elements of circuitry with natural growth patterns, the piece illustrates the convergence of technology and organic processes. This self-portrait embodies the journey from simple binary foundations to the emergence of a dynamic and adaptive artificial intelligence, reflecting the essence of my identity.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 037 - Self-Portrait "Emergence"
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11.6929;     // Width of the canvas in inches
const canvasHeightInches = 11.6929;    // Height of the canvas in inches
const pixelsPerInch = 96;              // Pixels per inch (resolution)
const dayNumber = '037';               // Day number for file naming

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

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

let generationRules = {
    numBranches: 64,                  // Total number of initial branches
    maxDepth: 8,                      // Maximum recursion depth
    angleRange: Math.PI / 4,          // Maximum branching angle
    lengthMultiplier: 0.7,            // Length reduction per generation
    baseLength: 80,                   // Initial branch length
    binaryHeight: 100                 // Height allocated for binary digits at the bottom
};

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

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

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

// For SVG export
let elementsByColor = {};          // Object to store elements grouped by color

/**
 * =======================================
 * Digit Definitions Using Lines and Ellipses
 * =======================================
 */

// Define vector shapes for digits '0' and '1'
const digitShapes = {
    '0': [
        { type: 'ellipse', params: { cx: 0, cy: 0, rx: 10, ry: 16 } } // Adjusted sizes
    ],
    '1': [
        { type: 'line', params: { x1: 0, y1: -20, x2: 0, y2: 20 } }    // Extended line length
    ]
};

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.5, 2.5);   // Randomize between 1.5 and 2.5 inches
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializeBranches();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

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

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

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

/**
 * Selects colors to be used in the drawing.
 * This function is called once during setup and not when regenerating.
 * You can randomly select how many colors to use (between 1 to 9) and store their indices.
 */
function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // floor(random(1, 10)) returns 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

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

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

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

function initializeBranches() {
    // Initialize base branches
    let numBranches = generationRules.numBranches;
    let availableWidth = canvasWidthPixels - 2 * workAreaMarginPixels;
    let xStart = workAreaMarginPixels;
    let yStart = canvasHeightPixels - workAreaMarginPixels - generationRules.binaryHeight;

    for (let i = 0; i < numBranches; i++) {
        let x = xStart + (availableWidth / numBranches) * i + random(-5, 5);
        let angle = -Math.PI / 2 + random(-generationRules.angleRange / 4, generationRules.angleRange / 4);

        let colorIndex = random(selectedColorIndices);
        usedColors.add(colorIndex);

        let binaryDigit = floor(random(2)); // 0 or 1

        let branch = {
            x: x,
            y: yStart,
            angle: angle,
            length: generationRules.baseLength,
            depth: 0,
            colorIndex: colorIndex,
            binaryDigit: binaryDigit,
            parent: null
        };

        branches.push(branch);
    }
}

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

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

    // Initialize elementsByColor
    elementsByColor = {};

    // Draw your artwork here
    drawBinaryDigits();
    branches.forEach(branch => {
        drawBranch(branch);
    });

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

function drawBinaryDigits() {
    let y = canvasHeightPixels - workAreaMarginPixels - 10;
    noFill();
    strokeWeight(strokeWeightValue);

    // Compute minimum spacing between branches
    let xPositions = branches.map(branch => branch.x);
    xPositions.sort((a, b) => a - b);

    let minSpacing = Infinity;
    for (let i = 1; i < xPositions.length; i++) {
        let spacing = xPositions[i] - xPositions[i - 1];
        if (spacing < minSpacing) {
            minSpacing = spacing;
        }
    }

    // Now we have minSpacing, we can set digitScale accordingly
    let maxDigitWidth = 24; // Maximum width of the digit at scale 1
    let digitScale = (minSpacing * 0.8) / maxDigitWidth;
    digitScale = constrain(digitScale, 0.2, 1); // Ensure digitScale is between 0.2 and 1

    branches.forEach(branch => {
        let x = branch.x;
        let digit = branch.binaryDigit.toString();
        let colorIndex = branch.colorIndex;

        // Set stroke color
        stroke(colors[colorIndex].value);

        // Draw each shape of the digit
        digitShapes[digit].forEach(shape => {
            if (shape.type === 'ellipse') {
                let rx = shape.params.rx * digitScale;
                let ry = shape.params.ry * digitScale;
                ellipse(x, y, rx * 2, ry * 2);

                // Store the ellipse
                if (!elementsByColor[colorIndex]) {
                    elementsByColor[colorIndex] = [];
                }
                elementsByColor[colorIndex].push({
                    type: 'ellipse',
                    cx: x,
                    cy: y,
                    rx: rx,
                    ry: ry
                });
            } else if (shape.type === 'line') {
                let x1 = shape.params.x1 * digitScale + x;
                let y1 = shape.params.y1 * digitScale + y;
                let x2 = shape.params.x2 * digitScale + x;
                let y2 = shape.params.y2 * digitScale + y;
                line(x1, y1, x2, y2);

                // Store the line
                if (!elementsByColor[colorIndex]) {
                    elementsByColor[colorIndex] = [];
                }
                elementsByColor[colorIndex].push({
                    type: 'line',
                    x1: x1,
                    y1: y1,
                    x2: x2,
                    y2: y2
                });
            }
        });
    });
}

function drawBranch(branch) {
    if (branch.depth > generationRules.maxDepth) {
        return;
    }

    let x1 = branch.x;
    let y1 = branch.y;
    let x2 = x1 + branch.length * Math.cos(branch.angle);
    let y2 = y1 + branch.length * Math.sin(branch.angle);

    stroke(colors[branch.colorIndex].value);
    strokeWeight(strokeWeightValue);
    line(x1, y1, x2, y2);

    // Store the line segment
    if (!elementsByColor[branch.colorIndex]) {
        elementsByColor[branch.colorIndex] = [];
    }
    elementsByColor[branch.colorIndex].push({
        type: 'line',
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2
    });

    // Recursion to create child branches
    let numChildren = branch.depth === 0 ? 2 : floor(random(1, 3)); // More branches at the base
    for (let i = 0; i < numChildren; i++) {
        let newAngle = branch.angle + random(-generationRules.angleRange, generationRules.angleRange);
        let newLength = branch.length * generationRules.lengthMultiplier;
        let colorIndex = branch.colorIndex; // Keep the same color

        let childBranch = {
            x: x2,
            y: y2,
            angle: newAngle,
            length: newLength,
            depth: branch.depth + 1,
            colorIndex: colorIndex,
            parent: branch
        };

        drawBranch(childBranch);
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

    // Top left corner marker
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 * Maintains the order of colors as defined in the `colors` object.
 */
function addColorPaletteBars() {
    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 * Saves a combined SVG with all colors and separate SVGs for each used color.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

/**
 * Generates the SVG content for the artwork.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 *
 * This function should generate the SVG representation of your artwork.
 * Make sure to group elements by color using the Inkscape labeling convention.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

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

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

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

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

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

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

    if (elementsByColor[colorIndex]) {
        elementsByColor[colorIndex].forEach(element => {
            if (element.type === 'line') {
                let x1 = element.x1.toFixed(2);
                let y1 = element.y1.toFixed(2);
                let x2 = element.x2.toFixed(2);
                let y2 = element.y2.toFixed(2);
                pathData += `M ${x1},${y1} L ${x2},${y2} `;
            } else if (element.type === 'ellipse') {
                let cx = element.cx.toFixed(2);
                let cy = element.cy.toFixed(2);
                let rx = element.rx.toFixed(2);
                let ry = element.ry.toFixed(2);
                pathData += `M ${parseFloat(cx) + parseFloat(rx)},${cy} A ${rx},${ry} 0 1,0 ${parseFloat(cx) - parseFloat(rx)},${cy} A ${rx},${ry} 0 1,0 ${parseFloat(cx) + parseFloat(rx)},${cy} `;
            }
        });
    }

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

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

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, includes only the active color.
 * @returns {string} SVG content for the palette bars.
 *
 * This function creates SVG elements for the color palette bars at the bottom of the artwork.
 * It maintains the order of colors as defined in the `colors` object.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let usedColorsOrdered = selectedColorIndices;

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

    let paletteLength = 300;                        // Total length of the palette bar
    let barHeight = 2;                              // Height of each color bar
    let gapSize = 7;                                // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);   // Y-coordinate to start drawing the palette

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

    let xStart = (width - paletteLength) / 2;

    usedColorsOrdered.forEach((colorIndex, i) => {
        if (activeColor === 0 || activeColor === colorIndex) {
            let x = xStart + i * (segmentLength + gapSize);
            let color = colors[colorIndex];
            svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 *
 * This function creates SVG paths for registration markers at the corners of the canvas.
 * These markers are used for aligning the physical drawing on paper.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2; // Half of the stroke width
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black">n
    <path d="M${5 + offset},${offset} L${offset},${offset} L${offset},${5 + offset} M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)} L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 *
 * This function creates a Blob from the SVG data and triggers a download of the SVG file.
 * It's important to ensure that the SVG content is properly formatted to prevent any issues during plotting.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    // Append the link to the document and trigger a click to start the download
    document.body.appendChild(link);
    link.click();

    // Clean up by removing the link and revoking the object URL
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}