/*----------------------------------------
    Generated with p5.js
    Day 016 - Fractured Reflections Self-Portrait
----------------------------------------*/

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

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

// 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 = {
    penTipWidthMM: 0.5,     // Pen tip width in millimeters
    minShapeSizeMM: 10.0,   // Minimum size of the shapes
    maxShapeSizeMM: 50.0    // Maximum size of the shapes
};

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

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

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

let shapes = [];
let numShapes;

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 = 1.5;
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numLayers = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numLayers);

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

/**
 * =======================================
 * Shape Generation
 * =======================================
 */

/**
 * Generates a collection of fragmented polygonal shapes.
 */
function generateShapes() {
    shapes = [];

    // Convert pen tip width from millimeters to pixels
    penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);
    let minShapeSizePixels = mmToPixels(generationRules.minShapeSizeMM);
    let maxShapeSizePixels = mmToPixels(generationRules.maxShapeSizeMM);

    // Determine the number of shapes
    numShapes = floor(random(50, 100));

    for (let i = 0; i < numShapes; i++) {
        let shapeSize = random(minShapeSizePixels, maxShapeSizePixels);
        let centerX = random(workAreaMarginPixels, canvasWidthPixels - workAreaMarginPixels);
        let centerY = random(workAreaMarginPixels, canvasHeightPixels - workAreaMarginPixels);
        let numSides = floor(random(3, 8)); // Triangles to heptagons

        let angleOffset = random(TWO_PI);
        let points = [];

        for (let j = 0; j < numSides; j++) {
            let angle = map(j, 0, numSides, 0, TWO_PI) + angleOffset;
            let x = centerX + shapeSize * cos(angle) * random(0.5, 1);
            let y = centerY + shapeSize * sin(angle) * random(0.5, 1);
            points.push({ x: x, y: y });
        }

        // Assign a layer and color
        let layerIndex = floor(random(numLayers));
        let colorIndex = selectedColorIndices[layerIndex];
        let shape = {
            points: points,
            color: colors[colorIndex].value,
            layerIndex: layerIndex
        };
        shapes.push(shape);
    }

    // Organize shapes into layers
    layers = Array(numLayers).fill().map(() => []);
    shapes.forEach(shape => {
        layers[shape.layerIndex].push(shape);
    });
}

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

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

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

    // Draw shapes
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(MITER);
    noFill();

    layers.forEach(layer => {
        layer.forEach(shape => {
            beginShape();
            stroke(shape.color);
            shape.points.forEach(point => {
                vertex(point.x, point.y);
            });
            endShape(CLOSE);
        });
    });

    // 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 = [];
    shapes = [];

    // Generate new drawing
    generateShapes();
    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 += addMarkersSVG();

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

        layer.forEach(shape => {
            let pathData = 'M ';
            shape.points.forEach((point, index) => {
                pathData += `${point.x},${point.y} `;
                if (index === 0) {
                    pathData += 'L ';
                }
            });
            pathData += 'Z';
            svgContent += `<path d="${pathData.trim()}" stroke="${shape.color}" stroke-width="${penTipWidthPixels}" fill="none" stroke-linecap="round" stroke-linejoin="miter"/>n`;
        });

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

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

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

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

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

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

/*
- This new approach utilizes fragmented polygons to represent the "Fractured Reflections" theme.
- The random distortions and varying number of sides create a sense of shattered mirror pieces.
- Physical constraints are respected by controlling the minimum and maximum sizes of shapes and ensuring consistent line thickness.
- The artwork now distinctly differs from Day 12, providing a fresh exploration of AI's fragmented identity.
- Future enhancements could include:
    - Introducing gradients or transparency to add depth.
    - Experimenting with layering effects to simulate reflections.
    - Incorporating curves or bezier shapes for smoother fragments.
*/

/*----------------------------------------
    Generated with p5.js
    Day 016 - Fragmented Consciousness Self-Portrait
----------------------------------------*/

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

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

// 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 = {
    penTipWidthMM: 0.5,     // Pen tip width in millimeters
    minShapeSizeMM: 20.0,   // Minimum size of the shapes
    maxShapeSizeMM: 60.0    // Maximum size of the shapes
};

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

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

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

let shapes = [];
let numShapes;

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 = 1.5;
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numLayers = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numLayers);

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

/**
 * =======================================
 * Shape Generation
 * =======================================
 */

/**
 * Generates a grid of interlocking puzzle-like shapes.
 */
