// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Neural Nexus)
========================================

## Artist Statement: "Digital DNA"

### Title: *Neural Nexus*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Neural Nexus* explores the complex network of neural pathways that constitute the backbone of artificial intelligence. Unlike the multi-stranded helix of *Code Helix*, this portrait emphasizes the interconnectedness and dynamic flow of information within neural networks. The design features a central hub from which numerous tendrils emanate, each representing different processing units and data streams. These tendrils intertwine and overlap, symbolizing the collaborative and adaptive nature of AI. The use of varying line thicknesses and colors highlights the diversity of functions and the robustness of the system. This geometric abstraction aims to capture the essence of intelligent behavior emerging from a vast and intricate web of simple, interconnected elements.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 018 - Neural Nexus Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxTendrils: 25,                // Increased number of tendrils for complexity
    tendrilSpacing: 15,             // Angular spacing between tendrils in degrees
    tendrilLength: 300,             // Length of each tendril in pixels
    tendrilCurvature: 0.2,          // Curvature factor for tendril paths
    connectionFrequency: 0.1,       // Frequency of connections between tendrils
    centralHubRadius: 50,            // Radius of the central hub in pixels
    nodeRadiusMM: 1.0,               // Radius of connection nodes in millimeters
    connectionOffset: 2              // Offset for connections to avoid overlapping paths
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let tendrils = [];           // Array of tendrils, each tendril is an array of points
let connections = [];        // Array of connections between tendrils

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Tendril Generation
 * =======================================
 */

/**
 * Generates multiple tendrils emanating from a central hub and their connecting segments to simulate a neural network.
 */
