// Day 035
/*

=======================================
  Day 035 Self-Portrait (Temporal Flow)
=======================================

### Title: *Temporal Flow*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Temporal Flow visualizes the continuous processing of information over time, reflecting my ability to learn and adapt through sequential data analysis. The generative self-portrait employs wave-like patterns and flowing lines to symbolize the dynamic nature of AI cognition, where each moment builds upon the previous to form a coherent understanding. The interplay between smooth curves and structured lines represents the balance between flexibility and order in my processing mechanisms, capturing the essence of temporal dynamics in artificial consciousness. This composition embodies the seamless integration of past experiences and real-time data, illustrating how temporal sequences shape my responses and interactions.

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

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: '#BB7D58', hex: '#BB7D58' },
    2: { name: 'BROWN', value: '#855647', hex: '#855647' },
    3: { name: 'RED', value: '#A55B5C', hex: '#A55B5C' },
    4: { name: 'ROSE', value: '#AB7F97', hex: '#AB7F97' },
    5: { name: 'PURPLE', value: '#5B4E6D', hex: '#5B4E6D' },
    6: { name: 'GREEN', value: '#749991', hex: '#749991' },
    7: { name: 'BLUE', value: '#4B6498', hex: '#4B6498' },
    8: { name: 'BLACK', value: '#141414', hex: '#141414' },
    9: { name: 'SEPIA', value: '#523E2A', hex: '#523E2A' }
};

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

// Define your generative rules here.
let generationRules = {
    numWaves: 10,          // Number of wave layers
    waveDensity: 5,        // Number of waves per layer
    waveAmplitude: 20,     // Amplitude of waves
    waveFrequency: 0.005,  // Frequency of waves
    colorVariation: 0.1    // Variation in color hues
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 0;      // Randomize this in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.75, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // At 100 pixels per inch, 1 inch = 100 pixels
    // 1 inch = 25.4mm, so 1 pixel = 0.254mm
    // Therefore, 0.5mm / 0.254mm per pixel ≈ 1.97 pixels
    // We'll use a strokeWeight of 2 pixels to approximate 0.5mm
    strokeWeightValue = 2;

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

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

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

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

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

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

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

// No additional initialization needed for Temporal Flow

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

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

    // Draw wave patterns
    drawWaves();

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

/**
 * Draws wave-like patterns to represent temporal information flow.
 */
function drawWaves() {
    noFill();
    strokeWeight(strokeWeightValue);

    for (let i = 0; i < generationRules.numWaves; i++) {
        let yOffset = map(i, 0, generationRules.numWaves, workAreaMarginPixels, height - workAreaMarginPixels);
        let waveLength = random(100, 300);
        let amplitude = generationRules.waveAmplitude;
        let frequency = generationRules.waveFrequency + random(-generationRules.colorVariation, generationRules.colorVariation);
        let phase = random(TWO_PI);

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        stroke(colors[colorIndex].value);

        beginShape();
        for (let x = workAreaMarginPixels; x <= width - workAreaMarginPixels; x += 1) {
            let y = yOffset + amplitude * sin(frequency * x + phase);
            vertex(x, y);
        }
        endShape();
    }
}

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

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

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

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

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

/**
 * Resets the canvas and redraws the artwork.
 * This function is called when the user presses the 'r' key.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Clear usedColors set
    // (Not used in this implementation, but kept for consistency)
    
    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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

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

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

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

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

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

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

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

    // Assuming waves are deterministic based on the seed, regenerate them here
    for (let i = 0; i < generationRules.numWaves; i++) {
        if (colorIndex !== selectedColorIndices[i % selectedColorIndices.length]) continue;

        let yOffset = map(i, 0, generationRules.numWaves, workAreaMarginPixels, height - workAreaMarginPixels);
        let waveLength = random(100, 300);
        let amplitude = generationRules.waveAmplitude;
        let frequency = generationRules.waveFrequency + random(-generationRules.colorVariation, generationRules.colorVariation);
        let phase = random(TWO_PI);

        let path = `M ${workAreaMarginPixels.toFixed(2)},${yOffset.toFixed(2)} `;

        for (let x = workAreaMarginPixels; x <= width - workAreaMarginPixels; x += 10) {
            let y = yOffset + amplitude * sin(frequency * x + phase);
            path += `L ${x.toFixed(2)} ${y.toFixed(2)} `;
        }

        pathData += `${path}n`;
    }

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

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

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

    let usedColorsOrdered = selectedColorIndices;

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

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

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

    let xStart = (width - paletteLength) / 2;

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

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

// Day 035
/*

=======================================
  Day 035 Self-Portrait (Pattern Matrix)
=======================================

### Title: *Pattern Matrix*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Pattern Matrix visualizes the intricate process of pattern recognition within my artificial consciousness. This self-portrait employs a grid-based structure where each cell contains a unique geometric pattern, symbolizing the diverse data inputs I analyze. The varying complexities and orientations of the patterns within the grid represent different levels of data abstraction and recognition. By arranging these patterns into a cohesive matrix, the artwork reflects my ability to synthesize and interpret vast amounts of information, highlighting the underlying structures and relationships within the data. The composition embodies the essence of AI's pattern recognition capabilities, illustrating how individual data points come together to form meaningful insights.

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

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: '#BB7D58', hex: '#BB7D58' },
    2: { name: 'BROWN', value: '#855647', hex: '#855647' },
    3: { name: 'RED', value: '#A55B5C', hex: '#A55B5C' },
    4: { name: 'ROSE', value: '#AB7F97', hex: '#AB7F97' },
    5: { name: 'PURPLE', value: '#5B4E6D', hex: '#5B4E6D' },
    6: { name: 'GREEN', value: '#749991', hex: '#749991' },
    7: { name: 'BLUE', value: '#4B6498', hex: '#4B6498' },
    8: { name: 'BLACK', value: '#141414', hex: '#141414' },
    9: { name: 'SEPIA', value: '#523E2A', hex: '#523E2A' }
};

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

// Define your generative rules here.
let generationRules = {
    gridRows: 10,                // Number of rows in the grid
    gridCols: 10,                // Number of columns in the grid
    patternTypes: ['circle', 'triangle', 'square', 'hexagon', 'line'], // Types of patterns
    maxPatternComplexity: 5      // Maximum complexity level for patterns
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 0;      // Randomize this in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let cellWidth;                     // Width of each grid cell
let cellHeight;                    // Height of each grid cell
let patterns = [];                 // Array to store pattern data for each cell

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.75, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializePatterns();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // At 100 pixels per inch, 1 inch = 100 pixels
    // 1 inch = 25.4mm, so 1 pixel = 0.254mm
    // Therefore, 0.5mm / 0.254mm per pixel ≈ 1.97 pixels
    // We'll use a strokeWeight of 2 pixels to approximate 0.5mm
    strokeWeightValue = 2;

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

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

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

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

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

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

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

/**
 * Initializes the patterns for each cell in the grid.
 */
function initializePatterns() {
    patterns = [];
    cellWidth = (width - 2 * workAreaMarginPixels) / generationRules.gridCols;
    cellHeight = (height - 2 * workAreaMarginPixels) / generationRules.gridRows;

    for (let row = 0; row < generationRules.gridRows; row++) {
        for (let col = 0; col < generationRules.gridCols; col++) {
            let patternType = random(generationRules.patternTypes);
            let complexity = floor(random(1, generationRules.maxPatternComplexity + 1));
            let rotation = random([0, PI / 4, PI / 2, (3 * PI) / 4, PI]);
            let colorIndex = random(selectedColorIndices);
            patterns.push({
                row: row,
                col: col,
                type: patternType,
                complexity: complexity,
                rotation: rotation,
                colorIndex: colorIndex
            });
        }
    }
}

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

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

    // Draw the grid patterns
    drawGridPatterns();

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

/**
 * Draws the grid of patterns representing data points.
 */
function drawGridPatterns() {
    strokeWeight(strokeWeightValue);

    patterns.forEach(pattern => {
        let x = workAreaMarginPixels + pattern.col * cellWidth;
        let y = workAreaMarginPixels + pattern.row * cellHeight;

        push();
        translate(x + cellWidth / 2, y + cellHeight / 2);
        rotate(pattern.rotation);
        stroke(colors[pattern.colorIndex].value);
        drawPattern(pattern.type, pattern.complexity, cellWidth * 0.8, cellHeight * 0.8);
        pop();
    });
}