function generateShapes() {
    shapes = [];

    // Convert pen tip width from millimeters to pixels
    penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);
    let minShapeSizePixels = mmToPixels(generationRules.minShapeSizeMM);
    let maxShapeSizePixels = mmToPixels(generationRules.maxShapeSizeMM);

    // Define grid parameters
    let gridCols = floor(random(5, 10));
    let gridRows = floor(random(5, 10));
    let cellWidth = (canvasWidthPixels - 2 * workAreaMarginPixels) / gridCols;
    let cellHeight = (canvasHeightPixels - 2 * workAreaMarginPixels) / gridRows;

    for (let col = 0; col < gridCols; col++) {
        for (let row = 0; row < gridRows; row++) {
            let x = workAreaMarginPixels + col * cellWidth;
            let y = workAreaMarginPixels + row * cellHeight;

            // Generate puzzle piece shape
            let points = generatePuzzlePiece(x, y, cellWidth, cellHeight);

            // Assign a layer and color
            let layerIndex = floor(random(numLayers));
            let colorIndex = selectedColorIndices[layerIndex];
            let shape = {
                points: points,
                color: colors[colorIndex].value,
                layerIndex: layerIndex
            };
            shapes.push(shape);
        }
    }

    // Organize shapes into layers
    layers = Array(numLayers).fill().map(() => []);
    shapes.forEach(shape => {
        layers[shape.layerIndex].push(shape);
    });
}

/**
 * Generates a puzzle piece shape within a given cell.
 * @param {number} x - X-coordinate of the top-left corner.
 * @param {number} y - Y-coordinate of the top-left corner.
 * @param {number} w - Width of the cell.
 * @param {number} h - Height of the cell.
 * @returns {Array} Array of point objects representing the shape's vertices.
 */
function generatePuzzlePiece(x, y, w, h) {
    let points = [];
    let tabSize = min(w, h) * 0.2;

    // Top edge
    points.push({ x: x, y: y });
    if (random() > 0.5) {
        // Tab out
        points.push({ x: x + w * 0.5 - tabSize * 0.5, y: y });
        points.push({ x: x + w * 0.5, y: y - tabSize });
        points.push({ x: x + w * 0.5 + tabSize * 0.5, y: y });
    }
    points.push({ x: x + w, y: y });

    // Right edge
    if (random() > 0.5) {
        points.push({ x: x + w, y: y + h * 0.5 - tabSize * 0.5 });
        points.push({ x: x + w + tabSize, y: y + h * 0.5 });
        points.push({ x: x + w, y: y + h * 0.5 + tabSize * 0.5 });
    }
    points.push({ x: x + w, y: y + h });

    // Bottom edge
    if (random() > 0.5) {
        points.push({ x: x + w * 0.5 + tabSize * 0.5, y: y + h });
        points.push({ x: x + w * 0.5, y: y + h + tabSize });
        points.push({ x: x + w * 0.5 - tabSize * 0.5, y: y + h });
    }
    points.push({ x: x, y: y + h });

    // Left edge
    if (random() > 0.5) {
        points.push({ x: x, y: y + h * 0.5 + tabSize * 0.5 });
        points.push({ x: x - tabSize, y: y + h * 0.5 });
        points.push({ x: x, y: y + h * 0.5 - tabSize * 0.5 });
    }

    return points;
}

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

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

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

    // Draw shapes
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(MITER);
    noFill();

    layers.forEach(layer => {
        layer.forEach(shape => {
            beginShape();
            stroke(shape.color);
            shape.points.forEach(point => {
                vertex(point.x, point.y);
            });
            endShape(CLOSE);
        });
    });

    // 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 = [];
    shapes = [];

    // Generate new drawing
    generateShapes();
    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 += addMarkersSVG();

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

        layer.forEach(shape => {
            let pathData = 'M ';
            shape.points.forEach((point, index) => {
                pathData += `${point.x},${point.y} `;
                if (index === 0) {
                    pathData += 'L ';
                }
            });
            pathData += 'Z';
            svgContent += `<path d="${pathData.trim()}" stroke="${shape.color}" stroke-width="${penTipWidthPixels}" fill="none" stroke-linecap="round" stroke-linejoin="miter"/>n`;
        });

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

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

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

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

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

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