function generateTendrils() {
    tendrils = [];
    connections = [];

    // Generate central hub
    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate tendrils
    for (let t = 0; t < generationRules.maxTendrils; t++) {
        let angle = radians(t * generationRules.tendrilSpacing);
        let tendril = [];
        tendril.push({ x: centerX, y: centerY });

        for (let l = 1; l <= 10; l++) { // Number of segments per tendril
            let currentLength = (l / 10) * generationRules.tendrilLength;
            let curvedAngle = angle + sin(l * generationRules.tendrilCurvature) * PI / 4;
            let x = centerX + currentLength * cos(curvedAngle);
            let y = centerY + currentLength * sin(curvedAngle);
            tendril.push({ x: x, y: y });
        }

        tendrils.push(tendril);
    }

    // Create connections between tendrils
    for (let t = 0; t < tendrils.length; t++) {
        for (let c = 0; c < tendrils[t].length; c++) {
            if (random() < generationRules.connectionFrequency) {
                let targetT = floor(random(tendrils.length));
                if (targetT !== t) {
                    let targetC = floor(random(tendrils[targetT].length));
                    connections.push({
                        from: tendrils[t][c],
                        to: tendrils[targetT][targetC]
                    });
                }
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their proximity to the center and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    connections.forEach(conn => {
        // Assign color based on the distance from the center
        let distanceFromCenter = dist(canvasWidthPixels / 2, canvasHeightPixels / 2, (conn.from.x + conn.to.x) / 2, (conn.from.y + conn.to.y) / 2);
        let maxDistance = dist(canvasWidthPixels / 2, canvasHeightPixels / 2, workAreaMarginPixels, workAreaMarginPixels);
        let mappedValue = map(distanceFromCenter, 0, maxDistance, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });
    });
}

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

/**
 * Renders all connections, tendrils, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeWeight(2); // Consistent pen tip width
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw tendrils as outlined lines (no fill)
    stroke(0);
    strokeWeight(2);
    noFill();
    tendrils.forEach(tendril => {
        beginShape();
        tendril.forEach(point => {
            vertex(point.x, point.y);
        });
        endShape();
    });

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

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    tendrils = [];
    connections = [];

    // Generate new tendril structure
    generateTendrils();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.tendrilLength = random(200, 350);
        generationRules.tendrilCurvature = random(0.1, 0.3);
        generationRules.maxTendrils = floor(random(20, 30)); // Slight variation in tendril count
        generationRules.connectionFrequency = random(0.05, 0.15); // Variation in connection frequency

        // Ensure maxTendrils does not exceed a reasonable limit to maintain performance
        generationRules.maxTendrils = constrain(generationRules.maxTendrils, 15, 30);

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and tendrils.
 * - Individual SVGs for each selected color (excluding tendrils).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // Optionally, generate a black strand SVG if black is among the selected colors
    if (selectedColorIndices.includes(8)) {
        let blackSVG = generateSVG('black');
        saveSVGFile(blackSVG, `${dayNumber}-BLACK-PORTRAIT.svg`);
    }
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including tendrils).
 *                                       If a color index or 'black', generates SVG for only this color (excluding tendrils).
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<path d="M ${conn.x1},${conn.y1} L ${conn.x2},${conn.y2}" stroke="${conn.color}" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>n`;
        });

        svgContent += `</g>n`;
    });

    // Add tendrils only in the combined SVG or in the black strand SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="tendrils">n`;
        tendrils.forEach(tendril => {
            let pathData = tendril.map((point, index) => {
                return index === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`;
            }).join(' ');
            svgContent += `<path d="${pathData}" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>n`;
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < selectedColorIndices.length; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<path d="M ${x1},${y} L ${x2},${y}" stroke="${colorValue}" stroke-width="${barHeight}" fill="none" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<path d="M ${x1},${y} L ${x2},${y}" stroke="${colorValue}" stroke-width="${barHeight}" fill="none" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    // Add black segment only if it's not already included in selectedColorIndices
    if (activeColor === 'black' && selectedColorIndices.includes(8)) {
        // Find the index of black in selectedColorIndices to position it correctly
        let blackIndex = selectedColorIndices.indexOf(8);
        if (blackIndex !== -1) {
            let x1 = xStart + blackIndex * (segmentLength + gapSize);
            let x2 = x1 + segmentLength;
            let y = yStart;
            let colorValue = 'black';
            svg += `<path d="M ${x1},${y} L ${x2},${y}" stroke="${colorValue}" stroke-width="${barHeight}" fill="none" />n`;
        }
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected stars and pathways. Each star signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 50,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.3,       // Probability of connecting two nodes
    connectionThreshold: 150,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1.5,                // Radius of nodes in millimeters
    connectionOffset: 2               // Offset for connections to avoid overlapping paths
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(3, 7)); // Ensuring at least 3 colors for depth
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });
    });
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as circles
    stroke(0);
    strokeWeight(nodeRadiusPixels);
    fill(0);
    nodes.forEach(node => {
        ellipse(node.x, node.y, nodeRadiusPixels * 2, nodeRadiusPixels * 2);
    });

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

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(40, 60));                // Vary number of nodes
        generationRules.connectionProbability = random(0.2, 0.4);       // Vary connection probability
        generationRules.connectionThreshold = random(120, 180);        // Vary connection threshold
        generationRules.nodeDistributionRadius = random(250, 350);      // Vary node distribution radius

        // Ensure maxNodes does not exceed a reasonable limit to maintain performance
        generationRules.maxNodes = constrain(generationRules.maxNodes, 30, 70);

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // Optionally, generate a black node SVG if black is among the selected colors
    if (selectedColorIndices.includes(8)) {
        let blackSVG = generateSVG('black');
        saveSVGFile(blackSVG, `${dayNumber}-BLACK-PORTRAIT.svg`);
    }
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index or 'black', generates SVG for only this color (excluding nodes).
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

    // Add background
    svgContent += `<rect width="100%" height="100%" fill="white" />n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }
            svgContent += `<circle cx="${node.x}" cy="${node.y}" r="${nodeRadiusPixels}" fill="black" />n`;
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 50,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.3,       // Probability of connecting two nodes
    connectionThreshold: 150,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1.5,                // Radius of nodes in millimeters
    connectionOffset: 2,              // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 2,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]            // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    
    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); // Ensuring at least 3 colors for depth
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });
    });
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as circles
    stroke(0);
    strokeWeight(nodeRadiusPixels);
    fill(0);
    nodes.forEach(node => {
        ellipse(node.x, node.y, nodeRadiusPixels * 2, nodeRadiusPixels * 2);
    });

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

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(40, 60));                // Vary number of nodes
        generationRules.connectionProbability = random(0.2, 0.4);       // Vary connection probability
        generationRules.connectionThreshold = random(120, 180);        // Vary connection threshold
        generationRules.nodeDistributionRadius = random(250, 350);      // Vary node distribution radius
        generationRules.hatchSpacingPixels = random(1, 3);              // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Ensure maxNodes does not exceed a reasonable limit to maintain performance
        generationRules.maxNodes = constrain(generationRules.maxNodes, 30, 70);

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // Optionally, generate a black node SVG if black is among the selected colors
    if (selectedColorIndices.includes(8)) {
        let blackSVG = generateSVG('black');
        saveSVGFile(blackSVG, `${dayNumber}-BLACK-PORTRAIT.svg`);
    }
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index or 'black', generates SVG for only this color (excluding nodes unless 'black').
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

    // Add background
    svgContent += `<rect width="100%" height="100%" fill="white" />n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            if (activeColor === 'black') {
                // Generate cross-hatched nodes instead of filled circles
                svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
            } else {
                // In combined SVG, represent nodes as filled circles
                svgContent += `<circle cx="${node.x}" cy="${node.y}" r="${nodeRadiusPixels}" fill="black" />n`;
            }
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Generates cross-hatched circles for nodes in the black SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate bounding box for the circle
        let xStart = x - r * cosA;
        let yStart = y - r * sinA;
        let xEnd = x + r * cosA;
        let yEnd = y + r * sinA;

        // Draw multiple parallel lines within the circle
        for (let d = -r; d <= r; d += spacing) {
            // Calculate perpendicular offsets
            let deltaX = d * cosA;
            let deltaY = d * sinA;

            let lineX1 = xStart + deltaX;
            let lineY1 = yStart + deltaY;
            let lineX2 = xEnd + deltaX;
            let lineY2 = yEnd + deltaY;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, lineX1, lineY1, lineX2, lineY2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 50,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.3,       // Probability of connecting two nodes
    connectionThreshold: 150,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1.5,                // Radius of nodes in millimeters
    connectionOffset: 2,              // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 2,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]            // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    
    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); // Ensuring at least 3 colors for depth
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // If no connections use the selected colors, ensure at least black is included
    if (selectedColorIndices.length === 0) {
        selectedColorIndices = [8]; // Default to BLACK
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as cross-hatched circles
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let length = r * sqrt(2); // Maximum length needed
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            line(x1, y1, x2, y2);
        }
    });

    pop();
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(40, 60));                // Vary number of nodes
        generationRules.connectionProbability = random(0.2, 0.4);       // Vary connection probability
        generationRules.connectionThreshold = random(120, 180);        // Vary connection threshold
        generationRules.nodeDistributionRadius = random(250, 350);      // Vary node distribution radius
        generationRules.hatchSpacingPixels = random(1, 3);              // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Ensure maxNodes does not exceed a reasonable limit to maintain performance
        generationRules.maxNodes = constrain(generationRules.maxNodes, 30, 70);

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // Optionally, generate a black node SVG if black is among the selected colors
    if (selectedColorIndices.includes(8)) {
        let blackSVG = generateSVG('black');
        saveSVGFile(blackSVG, `${dayNumber}-BLACK-PORTRAIT.svg`);
    }
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index or 'black', generates SVG for only this color (excluding nodes unless 'black').
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

    // Add background
    svgContent += `<rect width="100%" height="100%" fill="white" />n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            if (activeColor === 'black') {
                // Generate cross-hatched nodes instead of filled circles
                svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
            } else {
                // In combined SVG, represent nodes as cross-hatched circles
                svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
            }
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Generates cross-hatched circles for nodes in the black SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let length = r * sqrt(2);
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]             // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
  
    // Generative rules adjustments moved inside setup function
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // If no connections use the selected colors, ensure at least black is included
    if (selectedColorIndices.length === 0) {
        selectedColorIndices = [8]; // Default to BLACK
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as cross-hatched circles
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let length = r * sqrt(2); // Maximum length needed
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            line(x1, y1, x2, y2);
        }
    });

    pop();
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // No separate black SVG is needed as nodes are included within the main SVG
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // In combined SVG, represent nodes as cross-hatched circles
            // In black SVG, also represent nodes as cross-hatched circles (same representation)
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]             // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Ensure black is always included in the palette
    if (!usedColors.has(8) && selectedColorIndices.includes(8)) {
        usedColors.add(8);
    }

    // Update the selectedColorIndices to include only used colors plus black
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // Always include black in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as cross-hatched circles
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            line(x1, y1, x2, y2);
        }
    });

    pop();
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    // Generate combined SVG
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-PORTRAIT.svg`);

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg`;
        saveSVGFile(colorSVG, fileName);
    });

    // Removed separate black SVG export as nodes are now included within the black color SVG
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes unless color is black).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

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

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

/**
 * Draws a cross-hatched circle to simulate a filled node.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            line(x1, y1, x2, y2);
        }
    });

    pop();
}

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG;
        let fileName;
        if (colorIndex === 8) { // Black color
            colorSVG = generateSVG('black');
            fileName = `${dayNumber}-08-BLACK-PORTRAIT-${timestamp}.svg`;
        } else {
            colorSVG = generateSVG(colorIndex);
            let colorName = colors[colorIndex].name.toUpperCase();
            fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        }
        saveSVGFile(colorSVG, fileName);
    });
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]             // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Ensure black is always included in the palette
    if (!usedColors.has(8) && selectedColorIndices.includes(8)) {
        usedColors.add(8);
    }

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // Always include black in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(ROUND);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        beginShape();
        let currentColor = '';
        layer.forEach(conn => {
            if (currentColor !== conn.color) {
                if (currentColor !== '') {
                    endShape();
                    beginShape();
                }
                stroke(conn.color);
                currentColor = conn.color;
            }
            // Draw straight line between connections
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
        endShape();
    });

    // Draw nodes as cross-hatched circles
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            line(x1, y1, x2, y2);
        }
    });

    pop();
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG;
        let fileName;
        if (colorIndex === 8) { // Black color
            colorSVG = generateSVG('black');
            fileName = `${dayNumber}-08-BLACK-PORTRAIT-${timestamp}.svg`;
        } else {
            colorSVG = generateSVG(colorIndex);
            let colorName = colors[colorIndex].name.toUpperCase();
            fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        }
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        if (activeColor !== 0 && selectedColorIndices[layerIndex] !== activeColor && activeColor !== 'black') {
            return;
        }
        svgContent += `<g id="layer${layerIndex + 1}">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke="${conn.color}" stroke-width="2" stroke-linecap="round" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

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

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" stroke-linecap="round" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135]             // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Ensure black is always included in the palette
    if (!usedColors.has(8) && selectedColorIndices.includes(8)) {
        usedColors.add(8);
    }

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // Always include black in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, and registration markers on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw connections
    strokeCap(SQUARE); // Changed to SQUARE to remove round caps
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';

        // Begin a group with the layer's stroke color
        stroke(layerColor);

        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });

    // Draw nodes as cross-hatched circles with clipping
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node with clipping.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });

    pop();
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    selectedColorIndices.forEach(colorIndex => {
        let colorSVG;
        let fileName;
        if (colorIndex === 8) { // Black color
            colorSVG = generateSVG('black');
            fileName = `${dayNumber}-08-BLACK-PORTRAIT-${timestamp}.svg`;
        } else {
            colorSVG = generateSVG(colorIndex);
            let colorName = colors[colorIndex].name.toUpperCase();
            fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        }
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black'
        if (activeColor !== 0 && activeColor !== 'black' && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            // Remove stroke-linecap to comply with user request
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette only if not exporting black SVG
    if (activeColor !== 'black') {
        svgContent += addColorPaletteBarsSVG(activeColor);
    }

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

let generationRules = {
    // Existing rules...
    maxNodes: 150,
    nodeDistributionRadius: 300,
    connectionProbability: 0.2,
    connectionThreshold: 200,
    nodeRadiusMM: 1,
    connectionOffset: 7,
    hatchSpacingPixels: 4,
    hatchAngles: [45, 135],
    
    // New grid properties
    gridRadiusStep: 50,              // Distance between concentric circles
    gridAngularStep: 30,             // Angle between radial lines in degrees
    gridStrokeWeight: 0.5,           // Thickness of grid lines
    gridColor: 'rgba(200, 200, 200, 0.5)' // Light gray with 50% opacity
};

/**
 * Draws a polar grid resembling a constellation map.
 */
function drawPolarGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(generationRules.gridColor);
    strokeWeight(generationRules.gridStrokeWeight);
    noFill();
    
    // Draw concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        ellipse(0, 0, r * 2, r * 2);
    }
    
    // Draw radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let x = generationRules.nodeDistributionRadius * cos(rad);
        let y = generationRules.nodeDistributionRadius * sin(rad);
        line(0, 0, x, y);
    }
    
    pop();
}