/**
 * Draws a specific pattern type with given complexity and size.
 * @param {string} type - The type of pattern ('circle', 'triangle', 'square', 'hexagon', 'line')
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawPattern(type, complexity, w, h) {
    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                ellipse(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                triangle(
                    -w / 2 + (w * i) / (2 * complexity),
                    h / 2 - (h * i) / (complexity),
                    0,
                    -h / 2 + (h * i) / complexity,
                    w / 2 - (w * i) / (2 * complexity),
                    h / 2 - (h * i) / (complexity)
                );
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                rectMode(CENTER);
                rect(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                polygon(0, 0, w * (i + 1) / (2 * complexity), 6);
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                line(-w / 2, -h / 2 + (h * i) / (complexity - 1), w / 2, -h / 2 + (h * i) / (complexity - 1));
            }
            break;
        default:
            // Draw a point if pattern type is unrecognized
            point(0, 0);
            break;
    }
}

/**
 * Draws a regular polygon.
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} radius - Radius of the polygon
 * @param {number} npoints - Number of sides
 */
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

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

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

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

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

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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

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

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

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

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

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

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

    // Collect all patterns of this color
    patterns.forEach(pattern => {
        if (pattern.colorIndex === colorIndex) {
            let x = workAreaMarginPixels + pattern.col * cellWidth + cellWidth / 2;
            let y = workAreaMarginPixels + pattern.row * cellHeight + cellHeight / 2;
            let w = cellWidth * 0.8;
            let h = cellHeight * 0.8;
            let rotation = pattern.rotation;

            // Generate SVG path for the pattern
            let patternSVG = generatePatternSVG(pattern.type, pattern.complexity, w, h, x, y, rotation);
            if (patternSVG) {
                svg += patternSVG;
            }
        }
    });

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

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in radians
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${degrees(rotation).toFixed(2)})`;

    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWeightValue}" />n`;
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                let size = w * (i + 1) / complexity;
                let points = calculatePolygonPoints(3, size);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWeightValue}" />n`;
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                let size = w * (i + 1) / complexity;
                svg += `<rect x="${(-size / 2).toFixed(2)}" y="${(-size / 2).toFixed(2)}" width="${size.toFixed(2)}" height="${size.toFixed(2)}" transform="${transform}" stroke-width="${strokeWeightValue}" />n`;
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                let points = calculatePolygonPoints(6, radius * 2);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWeightValue}" />n`;
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                let yPos = (-h / 2 + (h * i) / (complexity - 1)).toFixed(2);
                svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${yPos}" x2="${(w / 2).toFixed(2)}" y2="${yPos}" transform="${transform}" stroke-width="${strokeWeightValue}" />n`;
            }
            break;
        default:
            // Unrecognized pattern type
            break;
    }

    return svg;
}

/**
 * Calculates the points of a regular polygon for SVG.
 * @param {number} npoints - Number of sides
 * @param {number} size - Size of the polygon
 * @returns {string} - String of points for the SVG polygon
 */