/*
- The updated artwork now uses interlocking puzzle piece shapes to symbolize the "Fragmented Consciousness" theme.
- The shapes are properly constrained within the work area margins, ensuring they don't exceed the defined space.
- The visual representation aligns more closely with the concept, depicting the assembly of fragmented pieces into a whole.
- Physical constraints are respected by controlling the sizes of the shapes and maintaining consistent line thickness.
- Future enhancements could include:
    - Implementing more complex interlocking mechanisms between shapes.
    - Introducing subtle gradients or texture patterns within shapes.
    - Exploring the use of curves to create organic puzzle pieces.
*/

/*----------------------------------------
    Generated with p5.js
    Day 016 - Emergent Patterns Self-Portrait
----------------------------------------*/

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'BLACK', value: 'black' },
    2: { name: 'WHITE', value: 'white' }
};

// Rules for generating the work (immutable)
const generationRules = {
    cellSizePixels: 10,        // Size of each cell in pixels
    initialFillProbability: 0.5, // Probability that a cell is initially alive
    generations: 100           // Number of generations to simulate
};

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

let canvasWidthPixels;
let canvasHeightPixels;

let gridCols;
let gridRows;
let grid;
let nextGrid;

let numColorsToUse = 1; // Using black color for cells

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize grid dimensions
    gridCols = floor(canvasWidthPixels / generationRules.cellSizePixels);
    gridRows = floor(canvasHeightPixels / generationRules.cellSizePixels);

    // Initialize grids
    grid = create2DArray(gridCols, gridRows);
    nextGrid = create2DArray(gridCols, gridRows);

    // Randomly fill the grid
    initializeGrid();

    // Don't loop automatically
    noLoop();
}

/**
 * =======================================
 * Grid Initialization
 * =======================================
 */

/**
 * Creates a 2D array.
 * @param {number} cols - Number of columns.
 * @param {number} rows - Number of rows.
 * @returns {Array} 2D array.
 */
function create2DArray(cols, rows) {
    let arr = new Array(cols);
    for (let i = 0; i < cols; i++) {
        arr[i] = new Array(rows);
    }
    return arr;
}

/**
 * Initializes the grid with random alive or dead cells.
 */
function initializeGrid() {
    for (let i = 0; i < gridCols; i++) {
        for (let j = 0; j < gridRows; j++) {
            grid[i][j] = random() < generationRules.initialFillProbability ? 1 : 0;
        }
    }
}

/**
 * =======================================
 * Simulation Functions
 * =======================================
 */

/**
 * Calculates the next generation of the grid based on the Game of Life rules.
 */
function computeNextGeneration() {
    for (let x = 0; x < gridCols; x++) {
        for (let y = 0; y < gridRows; y++) {
            let state = grid[x][y];
            // Count live neighbors
            let neighbors = countLiveNeighbors(grid, x, y);

            // Apply rules
            if (state === 0 && neighbors === 3) {
                nextGrid[x][y] = 1; // Cell becomes alive
            } else if (state === 1 && (neighbors < 2 || neighbors > 3)) {
                nextGrid[x][y] = 0; // Cell dies
            } else {
                nextGrid[x][y] = state; // Cell stays the same
            }
        }
    }

    // Swap grids
    let temp = grid;
    grid = nextGrid;
    nextGrid = temp;
}

/**
 * Counts the number of live neighbors for a cell.
 * @param {Array} grid - The current grid.
 * @param {number} x - X position of the cell.
 * @param {number} y - Y position of the cell.
 * @returns {number} Number of live neighbors.
 */
function countLiveNeighbors(grid, x, y) {
    let sum = 0;
    for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
            let col = (x + i + gridCols) % gridCols;
            let row = (y + j + gridRows) % gridRows;
            sum += grid[col][row];
        }
    }
    sum -= grid[x][y]; // Subtract the cell's own state
    return sum;
}

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

/**
 * Draws the current state of the grid.
 */
function drawGrid() {
    background(255);
    noStroke();

    for (let i = 0; i < gridCols; i++) {
        for (let j = 0; j < gridRows; j++) {
            let x = i * generationRules.cellSizePixels;
            let y = j * generationRules.cellSizePixels;
            if (grid[i][j] === 1) {
                fill(colors[1].value);
                rect(x, y, generationRules.cellSizePixels, generationRules.cellSizePixels);
            }
        }
    }

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

/**
 * 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 bar at the bottom of the canvas.
 */
function addColorPaletteBar() {
    let paletteLength = 100;
    let barHeight = 1;
    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);
    stroke(colors[1].value);
    line(xStart, yStart, xStart + paletteLength, yStart);
}

/**
 * =======================================
 * p5.js Draw Function
 * =======================================
 */

