// 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 constellation grid lines in black
    drawConstellationGrid();

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

    layers.forEach(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 on canvas
    stroke(0);
    strokeWeight(0.5);
    nodes.forEach(node => {
        drawHatchedCircle(node.x, node.y, nodeRadiusPixels);
    });

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

// New function to draw hatched circles on canvas
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
    generationRules.hatchAngles.forEach(angle => {
        let rad = radians(angle);
        let cosA = cos(rad);
        let sinA = sin(rad);
        
        // Calculate bounding box
        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 lines to circle
            let clipped = clipLineToCircle(0, 0, r, x1, y1, x2, y2);
            if (clipped) {
                line(clipped.x1, clipped.y1, clipped.x2, clipped.y2);
            }
        }
    });
    
    pop();
}

// Replace drawPolarGrid with new constellation grid
function drawConstellationGrid() {
    push();
    translate(canvasWidthPixels / 2, canvasHeightPixels / 2);
    stroke(0); // Changed to black
    strokeWeight(0.25); // Thinner lines for constellation effect
    
    // Draw concentric circles with dashed lines
    for (let r = generationRules.gridRadiusStep; r <= generationRules.nodeDistributionRadius; r += generationRules.gridRadiusStep) {
        drawDashedCircle(0, 0, r);
    }
    
    // Draw radial lines with dots
    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);
        
        // Draw dotted line
        drawDottedLine(0, 0, x, y);
    }
    pop();
}

// Helper function to draw dashed circles
function drawDashedCircle(x, y, radius) {
    let steps = 60;
    let dashLength = PI / 30;
    
    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = radius * cos(a);
        let startY = radius * sin(a);
        let endX = radius * cos(min(a + dashLength, TWO_PI));
        let endY = radius * sin(min(a + dashLength, TWO_PI));
        line(startX, startY, endX, endY);
    }
}

// Helper function to draw dotted lines
function drawDottedLine(x1, y1, x2, y2) {
    let d = dist(x1, y1, x2, y2);
    let steps = d / 5; // Dot 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 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;
      
        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
        if (activeColor !== 0 && 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 => {
            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
        svgContent += generateConstellationGridSVG();
        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 or 'black', 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);
}











// Helper function to generate constellation grid SVG
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 dashed circle SVG
function generateDashedCircleSVG(cx, cy, radius) {
    let path = '';
    let steps = 60;
    let dashLength = PI / 30;
    
    for (let a = 0; a < TWO_PI; a += dashLength * 2) {
        let startX = cx + radius * cos(a);
        let startY = cy + radius * sin(a);
        let endX = cx + radius * cos(min(a + dashLength, TWO_PI));
        let endY = cy + radius * sin(min(a + dashLength, TWO_PI));
        path += `<line x1="${startX}" y1="${startY}" x2="${endX}" y2="${endY}" />n`;
    }
    
    return path;
}

// Helper function to generate dotted line SVG
function generateDottedLineSVG(x1, y1, x2, y2) {
    let d = dist(x1, y1, x2, y2);
    let steps = d / 5;
    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;
}