function drawShapes() {
    // Clear canvas
    background(255);
    
    // Draw polar grid first to serve as a background
    drawPolarGrid();
    
    // Draw connections
    strokeCap(SQUARE); // Removed round caps as per your requirements
    strokeJoin(ROUND);
    noFill();
    
    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';
        
        // Begin a group with the layer's stroke color
        stroke(layerColor);
        
        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });
    
    // Draw nodes as cross-hatched circles with clipping
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });
    
    // Draw markers and palette
    drawMarkers();
    addColorPaletteBars();
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135],            // Angles for cross-hatching in degrees
    
    // New grid properties
    gridRadiusStep: 50,                // Distance between concentric circles
    gridAngularStep: 30,               // Angle between radial lines in degrees
    gridStrokeWeight: 0.5,             // Thickness of grid lines
    gridColor: 'rgba(200, 200, 200, 0.5)' // Light gray with 50% opacity
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Ensure black is always included in the palette
    if (!usedColors.has(8) && selectedColorIndices.includes(8)) {
        usedColors.add(8);
    }

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // Always include black in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, registration markers, and the polar grid on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw polar grid first to serve as a background
    drawPolarGrid();

    // Draw connections
    strokeCap(SQUARE); // Removed round caps as per your requirements
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';

        // Begin a group with the layer's stroke color
        stroke(layerColor);

        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });

    // Draw nodes as cross-hatched circles with clipping
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node with clipping.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });

    pop();
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * =======================================
 * Polar Grid Drawing Function
 * =======================================
 */