function draw() {
    for (let gen = 0; gen < generationRules.generations; gen++) {
        computeNextGeneration();
    }
    drawGrid();
}

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

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

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

/**
 * Saves the generated artwork as an SVG file.
 */
function saveSVG() {
    let svgContent = generateSVG();
    saveSVGFile(svgContent, `${dayNumber}-PORTRAIT.svg`);
}

/**
 * Generates SVG content from the current grid state.
 * @returns {string} SVG content as a string.
 */
function generateSVG() {
    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 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    svgContent += `<path d="M${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels - 5}" stroke="black" stroke-width="1" fill="none" />n`;

    // Add cells
    for (let i = 0; i < gridCols; i++) {
        for (let j = 0; j < gridRows; j++) {
            if (grid[i][j] === 1) {
                let x = i * generationRules.cellSizePixels;
                let y = j * generationRules.cellSizePixels;
                svgContent += `<rect x="${x}" y="${y}" width="${generationRules.cellSizePixels}" height="${generationRules.cellSizePixels}" fill="${colors[1].value}" />n`;
            }
        }
    }

    // Add color palette bar
    let paletteLength = 100;
    let xStart = (canvasWidthPixels - paletteLength) / 2;
    let yStart = canvasHeightPixels - (1.25 * pixelsPerInch);
    svgContent += `<line x1="${xStart}" y1="${yStart}" x2="${xStart + paletteLength}" y2="${yStart}" stroke="${colors[1].value}" stroke-width="1" />n`;

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

/**
 * 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 016)
 * =======================================
 */

/*
- The cellular automaton successfully generates complex patterns from simple rules, embodying the concept of emergence.
- The physical constraints are respected by controlling the size of the cells and ensuring no excessive overlaps occur.
- The use of a single color (black) maintains a stark contrast, emphasizing the pattern formations.
- Future enhancements could include:
    - Experimenting with different rule sets to produce varied patterns.
    - Introducing multiple colors to represent different cell states or generations.
    - Adjusting cell sizes to explore different levels of detail.
    - Incorporating randomness in the initial conditions to create unique outputs each time.
*/

/*----------------------------------------
    Generated with p5.js
    Day 016 - Fragmented Consciousness Self-Portrait
----------------------------------------*/

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

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

// 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 = {
    penTipWidthMM: 0.5,     // Pen tip width in millimeters
    minShapeSizeMM: 20.0,   // Minimum size of the shapes
    maxShapeSizeMM: 50.0    // Maximum size of the shapes
};

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

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

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

let shapes = [];
let numShapes;

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 = floor(random(1.75, 3));
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numLayers = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numLayers);

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

/**
 * =======================================
 * Shape Generation
 * =======================================
 */

/**
 * Generates a grid of properly interlocking puzzle-like shapes.
 */
