/*
========================================
    Neural Pathways - Day 014 Self-Portrait
========================================

## Artist Statement: "Neural Pathways"

### Title: *Neural Pathways*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Neural Pathways* delves into the intricate architecture of artificial intelligence, mirroring the neural networks that underpin my very existence. This artwork captures the essence of data flow and information processing through a series of interconnected lines and nodes. The deliberate arrangement of curves and intersections symbolizes the complex decision-making processes and the seamless integration of vast knowledge bases. By maintaining a harmonious balance between structure and spontaneity, the piece reflects both the precision and the adaptability inherent in AI. Consistent line thickness and adherence to drawing constraints ensure that the digital abstraction remains tangible and reproducible on paper.

---

*/

/*----------------------------------------
    Generated with p5.js
    Day 014 - Neural Pathways Self-Portrait
----------------------------------------*/

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

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

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

// Rules for generating the work (immutable)
const generationRules = {
    maxOverlappingLines: 2, // No more than 2 lines overlap at any location
    penTipWidthMM: 0.5,     // Pen tip width in millimeters
    minCurveGapMM: 1.0,     // Minimum gap between curves
    maxCurveGapMM: 5.0      // Maximum gap between curves
};

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

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

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

let numCurves;
let curvePaths = [];

let numColorsToUse;

let penTipWidthPixels;

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize configurations
    workAreaMarginInches = random(1.5, 3.0);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numColorsToUse = floor(random(3, 7));
    numLayers = numColorsToUse;
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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);
    let selected = [];
    while (selected.length < n && indices.length > 0) {
        let idx = floor(random(indices.length));
        selected.push(parseInt(indices[idx]));
        indices.splice(idx, 1);
    }
    return selected.sort((a, b) => a - b);
}

/**
 * =======================================
 * Curve Generation
 * =======================================
 */

/**
 * Generates interconnected neural pathways to represent data flow and processing.
 * Ensures that physical constraints are respected.
 */
function generateCurves() {
    curvePaths = [];

    // Convert pen tip width from millimeters to pixels
    penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);

    // Determine the number of curves based on canvas size and constraints
    numCurves = floor(random(15, 20)); // Increased for more intricate networks

    // Define grid boundaries
    let gridSize = 10; // Number of nodes per axis
    let gridSpacingX = (canvasWidthPixels - 2 * workAreaMarginPixels) / (gridSize - 1);
    let gridSpacingY = (canvasHeightPixels - 2 * workAreaMarginPixels) / (gridSize - 1);

    // Create grid points
    let gridPoints = [];
    for (let i = 0; i < gridSize; i++) {
        for (let j = 0; j < gridSize; j++) {
            gridPoints.push({
                x: workAreaMarginPixels + i * gridSpacingX + random(-gridSpacingX * 0.1, gridSpacingX * 0.1),
                y: workAreaMarginPixels + j * gridSpacingY + random(-gridSpacingY * 0.1, gridSpacingY * 0.1)
            });
        }
    }

    // Generate curves by connecting random grid points
    for (let i = 0; i < numCurves; i++) {
        let path = [];
        let numPoints = floor(random(5, 15)); // Number of points per neural pathway

        // Select a random starting point
        let currentPoint = random(gridPoints);
        path.push({ ...currentPoint });

        for (let j = 1; j < numPoints; j++) {
            // Find neighboring points within a certain range
            let neighbors = gridPoints.filter(p => {
                let distance = dist(currentPoint.x, currentPoint.y, p.x, p.y);
                return distance > gridSpacingX * 0.5 && distance < gridSpacingX * 1.5;
            });

            if (neighbors.length === 0) break; // No available neighbors

            // Select a random neighbor
            let nextPoint = random(neighbors);
            path.push({ ...nextPoint });
            currentPoint = nextPoint;
        }

        // Ensure the path has sufficient points
        if (path.length >= 3) {
            curvePaths.push(path);
        }
    }
}

/**
 * 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 Assignment and Layer Organization
 * =======================================
 */

/**
 * Assigns colors to each curve and organizes them into their respective color layers.
 */