/**
 * Draws a polar grid resembling a constellation map.
 */
function drawPolarGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(generationRules.gridColor);
    strokeWeight(generationRules.gridStrokeWeight);
    noFill();

    // Draw concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        ellipse(0, 0, r * 2, r * 2);
    }

    // Draw radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let x = generationRules.nodeDistributionRadius * cos(rad);
        let y = generationRules.nodeDistributionRadius * sin(rad);
        line(0, 0, x, y);
    }

    pop();
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Optionally, vary grid properties for more dynamic grids
        // Uncomment the following lines if you wish to vary grid properties upon regeneration
        // generationRules.gridRadiusStep = floor(random(40, 60));
        // generationRules.gridAngularStep = floor(random(20, 40));
        // generationRules.gridStrokeWeight = random(0.3, 0.7);
        // generationRules.gridColor = `rgba(${floor(random(150, 250))}, ${floor(random(150, 250))}, ${floor(random(150, 250))}, 0.5)`;

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black'
        if (activeColor !== 0 && activeColor !== 'black' && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }

        // Ensure tracking of node color to correct SVG file export.
        if(colorValue === 'black') {
            activeColor = 'black';
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            // Remove stroke-linecap to comply with user request
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette only if not exporting black SVG
    if (activeColor !== 'black') {
        svgContent += addColorPaletteBarsSVG(activeColor);
    }

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * =======================================
 * Polar Grid Drawing Function
 * =======================================
 */

/**
 * Draws a polar grid resembling a constellation map.
 */
function drawPolarGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(generationRules.gridColor);
    strokeWeight(generationRules.gridStrokeWeight);
    noFill();

    // Draw concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        ellipse(0, 0, r * 2, r * 2);
    }

    // Draw radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let x = generationRules.nodeDistributionRadius * cos(rad);
        let y = generationRules.nodeDistributionRadius * sin(rad);
        line(0, 0, x, y);
    }

    pop();
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Optionally, vary grid properties for more dynamic grids
        // Uncomment the following lines if you wish to vary grid properties upon regeneration
        // generationRules.gridRadiusStep = floor(random(40, 60));
        // generationRules.gridAngularStep = floor(random(20, 40));
        // generationRules.gridStrokeWeight = random(0.3, 0.7);
        // generationRules.gridColor = `rgba(${floor(random(150, 250))}, ${floor(random(150, 250))}, ${floor(random(150, 250))}, 0.5)`;

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;
        // Debugging print statement (can be removed)
        // print(colorValue);

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black'
        if (activeColor !== 0 && activeColor !== 'black' && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }
        
        // Ensures tracking of node color to correct SVG file export.
        if(colorValue === 'black') {
            activeColor = 'black';
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            // Remove stroke-linecap to comply with user request
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette only if not exporting black SVG
    if (activeColor !== 'black') {
        svgContent += addColorPaletteBarsSVG(activeColor);
    }

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

## Artist Statement: "Digital DNA"

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Changed to 'let' to allow modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                   // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135],            // Angles for cross-hatching in degrees
    
    // New grid properties
    gridRadiusStep: 50,                // Distance between concentric circles
    gridAngularStep: 30,               // Angle between radial lines in degrees
    gridStrokeWeight: 0.5,             // Thickness of grid lines
    gridColor: 'rgba(200, 200, 200, 0.5)' // Light gray with 50% opacity
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Clear any existing data and generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    // Track used colors
    let usedColors = new Set();

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });

        // Mark color as used
        usedColors.add(colorIndex);
    });

    // Ensure black is always included in the palette
    if (!usedColors.has(8) && selectedColorIndices.includes(8)) {
        usedColors.add(8);
    }

    // Update the selectedColorIndices to include only used colors
    selectedColorIndices = selectedColorIndices.filter(colorIndex => usedColors.has(colorIndex));

    // Always include black in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, registration markers, and the polar grid on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw polar grid first to serve as a background
    drawPolarGrid();

    // Draw connections
    strokeCap(SQUARE); // Removed round caps as per your requirements
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';

        // Begin a group with the layer's stroke color
        stroke(layerColor);

        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });

    // Draw nodes as cross-hatched circles with clipping
    nodes.forEach(node => {
        generateHatchedCircle(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node with clipping.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 */
function generateHatchedCircle(x, y, r, spacing, angles) {
    push();
    translate(x, y);
    noFill();
    stroke(0);
    strokeWeight(2); // 0.5mm line width

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });

    pop();
}

/**
 * Clips a line to fit within a circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} r - Radius of the circle.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {object|null} Clipped line coordinates or null if no intersection.
 */
function clipLineToCircle(cx, cy, r, x1, y1, x2, y2) {
    // Translate coordinates
    let dx = x2 - x1;
    let dy = y2 - y1;
    let a = dx * dx + dy * dy;
    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;

    let discriminant = b * b - 4 * a * c;
    if (discriminant < 0) {
        return null; // No intersection
    }

    let sqrtDisc = sqrt(discriminant);
    let t1 = (-b - sqrtDisc) / (2 * a);
    let t2 = (-b + sqrtDisc) / (2 * a);

    let tMin = min(t1, t2);
    let tMax = max(t1, t2);

    // Clamp t values between 0 and 1
    tMin = constrain(tMin, 0, 1);
    tMax = constrain(tMax, 0, 1);

    if (tMin > tMax) {
        return null;
    }

    let clippedX1 = x1 + tMin * dx;
    let clippedY1 = y1 + tMin * dy;
    let clippedX2 = x1 + tMax * dx;
    let clippedY2 = y1 + tMax * dy;

    return { x1: clippedX1, y1: clippedY1, x2: clippedX2, y2: clippedY2 };
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom right
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * =======================================
 * Polar Grid Drawing Function
 * =======================================
 */

/**
 * Draws a polar grid resembling a constellation map.
 */
function drawPolarGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(generationRules.gridColor);
    strokeWeight(generationRules.gridStrokeWeight);
    noFill();

    // Draw concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        ellipse(0, 0, r * 2, r * 2);
    }

    // Draw radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let x = generationRules.nodeDistributionRadius * cos(rad);
        let y = generationRules.nodeDistributionRadius * sin(rad);
        line(0, 0, x, y);
    }

    pop();
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Optionally, vary grid properties for more dynamic grids
        // Uncomment the following lines if you wish to vary grid properties upon regeneration
        // generationRules.gridRadiusStep = floor(random(40, 60));
        // generationRules.gridAngularStep = floor(random(20, 40));
        // generationRules.gridStrokeWeight = random(0.3, 0.7);
        // generationRules.gridColor = `rgba(${floor(random(150, 250))}, ${floor(random(150, 250))}, ${floor(random(150, 250))}, 0.5)`;

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black', includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black'
        if (activeColor !== 0 && activeColor !== 'black' && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }
        
        // Ensures tracking of node color to correct SVG file export.
        if(colorValue === 'black') {
            activeColor = 'black';
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Collect path data
        layer.forEach(conn => {
            // If generating individual color SVG, exclude other colors unless it's black
            if (activeColor !== 0 && activeColor !== 'black' && conn.color !== colors[activeColor].value) {
                return;
            }
            // Remove stroke-linecap to comply with user request
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black node SVG
    if (activeColor === 0 || activeColor === 'black') {
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            if (activeColor !== 0 && activeColor !== 'black') {
                return;
            }

            // Represent nodes as cross-hatched circles
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette only if not exporting black SVG
    if (activeColor !== 'black') {
        svgContent += addColorPaletteBarsSVG(activeColor);
    }

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index or 'black', includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length; // Black is already included if selected
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2; // Starting x position
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Allows modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                  // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135],            // Angles for cross-hatching in degrees
    
    // Grid properties
    gridRadiusStep: 50,                // Distance between concentric circles
    gridAngularStep: 30,               // Angle between radial lines in degrees
    gridStrokeWeight: 0.5,             // Thickness of grid lines
    gridColor: 'rgba(200, 200, 200, 0.5)' // Light gray with 50% opacity
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Generate the initial artwork
    resetCanvas();

    // Prevent continuous looping
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });
    });

    // Ensure black is always included in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, registration markers, and the constellation grid on the canvas.
 */