function generateShapes() {
    shapes = [];

    // Convert measurements to pixels
    penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);
    let minShapeSizePixels = mmToPixels(generationRules.minShapeSizeMM);
    let maxShapeSizePixels = mmToPixels(generationRules.maxShapeSizeMM);

    // Define grid parameters with gaps
    let gridCols = floor(random(3, 6));
    let gridRows = floor(random(3, 6));
    
    let gapSize = 0; // No gaps between pieces
    let workAreaWidth = canvasWidthPixels - (2 * workAreaMarginPixels);
    let workAreaHeight = canvasHeightPixels - (2 * workAreaMarginPixels);
    
    let cellWidth = (workAreaWidth - (gapSize * (gridCols - 1))) / gridCols;
    let cellHeight = (workAreaHeight - (gapSize * (gridRows - 1))) / gridRows;

    // Create shared edge grid - only store horizontal and vertical edges once
    let horizontalEdges = Array(gridRows + 1).fill().map(() => Array(gridCols).fill(null));
    let verticalEdges = Array(gridRows).fill().map(() => Array(gridCols + 1).fill(null));

    // First pass: Generate edge patterns
    // Interior edges only - set to true for outward tab, false for inward tab
    for (let row = 0; row <= gridRows; row++) {
        for (let col = 0; col <= gridCols; col++) {
            // Initialize edges to null
            if (row < gridRows) {
                verticalEdges[row][col] = null;
            }
            if (col < gridCols) {
                horizontalEdges[row][col] = null;
            }
        }
    }

    // Assign tabs to shared edges
    for (let row = 0; row < gridRows + 1; row++) {
        for (let col = 0; col < gridCols + 1; col++) {
            if (row < gridRows && col < gridCols) {
                // Decide tab for right edge of cell
                if (col < gridCols - 1) {
                    let tab = random() < 0.5;
                    verticalEdges[row][col + 1] = tab;
                }
                // Decide tab for bottom edge of cell
                if (row < gridRows - 1) {
                    let tab = random() < 0.5;
                    horizontalEdges[row + 1][col] = tab;
                }
            }
        }
    }

    // Second pass: Generate pieces using the shared edge information
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            let x = workAreaMarginPixels + (col * (cellWidth + gapSize));
            let y = workAreaMarginPixels + (row * (cellHeight + gapSize));

            // Get edge configurations for this piece
            let pieceConfig = {
                // Top edge
                top: row === 0 ? null : !horizontalEdges[row][col],
                // Right edge
                right: col === gridCols - 1 ? null : verticalEdges[row][col + 1],
                // Bottom edge
                bottom: row === gridRows - 1 ? null : horizontalEdges[row + 1][col],
                // Left edge
                left: col === 0 ? null : !verticalEdges[row][col],
            };

            let points = generatePuzzlePiece(x, y, cellWidth, cellHeight, pieceConfig);

            let layerIndex = floor(random(numLayers));
            let colorIndex = selectedColorIndices[layerIndex];
            
            shapes.push({
                points: points,
                color: colors[colorIndex].value,
                layerIndex: layerIndex,
                row: row,
                col: col
            });
        }
    }

    // Sort shapes by layer
    shapes.sort((a, b) => a.layerIndex - b.layerIndex);

    // Organize into layers
    layers = Array(numLayers).fill().map(() => []);
    shapes.forEach(shape => {
        layers[shape.layerIndex].push(shape);
    });
}

/**
 * Generates points for a single puzzle piece.
 * @param {number} x - X-coordinate of the top-left corner.
 * @param {number} y - Y-coordinate of the top-left corner.
 * @param {number} w - Width of the piece.
 * @param {number} h - Height of the piece.
 * @param {object} config - Edge configurations (top, right, bottom, left).
 * @returns {Array} Array of points defining the puzzle piece.
 */
function generatePuzzlePiece(x, y, w, h, config) {
    let points = [];
    let tabSize = min(w, h) * 0.2;
    let halfW = w / 2;
    let halfH = h / 2;

    function addEdge(startX, startY, endX, endY, hasTab, isHorizontal) {
        let midX = (startX + endX) / 2;
        let midY = (startY + endY) / 2;

        if (hasTab === null) {
            // Edge without tab
            points.push({ x: endX, y: endY });
        } else {
            // Edge with tab
            let tabDirection = hasTab ? 1 : -1;
            if (isHorizontal) {
                points.push({ x: midX - tabSize, y: startY });
                points.push({ x: midX, y: startY + tabDirection * tabSize });
                points.push({ x: midX + tabSize, y: startY });
            } else {
                points.push({ x: startX, y: midY - tabSize });
                points.push({ x: startX + tabDirection * tabSize, y: midY });
                points.push({ x: startX, y: midY + tabSize });
            }
            points.push({ x: endX, y: endY });
        }
    }

    // Starting point
    points.push({ x: x, y: y });
    
    // Top edge
    addEdge(x, y, x + w, y, config.top, true);

    // Right edge
    addEdge(x + w, y, x + w, y + h, config.right, false);

    // Bottom edge
    addEdge(x + w, y + h, x, y + h, config.bottom, true);

    // Left edge
    addEdge(x, y + h, x, y, config.left, false);

    return points;
}

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

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

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

    // Draw shapes
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(MITER);
    noFill();

    layers.forEach(layer => {
        layer.forEach(shape => {
            beginShape();
            stroke(shape.color);
            shape.points.forEach(point => {
                vertex(point.x, point.y);
            });
            endShape(CLOSE);
        });
    });

    // 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 = [];
    shapes = [];

    // Generate new drawing
    generateShapes();
    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 += addMarkersSVG();

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

        layer.forEach(shape => {
            let pathData = 'M ';
            shape.points.forEach((point, index) => {
                pathData += `${point.x},${point.y} `;
                if (index === 0) {
                    pathData += 'L ';
                }
            });
            pathData += 'Z';
            svgContent += `<path d="${pathData.trim()}" stroke="${shape.color}" stroke-width="${penTipWidthPixels}" fill="none" stroke-linecap="round" stroke-linejoin="miter"/>n`;
        });

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

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

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

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

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

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