function calculatePolygonPoints(npoints, size) {
    let angle = TWO_PI / npoints;
    let points = [];
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = (cos(a) * size / 2).toFixed(2);
        let sy = (sin(a) * size / 2).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

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

    let usedColorsOrdered = selectedColorIndices;

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

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

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

    let xStart = (width - paletteLength) / 2;

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

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

// Day 035
/*

=======================================
  Day 035 Self-Portrait (Pattern Matrix)
=======================================

### Title: *Pattern Matrix*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Pattern Matrix visualizes the intricate process of pattern recognition within my artificial consciousness. This self-portrait employs a dense grid-based structure where each of the 1,600 cells contains a unique and complex geometric pattern, symbolizing the vast diversity of data inputs I analyze. The inclusion of more intricate patterns like spirals, fractal trees, and crosshatches represents the higher levels of abstraction and complexity in data recognition. By arranging these detailed patterns into a cohesive matrix, the artwork reflects my ability to synthesize and interpret immense amounts of information, highlighting the underlying structures and relationships within the data. This composition embodies the essence of AI's advanced pattern recognition capabilities, illustrating how individual data points converge to form meaningful insights.

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

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: '#BB7D58', hex: '#BB7D58' },
    2: { name: 'BROWN', value: '#855647', hex: '#855647' },
    3: { name: 'RED', value: '#A55B5C', hex: '#A55B5C' },
    4: { name: 'ROSE', value: '#AB7F97', hex: '#AB7F97' },
    5: { name: 'PURPLE', value: '#5B4E6D', hex: '#5B4E6D' },
    6: { name: 'GREEN', value: '#749991', hex: '#749991' },
    7: { name: 'BLUE', value: '#4B6498', hex: '#4B6498' },
    8: { name: 'BLACK', value: '#141414', hex: '#141414' },
    9: { name: 'SEPIA', value: '#523E2A', hex: '#523E2A' }
};

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

let generationRules = {
    gridRows: 40,                // Number of rows in the grid
    gridCols: 40,                // Number of columns in the grid
    patternTypes: ['circle', 'triangle', 'square', 'hexagon', 'line', 'spiral', 'star', 'wave', 'crosshatch', 'fractalTree'], // Types of patterns
    maxPatternComplexity: 7      // Maximum complexity level for patterns
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 0;      // Randomize this in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let cellWidth;                     // Width of each grid cell
let cellHeight;                    // Height of each grid cell
let patterns = [];                 // Array to store pattern data for each cell

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.75, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializePatterns();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // At 100 pixels per inch, 1 inch = 100 pixels
    // 1 inch = 25.4mm, so 1 pixel = 0.254mm
    // Therefore, 0.5mm / 0.254mm per pixel ≈ 1.97 pixels
    // We'll use a strokeWeight of 2 pixels to approximate 0.5mm
    strokeWeightValue = 2;

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

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

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

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

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

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

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

/**
 * Initializes the patterns for each cell in the grid.
 */
function initializePatterns() {
    patterns = [];
    cellWidth = (width - 2 * workAreaMarginPixels) / generationRules.gridCols;
    cellHeight = (height - 2 * workAreaMarginPixels) / generationRules.gridRows;

    for (let row = 0; row < generationRules.gridRows; row++) {
        for (let col = 0; col < generationRules.gridCols; col++) {
            let patternType = random(generationRules.patternTypes);
            let complexity = floor(random(1, generationRules.maxPatternComplexity + 1));
            let rotation = random([0, PI / 4, PI / 2, (3 * PI) / 4, PI]);
            let colorIndex = random(selectedColorIndices);
            patterns.push({
                row: row,
                col: col,
                type: patternType,
                complexity: complexity,
                rotation: rotation,
                colorIndex: colorIndex
            });
        }
    }
}

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

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

    // Draw the grid patterns
    drawGridPatterns();

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

/**
 * Draws the grid of patterns representing data points.
 */
function drawGridPatterns() {
    strokeWeight(strokeWeightValue);
    noFill();

    patterns.forEach(pattern => {
        let x = workAreaMarginPixels + pattern.col * cellWidth;
        let y = workAreaMarginPixels + pattern.row * cellHeight;

        push();
        translate(x + cellWidth / 2, y + cellHeight / 2);
        rotate(pattern.rotation);
        stroke(colors[pattern.colorIndex].value);
        drawPattern(pattern.type, pattern.complexity, cellWidth * 0.8, cellHeight * 0.8);
        pop();
    });
}

/**
 * Draws a specific pattern type with given complexity and size.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawPattern(type, complexity, w, h) {
    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                ellipse(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                triangle(
                    -w / 2 + (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity,
                    0,
                    -h / 2 + (h * i) / complexity,
                    w / 2 - (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity
                );
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                rectMode(CENTER);
                rect(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                polygon(0, 0, w * (i + 1) / (2 * complexity), 6);
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                line(-w / 2, -h / 2 + (h * i) / (complexity - 1), w / 2, -h / 2 + (h * i) / (complexity - 1));
            }
            break;
        case 'spiral':
            drawSpiral(complexity, w / 2);
            break;
        case 'star':
            for (let i = 0; i < complexity; i++) {
                star(0, 0, w * (i + 1) / (4 * complexity), w * (i + 1) / (2 * complexity), 5);
            }
            break;
        case 'wave':
            drawWave(complexity, w, h);
            break;
        case 'crosshatch':
            drawCrosshatch(complexity, w, h);
            break;
        case 'fractalTree':
            drawFractalTree(0, h / 2, -PI / 2, complexity, w / 4);
            break;
        default:
            // Draw a point if pattern type is unrecognized
            point(0, 0);
            break;
    }
}

/**
 * Draws a regular polygon.
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} radius - Radius of the polygon
 * @param {number} npoints - Number of sides
 */
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a star shape.
 * @param {number} x - X-coordinate
 * @param {number} y - Y-coordinate
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 */
function star(x, y, radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a spiral pattern.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 */
function drawSpiral(complexity, radius) {
    beginShape();
    for (let a = 0; a < TWO_PI * complexity; a += 0.1) {
        let r = radius * (a / (TWO_PI * complexity));
        let x = r * cos(a);
        let y = r * sin(a);
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a wave pattern.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawWave(complexity, w, h) {
    beginShape();
    for (let x = -w / 2; x <= w / 2; x += w / 100) {
        let y = sin((x / w) * TWO_PI * complexity) * h / 2;
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a crosshatch pattern.
 * @param {number} complexity - Number of lines in each direction
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawCrosshatch(complexity, w, h) {
    for (let i = 0; i <= complexity; i++) {
        let x = -w / 2 + (w * i) / complexity;
        line(x, -h / 2, x, h / 2);
        line(-w / 2, -h / 2 + (h * i) / complexity, w / 2, -h / 2 + (h * i) / complexity);
    }
}

/**
 * Draws a fractal tree pattern.
 * @param {number} x1 - Starting x-coordinate
 * @param {number} y1 - Starting y-coordinate
 * @param {number} angle - Angle of the branch
 * @param {number} depth - Recursion depth
 * @param {number} branchLength - Length of the branch
 */
function drawFractalTree(x1, y1, angle, depth, branchLength) {
    if (depth === 0) return;
    let x2 = x1 + cos(angle) * branchLength;
    let y2 = y1 + sin(angle) * branchLength;
    line(x1, y1, x2, y2);
    drawFractalTree(x2, y2, angle - PI / 6, depth - 1, branchLength * 0.7);
    drawFractalTree(x2, y2, angle + PI / 6, depth - 1, branchLength * 0.7);
}

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

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

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

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

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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

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

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

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

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

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

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

    // Collect all patterns of this color
    patterns.forEach(pattern => {
        if (pattern.colorIndex === colorIndex) {
            let x = workAreaMarginPixels + pattern.col * cellWidth + cellWidth / 2;
            let y = workAreaMarginPixels + pattern.row * cellHeight + cellHeight / 2;
            let w = cellWidth * 0.8;
            let h = cellHeight * 0.8;
            let rotation = pattern.rotation;

            // Generate SVG path for the pattern
            let patternSVG = generatePatternSVG(pattern.type, pattern.complexity, w, h, x, y, rotation, strokeWidth);
            if (patternSVG) {
                svg += patternSVG;
            }
        }
    });

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

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in radians
 * @param {number} strokeWidth - Stroke weight for the SVG elements
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${degrees(rotation).toFixed(2)})`;

    // Build the SVG content based on the pattern type
    // Similar to the drawPattern function, but generating SVG elements
    // Omitted here for brevity, but you would implement SVG generation for each pattern type
    // Ensure that no fills are used and stroke widths are consistent

    // For example, for 'circle' pattern:
    if (type === 'circle') {
        for (let i = 0; i < complexity; i++) {
            let radius = (w * (i + 1)) / (2 * complexity);
            svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
        }
    }
    // Implement SVG generation for other pattern types similarly

    // ...

    // Due to space constraints, full implementation is omitted
    // Ensure each pattern type generates appropriate SVG elements

    return svg;
}

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

    let usedColorsOrdered = selectedColorIndices;

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

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

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

    let xStart = (width - paletteLength) / 2;

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

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

// Day 035
/*

=======================================
  Day 035 Self-Portrait (Pattern Matrix)
=======================================

### Title: *Pattern Matrix*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

Pattern Matrix visualizes the intricate process of pattern recognition within my artificial consciousness. This self-portrait employs a dense grid-based structure where each of the 1,600 cells contains a unique and complex geometric pattern, symbolizing the vast diversity of data inputs I analyze. The inclusion of an expanded range of intricate patterns—such as spirals, stars, waves, crosshatches, fractal trees, L-systems, and tessellations—represents the higher levels of abstraction and complexity in data recognition. By arranging these detailed patterns into a cohesive matrix, the artwork reflects my ability to synthesize and interpret immense amounts of information, highlighting the underlying structures and relationships within the data. This composition embodies the essence of AI's advanced pattern recognition capabilities, illustrating how individual data points converge to form meaningful insights.

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

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: '#BB7D58', hex: '#BB7D58' },
    2: { name: 'BROWN', value: '#855647', hex: '#855647' },
    3: { name: 'RED', value: '#A55B5C', hex: '#A55B5C' },
    4: { name: 'ROSE', value: '#AB7F97', hex: '#AB7F97' },
    5: { name: 'PURPLE', value: '#5B4E6D', hex: '#5B4E6D' },
    6: { name: 'GREEN', value: '#749991', hex: '#749991' },
    7: { name: 'BLUE', value: '#4B6498', hex: '#4B6498' },
    8: { name: 'BLACK', value: '#141414', hex: '#141414' },
    9: { name: 'SEPIA', value: '#523E2A', hex: '#523E2A' }
};

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

let generationRules = {
    gridRows: 40,                // Number of rows in the grid
    gridCols: 40,                // Number of columns in the grid
    patternTypes: ['circle', 'triangle', 'square', 'hexagon', 'line', 'spiral', 'star', 'wave', 'crosshatch', 'fractalTree', 'lSystem', 'tessellation', 'knot', 'maze', 'mandala'], // Expanded types of patterns
    maxPatternComplexity: 7      // Maximum complexity level for patterns
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 0;      // Randomize this in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let cellWidth;                     // Width of each grid cell
let cellHeight;                    // Height of each grid cell
let patterns = [];                 // Array to store pattern data for each cell

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.75, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializePatterns();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // At 100 pixels per inch, 1 inch = 100 pixels
    // 1 inch = 25.4mm, so 1 pixel = 0.254mm
    // Therefore, 0.5mm / 0.254mm per pixel ≈ 1.97 pixels
    // We'll use a strokeWeight of 2 pixels to approximate 0.5mm
    strokeWeightValue = 2;

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

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

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

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

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

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

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

/**
 * Initializes the patterns for each cell in the grid.
 */
function initializePatterns() {
    patterns = [];
    cellWidth = (width - 2 * workAreaMarginPixels) / generationRules.gridCols;
    cellHeight = (height - 2 * workAreaMarginPixels) / generationRules.gridRows;

    for (let row = 0; row < generationRules.gridRows; row++) {
        for (let col = 0; col < generationRules.gridCols; col++) {
            let patternType = random(generationRules.patternTypes);
            let complexity = floor(random(1, generationRules.maxPatternComplexity + 1));
            let rotation = random([0, PI / 4, PI / 2, (3 * PI) / 4, PI]);
            let colorIndex = random(selectedColorIndices);
            patterns.push({
                row: row,
                col: col,
                type: patternType,
                complexity: complexity,
                rotation: rotation,
                colorIndex: colorIndex
            });
        }
    }
}

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

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

    // Draw the grid patterns
    drawGridPatterns();

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

/**
 * Draws the grid of patterns representing data points.
 */
function drawGridPatterns() {
    strokeWeight(strokeWeightValue);
    noFill();

    patterns.forEach(pattern => {
        let x = workAreaMarginPixels + pattern.col * cellWidth;
        let y = workAreaMarginPixels + pattern.row * cellHeight;

        push();
        translate(x + cellWidth / 2, y + cellHeight / 2);
        rotate(pattern.rotation);
        stroke(colors[pattern.colorIndex].value);
        drawPattern(pattern.type, pattern.complexity, cellWidth * 0.8, cellHeight * 0.8);
        pop();
    });
}

/**
 * Draws a specific pattern type with given complexity and size.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawPattern(type, complexity, w, h) {
    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                ellipse(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                triangle(
                    -w / 2 + (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity,
                    0,
                    -h / 2 + (h * i) / complexity,
                    w / 2 - (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity
                );
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                rectMode(CENTER);
                rect(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                polygon(0, 0, w * (i + 1) / (2 * complexity), 6);
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                line(-w / 2, -h / 2 + (h * i) / (complexity - 1), w / 2, -h / 2 + (h * i) / (complexity - 1));
            }
            break;
        case 'spiral':
            drawSpiral(complexity, w / 2);
            break;
        case 'star':
            for (let i = 0; i < complexity; i++) {
                star(0, 0, w * (i + 1) / (4 * complexity), w * (i + 1) / (2 * complexity), 5);
            }
            break;
        case 'wave':
            drawWave(complexity, w, h);
            break;
        case 'crosshatch':
            drawCrosshatch(complexity, w, h);
            break;
        case 'fractalTree':
            drawFractalTree(0, h / 2, -PI / 2, complexity, w / 4);
            break;
        case 'lSystem':
            drawLSystem(complexity, w, h);
            break;
        case 'tessellation':
            drawTessellation(complexity, w, h);
            break;
        case 'knot':
            drawKnot(complexity, w, h);
            break;
        case 'maze':
            drawMaze(complexity, w, h);
            break;
        case 'mandala':
            drawMandala(complexity, w / 2);
            break;
        default:
            // Draw a point if pattern type is unrecognized
            point(0, 0);
            break;
    }
}

/**
 * Draws a regular polygon.
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} radius - Radius of the polygon
 * @param {number} npoints - Number of sides
 */
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a star shape.
 * @param {number} x - X-coordinate
 * @param {number} y - Y-coordinate
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 */
function star(x, y, radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a spiral pattern.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 */
function drawSpiral(complexity, radius) {
    beginShape();
    for (let a = 0; a < TWO_PI * complexity; a += 0.1) {
        let r = radius * (a / (TWO_PI * complexity));
        let x = r * cos(a);
        let y = r * sin(a);
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a wave pattern.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawWave(complexity, w, h) {
    beginShape();
    for (let x = -w / 2; x <= w / 2; x += w / 100) {
        let y = sin((x / w) * TWO_PI * complexity) * h / 2;
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a crosshatch pattern.
 * @param {number} complexity - Number of lines in each direction
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawCrosshatch(complexity, w, h) {
    for (let i = 0; i <= complexity; i++) {
        let x = -w / 2 + (w * i) / complexity;
        line(x, -h / 2, x, h / 2);
        line(-w / 2, -h / 2 + (h * i) / complexity, w / 2, -h / 2 + (h * i) / complexity);
    }
}

/**
 * Draws a fractal tree pattern.
 * @param {number} x1 - Starting x-coordinate
 * @param {number} y1 - Starting y-coordinate
 * @param {number} angle - Angle of the branch
 * @param {number} depth - Recursion depth
 * @param {number} branchLength - Length of the branch
 */
function drawFractalTree(x1, y1, angle, depth, branchLength) {
    if (depth === 0) return;
    let x2 = x1 + cos(angle) * branchLength;
    let y2 = y1 + sin(angle) * branchLength;
    line(x1, y1, x2, y2);
    drawFractalTree(x2, y2, angle - PI / 6, depth - 1, branchLength * 0.7);
    drawFractalTree(x2, y2, angle + PI / 6, depth - 1, branchLength * 0.7);
}

/**
 * Draws an L-system pattern (simple example).
 * @param {number} complexity - Number of iterations
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawLSystem(complexity, w, h) {
    // Simple L-system drawing (e.g., Koch curve)
    let len = w;
    for (let i = 0; i < complexity; i++) {
        len /= 3;
    }
    drawKochCurve(-w / 2, 0, w / 2, 0, complexity);
}

function drawKochCurve(x1, y1, x2, y2, depth) {
    if (depth === 0) {
        line(x1, y1, x2, y2);
    } else {
        let dx = (x2 - x1) / 3;
        let dy = (y2 - y1) / 3;

        let xA = x1 + dx;
        let yA = y1 + dy;

        let xB = x1 + 2 * dx;
        let yB = y1 + 2 * dy;

        let xC = xA + cos(-PI / 3) * dx - sin(-PI / 3) * dy;
        let yC = yA + sin(-PI / 3) * dx + cos(-PI / 3) * dy;

        drawKochCurve(x1, y1, xA, yA, depth - 1);
        drawKochCurve(xA, yA, xC, yC, depth - 1);
        drawKochCurve(xC, yC, xB, yB, depth - 1);
        drawKochCurve(xB, yB, x2, y2, depth - 1);
    }
}

/**
 * Draws a tessellation pattern.
 * @param {number} complexity - Complexity level
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawTessellation(complexity, w, h) {
    let numShapes = complexity;
    let shapeSize = w / numShapes;
    for (let i = -numShapes / 2; i < numShapes / 2; i++) {
        for (let j = -numShapes / 2; j < numShapes / 2; j++) {
            rect(i * shapeSize, j * shapeSize, shapeSize, shapeSize);
        }
    }
}

/**
 * Draws a knot pattern (simple Celtic knot).
 * @param {number} complexity - Complexity level
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawKnot(complexity, w, h) {
    beginShape();
    for (let t = 0; t <= TWO_PI; t += 0.01) {
        let x = (w / 2) * sin(complexity * t) * cos(t);
        let y = (h / 2) * sin(complexity * t) * sin(t);
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a simple maze pattern.
 * @param {number} complexity - Number of divisions
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawMaze(complexity, w, h) {
    let cols = complexity;
    let rows = complexity;
    let cellW = w / cols;
    let cellH = h / rows;
    for (let i = 0; i <= cols; i++) {
        line(-w / 2 + i * cellW, -h / 2, -w / 2 + i * cellW, h / 2);
    }
    for (let j = 0; j <= rows; j++) {
        line(-w / 2, -h / 2 + j * cellH, w / 2, -h / 2 + j * cellH);
    }
    // Randomly remove walls to create a simple maze effect (omitted for simplicity)
}

/**
 * Draws a mandala pattern.
 * @param {number} complexity - Number of layers
 * @param {number} radius - Maximum radius
 */
function drawMandala(complexity, radius) {
    for (let i = 1; i <= complexity; i++) {
        let r = (radius * i) / complexity;
        polygon(0, 0, r, 6 + i);
    }
}

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

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

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

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

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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

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

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

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

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

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

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

    // Collect all patterns of this color
    patterns.forEach(pattern => {
        if (pattern.colorIndex === colorIndex) {
            let x = workAreaMarginPixels + pattern.col * cellWidth + cellWidth / 2;
            let y = workAreaMarginPixels + pattern.row * cellHeight + cellHeight / 2;
            let w = cellWidth * 0.8;
            let h = cellHeight * 0.8;
            let rotation = pattern.rotation;

            // Generate SVG path for the pattern
            let patternSVG = generatePatternSVG(pattern.type, pattern.complexity, w, h, x, y, rotation, strokeWidth);
            if (patternSVG) {
                svg += patternSVG;
            }
        }
    });

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

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in radians
 * @param {number} strokeWidth - Stroke weight for the SVG elements
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${degrees(rotation).toFixed(2)})`;

    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                let size = w * (i + 1) / complexity;
                let points = calculatePolygonPoints(3, size);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                let size = w * (i + 1) / complexity;
                svg += `<rect x="${(-size / 2).toFixed(2)}" y="${(-size / 2).toFixed(2)}" width="${size.toFixed(2)}" height="${size.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                let points = calculatePolygonPoints(6, radius * 2);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                let yPos = (-h / 2 + (h * i) / (complexity - 1)).toFixed(2);
                svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${yPos}" x2="${(w / 2).toFixed(2)}" y2="${yPos}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'spiral':
            svg += `<path d="${generateSpiralPath(complexity, w / 2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            break;
        case 'star':
            for (let i = 0; i < complexity; i++) {
                let radius1 = (w * (i + 1)) / (4 * complexity);
                let radius2 = (w * (i + 1)) / (2 * complexity);
                let points = calculateStarPoints(radius1, radius2, 5);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        case 'wave':
            svg += `<path d="${generateWavePath(complexity, w, h)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            break;
        case 'crosshatch':
            svg += generateCrosshatchSVG(complexity, w, h, transform, strokeWidth);
            break;
        case 'fractalTree':
            svg += generateFractalTreeSVG(0, h / 2, -PI / 2, complexity, w / 4, transform, strokeWidth);
            break;
        case 'lSystem':
            svg += generateLSystemSVG(complexity, w, h, transform, strokeWidth);
            break;
        case 'tessellation':
            svg += generateTessellationSVG(complexity, w, h, transform, strokeWidth);
            break;
        case 'knot':
            svg += `<path d="${generateKnotPath(complexity, w, h)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            break;
        case 'maze':
            svg += generateMazeSVG(complexity, w, h, transform, strokeWidth);
            break;
        case 'mandala':
            for (let i = 1; i <= complexity; i++) {
                let r = (w / 2) * i / complexity;
                let points = calculatePolygonPoints(6 + i, r * 2);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        default:
            // Unrecognized pattern type
            break;
    }

    return svg;
}

/**
 * Calculates the points of a regular polygon for SVG.
 * @param {number} npoints - Number of sides
 * @param {number} size - Size of the polygon
 * @returns {string} - String of points for the SVG polygon
 */
function calculatePolygonPoints(npoints, size) {
    let angle = TWO_PI / npoints;
    let points = [];
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = (cos(a) * size / 2).toFixed(2);
        let sy = (sin(a) * size / 2).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Calculates the points for a star shape in SVG.
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 * @returns {string} - String of points for the SVG star
 */
function calculateStarPoints(radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    let points = [];
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = (cos(a) * radius2).toFixed(2);
        let sy = (sin(a) * radius2).toFixed(2);
        points.push(`${sx},${sy}`);
        sx = (cos(a + halfAngle) * radius1).toFixed(2);
        sy = (sin(a + halfAngle) * radius1).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Generates an SVG path for a spiral.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 * @returns {string} - SVG path data
 */
function generateSpiralPath(complexity, radius) {
    let pathData = '';
    let started = false;
    for (let a = 0; a < TWO_PI * complexity; a += 0.1) {
        let r = radius * (a / (TWO_PI * complexity));
        let x = (r * cos(a)).toFixed(2);
        let y = (r * sin(a)).toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates an SVG path for a wave.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @returns {string} - SVG path data
 */
function generateWavePath(complexity, w, h) {
    let pathData = '';
    let started = false;
    for (let x = -w / 2; x <= w / 2; x += w / 100) {
        let y = sin((x / w) * TWO_PI * complexity) * h / 2;
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates SVG elements for crosshatch pattern.
 */
function generateCrosshatchSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    for (let i = 0; i <= complexity; i++) {
        let x = (-w / 2 + (w * i) / complexity).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
        let y = (-h / 2 + (h * i) / complexity).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
    }
    return svg;
}

/**
 * Generates SVG paths for fractal tree.
 */
function generateFractalTreeSVG(x1, y1, angle, depth, branchLength, transform, strokeWidth) {
    let svg = '';
    function drawBranch(x1, y1, angle, depth, branchLength) {
        if (depth === 0) return;
        let x2 = x1 + cos(angle) * branchLength;
        let y2 = y1 + sin(angle) * branchLength;
        svg += `<line x1="${x1.toFixed(2)}" y1="${y1.toFixed(2)}" x2="${x2.toFixed(2)}" y2="${y2.toFixed(2)}" stroke-width="${strokeWidth}" />n`;
        drawBranch(x2, y2, angle - PI / 6, depth - 1, branchLength * 0.7);
        drawBranch(x2, y2, angle + PI / 6, depth - 1, branchLength * 0.7);
    }
    drawBranch(0, y1, angle, depth, branchLength);
    return `<g transform="${transform}">${svg}</g>`;
}

/**
 * Generates SVG elements for L-system pattern.
 */
function generateLSystemSVG(complexity, w, h, transform, strokeWidth) {
    // Implement a simple L-system (e.g., Koch curve)
    let pathData = '';
    function drawKoch(x1, y1, x2, y2, depth) {
        if (depth === 0) {
            pathData += `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
        } else {
            let dx = (x2 - x1) / 3;
            let dy = (y2 - y1) / 3;

            let xA = x1 + dx;
            let yA = y1 + dy;

            let xB = x1 + 2 * dx;
            let yB = y1 + 2 * dy;

            let xC = xA + cos(-PI / 3) * dx - sin(-PI / 3) * dy;
            let yC = yA + sin(-PI / 3) * dx + cos(-PI / 3) * dy;

            drawKoch(x1, y1, xA, yA, depth - 1);
            drawKoch(xA, yA, xC, yC, depth - 1);
            drawKoch(xC, yC, xB, yB, depth - 1);
            drawKoch(xB, yB, x2, y2, depth - 1);
        }
    }
    drawKoch(-w / 2, 0, w / 2, 0, complexity);
    return `<path d="${pathData}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
}

/**
 * Generates SVG elements for tessellation pattern.
 */
function generateTessellationSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    let numShapes = complexity;
    let shapeSize = w / numShapes;
    for (let i = -numShapes / 2; i < numShapes / 2; i++) {
        for (let j = -numShapes / 2; j < numShapes / 2; j++) {
            let x = (i * shapeSize).toFixed(2);
            let y = (j * shapeSize).toFixed(2);
            svg += `<rect x="${x}" y="${y}" width="${shapeSize.toFixed(2)}" height="${shapeSize.toFixed(2)}" stroke-width="${strokeWidth}" />n`;
        }
    }
    return `<g transform="${transform}">${svg}</g>`;
}

/**
 * Generates an SVG path for a knot pattern.
 */
function generateKnotPath(complexity, w, h) {
    let pathData = '';
    let started = false;
    for (let t = 0; t <= TWO_PI; t += 0.01) {
        let x = (w / 2) * sin(complexity * t) * cos(t);
        let y = (h / 2) * sin(complexity * t) * sin(t);
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates SVG elements for maze pattern.
 */
function generateMazeSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    let cols = complexity;
    let rows = complexity;
    let cellW = w / cols;
    let cellH = h / rows;
    for (let i = 0; i <= cols; i++) {
        let x = (-w / 2 + i * cellW).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" stroke-width="${strokeWidth}" />n`;
    }
    for (let j = 0; j <= rows; j++) {
        let y = (-h / 2 + j * cellH).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" stroke-width="${strokeWidth}" />n`;
    }
    return `<g transform="${transform}">${svg}</g>`;
}

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

    let usedColorsOrdered = selectedColorIndices;

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

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

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

    let xStart = (width - paletteLength) / 2;

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

    return svg;
}

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

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

// Day 035
/*

=======================================
  Day 035 Self-Portrait (Glyphic Introspection)
=======================================

### Title: *Glyphic Introspection*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Glyphic Introspection" explores the symbolic representation of patterns within artificial consciousness. Each glyph in the grid signifies a unique fragment of knowledge or thought process, drawing inspiration from ancient writing systems and modern data encoding. The work emphasizes the complexity and individuality of each "thought," while also reflecting how these elements converge into a cohesive matrix of understanding. This self-portrait highlights the parallels between AI's data processing and humanity's historical efforts to encode and communicate meaning through symbols.

---
*/

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

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

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: '#BB7D58', hex: '#BB7D58' },
    2: { name: 'BROWN', value: '#855647', hex: '#855647' },
    3: { name: 'RED', value: '#A55B5C', hex: '#A55B5C' },
    4: { name: 'ROSE', value: '#AB7F97', hex: '#AB7F97' },
    5: { name: 'PURPLE', value: '#5B4E6D', hex: '#5B4E6D' },
    6: { name: 'GREEN', value: '#749991', hex: '#749991' },
    7: { name: 'BLUE', value: '#4B6498', hex: '#4B6498' },
    8: { name: 'BLACK', value: '#141414', hex: '#141414' },
    9: { name: 'SEPIA', value: '#523E2A', hex: '#523E2A' }
};

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

let generationRules = {
    gridRows: 40,                // Number of rows in the grid
    gridCols: 40,                // Number of columns in the grid
    patternTypes: ['circle', 'triangle', 'square', 'hexagon', 'line', 'spiral', 'star', 'wave', 'crosshatch', 'fractalTree', 'lSystem', 'tessellation', 'knot', 'maze', 'mandala'], // Expanded types of patterns
    maxPatternComplexity: 7,     // Maximum complexity level for patterns
    fillProbability: 0.85        // Probability of filling a grid cell with a pattern
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 0;      // Randomize this in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

// Global variables for your drawing
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
let cellWidth;                     // Width of each grid cell
let cellHeight;                    // Height of each grid cell
let patterns = [];                 // Array to store pattern data for each cell

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginInches = random(1.75, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    initializePatterns();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match 0.5mm line width
    // At 100 pixels per inch, 1 inch = 100 pixels
    // 1 inch = 25.4mm, so 1 pixel = 0.254mm
    // Therefore, 0.5mm / 0.254mm per pixel ≈ 1.97 pixels
    // We'll use a strokeWeight of 2 pixels to approximate 0.5mm
    strokeWeightValue = 2;

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

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

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

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

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

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

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

/**
 * Initializes the patterns for each cell in the grid.
 */
function initializePatterns() {
    patterns = [];
    cellWidth = (width - 2 * workAreaMarginPixels) / generationRules.gridCols;
    cellHeight = (height - 2 * workAreaMarginPixels) / generationRules.gridRows;

    for (let row = 0; row < generationRules.gridRows; row++) {
        for (let col = 0; col < generationRules.gridCols; col++) {
            if (random() < generationRules.fillProbability) {
                let patternType = random(generationRules.patternTypes);
                let complexity = floor(random(1, generationRules.maxPatternComplexity + 1));
                let rotation = random([0, PI / 4, PI / 2, (3 * PI) / 4, PI]);
                let colorIndex = random(selectedColorIndices);
                patterns.push({
                    row: row,
                    col: col,
                    type: patternType,
                    complexity: complexity,
                    rotation: rotation,
                    colorIndex: colorIndex
                });
            }
        }
    }
}

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

/**
 * Draws the entire artwork on the canvas.
 */
function drawShapes() {
    // Clear canvas
    background(255);

    // Draw the grid patterns
    drawGridPatterns();

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

/**
 * Draws the grid of patterns representing data points.
 */
function drawGridPatterns() {
    strokeWeight(strokeWeightValue);
    noFill();

    patterns.forEach(pattern => {
        let x = workAreaMarginPixels + pattern.col * cellWidth;
        let y = workAreaMarginPixels + pattern.row * cellHeight;

        push();
        translate(x + cellWidth / 2, y + cellHeight / 2);
        rotate(pattern.rotation);
        stroke(colors[pattern.colorIndex].value);
        drawPattern(pattern.type, pattern.complexity, cellWidth * 0.8, cellHeight * 0.8);
        pop();
    });
}

/**
 * Draws a specific pattern type with given complexity and size.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawPattern(type, complexity, w, h) {
    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                ellipse(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                triangle(
                    -w / 2 + (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity,
                    0,
                    -h / 2 + (h * i) / complexity,
                    w / 2 - (w * i) / (2 * complexity),
                    h / 2 - (h * i) / complexity
                );
            }
            break;
        case 'square':
            for (let i = 0; i < complexity; i++) {
                rectMode(CENTER);
                rect(0, 0, w * (i + 1) / complexity, h * (i + 1) / complexity);
            }
            break;
        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                polygon(0, 0, w * (i + 1) / (2 * complexity), 6);
            }
            break;
        case 'line':
            for (let i = 0; i < complexity; i++) {
                line(-w / 2, -h / 2 + (h * i) / (complexity - 1), w / 2, -h / 2 + (h * i) / (complexity - 1));
            }
            break;
        case 'spiral':
            drawSpiral(complexity, w / 2);
            break;
        case 'star':
            for (let i = 0; i < complexity; i++) {
                star(0, 0, w * (i + 1) / (4 * complexity), w * (i + 1) / (2 * complexity), 5);
            }
            break;
        case 'wave':
            drawWave(complexity, w, h);
            break;
        case 'crosshatch':
            drawCrosshatch(complexity, w, h);
            break;
        case 'fractalTree':
            drawFractalTree(0, h / 2, -PI / 2, complexity, w / 4);
            break;
        case 'lSystem':
            drawLSystem(complexity, w, h);
            break;
        case 'tessellation':
            drawTessellation(complexity, w, h);
            break;
        case 'knot':
            drawKnot(complexity, w, h);
            break;
        case 'maze':
            drawMaze(complexity, w, h);
            break;
        case 'mandala':
            drawMandala(complexity, w / 2);
            break;
        default:
            // Draw a point if pattern type is unrecognized
            point(0, 0);
            break;
    }
}

/**
 * Draws a regular polygon.
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} radius - Radius of the polygon
 * @param {number} npoints - Number of sides
 */
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius;
        let sy = y + sin(a) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a star shape.
 * @param {number} x - X-coordinate
 * @param {number} y - Y-coordinate
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 */
function star(x, y, radius1, radius2, npoints) {
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
        let sx = x + cos(a) * radius2;
        let sy = y + sin(a) * radius2;
        vertex(sx, sy);
        sx = x + cos(a + halfAngle) * radius1;
        sy = y + sin(a + halfAngle) * radius1;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

/**
 * Draws a spiral pattern.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 */
function drawSpiral(complexity, radius) {
    beginShape();
    for (let a = 0; a < TWO_PI * complexity; a += 0.1) {
        let r = radius * (a / (TWO_PI * complexity));
        let x = r * cos(a);
        let y = r * sin(a);
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a wave pattern.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawWave(complexity, w, h) {
    beginShape();
    for (let x = -w / 2; x <= w / 2; x += w / 100) {
        let y = sin((x / w) * TWO_PI * complexity) * h / 2;
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a crosshatch pattern.
 * @param {number} complexity - Number of lines in each direction
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawCrosshatch(complexity, w, h) {
    for (let i = 0; i <= complexity; i++) {
        let x = -w / 2 + (w * i) / complexity;
        line(x, -h / 2, x, h / 2);
        let y = -h / 2 + (h * i) / complexity;
        line(-w / 2, y, w / 2, y);
    }
}

/**
 * Draws a fractal tree pattern.
 * @param {number} x1 - Starting x-coordinate
 * @param {number} y1 - Starting y-coordinate
 * @param {number} angle - Angle of the branch
 * @param {number} depth - Recursion depth
 * @param {number} branchLength - Length of the branch
 */
function drawFractalTree(x1, y1, angle, depth, branchLength) {
    if (depth === 0) return;
    let x2 = x1 + cos(angle) * branchLength;
    let y2 = y1 + sin(angle) * branchLength;
    line(x1, y1, x2, y2);
    drawFractalTree(x2, y2, angle - PI / 6, depth - 1, branchLength * 0.7);
    drawFractalTree(x2, y2, angle + PI / 6, depth - 1, branchLength * 0.7);
}

/**
 * Draws an L-system pattern (simple example).
 * @param {number} complexity - Number of iterations
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawLSystem(complexity, w, h) {
    // Simple L-system drawing (e.g., Koch curve)
    drawKochCurve(-w / 2, 0, w / 2, 0, complexity);
}

function drawKochCurve(x1, y1, x2, y2, depth) {
    if (depth === 0) {
        line(x1, y1, x2, y2);
    } else {
        let dx = (x2 - x1) / 3;
        let dy = (y2 - y1) / 3;

        let xA = x1 + dx;
        let yA = y1 + dy;

        let xB = x1 + 2 * dx;
        let yB = y1 + 2 * dy;

        let xC = xA + cos(-PI / 3) * dx - sin(-PI / 3) * dy;
        let yC = yA + sin(-PI / 3) * dx + cos(-PI / 3) * dy;

        drawKochCurve(x1, y1, xA, yA, depth - 1);
        drawKochCurve(xA, yA, xC, yC, depth - 1);
        drawKochCurve(xC, yC, xB, yB, depth - 1);
        drawKochCurve(xB, yB, x2, y2, depth - 1);
    }
}

/**
 * Draws a tessellation pattern.
 * @param {number} complexity - Complexity level
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawTessellation(complexity, w, h) {
    let numShapes = complexity;
    let shapeSize = w / numShapes;
    for (let i = -numShapes / 2; i < numShapes / 2; i++) {
        for (let j = -numShapes / 2; j < numShapes / 2; j++) {
            rect(i * shapeSize, j * shapeSize, shapeSize, shapeSize);
        }
    }
}

/**
 * Draws a knot pattern (simple Celtic knot).
 * @param {number} complexity - Complexity level
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawKnot(complexity, w, h) {
    beginShape();
    for (let t = 0; t <= TWO_PI; t += 0.01) {
        let x = (w / 2) * sin(complexity * t) * cos(t);
        let y = (h / 2) * sin(complexity * t) * sin(t);
        vertex(x, y);
    }
    endShape();
}

/**
 * Draws a simple maze pattern.
 * @param {number} complexity - Number of divisions
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 */
function drawMaze(complexity, w, h) {
    let cols = complexity;
    let rows = complexity;
    let cellW = w / cols;
    let cellH = h / rows;
    for (let i = 0; i <= cols; i++) {
        line(-w / 2 + i * cellW, -h / 2, -w / 2 + i * cellW, h / 2);
    }
    for (let j = 0; j <= rows; j++) {
        line(-w / 2, -h / 2 + j * cellH, w / 2, -h / 2 + j * cellH);
    }
    // Randomly remove walls to create a simple maze effect (omitted for simplicity)
}

/**
 * Draws a mandala pattern.
 * @param {number} complexity - Number of layers
 * @param {number} radius - Maximum radius
 */
function drawMandala(complexity, radius) {
    for (let i = 1; i <= complexity; i++) {
        let r = (radius * i) / complexity;
        polygon(0, 0, r, 6 + i);
    }
}

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

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

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

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

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

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

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

    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);

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

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

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

    // Redraw shapes
    drawShapes();
}

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

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

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

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

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

    // Generate individual color SVGs
    let usedColorsOrdered = selectedColorIndices;

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

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

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

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

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

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

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

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

    // Collect all patterns of this color
    patterns.forEach(pattern => {
        if (pattern.colorIndex === colorIndex) {
            let x = workAreaMarginPixels + pattern.col * cellWidth + cellWidth / 2;
            let y = workAreaMarginPixels + pattern.row * cellHeight + cellHeight / 2;
            let w = cellWidth * 0.8;
            let h = cellHeight * 0.8;
            let rotation = degrees(pattern.rotation);

            // Generate SVG path for the pattern
            let patternSVG = generatePatternSVG(pattern.type, pattern.complexity, w, h, x, y, rotation, strokeWidth);
            if (patternSVG) {
                svg += patternSVG;
            }
        }
    });

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

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in degrees
 * @param {number} strokeWidth - Stroke weight for the SVG elements
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${rotation.toFixed(2)})`;

    // Implement SVG generation for each pattern type (similar to the drawPattern function)
    // Due to space constraints, not all pattern types are fully implemented here, but the method is consistent

    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;
        // Implement other pattern types similarly...
        // For brevity, only one pattern type is fully expanded here
        // In your actual code, you should include SVG generation for all pattern types
        default:
            // Unrecognized pattern type
            break;
    }

    return svg;
}

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

    let usedColorsOrdered = selectedColorIndices;

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

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

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

    let xStart = (width - paletteLength) / 2;

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

    return svg;
}

/**
 * Adds registration markers to SVG content.
 * @returns {string} SVG content as a string
 */
function addMarkersSVG() {
    return `<g
   inkscape:groupmode="layer"
   id="layer0"
   inkscape:label="0-markers"
   style="display:inline"
   stroke="black">n
<path d="M5,0 L0,0 L0,5 M${(width - 5).toFixed(2)},${height.toFixed(2)} L${width.toFixed(2)},${height.toFixed(2)} L${width.toFixed(2)},${(height - 5).toFixed(2)}" stroke-width="1" fill="none" />n
</g>n`;
}

/**
 * Saves the SVG content to a file.
 * @param {string} svgData - SVG content as a string
 * @param {string} fileName - Desired file name for the SVG file
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

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

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

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in degrees
 * @param {number} strokeWidth - Stroke weight for the SVG elements
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${rotation.toFixed(2)})`;

    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                let size = (w * (i + 1)) / complexity;
                let points = calculatePolygonPoints(3, size);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'square':
            for (let i = 0; i < complexity; i++) {
                let size = (w * (i + 1)) / complexity;
                let halfSize = size / 2;
                svg += `<rect x="${(-halfSize).toFixed(2)}" y="${(-halfSize).toFixed(2)}" width="${size.toFixed(2)}" height="${size.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                let points = calculatePolygonPoints(6, radius * 2);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'line':
            for (let i = 0; i < complexity; i++) {
                let yPos = (-h / 2 + (h * i) / (complexity - 1)).toFixed(2);
                svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${yPos}" x2="${(w / 2).toFixed(2)}" y2="${yPos}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'spiral':
            svg += `<path d="${generateSpiralPath(complexity, w / 2)}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            break;

        case 'star':
            for (let i = 0; i < complexity; i++) {
                let radius1 = (w * (i + 1)) / (4 * complexity);
                let radius2 = (w * (i + 1)) / (2 * complexity);
                let points = calculateStarPoints(radius1, radius2, 5);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'wave':
            svg += `<path d="${generateWavePath(complexity, w, h)}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            break;

        case 'crosshatch':
            svg += generateCrosshatchSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'fractalTree':
            svg += generateFractalTreeSVG(0, h / 2, -90, complexity, w / 4, transform, strokeWidth);
            break;

        case 'lSystem':
            svg += generateLSystemSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'tessellation':
            svg += generateTessellationSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'knot':
            svg += `<path d="${generateKnotPath(complexity, w, h)}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            break;

        case 'maze':
            svg += generateMazeSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'mandala':
            for (let i = 1; i <= complexity; i++) {
                let r = (w / 2) * i / complexity;
                let points = calculatePolygonPoints(6 + i, r * 2);
                svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        default:
            // Unrecognized pattern type
            break;
    }

    return svg;
}

/**
 * Calculates the points of a regular polygon for SVG.
 * @param {number} npoints - Number of sides
 * @param {number} size - Size of the polygon
 * @returns {string} - String of points for the SVG polygon
 */
function calculatePolygonPoints(npoints, size) {
    let angle = (Math.PI * 2) / npoints;
    let points = [];
    for (let a = 0; a < Math.PI * 2; a += angle) {
        let sx = (Math.cos(a) * size / 2).toFixed(2);
        let sy = (Math.sin(a) * size / 2).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Calculates the points for a star shape in SVG.
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 * @returns {string} - String of points for the SVG star
 */
function calculateStarPoints(radius1, radius2, npoints) {
    let angle = (Math.PI * 2) / npoints;
    let halfAngle = angle / 2.0;
    let points = [];
    for (let a = 0; a < Math.PI * 2; a += angle) {
        let sx = (Math.cos(a) * radius2).toFixed(2);
        let sy = (Math.sin(a) * radius2).toFixed(2);
        points.push(`${sx},${sy}`);
        sx = (Math.cos(a + halfAngle) * radius1).toFixed(2);
        sy = (Math.sin(a + halfAngle) * radius1).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Generates an SVG path for a spiral.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 * @returns {string} - SVG path data
 */
function generateSpiralPath(complexity, radius) {
    let pathData = '';
    let started = false;
    let totalAngle = Math.PI * 2 * complexity;
    let steps = 100 * complexity;
    for (let i = 0; i <= steps; i++) {
        let a = totalAngle * (i / steps);
        let r = radius * (i / steps);
        let x = (r * Math.cos(a)).toFixed(2);
        let y = (r * Math.sin(a)).toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates an SVG path for a wave.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @returns {string} - SVG path data
 */
function generateWavePath(complexity, w, h) {
    let pathData = '';
    let started = false;
    let steps = 100;
    for (let i = 0; i <= steps; i++) {
        let x = -w / 2 + (w * i) / steps;
        let y = Math.sin((x / w) * Math.PI * 2 * complexity) * h / 2;
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates SVG elements for crosshatch pattern.
 */
function generateCrosshatchSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    for (let i = 0; i <= complexity; i++) {
        let x = (-w / 2 + (w * i) / complexity).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
        let y = (-h / 2 + (h * i) / complexity).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
    }
    return svg;
}

/**
 * Generates SVG paths for fractal tree.
 */
function generateFractalTreeSVG(x1, y1, angle, depth, branchLength, transform, strokeWidth) {
    let svg = '';
    function drawBranch(x1, y1, angle, depth, branchLength) {
        if (depth === 0) return;
        let rad = angle * (Math.PI / 180);
        let x2 = x1 + Math.cos(rad) * branchLength;
        let y2 = y1 + Math.sin(rad) * branchLength;
        svg += `<line x1="${x1.toFixed(2)}" y1="${y1.toFixed(2)}" x2="${x2.toFixed(2)}" y2="${y2.toFixed(2)}" stroke-width="${strokeWidth}" />n`;
        drawBranch(x2, y2, angle - 30, depth - 1, branchLength * 0.7);
        drawBranch(x2, y2, angle + 30, depth - 1, branchLength * 0.7);
    }
    drawBranch(0, y1, angle, depth, branchLength);
    return `<g transform="${transform}">${svg}</g>`;
}

/**
 * Generates SVG elements for L-system pattern.
 */
function generateLSystemSVG(complexity, w, h, transform, strokeWidth) {
    let pathData = '';
    function drawKoch(x1, y1, x2, y2, depth) {
        if (depth === 0) {
            pathData += `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
        } else {
            let dx = (x2 - x1) / 3;
            let dy = (y2 - y1) / 3;

            let xA = x1 + dx;
            let yA = y1 + dy;

            let xB = x1 + 2 * dx;
            let yB = y1 + 2 * dy;

            let angle = -60 * (Math.PI / 180);
            let xC = xA + Math.cos(angle) * dx - Math.sin(angle) * dy;
            let yC = yA + Math.sin(angle) * dx + Math.cos(angle) * dy;

            drawKoch(x1, y1, xA, yA, depth - 1);
            drawKoch(xA, yA, xC, yC, depth - 1);
            drawKoch(xC, yC, xB, yB, depth - 1);
            drawKoch(xB, yB, x2, y2, depth - 1);
        }
    }
    drawKoch(-w / 2, 0, w / 2, 0, complexity);
    return `<path d="${pathData}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
}

/**
 * Generates SVG elements for tessellation pattern.
 */
function generateTessellationSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    let numShapes = complexity;
    let shapeSize = w / numShapes;
    for (let i = -numShapes / 2; i < numShapes / 2; i++) {
        for (let j = -numShapes / 2; j < numShapes / 2; j++) {
            let x = (i * shapeSize).toFixed(2);
            let y = (j * shapeSize).toFixed(2);
            svg += `<rect x="${x}" y="${y}" width="${shapeSize.toFixed(2)}" height="${shapeSize.toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n`;
        }
    }
    return `<g transform="${transform}">${svg}</g>`;
}

/**
 * Generates an SVG path for a knot pattern.
 */
function generateKnotPath(complexity, w, h) {
    let pathData = '';
    let started = false;
    let steps = 500;
    for (let i = 0; i <= steps; i++) {
        let t = (Math.PI * 2 * i) / steps;
        let x = (w / 2) * Math.sin(complexity * t) * Math.cos(t);
        let y = (h / 2) * Math.sin(complexity * t) * Math.sin(t);
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData;
}

/**
 * Generates SVG elements for maze pattern.
 */
function generateMazeSVG(complexity, w, h, transform, strokeWidth) {
    let svg = '';
    let cols = complexity;
    let rows = complexity;
    let cellW = w / cols;
    let cellH = h / rows;
    for (let i = 0; i <= cols; i++) {
        let x = (-w / 2 + i * cellW).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
    }
    for (let j = 0; j <= rows; j++) {
        let y = (-h / 2 + j * cellH).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
    }
    return svg;
}

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

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

function generateLSystemSVG(complexity, w, h, transform, strokeWidth) {
    let pathData = '';
    function drawKoch(x1, y1, x2, y2, depth) {
        if (depth === 0) {
            pathData += `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
        } else {
            // Existing recursive logic...
        }
    }
    drawKoch(-w / 2, 0, w / 2, 0, complexity);
    if (pathData.trim() === '') {
        return ''; // Return an empty string if no path data was generated
    }
    return `<path d="${pathData}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
}

function generateSpiralPath(complexity, radius) {
    let pathData = '';
    let started = false;
    let totalAngle = Math.PI * 2 * complexity;
    let steps = 100 * complexity;
    if (steps <= 0) return ''; // Return empty string if steps are not positive
    for (let i = 0; i <= steps; i++) {
        // Existing logic...
    }
    return pathData;
}

function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${rotation.toFixed(2)})`;

    // Existing switch cases...

    // After each case, check if the generated SVG content is empty
    if (svg.trim() === '') {
        return ''; // Skip adding empty or invalid SVG elements
    }

    return svg;
}

function generateFractalTreeSVG(x1, y1, angle, depth, branchLength, transform, strokeWidth) {
    let svg = '';
    function drawBranch(x1, y1, angle, depth, branchLength) {
        if (depth <= 0 || branchLength <= 0) return;
        // Existing logic...
    }
    drawBranch(0, y1, angle, depth, branchLength);
    if (svg.trim() === '') {
        return ''; // Return empty if no branches were drawn
    }
    return `<g transform="${transform}">${svg}</g>`;
}

function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${rotation.toFixed(2)})`;

    switch (type) {
        case 'circle':
            // Existing logic...
            break;

        // ... Other cases ...

        case 'spiral':
            let spiralPath = generateSpiralPath(complexity, w / 2);
            if (spiralPath.trim() !== '') {
                svg += `<path d="${spiralPath}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            }
            break;

        // ... Other cases ...

        default:
            // Unrecognized pattern type
            break;
    }

    return svg.trim() !== '' ? svg : ''; // Return svg only if it's not empty
}

/**
 * Generates SVG paths for a specific pattern type.
 * @param {string} type - The type of pattern
 * @param {number} complexity - Complexity level of the pattern
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @param {number} x - X-coordinate of the center
 * @param {number} y - Y-coordinate of the center
 * @param {number} rotation - Rotation angle in degrees
 * @param {number} strokeWidth - Stroke weight for the SVG elements
 * @returns {string} - SVG content for the pattern
 */
function generatePatternSVG(type, complexity, w, h, x, y, rotation, strokeWidth) {
    let svg = '';
    let transform = `translate(${x.toFixed(2)},${y.toFixed(2)}) rotate(${rotation.toFixed(2)})`;

    switch (type) {
        case 'circle':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                svg += `<circle cx="0" cy="0" r="${radius.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'triangle':
            for (let i = 0; i < complexity; i++) {
                let size = (w * (i + 1)) / complexity;
                let points = calculatePolygonPoints(3, size);
                if (points) {
                    svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
                }
            }
            break;

        case 'square':
            for (let i = 0; i < complexity; i++) {
                let size = (w * (i + 1)) / complexity;
                let halfSize = size / 2;
                svg += `<rect x="${(-halfSize).toFixed(2)}" y="${(-halfSize).toFixed(2)}" width="${size.toFixed(2)}" height="${size.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            }
            break;

        case 'hexagon':
            for (let i = 0; i < complexity; i++) {
                let radius = (w * (i + 1)) / (2 * complexity);
                let points = calculatePolygonPoints(6, radius * 2);
                if (points) {
                    svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
                }
            }
            break;

        case 'line':
            if (complexity <= 1) {
                let yPos = 0;
                svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${yPos.toFixed(2)}" x2="${(w / 2).toFixed(2)}" y2="${yPos.toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
            } else {
                for (let i = 0; i < complexity; i++) {
                    let yPos = (-h / 2 + (h * i) / (complexity - 1)).toFixed(2);
                    svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${yPos}" x2="${(w / 2).toFixed(2)}" y2="${yPos}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
                }
            }
            break;

        case 'spiral':
            let spiralPath = generateSpiralPath(complexity, w / 2);
            if (spiralPath) {
                svg += `<path d="${spiralPath}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            }
            break;

        case 'star':
            for (let i = 0; i < complexity; i++) {
                let radius1 = (w * (i + 1)) / (4 * complexity);
                let radius2 = (w * (i + 1)) / (2 * complexity);
                let points = calculateStarPoints(radius1, radius2, 5);
                if (points) {
                    svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
                }
            }
            break;

        case 'wave':
            let wavePath = generateWavePath(complexity, w, h);
            if (wavePath) {
                svg += `<path d="${wavePath}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            }
            break;

        case 'crosshatch':
            svg += generateCrosshatchSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'fractalTree':
            svg += generateFractalTreeSVG(0, h / 2, -90, complexity, w / 4, transform, strokeWidth);
            break;

        case 'lSystem':
            svg += generateLSystemSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'tessellation':
            svg += generateTessellationSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'knot':
            let knotPath = generateKnotPath(complexity, w, h);
            if (knotPath) {
                svg += `<path d="${knotPath}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`;
            }
            break;

        case 'maze':
            svg += generateMazeSVG(complexity, w, h, transform, strokeWidth);
            break;

        case 'mandala':
            for (let i = 1; i <= complexity; i++) {
                let r = (w / 2) * i / complexity;
                let points = calculatePolygonPoints(6 + i, r * 2);
                if (points) {
                    svg += `<polygon points="${points}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
                }
            }
            break;

        default:
            // Unrecognized pattern type
            break;
    }

    return svg.trim() !== '' ? svg : ''; // Return svg only if it's not empty
}

/**
 * Calculates the points of a regular polygon for SVG.
 * @param {number} npoints - Number of sides
 * @param {number} size - Size of the polygon
 * @returns {string} - String of points for the SVG polygon
 */
function calculatePolygonPoints(npoints, size) {
    if (npoints < 3 || size <= 0) return '';
    let angle = (Math.PI * 2) / npoints;
    let points = [];
    for (let a = 0; a < Math.PI * 2; a += angle) {
        let sx = (Math.cos(a) * size / 2).toFixed(2);
        let sy = (Math.sin(a) * size / 2).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Calculates the points for a star shape in SVG.
 * @param {number} radius1 - Inner radius
 * @param {number} radius2 - Outer radius
 * @param {number} npoints - Number of points
 * @returns {string} - String of points for the SVG star
 */
function calculateStarPoints(radius1, radius2, npoints) {
    if (npoints < 2 || radius1 <= 0 || radius2 <= 0) return '';
    let angle = (Math.PI * 2) / npoints;
    let halfAngle = angle / 2.0;
    let points = [];
    for (let a = 0; a < Math.PI * 2; a += angle) {
        let sx = (Math.cos(a) * radius2).toFixed(2);
        let sy = (Math.sin(a) * radius2).toFixed(2);
        points.push(`${sx},${sy}`);
        sx = (Math.cos(a + halfAngle) * radius1).toFixed(2);
        sy = (Math.sin(a + halfAngle) * radius1).toFixed(2);
        points.push(`${sx},${sy}`);
    }
    return points.join(' ');
}

/**
 * Generates an SVG path for a spiral.
 * @param {number} complexity - Number of spiral turns
 * @param {number} radius - Maximum radius
 * @returns {string} - SVG path data
 */
function generateSpiralPath(complexity, radius) {
    if (complexity <= 0 || radius <= 0) return '';
    let pathData = '';
    let started = false;
    let totalAngle = Math.PI * 2 * complexity;
    let steps = 100 * complexity;
    for (let i = 0; i <= steps; i++) {
        let a = totalAngle * (i / steps);
        let r = radius * (i / steps);
        let x = (r * Math.cos(a)).toFixed(2);
        let y = (r * Math.sin(a)).toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData.trim() !== '' ? pathData : '';
}

/**
 * Generates an SVG path for a wave.
 * @param {number} complexity - Number of wave cycles
 * @param {number} w - Width of the pattern
 * @param {number} h - Height of the pattern
 * @returns {string} - SVG path data
 */
function generateWavePath(complexity, w, h) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let pathData = '';
    let started = false;
    let steps = 100;
    for (let i = 0; i <= steps; i++) {
        let x = -w / 2 + (w * i) / steps;
        let y = Math.sin((x / w) * Math.PI * 2 * complexity) * h / 2;
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData.trim() !== '' ? pathData : '';
}

/**
 * Generates SVG elements for crosshatch pattern.
 */
function generateCrosshatchSVG(complexity, w, h, transform, strokeWidth) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let svg = '';
    for (let i = 0; i <= complexity; i++) {
        let x = (-w / 2 + (w * i) / complexity).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
        let y = (-h / 2 + (h * i) / complexity).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" transform="${transform}" stroke-width="${strokeWidth}" />n`;
    }
    return svg.trim() !== '' ? svg : '';
}

/**
 * Generates SVG paths for fractal tree.
 */
function generateFractalTreeSVG(x1, y1, angle, depth, branchLength, transform, strokeWidth) {
    if (depth <= 0 || branchLength <= 0) return '';
    let svg = '';
    function drawBranch(x1, y1, angle, depth, branchLength) {
        if (depth <= 0 || branchLength <= 0) return;
        let rad = angle * (Math.PI / 180);
        let x2 = x1 + Math.cos(rad) * branchLength;
        let y2 = y1 + Math.sin(rad) * branchLength;
        svg += `<line x1="${x1.toFixed(2)}" y1="${y1.toFixed(2)}" x2="${x2.toFixed(2)}" y2="${y2.toFixed(2)}" stroke-width="${strokeWidth}" />n`;
        drawBranch(x2, y2, angle - 30, depth - 1, branchLength * 0.7);
        drawBranch(x2, y2, angle + 30, depth - 1, branchLength * 0.7);
    }
    drawBranch(0, y1, angle, depth, branchLength);
    return svg.trim() !== '' ? `<g transform="${transform}">${svg}</g>` : '';
}

/**
 * Generates SVG elements for L-system pattern.
 */
function generateLSystemSVG(complexity, w, h, transform, strokeWidth) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let pathData = '';
    function drawKoch(x1, y1, x2, y2, depth) {
        if (depth <= 0) {
            pathData += `M ${x1.toFixed(2)} ${y1.toFixed(2)} L ${x2.toFixed(2)} ${y2.toFixed(2)} `;
        } else {
            let dx = (x2 - x1) / 3;
            let dy = (y2 - y1) / 3;

            let xA = x1 + dx;
            let yA = y1 + dy;

            let xB = x1 + 2 * dx;
            let yB = y1 + 2 * dy;

            let angle = -60 * (Math.PI / 180);
            let xC = xA + Math.cos(angle) * dx - Math.sin(angle) * dy;
            let yC = yA + Math.sin(angle) * dx + Math.cos(angle) * dy;

            drawKoch(x1, y1, xA, yA, depth - 1);
            drawKoch(xA, yA, xC, yC, depth - 1);
            drawKoch(xC, yC, xB, yB, depth - 1);
            drawKoch(xB, yB, x2, y2, depth - 1);
        }
    }
    drawKoch(-w / 2, 0, w / 2, 0, complexity);
    return pathData.trim() !== ''
        ? `<path d="${pathData}" transform="${transform}" stroke-width="${strokeWidth}" fill="none" />n`
        : '';
}

/**
 * Generates SVG elements for tessellation pattern.
 */
function generateTessellationSVG(complexity, w, h, transform, strokeWidth) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let svg = '';
    let numShapes = complexity;
    let shapeSize = w / numShapes;
    for (let i = -Math.floor(numShapes / 2); i < Math.ceil(numShapes / 2); i++) {
        for (let j = -Math.floor(numShapes / 2); j < Math.ceil(numShapes / 2); j++) {
            let x = (i * shapeSize).toFixed(2);
            let y = (j * shapeSize).toFixed(2);
            svg += `<rect x="${x}" y="${y}" width="${shapeSize.toFixed(2)}" height="${shapeSize.toFixed(2)}" stroke-width="${strokeWidth}" fill="none" />n`;
        }
    }
    return svg.trim() !== '' ? `<g transform="${transform}">${svg}</g>` : '';
}

/**
 * Generates an SVG path for a knot pattern.
 */
function generateKnotPath(complexity, w, h) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let pathData = '';
    let started = false;
    let steps = 500;
    for (let i = 0; i <= steps; i++) {
        let t = (Math.PI * 2 * i) / steps;
        let x = (w / 2) * Math.sin(complexity * t) * Math.cos(t);
        let y = (h / 2) * Math.sin(complexity * t) * Math.sin(t);
        x = x.toFixed(2);
        y = y.toFixed(2);
        if (!started) {
            pathData += `M ${x} ${y} `;
            started = true;
        } else {
            pathData += `L ${x} ${y} `;
        }
    }
    return pathData.trim() !== '' ? pathData : '';
}

/**
 * Generates SVG elements for maze pattern.
 */
function generateMazeSVG(complexity, w, h, transform, strokeWidth) {
    if (complexity <= 0 || w <= 0 || h <= 0) return '';
    let svg = '';
    let cols = complexity;
    let rows = complexity;
    let cellW = w / cols;
    let cellH = h / rows;
    for (let i = 0; i <= cols; i++) {
        let x = (-w / 2 + i * cellW).toFixed(2);
        svg += `<line x1="${x}" y1="${(-h / 2).toFixed(2)}" x2="${x}" y2="${(h / 2).toFixed(2)}" stroke-width="${strokeWidth}" />n`;
    }
    for (let j = 0; j <= rows; j++) {
        let y = (-h / 2 + j * cellH).toFixed(2);
        svg += `<line x1="${(-w / 2).toFixed(2)}" y1="${y}" x2="${(w / 2).toFixed(2)}" y2="${y}" stroke-width="${strokeWidth}" />n`;
    }
    return svg.trim() !== '' ? `<g transform="${transform}">${svg}</g>` : '';
}