function drawShapes() {
    // Clear canvas with white background
    background(255);

    // Draw constellation grid first to serve as a background
    drawConstellationGrid();

    // Draw connections
    strokeCap(SQUARE);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';
        stroke(layerColor);

        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });

    // Draw nodes with cross-hatching
    nodes.forEach(node => {
        drawHatchedCircle(node.x, node.y, nodeRadiusPixels);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node with clipping on the canvas.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 */
function drawHatchedCircle(x, y, r) {
    push();
    translate(x, y);
    
    // Draw circle outline
    noFill();
    stroke(0);
    strokeWeight(0.5);
    ellipse(0, 0, r * 2, r * 2);
    
    // Draw hatching lines
    generationRules.hatchAngles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);
        
        // Calculate number of lines to cover the circle
        let numLines = ceil((2 * r) / generationRules.hatchSpacingPixels);
        
        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * generationRules.hatchSpacingPixels;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;
            
            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(0, 0, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });
    
    pop();
}

/**
 * Draws the constellation grid resembling a real-world constellation map.
 * Includes dashed concentric circles and dotted radial lines.
 */
function drawConstellationGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(0); // Black grid lines
    strokeWeight(0.25); // Thinner lines for subtlety
    
    // Draw dashed concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        drawDashedCircle(0, 0, r);
    }
    
    // Draw dotted radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let endX = generationRules.nodeDistributionRadius * cos(rad);
        let endY = generationRules.nodeDistributionRadius * sin(rad);
        drawDottedLine(0, 0, endX, endY);
    }
    
    pop();
}

/**
 * Helper function to draw a dashed circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} radius - Radius of the circle.
 */
function drawDashedCircle(cx, cy, radius) {
    let steps = 60;
    let dashLength = PI / 30; // Length of each dash

    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = cx + radius * cos(a);
        let startY = cy + radius * sin(a);
        let endA = min(a + dashLength, TWO_PI);
        let endX = cx + radius * cos(endA);
        let endY = cy + radius * sin(endA);
        line(startX, startY, endX, endY);
    }
}

/**
 * Helper function to draw a dotted line.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 */