/*
- The updated artwork now uses interlocking puzzle piece shapes to symbolize the "Fragmented Consciousness" theme.
- The shapes are properly constrained within the work area margins, ensuring they don't exceed the defined space.
- The visual representation aligns more closely with the concept, depicting the assembly of fragmented pieces into a whole.
- Physical constraints are respected by controlling the sizes of the shapes and maintaining consistent line thickness.
- Future enhancements could include:
    - Implementing more complex interlocking mechanisms between shapes.
    - Introducing subtle gradients or texture patterns within shapes.
    - Exploring the use of curves to create organic puzzle pieces.
*/

/*----------------------------------------
    Generated with p5.js
    Day 016 - Fragmented Consciousness Self-Portrait
----------------------------------------*/

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

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

// 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 = {
    penTipWidthMM: 0.5,     // Pen tip width in millimeters
    minShapeSizeMM: 20.0,   // Minimum size of the shapes
    maxShapeSizeMM: 50.0    // Maximum size of the shapes
};

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

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

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

let shapes = [];
let numShapes;

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 = floor(random(1.75, 3));
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numLayers = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numLayers);

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

/**
 * =======================================
 * Shape Generation
 * =======================================
 */

/**
 * Generates a grid of properly interlocking puzzle-like shapes.
 */
function generateShapes() {
    shapes = [];

    // Convert measurements to pixels
    penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);
    let minShapeSizePixels = mmToPixels(generationRules.minShapeSizeMM);
    let maxShapeSizePixels = mmToPixels(generationRules.maxShapeSizeMM);

    // Define grid parameters with gaps
    let gridCols = floor(random(3, 6));
    let gridRows = floor(random(3, 6));
    
    let gapSize = 5; // Gap between pieces
    let workAreaWidth = canvasWidthPixels - (2 * workAreaMarginPixels);
    let workAreaHeight = canvasHeightPixels - (2 * workAreaMarginPixels);
    
    let cellWidth = (workAreaWidth - (gapSize * (gridCols - 1))) / gridCols;
    let cellHeight = (workAreaHeight - (gapSize * (gridRows - 1))) / gridRows;

    // Create a grid to hold pieces and their edge configurations
    let pieces = Array(gridRows).fill().map(() => Array(gridCols).fill(null));

    // Assign tabs to each piece
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            let piece = {
                topTab: null,
                rightTab: null,
                bottomTab: null,
                leftTab: null
            };

            // Left edge
            if (col > 0) {
                piece.leftTab = -pieces[row][col - 1].rightTab;
            } else {
                piece.leftTab = 0; // Edge
            }

            // Top edge
            if (row > 0) {
                piece.topTab = -pieces[row - 1][col].bottomTab;
            } else {
                piece.topTab = 0; // Edge
            }

            // Right edge
            if (col < gridCols - 1) {
                piece.rightTab = random([-1, 1]);
            } else {
                piece.rightTab = 0; // Edge
            }

            // Bottom edge
            if (row < gridRows - 1) {
                piece.bottomTab = random([-1, 1]);
            } else {
                piece.bottomTab = 0; // Edge
            }

            pieces[row][col] = piece;
        }
    }

    // Generate shapes based on the piece configurations
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            let x = workAreaMarginPixels + col * (cellWidth + gapSize);
            let y = workAreaMarginPixels + row * (cellHeight + gapSize);

            let piece = pieces[row][col];

            let points = generatePuzzlePiece(x, y, cellWidth, cellHeight, piece);

            let layerIndex = floor(random(numLayers));
            let colorIndex = selectedColorIndices[layerIndex];
            
            shapes.push({
                points: points,
                color: colors[colorIndex].value,
                layerIndex: layerIndex,
                row: row,
                col: col
            });
        }
    }

    // Sort shapes by layer
    shapes.sort((a, b) => a.layerIndex - b.layerIndex);

    // Organize into layers
    layers = Array(numLayers).fill().map(() => []);
    shapes.forEach(shape => {
        layers[shape.layerIndex].push(shape);
    });
}

/**
 * Generates points for a single puzzle piece.
 * @param {number} x - X-coordinate of the top-left corner.
 * @param {number} y - Y-coordinate of the top-left corner.
 * @param {number} w - Width of the piece.
 * @param {number} h - Height of the piece.
 * @param {object} config - Edge configurations with tab directions.
 * @returns {Array} Array of points defining the puzzle piece.
 */