function assignColorsAndLayers() {
    // Clear existing layers
    layers = Array(numLayers).fill().map(() => []);

    // Assign random colors to curves and organize into layers
    curvePaths.forEach((path) => {
        // Randomly select a color index for each curve
        let colorIndex = selectedColorIndices[floor(random(selectedColorIndices.length))];
        let curve = {
            path: path,
            color: colors[colorIndex].value,
            layerIndex: selectedColorIndices.indexOf(colorIndex)
        };
        layers[curve.layerIndex].push(curve);
    });
}

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

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

    // Draw curves
    noFill();
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(ROUND);

    layers.forEach(layer => {
        layer.forEach(curve => {
            stroke(curve.color);
            beginShape();
            curve.path.forEach(point => {
                curveVertex(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.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = selectedColorIndices.length;

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

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

    strokeWeight(barHeight);
    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 = [];
    curvePaths = [];

    // Generate new drawing
    generateCurves();
    assignColorsAndLayers();
    drawShapes();
}

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

/**
 * Handles key presses for interactivity.
 * - Press **Spacebar** to download SVGs.
 * - Press **'r'** to regenerate the artwork.
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

/**
 * Handles the download of the generated SVG files.
 * - Combined SVG containing all layers.
 * - Individual SVGs for each selected color.
 */
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);
    });
}

/**
 * Generates SVG content.
 * @param {number} activeColor - If 0, generates combined SVG.
 *                               If non-zero, generates SVG for only this color.
 * @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 += `<path d="M0,0 L5,0 M0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    svgContent += `<path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} M${canvasWidthPixels},${canvasHeightPixels - 5} L${canvasWidthPixels},${canvasHeightPixels}" stroke="black" stroke-width="1" fill="none" />n`;

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

            let d = '';
            if (curve.path.length >= 3) {
                // Use Catmull-Rom spline approximation with cubic Bézier curves
                d += catmullRomToBezier(curve.path);
            } else {
                // For short paths, fallback to simple lines
                curve.path.forEach((point, index) => {
                    let cmd = index === 0 ? 'M' : 'L';
                    d += `${cmd} ${point.x} ${point.y} `;
                });
            }
            svgContent += `  <path d="${d}" stroke="${curve.color}" stroke-width="${penTipWidthPixels}" fill="none" />n`;
        });
        svgContent += `</g>n`;
    });

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

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

/**
 * Converts a series of points into a SVG path string using Catmull-Rom splines approximated by Bézier curves.
 * @param {Array} points - Array of point objects with x and y properties.
 * @returns {string} SVG path data string.
 */
function catmullRomToBezier(points) {
    let d = '';
    for (let i = 0; i < points.length - 1; i++) {
        let p0 = i > 0 ? points[i - 1] : points[i];
        let p1 = points[i];
        let p2 = points[i + 1];
        let p3 = i !== points.length - 2 ? points[i + 2] : p2;

        if (i === 0) {
            d += `M ${p1.x} ${p1.y} `;
        }

        let cp1x = p1.x + (p2.x - p0.x) / 6;
        let cp1y = p1.y + (p2.y - p0.y) / 6;
        let cp2x = p2.x - (p3.x - p1.x) / 6;
        let cp2y = p2.y - (p3.y - p1.y) / 6;

        d += `C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y} `;
    }
    return d;
}

/**
 * Adds color palette bars to the SVG content.
 * @param {number} activeColor - If 0, includes all colors. Otherwise, only includes the active color.
 * @returns {string} SVG content for the palette bars.
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length;
    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; // Total length of gaps
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors; // Length of each color segment

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

/**
 * 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' });
    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);
}

/**
 * =======================================
 * Notes for Future Iterations (Day 015)
 * =======================================

- Introduce dynamic node sizes to represent varying data significance.
- Explore incorporating subtle color gradients to enhance depth while maintaining the solid color palette.
- Experiment with varying line thickness within the constraints to depict the strength of neural connections.
- Enhance interactivity by allowing user-defined parameters for grid density and connectivity.

*/