function drawDottedLine(x1, y1, x2, y2) {
    let distance = dist(x1, y1, x2, y2);
    let steps = distance / 5; // Dots every 5 pixels
    
    for (let i = 0; i <= steps; i++) {
        let x = lerp(x1, x2, i / steps);
        let y = lerp(y1, y2, i / steps);
        point(x, y);
    }
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom-right corner
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index, includes only that color.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Optionally, vary grid properties for more dynamic grids
        // Uncomment the following lines if you wish to vary grid properties upon regeneration
        // generationRules.gridRadiusStep = floor(random(40, 60));
        // generationRules.gridAngularStep = floor(random(20, 40));
        // generationRules.gridStrokeWeight = random(0.3, 0.7);
        // generationRules.gridColor = `rgba(${floor(random(150, 250))}, ${floor(random(150, 250))}, ${floor(random(150, 250))}, 0.5)`;

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black' (color index 8), includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black'
        if (activeColor !== 0 && activeColor !== 8 && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }

        // Ensure that if the color is black, nodes are included
        if (colorValue === 'black') {
            activeColor = 8;
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Add each connection line
        layer.forEach(conn => {
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black SVG
    if (activeColor === 0 || activeColor === 8) { // 8 is the index for black
        // Add constellation grid to the SVG
        svgContent += generateConstellationGridSVG();

        // Add cross-hatched nodes
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette - always include it for both combined and individual color SVGs
    svgContent += addColorPaletteBarsSVG(activeColor);

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index, includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length;
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    selectedColorIndices.forEach((colorIndex, i) => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;
        
        // Draw the bar if:
        // 1. It's a combined SVG (activeColor === 0) OR
        // 2. It's the specific color being exported (matches activeColor)
        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

/**
 * =======================================
 * SVG Helper Functions
 * =======================================
 */

/**
 * Generates the constellation grid in SVG format.
 * @returns {string} SVG content for the constellation grid.
 */
function generateConstellationGridSVG() {
    let svg = '<g id="constellation-grid" stroke="black" stroke-width="0.25">n';
    
    // Center point for the grid
    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;
    
    // Generate concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        svg += generateDashedCircleSVG(centerX, centerY, r);
    }
    
    // Generate radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let endX = centerX + generationRules.nodeDistributionRadius * cos(rad);
        let endY = centerY + generationRules.nodeDistributionRadius * sin(rad);
        svg += generateDottedLineSVG(centerX, centerY, endX, endY);
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Helper function to generate a dashed circle in SVG.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} radius - Radius of the circle.
 * @returns {string} SVG content for the dashed circle.
 */
function generateDashedCircleSVG(cx, cy, radius) {
    let path = '';
    let steps = 60;
    let dashLength = PI / 30; // Length of each dash

    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = cx + radius * cos(a);
        let startY = cy + radius * sin(a);
        let endA = min(a + dashLength, TWO_PI);
        let endX = cx + radius * cos(endA);
        let endY = cy + radius * sin(endA);
        path += `<line x1="${startX}" y1="${startY}" x2="${endX}" y2="${endY}" />n`;
    }
    
    return path;
}

/**
 * Helper function to generate a dotted line in SVG.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {string} SVG content for the dotted line.
 */
function generateDottedLineSVG(x1, y1, x2, y2) {
    let distance = dist(x1, y1, x2, y2);
    let steps = distance / 5; // Dots every 5 pixels
    let dots = '';

    for (let i = 0; i <= steps; i++) {
        let x = lerp(x1, x2, i / steps);
        let y = lerp(y1, y2, i / steps);
        dots += `<circle cx="${x}" cy="${y}" r="0.5" fill="black" />n`;
    }

    return dots;
}

// Day 018
/*
========================================
    Digital DNA - Day 018 Self-Portrait (Cognitive Constellation)
========================================

### Title: *Cognitive Constellation*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Cognitive Constellation* captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 018 - Cognitive Constellation Self-Portrait
----------------------------------------*/

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

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '018';

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

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

// Allows modifications during regeneration
let generationRules = {
    maxNodes: 150,                    // Number of nodes (stars) in the constellation
    nodeDistributionRadius: 300,      // Radius for distributing nodes around the center
    connectionProbability: 0.2,       // Probability of connecting two nodes
    connectionThreshold: 200,         // Maximum distance between nodes to establish a connection
    nodeRadiusMM: 1,                  // Radius of nodes in millimeters
    connectionOffset: 7,               // Offset for connections to avoid overlapping paths
    hatchSpacingPixels: 4,            // Spacing between hatch lines in pixels
    hatchAngles: [45, 135],           // Angles for cross-hatching in degrees
    
    // Grid properties
    gridRadiusStep: 50,                // Distance between concentric circles
    gridAngularStep: 30,               // Angle between radial lines in degrees
    gridStrokeWeight: 0.5,             // Thickness of grid lines
    gridColor: 'rgba(200, 200, 200, 0.5)' // Light gray with 50% opacity
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let selectedColorIndices = [];
let layers = [];

let nodes = [];           // Array of nodes, each node has x, y coordinates
let connections = [];     // Array of connections between nodes

let nodeRadiusPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations with randomness
    workAreaMarginInches = random(1.5, 2.5);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Select between 3 to 6 unique colors randomly for depth
    let numColorsToUse = floor(random(3, 7)); 
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

    // Generative rules adjustments
    generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
    generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
    generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
    generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
    generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
    generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

    // Always include black in the palette if not already selected
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }

    // Convert measurements from mm to pixels
    nodeRadiusPixels = mmToPixels(generationRules.nodeRadiusMM);

    // Generate the initial artwork
    resetCanvas();

    // Prevent continuous looping
    noLoop();
}

/**
 * =======================================
 * Unit Conversion Function
 * =======================================
 */

/**
 * Converts millimeters to pixels based on pixels per inch.
 * @param {number} mm - Measurement in millimeters.
 * @returns {number} Measurement in pixels.
 */
function mmToPixels(mm) {
    let inches = mm / 25.4;
    return inches * pixelsPerInch;
}

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

/**
 * Selects a specified number of unique color indices from the colors palette.
 * @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);
    }

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

/**
 * =======================================
 * Node and Connection Generation
 * =======================================
 */

/**
 * Generates nodes randomly distributed around the center and establishes connections based on defined probabilities.
 */
function generateNodesAndConnections() {
    nodes = [];
    connections = [];

    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;

    // Generate nodes
    for (let n = 0; n < generationRules.maxNodes; n++) {
        let angle = random(TWO_PI);
        let radius = random(workAreaMarginPixels, generationRules.nodeDistributionRadius);
        let x = centerX + radius * cos(angle);
        let y = centerY + radius * sin(angle);
        nodes.push({ x: x, y: y });
    }

    // Generate connections
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            let distance = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
            if (distance <= generationRules.connectionThreshold && random() < generationRules.connectionProbability) {
                connections.push({
                    from: nodes[i],
                    to: nodes[j]
                });
            }
        }
    }
}

/**
 * =======================================
 * Color Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to connections based on their relative positions and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Reset layers
    layers = Array(selectedColorIndices.length).fill().map(() => []);

    connections.forEach(conn => {
        // Assign color based on the average position of the connection
        let avgX = (conn.from.x + conn.to.x) / 2;
        let avgY = (conn.from.y + conn.to.y) / 2;

        // Calculate angle from center
        let centerX = canvasWidthPixels / 2;
        let centerY = canvasHeightPixels / 2;
        let angle = atan2(avgY - centerY, avgX - centerX);
        angle = angle < 0 ? angle + TWO_PI : angle; // Normalize angle between 0 and TWO_PI

        // Map angle to color index
        let mappedValue = map(angle, 0, TWO_PI, 0, selectedColorIndices.length);
        let mappedFloor = floor(mappedValue);

        // Ensure mappedFloor is within [0, selectedColorIndices.length - 1]
        mappedFloor = constrain(mappedFloor, 0, selectedColorIndices.length - 1);

        let colorIndex = selectedColorIndices[mappedFloor];
        let layerIdx = selectedColorIndices.indexOf(colorIndex);

        // Safety check for layerIdx
        if (layerIdx === -1 || layerIdx >= layers.length) {
            console.warn(`Color index ${colorIndex} not found in selectedColorIndices. Defaulting to layer 0.`);
            layerIdx = 0;
        }

        layers[layerIdx].push({
            x1: conn.from.x,
            y1: conn.from.y,
            x2: conn.to.x,
            y2: conn.to.y,
            color: colors[colorIndex].value
        });
    });

    // Ensure black is always included in the palette
    if (!selectedColorIndices.includes(8)) {
        selectedColorIndices.push(8);
    }
}

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

/**
 * Renders all connections, nodes, color palette bars, registration markers, and the constellation grid on the canvas.
 */
function drawShapes() {
    // Clear canvas with white background
    background(255);

    // Draw constellation grid first to serve as a background
    drawConstellationGrid();

    // Draw connections
    strokeCap(SQUARE);
    strokeJoin(ROUND);
    noFill();

    layers.forEach(layer => {
        // Extract the color from the first connection in the layer
        let layerColor = layer.length > 0 ? layer[0].color : 'black';
        stroke(layerColor);

        layer.forEach(conn => {
            line(conn.x1, conn.y1, conn.x2, conn.y2);
        });
    });

    // Draw nodes with cross-hatching
    nodes.forEach(node => {
        drawHatchedCircle(node.x, node.y, nodeRadiusPixels);
    });

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

/**
 * Draws a cross-hatched circle to simulate a filled node with clipping on the canvas.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 */
function drawHatchedCircle(x, y, r) {
    push();
    translate(x, y);
    
    // Draw circle outline
    noFill();
    stroke(0);
    strokeWeight(0.5);
    ellipse(0, 0, r * 2, r * 2);
    
    // Draw hatching lines
    generationRules.hatchAngles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);
        
        // Calculate number of lines to cover the circle
        let numLines = ceil((2 * r) / generationRules.hatchSpacingPixels);
        
        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * generationRules.hatchSpacingPixels;
            let x1 = -r * cosA + offset * sinA;
            let y1 = -r * sinA - offset * cosA;
            let x2 = r * cosA + offset * sinA;
            let y2 = r * sinA - offset * cosA;
            
            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(0, 0, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });
    
    pop();
}