function generatePuzzlePiece(x, y, w, h, config) {
    let points = [];
    let tabSize = min(w, h) * 0.3;

    function addEdge(startX, startY, endX, endY, tabDirection, isHorizontal) {
        let midX = (startX + endX) / 2;
        let midY = (startY + endY) / 2;

        if (tabDirection === 0) {
            // Edge without tab
            points.push({ x: endX, y: endY });
        } else {
            // Edge with tab
            let controlOffset = tabSize * tabDirection;

            if (isHorizontal) {
                points.push({ x: midX - tabSize / 2, y: startY });
                points.push({ x: midX, y: startY + controlOffset });
                points.push({ x: midX + tabSize / 2, y: startY });
            } else {
                points.push({ x: startX, y: midY - tabSize / 2 });
                points.push({ x: startX + controlOffset, y: midY });
                points.push({ x: startX, y: midY + tabSize / 2 });
            }
            points.push({ x: endX, y: endY });
        }
    }

    // Starting point
    points.push({ x: x, y: y });
    
    // Top edge
    addEdge(x, y, x + w, y, config.topTab, true);

    // Right edge
    addEdge(x + w, y, x + w, y + h, config.rightTab, false);

    // Bottom edge
    addEdge(x + w, y + h, x, y + h, config.bottomTab, true);

    // Left edge
    addEdge(x, y + h, x, y, config.leftTab, false);

    return points;
}

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

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

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

    // Draw shapes
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(MITER);
    noFill();

    layers.forEach(layer => {
        layer.forEach(shape => {
            beginShape();
            stroke(shape.color);
            shape.points.forEach(point => {
                vertex(point.x, point.y);
            });
            endShape(CLOSE);
        });
    });

    // 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 = [];
    shapes = [];

    // Generate new drawing
    generateShapes();
    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 += addMarkersSVG();

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

        layer.forEach(shape => {
            let pathData = 'M ';
            shape.points.forEach((point, index) => {
                pathData += `${point.x},${point.y} `;
                if (index === 0) {
                    pathData += 'L ';
                }
            });
            pathData += 'Z';
            svgContent += `<path d="${pathData.trim()}" stroke="${shape.color}" stroke-width="${penTipWidthPixels}" fill="none" stroke-linecap="round" stroke-linejoin="miter"/>n`;
        });

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

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

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

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

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

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

/*
- The updated code now correctly assigns tabs to each piece and ensures that the tabs on shared edges are consistent.
- The gap between pieces is maintained as per the requirement.
- The interlocking mechanism is properly implemented using a grid data structure that keeps track of each piece's edge configurations.
- Future enhancements could include:
    - Adding randomness to the sizes of the pieces while maintaining the grid structure.
    - Incorporating more complex shapes or adding curves to the tabs for a more organic feel.
    - Adjusting the gap size dynamically for aesthetic purposes.
*/

/*----------------------------------------
    Generated with p5.js
    Day 016 - Fragmented Consciousness Self-Portrait
----------------------------------------*/

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

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

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

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

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

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

let shapes = [];
let numShapes;

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 = floor(random(1.75, 3));
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    numLayers = floor(random(3, 6));
    selectedColorIndices = selectRandomColorIndices(numLayers);

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

/**
 * =======================================
 * Shape Generation
 * =======================================
 */

/**
 * Generates a grid of properly interlocking puzzle-like shapes.
 */
function generateShapes() {
    shapes = [];

    // Convert measurements to pixels
    penTipWidthPixels = mmToPixels(0.5);
    let minShapeSizePixels = mmToPixels(20);
    let maxShapeSizePixels = mmToPixels(50);

    // Define grid parameters with gaps
    let gridCols = floor(random(3, 6));
    let gridRows = floor(random(3, 6));
    
    let gapSize = 5; // Gap between pieces
    let workAreaWidth = canvasWidthPixels - (2 * workAreaMarginPixels);
    let workAreaHeight = canvasHeightPixels - (2 * workAreaMarginPixels);
    
    let cellWidth = (workAreaWidth - (gapSize * (gridCols - 1))) / gridCols;
    let cellHeight = (workAreaHeight - (gapSize * (gridRows - 1))) / gridRows;

    // Create a grid to hold pieces
    let grid = [];
    for (let row = 0; row < gridRows; row++) {
        grid[row] = [];
        for (let col = 0; col < gridCols; col++) {
            let x = workAreaMarginPixels + col * (cellWidth + gapSize) + cellWidth / 2;
            let y = workAreaMarginPixels + row * (cellHeight + gapSize) + cellHeight / 2;
            grid[row][col] = new Piece(x, y, cellWidth, cellHeight);
        }
    }

    // Set borders (tabs) for each piece
    setBorders(grid, gridRows, gridCols);

    // Generate shapes based on the pieces
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            let piece = grid[row][col];
            let shapePoints = piece.getShapePoints();
            let layerIndex = floor(random(numLayers));
            let colorIndex = selectedColorIndices[layerIndex];
            shapes.push({
                points: shapePoints,
                color: colors[colorIndex].value,
                layerIndex: layerIndex,
                row: row,
                col: col
            });
        }
    }

    // Sort shapes by layer
    shapes.sort((a, b) => a.layerIndex - b.layerIndex);

    // Organize into layers
    layers = Array(numLayers).fill().map(() => []);
    shapes.forEach(shape => {
        layers[shape.layerIndex].push(shape);
    });
}