/**
 * Draws the constellation grid resembling a real-world constellation map.
 * Includes dashed concentric circles and dotted radial lines.
 */
function drawConstellationGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(0); // Black grid lines
    strokeWeight(0.25); // Thinner lines for subtlety
    
    // Draw dashed concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        drawDashedCircle(0, 0, r);
    }
    
    // Draw dotted radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let endX = generationRules.nodeDistributionRadius * cos(rad);
        let endY = generationRules.nodeDistributionRadius * sin(rad);
        drawDottedLine(0, 0, endX, endY);
    }
    
    pop();
}

/**
 * Helper function to draw a dashed circle.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} radius - Radius of the circle.
 */
function drawDashedCircle(cx, cy, radius) {
    let steps = 60;
    let dashLength = PI / 30; // Length of each dash

    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = cx + radius * cos(a);
        let startY = cy + radius * sin(a);
        let endA = min(a + dashLength, TWO_PI);
        let endX = cx + radius * cos(endA);
        let endY = cy + radius * sin(endA);
        line(startX, startY, endX, endY);
    }
}

/**
 * Helper function to draw a dotted line.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 */
function drawDottedLine(x1, y1, x2, y2) {
    let distance = dist(x1, y1, x2, y2);
    let steps = distance / 5; // Dots every 5 pixels
    
    for (let i = 0; i <= steps; i++) {
        let x = lerp(x1, x2, i / steps);
        let y = lerp(y1, y2, i / steps);
        point(x, y);
    }
}

/**
 * Draws registration markers at the top-left and bottom-right corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

    // Bottom-right corner
    line(canvasWidthPixels - 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
    line(canvasWidthPixels, canvasHeightPixels - 5, canvasWidthPixels, canvasHeightPixels);
}

/**
 * Draws the color palette bars at the bottom of the canvas, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index, includes only that color.
 */
function addColorPaletteBars(activeColor = 0) {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length; // Black is already included if selected

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

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw selected colors, including black if selected
    selectedColorIndices.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
    });
}

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

/**
 * Resets the canvas by clearing existing data and regenerating the artwork.
 */