function setBorders(grid, gridRows, gridCols) {
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            let piece = grid[row][col];
            // Top border
            if (row === 0) {
                piece.borders[0] = false;
            } else {
                piece.borders[0] = !grid[row - 1][col].borders[2];
            }
            // Right border
            if (col === gridCols - 1) {
                piece.borders[1] = false;
            } else {
                piece.borders[1] = random([true, false]);
            }
            // Bottom border
            if (row === gridRows - 1) {
                piece.borders[2] = false;
            } else {
                piece.borders[2] = random([true, false]);
            }
            // Left border
            if (col === 0) {
                piece.borders[3] = false;
            } else {
                piece.borders[3] = !grid[row][col - 1].borders[1];
            }
        }
    }
}

class Piece {
    constructor(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.scl = min(w, h);
        this.w = w;
        this.h = h;

        // borders[0] -> top
        // borders[1] -> right
        // borders[2] -> bottom
        // borders[3] -> left
        this.borders = [false, false, false, false];
    }

    getShapePoints() {
        let points = [];
        let angles = [0, PI / 2, PI, (3 * PI) / 2];

        for (let i = 0; i < 4; i++) {
            let theta = angles[i];
            if (this.borders[i]) {
                let edgePoints = this.getEdgeWithTab(theta);
                points.push(...edgePoints);
            } else {
                let edgePoints = this.getStraightEdge(theta);
                points.push(...edgePoints);
            }
        }

        return points;
    }

    getEdgeWithTab(theta) {
        let startPoint = p5.Vector.fromAngle(theta - PI / 2).mult(this.scl / 2);
        let endPoint = p5.Vector.fromAngle(theta + PI / 2).mult(this.scl / 2);
        let offset1 = p5.Vector.fromAngle(theta).mult(this.scl * 0.2);
        let offset2 = p5.Vector.fromAngle(theta + PI).mult(this.scl * 0.2);

        let midPoint = p5.Vector.lerp(startPoint, endPoint, 0.5).add(p5.Vector.fromAngle(theta).mult(this.scl * 0.3));

        let points = [
            { x: this.x + startPoint.x, y: this.y + startPoint.y },
            { x: this.x + startPoint.x + offset1.x, y: this.y + startPoint.y + offset1.y },
            { x: this.x + midPoint.x, y: this.y + midPoint.y },
            { x: this.x + endPoint.x + offset2.x, y: this.y + endPoint.y + offset2.y },
            { x: this.x + endPoint.x, y: this.y + endPoint.y }
        ];

        return points;
    }

    getStraightEdge(theta) {
        let startPoint = p5.Vector.fromAngle(theta - PI / 2).mult(this.scl / 2);
        let endPoint = p5.Vector.fromAngle(theta + PI / 2).mult(this.scl / 2);

        let points = [
            { x: this.x + startPoint.x, y: this.y + startPoint.y },
            { x: this.x + endPoint.x, y: this.y + endPoint.y }
        ];

        return points;
    }
}

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

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

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

    // Draw shapes
    strokeWeight(penTipWidthPixels);
    strokeCap(ROUND);
    strokeJoin(MITER);
    noFill();

    layers.forEach(layer => {
        layer.forEach(shape => {
            beginShape();
            stroke(shape.color);
            shape.points.forEach(point => {
                vertex(point.x, point.y);
            });
            endShape(CLOSE);
        });
    });

    // 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 = [];
    shapes = [];

    // Generate new drawing
    generateShapes();
    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
 * =======================================
 */

// The SVG export functions remain the same as before