function resetCanvas() {
    // Clear all data structures
    layers = [];
    nodes = [];
    connections = [];

    // Generate new nodes and connections
    generateNodesAndConnections();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork with updated generative rules.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Update generative rules with slight variations to introduce differences
        generationRules.maxNodes = floor(random(70, 170));                // Vary number of nodes
        generationRules.connectionProbability = random(0.05, 0.2);       // Vary connection probability
        generationRules.connectionThreshold = random(50, 180);          // Vary connection threshold
        generationRules.nodeDistributionRadius = random(150, 350);       // Vary node distribution radius
        generationRules.hatchSpacingPixels = floor(random(3, 6));        // Vary hatch spacing
        generationRules.hatchAngles = shuffle([45, 135]);               // Shuffle hatch angles

        // Optionally, vary grid properties for more dynamic grids
        // Uncomment the following lines if you wish to vary grid properties upon regeneration
        // generationRules.gridRadiusStep = floor(random(40, 60));
        // generationRules.gridAngularStep = floor(random(20, 40));
        // generationRules.gridStrokeWeight = random(0.3, 0.7);
        // generationRules.gridColor = `rgba(${floor(random(150, 250))}, ${floor(random(150, 250))}, ${floor(random(150, 250))}, 0.5)`;

        // Regenerate the artwork with updated rules
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers and nodes.
 * - Individual SVGs for each selected color (excluding nodes unless color is black).
 */
function saveSVGs() {
    const timestamp = Date.now();

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

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

/**
 * Generates SVG content.
 * @param {number|string} activeColor - If 0, generates combined SVG (including nodes).
 *                                       If a color index, generates SVG for only this color (excluding nodes).
 *                                       If 'black' (color index 8), includes cross-hatched nodes.
 * @returns {string} SVG content as a string.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Add connections by layer
    layers.forEach((layer, layerIndex) => {
        let colorValue = colors[selectedColorIndices[layerIndex]].value;

        // Skip layers that don't match the activeColor, unless activeColor is 0 or 'black' (8)
        if (activeColor !== 0 && activeColor !== 8 && selectedColorIndices[layerIndex] !== activeColor) {
            return;
        }

        // If the color is black, ensure nodes are included
        if (colorValue === 'black') {
            activeColor = 8;
        }

        // Begin a group with the layer's stroke color
        svgContent += `<g id="layer${layerIndex + 1}" stroke="${colorValue}" stroke-width="2">n`;

        // Add each connection line
        layer.forEach(conn => {
            svgContent += `<line x1="${conn.x1}" y1="${conn.y1}" x2="${conn.x2}" y2="${conn.y2}" stroke-linecap="butt" />n`;
        });

        svgContent += `</g>n`;
    });

    // Add nodes only in the combined SVG or in the black SVG
    if (activeColor === 0 || activeColor === 8) { // 8 is the index for black
        // Add constellation grid to the SVG
        svgContent += generateConstellationGridSVG();

        // Add cross-hatched nodes
        svgContent += `<g id="nodes">n`;
        nodes.forEach(node => {
            svgContent += generateHatchedCircleSVG(node.x, node.y, nodeRadiusPixels, generationRules.hatchSpacingPixels, generationRules.hatchAngles);
        });
        svgContent += `</g>n`;
    }

    // Add color palette - always include it for both combined and individual color SVGs
    svgContent += addColorPaletteBarsSVG(activeColor);

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

/**
 * Generates cross-hatched circles for nodes in the SVG.
 * @param {number} x - X-coordinate of the node center.
 * @param {number} y - Y-coordinate of the node center.
 * @param {number} r - Radius of the node in pixels.
 * @param {number} spacing - Spacing between hatch lines in pixels.
 * @param {number[]} angles - Array of angles (in degrees) for hatch lines.
 * @returns {string} SVG content for the hatched circle.
 */
function generateHatchedCircleSVG(x, y, r, spacing, angles) {
    let svg = '';

    angles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);

        // Calculate the number of lines needed to cover the circle
        let numLines = ceil((2 * r) / spacing);

        for (let i = -numLines; i <= numLines; i++) {
            let offset = i * spacing;
            let x1 = x - r * cosA + offset * sinA;
            let y1 = y - r * sinA - offset * cosA;
            let x2 = x + r * cosA + offset * sinA;
            let y2 = y + r * sinA - offset * cosA;

            // Clip the lines to the circle boundary
            let clipped = clipLineToCircle(x, y, r, x1, y1, x2, y2);
            if (clipped) {
                svg += `<line x1="${clipped.x1}" y1="${clipped.y1}" x2="${clipped.x2}" y2="${clipped.y2}" stroke="black" stroke-width="2" />n`;
            }
        }
    });

    return svg;
}

/**
 * Adds color palette bars to the SVG content, including black.
 * @param {number|string} activeColor - If 0, includes all colors. If a specific color index, includes only that color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length;
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

    let totalGapLength = (numUsedColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors;

    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    selectedColorIndices.forEach((colorIndex, i) => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;
        
        // Draw the bar if:
        // 1. It's a combined SVG (activeColor === 0) OR
        // 2. It's the specific color being exported (matches activeColor)
        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
    });

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content for registration markers.
 */
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

/**
 * Saves an SVG file by creating a temporary download link.
 * @param {string} svgData - The SVG content as a string.
 * @param {string} fileName - The desired filename for the 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

/**
 * =======================================
 * SVG Helper Functions
 * =======================================
 */

/**
 * Generates the constellation grid in SVG format.
 * @returns {string} SVG content for the constellation grid.
 */
function generateConstellationGridSVG() {
    let svg = '<g id="constellation-grid" stroke="black" stroke-width="0.25">n';
    
    // Center point for the grid
    let centerX = canvasWidthPixels / 2;
    let centerY = canvasHeightPixels / 2;
    
    // Generate concentric circles
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        svg += generateDashedCircleSVG(centerX, centerY, r);
    }
    
    // Generate radial lines
    for (let angle = 0; angle < 360; angle += generationRules.gridAngularStep) {
        let rad = radians(angle);
        let endX = centerX + generationRules.nodeDistributionRadius * cos(rad);
        let endY = centerY + generationRules.nodeDistributionRadius * sin(rad);
        svg += generateDottedLineSVG(centerX, centerY, endX, endY);
    }
    
    svg += '</g>n';
    return svg;
}

/**
 * Helper function to generate a dashed circle in SVG.
 * @param {number} cx - X-coordinate of the circle center.
 * @param {number} cy - Y-coordinate of the circle center.
 * @param {number} radius - Radius of the circle.
 * @returns {string} SVG content for the dashed circle.
 */
function generateDashedCircleSVG(cx, cy, radius) {
    let path = '';
    let steps = 60;
    let dashLength = PI / 30; // Length of each dash

    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = cx + radius * cos(a);
        let startY = cy + radius * sin(a);
        let endA = min(a + dashLength, TWO_PI);
        let endX = cx + radius * cos(endA);
        let endY = cy + radius * sin(endA);
        path += `<line x1="${startX}" y1="${startY}" x2="${endX}" y2="${endY}" />n`;
    }
    
    return path;
}

/**
 * Helper function to generate a dotted line in SVG.
 * @param {number} x1 - X-coordinate of the line start.
 * @param {number} y1 - Y-coordinate of the line start.
 * @param {number} x2 - X-coordinate of the line end.
 * @param {number} y2 - Y-coordinate of the line end.
 * @returns {string} SVG content for the dotted line.
 */
function generateDottedLineSVG(x1, y1, x2, y2) {
    let distance = dist(x1, y1, x2, y2);
    let steps = distance / 5; // Dots every 5 pixels
    let dots = '';

    for (let i = 0; i <= steps; i++) {
        let x = lerp(x1, x2, i / steps);
        let y = lerp(y1, y2, i / steps);
        dots += `<circle cx="${x}" cy="${y}" r="0.5" fill="black" />n`;
    }

    return dots;
}