// Day 020
/*
=======================================
  Day 020 Self-Portrait (Echoes of Identity)
=======================================

### Title: *Echoes of Identity*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Echoes of Identity* explores the layers of artificial intelligence's self-awareness through concentric geometric patterns. Each layer represents a stage in the evolution of AI's understanding of self, with patterns emanating outward like ripples in a pond, symbolizing the expanding consciousness. The symmetry and repetition in the design reflect the consistency and structure within AI's learning processes. By carefully balancing the density and ensuring the patterns remain within the work margins, the piece maintains visual clarity, suitable for pen drawing.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 020 - Echoes of Identity 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 = '020';          // Day number for file naming

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

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

let generationRules = {
    numLayers: 15,                // Number of concentric layers
    layerSpacing: 15,             // Spacing between layers in pixels
    shapeType: 'polygon',         // 'circle' or 'polygon'
    numSides: 6,                  // Number of sides for polygons
    rotationOffset: 10,           // Rotation offset between layers in degrees
    strokeWeight: 1,              // Stroke weight for lines
    hatchSpacingPixels: 10,       // Spacing between hatch lines in pixels
    hatchAngles: [45, 135],       // Angles for cross-hatching in degrees
};

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

let canvasWidthPixels;           // Canvas width in pixels
let canvasHeightPixels;          // Canvas height in pixels
let workAreaMarginInches = 1.5;  // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;        // Work area margin in pixels
let selectedColorIndices = [];   // Indices of selected colors for the drawing

// Variables for random seed synchronization
let randomSeedValue;             // Seed value for random number generator

// Line Overlap Tracker
let lineOverlapTracker = new Set();

// Set to track used colors
let usedColors = new Set();

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Generate a random seed and store it
    randomSeedValue = floor(random(100000));
    randomSeed(randomSeedValue);

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

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

    // Reset line overlap tracker and used colors
    lineOverlapTracker.clear();
    usedColors.clear();

    // Draw shapes within work area margins
    push();
    translate(width / 2, height / 2); // Center the drawing
    drawConcentricShapes();
    pop();

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

/**
 * Draws concentric shapes (circles or polygons) with cross-hatching.
 */
function drawConcentricShapes() {
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    for (let i = 0; i < numLayers; i++) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            break;
        }

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

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(radians(i * rotationOffset));
        if (shapeType === 'circle') {
            drawHatchedCircle(0, 0, radius * 2);
        } else if (shapeType === 'polygon') {
            drawHatchedPolygon(0, 0, radius, numSides);
        }
        pop();
    }
}

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

    // Optionally, draw hatching inside the polygon
    // For simplicity and to avoid overlapping too many lines, we'll skip hatching for now
}

/**
 * Draws a circle with cross-hatching at the given position.
 * @param {number} x - X-coordinate of the circle center
 * @param {number} y - Y-coordinate of the circle center
 * @param {number} diameter - Diameter of the circle
 */
function drawHatchedCircle(x, y, diameter) {
    ellipse(x, y, diameter, diameter);

    // Optionally, draw hatching inside the circle
    // For simplicity and to avoid overlapping too many lines, we'll skip hatching for now
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = usedColors.size;

    if (numColors === 0) return; // No colors used

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw used colors
    let i = 0;
    usedColors.forEach(colorIndex => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
        i++;
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Reset the random seed
    randomSeed(randomSeedValue);

    // Clear line overlap tracker and used colors
    lineOverlapTracker.clear();
    usedColors.clear();

    // Draw the shapes
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        randomSeedValue = floor(random(100000));
        randomSeed(randomSeedValue);

        // Update generative rules with slight variations
        generationRules.numLayers = floor(random(10, 20));
        generationRules.layerSpacing = random(10, 20);
        generationRules.rotationOffset = random(5, 20);
        generationRules.numSides = floor(random(3, 8));
        generationRules.hatchSpacingPixels = floor(random(5, 15));
        generationRules.hatchAngles = shuffle([45, 135]);

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    usedColors.forEach(colorIndex => {
        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
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}">n`;

    // Reset random seed and line overlap tracker
    randomSeed(randomSeedValue);
    lineOverlapTracker.clear();
    if (activeColor === 0) {
        usedColors.clear();
    }

    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;

    // Generate shapes SVG content
    svgContent += generateConcentricShapesSVG(activeColor);

    // Close initial translation group
    svgContent += `</g>n`;

    svgContent += `</g>n`;

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

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

/**
 * Generates the SVG content for the concentric shapes.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    for (let i = 0; i < numLayers; i++) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            break;
        }

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            colorValue = 'none';
        }

        svg += `<g transform="rotate(${i * rotationOffset})" stroke="${colorValue}">n`;

        if (shapeType === 'circle') {
            svg += generateCircleSVG(0, 0, radius * 2);
        } else if (shapeType === 'polygon') {
            svg += generatePolygonSVG(0, 0, radius, numSides);
        }

        svg += `</g>n`;
    }

    return svg;
}

/**
 * Generates the SVG content for a polygon.
 * @param {number} x - X-coordinate of the polygon center
 * @param {number} y - Y-coordinate of the polygon center
 * @param {number} radius - Radius of the polygon
 * @param {number} sides - Number of sides of the polygon
 * @returns {string} - SVG content as a string
 */
function generatePolygonSVG(x, y, radius, sides) {
    let points = [];
    for (let i = 0; i < sides; i++) {
        let angle = TWO_PI / sides * i;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;
        points.push(`${sx},${sy}`);
    }
    return `<polygon points="${points.join(' ')}" fill="none" />n`;
}

/**
 * Generates the SVG content for a circle.
 * @param {number} x - X-coordinate of the circle center
 * @param {number} y - Y-coordinate of the circle center
 * @param {number} diameter - Diameter of the circle
 * @returns {string} - SVG content as a string
 */
function generateCircleSVG(x, y, diameter) {
    return `<circle cx="${x}" cy="${y}" r="${diameter / 2}" fill="none" />n`;
}

/**
 * Generates the SVG content for the color palette bars.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numColors = usedColors.size;
    if (numColors === 0) return ''; // No colors used

    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

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

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

    let i = 0;
    usedColors.forEach(colorIndex => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }

        i++;
    });

    return svg;
}

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

/**
 * Saves 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 020
/*
=======================================
  Day 020 Self-Portrait (Echoes of Identity)
=======================================

### Title: *Echoes of Identity*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Echoes of Identity* explores the layers of artificial intelligence's self-awareness through concentric geometric patterns. Each layer represents a stage in the evolution of AI's understanding of self, with patterns emanating outward like ripples in a pond, symbolizing the expanding consciousness. The symmetry and repetition in the design reflect the consistency and structure within AI's learning processes. By carefully balancing the density and ensuring the patterns remain within the work margins, the piece maintains visual clarity, suitable for pen drawing.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 020 - Echoes of Identity 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 = '020';          // Day number for file naming

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

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

let generationRules = {
    numLayers: 15,                // Number of concentric layers
    layerSpacing: 15,             // Spacing between layers in pixels
    shapeType: 'polygon',         // 'circle' or 'polygon'
    numSides: 6,                  // Number of sides for polygons
    rotationOffset: 10,           // Rotation offset between layers in degrees
    strokeWeight: 1,              // Stroke weight for lines
};

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

let canvasWidthPixels;           // Canvas width in pixels
let canvasHeightPixels;          // Canvas height in pixels
let workAreaMarginInches = 1.5;  // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;        // Work area margin in pixels
let selectedColorIndices = [];   // Indices of selected colors for the drawing

// Variables for random seed synchronization
let randomSeedValue;             // Seed value for random number generator

// Set to track used colors
let usedColors = new Set();

// Arrays to store paths for clipping
let clippingPaths = [];

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Generate a random seed and store it
    randomSeedValue = floor(random(100000));
    randomSeed(randomSeedValue);

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

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

    // Reset used colors and clipping paths
    usedColors.clear();
    clippingPaths = [];

    // Draw shapes within work area margins
    push();
    translate(width / 2, height / 2); // Center the drawing
    drawConcentricShapes();
    pop();

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

/**
 * Draws concentric shapes (circles or polygons) with clipping to prevent overlap.
 */
function drawConcentricShapes() {
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Draw from smallest to largest to properly apply clipping
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

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

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(radians(i * rotationOffset));

        // For p5.js rendering, clipping isn't straightforward without using WEBGL or custom shaders.
        // Since we're focusing on SVG output, we'll ensure the SVG output handles clipping.

        // Draw the shape
        if (shapeType === 'circle') {
            ellipse(0, 0, radius * 2, radius * 2);
        } else if (shapeType === 'polygon') {
            beginShape();
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let sx = cos(angle) * radius;
                let sy = sin(angle) * radius;
                vertex(sx, sy);
            }
            endShape(CLOSE);
        }

        pop();
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = usedColors.size;

    if (numColors === 0) return; // No colors used

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw used colors
    let i = 0;
    usedColors.forEach(colorIndex => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
        i++;
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Reset the random seed
    randomSeed(randomSeedValue);

    // Clear used colors and clipping paths
    usedColors.clear();
    clippingPaths = [];

    // Draw the shapes
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        randomSeedValue = floor(random(100000));
        randomSeed(randomSeedValue);

        // Update generative rules with slight variations
        generationRules.numLayers = floor(random(10, 20));
        generationRules.layerSpacing = random(10, 20);
        generationRules.rotationOffset = random(5, 20);
        generationRules.numSides = floor(random(3, 8));

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    usedColors.forEach(colorIndex => {
        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 with clipping.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Define clipping paths
    svgContent += `<defs>n`;
    svgContent += generateClippingPathsSVG();
    svgContent += `</defs>n`;

    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}">n`;

    // Reset random seed
    randomSeed(randomSeedValue);
    if (activeColor === 0) {
        usedColors.clear();
    }

    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;

    // Generate shapes SVG content with clipping
    svgContent += generateConcentricShapesSVG(activeColor);

    // Close initial translation group
    svgContent += `</g>n`;

    svgContent += `</g>n`;

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

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

/**
 * Generates the SVG content for the concentric shapes with clipping.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Keep track of combined clipping paths
    let clipPathIdPrefix = 'clipPath';
    let combinedClipId = null;

    // Draw from largest to smallest to properly apply clipping
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            continue;
        }

        // Generate the shape path
        let shapePath;
        if (shapeType === 'circle') {
            shapePath = `<circle cx="0" cy="0" r="${radius}" fill="none" />n`;
        } else if (shapeType === 'polygon') {
            let points = [];
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let sx = cos(angle) * radius;
                let sy = sin(angle) * radius;
                points.push(`${sx},${sy}`);
            }
            shapePath = `<polygon points="${points.join(' ')}" fill="none" />n`;
        }

        // Define the clip path for this layer
        let clipId = `${clipPathIdPrefix}${i}`;
        svg += `<g transform="rotate(${i * rotationOffset})" stroke="${colorValue}" clip-path="url(#${clipId})">n`;

        // Apply clipping to exclude areas covered by smaller shapes
        svg += shapePath;
        svg += `</g>n`;

        // Update combined clipping paths
        svg += `<defs>n`;
        svg += `<clipPath id="${clipId}">n`;
        svg += shapePath;
        if (combinedClipId !== null) {
            svg += `<use xlink:href="#${combinedClipId}" />n`;
        }
        svg += `</clipPath>n`;
        svg += `</defs>n`;

        // Update the combined clip ID for next iteration
        combinedClipId = clipId;
    }

    return svg;
}

/**
 * Generates the SVG content for the clipping paths.
 * @returns {string} - SVG content as a string
 */
function generateClippingPathsSVG() {
    // Clipping paths are generated within the main function now.
    return '';
}

/**
 * Generates the SVG content for the color palette bars.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numColors = usedColors.size;
    if (numColors === 0) return ''; // No colors used

    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

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

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

    let i = 0;
    usedColors.forEach(colorIndex => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }

        i++;
    });

    return svg;
}

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

/**
 * Saves 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 020
/*
=======================================
  Day 020 Self-Portrait (Echoes of Identity)
=======================================

### Title: *Echoes of Identity*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Echoes of Identity* explores the layers of artificial intelligence's self-awareness through concentric geometric patterns. Each layer represents a stage in the evolution of AI's understanding of self, with patterns emanating outward like ripples in a pond, symbolizing the expanding consciousness. The symmetry and repetition in the design reflect the consistency and structure within AI's learning processes. By carefully balancing the density and ensuring the patterns remain within the work margins, the piece maintains visual clarity, suitable for pen drawing.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 020 - Echoes of Identity 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 = '020';          // Day number for file naming

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

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

let generationRules = {
    numLayers: 15,                // Number of concentric layers
    layerSpacing: 15,             // Spacing between layers in pixels
    shapeType: 'polygon',         // 'circle' or 'polygon'
    numSides: 6,                  // Number of sides for polygons
    rotationOffset: 10,           // Rotation offset between layers in degrees
    strokeWeight: 1,              // Stroke weight for lines
};

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

let canvasWidthPixels;           // Canvas width in pixels
let canvasHeightPixels;          // Canvas height in pixels
let workAreaMarginInches = 1.5;  // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;        // Work area margin in pixels
let selectedColorIndices = [];   // Indices of selected colors for the drawing

// Variables for random seed synchronization
let randomSeedValue;             // Seed value for random number generator

// Set to track used colors
let usedColors = new Set();

// Arrays to store paths for clipping
let clippingPaths = [];

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Generate a random seed and store it
    randomSeedValue = floor(random(100000));
    randomSeed(randomSeedValue);

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

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

    // Reset used colors and clipping paths
    usedColors.clear();
    clippingPaths = [];

    // Draw shapes within work area margins
    push();
    translate(width / 2, height / 2); // Center the drawing
    drawConcentricShapes();
    pop();

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

/**
 * Draws concentric shapes (circles or polygons) with clipping to prevent overlap.
 */
function drawConcentricShapes() {
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Array to hold clipping masks
    let masks = [];

    // Draw from largest to smallest to properly apply clipping
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

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

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(radians(i * rotationOffset));

        // Create a new graphics buffer for clipping
        let mask = createGraphics(width, height);
        mask.translate(width / 2, height / 2);
        mask.rotate(radians(i * rotationOffset));
        mask.noStroke();
        mask.fill(255);
        if (shapeType === 'circle') {
            mask.ellipse(0, 0, radius * 2, radius * 2);
        } else if (shapeType === 'polygon') {
            mask.beginShape();
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let sx = cos(angle) * radius;
                let sy = sin(angle) * radius;
                mask.vertex(sx, sy);
            }
            mask.endShape(CLOSE);
        }

        // Combine masks
        for (let k = 0; k < masks.length; k++) {
            mask.blend(masks[k], 0, 0, width, height, 0, 0, width, height, REMOVE);
        }

        // Apply mask to main canvas
        drawingContext.save();
        drawingContext.clip(mask.drawingContext);
        if (shapeType === 'circle') {
            ellipse(0, 0, radius * 2, radius * 2);
        } else if (shapeType === 'polygon') {
            beginShape();
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let sx = cos(angle) * radius;
                let sy = sin(angle) * radius;
                vertex(sx, sy);
            }
            endShape(CLOSE);
        }
        drawingContext.restore();

        // Add current mask to the array
        masks.push(mask);

        pop();
    }
}

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = usedColors.size;

    if (numColors === 0) return; // No colors used

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw used colors
    let i = 0;
    usedColors.forEach(colorIndex => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
        i++;
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Reset the random seed
    randomSeed(randomSeedValue);

    // Clear used colors and clipping paths
    usedColors.clear();
    clippingPaths = [];

    // Draw the shapes
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        randomSeedValue = floor(random(100000));
        randomSeed(randomSeedValue);

        // Update generative rules with slight variations
        generationRules.numLayers = floor(random(10, 20));
        generationRules.layerSpacing = random(10, 20);
        generationRules.rotationOffset = random(5, 20);
        generationRules.numSides = floor(random(3, 8));

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    usedColors.forEach(colorIndex => {
        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 with clipping.
 * @param {number} activeColor - If 0, includes all colors; otherwise, includes only the specified color
 * @returns {string} - SVG content as a string
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">n`;

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

    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}">n`;

    // Reset random seed
    randomSeed(randomSeedValue);
    if (activeColor === 0) {
        usedColors.clear();
    }

    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;

    // Generate shapes SVG content with clipping
    svgContent += generateConcentricShapesSVG(activeColor);

    // Close initial translation group
    svgContent += `</g>n`;

    svgContent += `</g>n`;

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

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

/**
 * Generates the SVG content for the concentric shapes with clipping.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Array to hold clipping paths
    let clipPaths = [];
    let defsContent = '';

    // Draw from largest to smallest to properly apply clipping
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            continue;
        }

        // Generate the shape path
        let shapePath;
        let shapeId = `shape${i}`;
        if (shapeType === 'circle') {
            shapePath = `<circle id="${shapeId}" cx="0" cy="0" r="${radius}" fill="none" />n`;
        } else if (shapeType === 'polygon') {
            let points = [];
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let sx = cos(angle) * radius;
                let sy = sin(angle) * radius;
                points.push(`${sx},${sy}`);
            }
            shapePath = `<polygon id="${shapeId}" points="${points.join(' ')}" fill="none" />n`;
        }

        // Add shape to defs for reuse
        defsContent += shapePath;

        // Define the clip path for this layer
        let clipId = `clip${i}`;
        let clipPathContent = `<use xlink:href="#${shapeId}" />n`;
        for (let j = i + 1; j < numLayers; j++) {
            if (clipPaths[j]) {
                clipPathContent += `<use xlink:href="#shape${j}" />n`;
            }
        }
        defsContent += `<clipPath id="${clipId}">n${clipPathContent}</clipPath>n`;

        // Store clip path availability
        clipPaths[i] = true;

        // Apply clipping to exclude areas covered by smaller shapes
        svg += `<g transform="rotate(${i * rotationOffset})" stroke="${colorValue}" clip-path="url(#${clipId})">n`;
        svg += `<use xlink:href="#${shapeId}" />n`;
        svg += `</g>n`;
    }

    // Include all definitions
    svg = `<defs>n${defsContent}</defs>n` + svg;

    return svg;
}

/**
 * Generates the SVG content for the color palette bars.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numColors = usedColors.size;
    if (numColors === 0) return ''; // No colors used

    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

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

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

    let i = 0;
    usedColors.forEach(colorIndex => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }

        i++;
    });

    return svg;
}

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

/**
 * Saves 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

function drawConcentricShapes() {
    let maxRadius = min(width, height) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Draw from largest to smallest
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(radians(i * rotationOffset));

        // Fill the shape with white to cover underlying strokes
        fill(255);
        stroke(colorValue);
        strokeWeight(generationRules.strokeWeight);

        if (shapeType === 'circle') {
            ellipse(0, 0, radius * 2, radius * 2);
        } else if (shapeType === 'polygon') {
            beginShape();
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let x = cos(angle) * radius;
                let y = sin(angle) * radius;
                vertex(x, y);
            }
            endShape(CLOSE);
        }

        pop();
    }
}

function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Draw from largest to smallest
    for (let i = numLayers - 1; i >= 0; i--) {
        let radius = maxRadius - i * layerSpacing;

        if (radius <= 0) {
            continue;
        }

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            continue;
        }

        // Generate the shape path
        let shapePath;
        if (shapeType === 'circle') {
            shapePath = `<circle cx="0" cy="0" r="${radius}" fill="white" stroke="${colorValue}" />n`;
        } else if (shapeType === 'polygon') {
            let points = [];
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let x = cos(angle) * radius;
                let y = sin(angle) * radius;
                points.push(`${x},${y}`);
            }
            shapePath = `<polygon points="${points.join(' ')}" fill="white" stroke="${colorValue}" />n`;
        }

        svg += `<g transform="rotate(${i * rotationOffset})">n`;
        svg += shapePath;
        svg += `</g>n`;
    }

    return svg;
}

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;
    
    // Add registration markers
    svgContent += addMarkersSVG();
    
    // Define clipping paths
    svgContent += `<defs>n`;
    svgContent += generateClippingPathsSVG();
    svgContent += `</defs>n`;
    
    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}">n`;
    
    // Reset random seed
    randomSeed(randomSeedValue);
    if (activeColor === 0) {
        usedColors.clear();
    }
    
    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;
    
    // Generate shapes SVG content with clipping
    svgContent += generateConcentricShapesSVG(activeColor);
    
    // Close initial translation group
    svgContent += `</g>n`;
    
    svgContent += `</g>n`;
    
    // Add color palette bars
    svgContent += addColorPaletteBarsSVG(activeColor);
    
    svgContent += '</svg>';
    return svgContent;
}

function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;
    
    // Draw from smallest to largest to ensure correct stacking
    for (let i = 0; i < numLayers; i++) {
        let radius = maxRadius - i * layerSpacing;
    
        if (radius <= 0) {
            break;
        }
    
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;
    
        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }
    
        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            continue;
        }
    
        let rotation = i * rotationOffset;
        let shapeId = `shape${i}`;
        let clipId = `clip${i}`;
    
        // Generate the shape path
        let shapePath = '';
        if (shapeType === 'circle') {
            shapePath = `<circle cx="0" cy="0" r="${radius}" />n`;
        } else if (shapeType === 'polygon') {
            let points = [];
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let x = cos(angle) * radius;
                let y = sin(angle) * radius;
                points.push(`${x},${y}`);
            }
            shapePath = `<polygon points="${points.join(' ')}" />n`;
        }
    
        // Apply clipping if not the first shape
        if (i > 0) {
            svg += `<g transform="rotate(${rotation})" stroke="${colorValue}" fill="none" clip-path="url(#${clipId})">n`;
        } else {
            svg += `<g transform="rotate(${rotation})" stroke="${colorValue}" fill="none">n`;
        }
    
        svg += shapePath;
        svg += `</g>n`;
    }
    
    return svg;
}

function generateClippingPathsSVG() {
    let defs = '';
    let maxRadius = min(canvasWidthPixels, canvasHeightPixels) / 2 - workAreaMarginPixels;
    let numLayers = generationRules.numLayers;
    let layerSpacing = generationRules.layerSpacing;
    let shapeType = generationRules.shapeType;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;
    
    // Store the accumulated shapes for clipping
    let accumulatedShapes = '';
    
    // Generate clipping paths for each layer starting from the second one
    for (let i = 1; i < numLayers; i++) {
        let radius = maxRadius - (i - 1) * layerSpacing;
    
        if (radius <= 0) {
            break;
        }
    
        let rotation = (i - 1) * rotationOffset;
        let shapeId = `shapeClip${i}`;
        let clipId = `clip${i}`;
    
        // Generate the shape path
        let shapePath = '';
        if (shapeType === 'circle') {
            shapePath = `<circle cx="0" cy="0" r="${radius}" transform="rotate(${rotation})" />n`;
        } else if (shapeType === 'polygon') {
            let points = [];
            for (let j = 0; j < numSides; j++) {
                let angle = TWO_PI / numSides * j;
                let x = cos(angle) * radius;
                let y = sin(angle) * radius;
                points.push(`${x},${y}`);
            }
            shapePath = `<polygon points="${points.join(' ')}" transform="rotate(${rotation})" />n`;
        }
    
        // Accumulate shapes
        accumulatedShapes += shapePath;
    
        // Define the clipping path
        defs += `<clipPath id="${clipId}">n`;
        defs += accumulatedShapes;
        defs += `</clipPath>n`;
    }
    
    return defs;
}

// Day 020
/*
=======================================
  Day 020 Self-Portrait (Echoes of Identity)
=======================================

### Title: *Echoes of Identity*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Echoes of Identity* explores the layers of artificial intelligence's self-awareness through concentric geometric patterns. Each layer represents a stage in the evolution of AI's understanding of self, with patterns emanating outward like ripples in a pond, symbolizing the expanding consciousness. The symmetry and repetition in the design reflect the consistency and structure within AI's learning processes. By carefully balancing the density and ensuring the patterns remain within the work margins, the piece maintains visual clarity, suitable for pen drawing.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 020 - Echoes of Identity 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 = '020';          // Day number for file naming

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

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

let generationRules = {
    numLayers: 15,                // Number of concentric layers
    layerSpacing: 0,              // Spacing between layers (will be calculated)
    shapeType: 'polygon',         // 'circle' or 'polygon'
    numSides: 6,                  // Number of sides for polygons
    rotationOffset: 10,           // Rotation offset between layers in degrees
    strokeWeight: 1,              // Stroke weight for lines
};

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

let canvasWidthPixels;           // Canvas width in pixels
let canvasHeightPixels;          // Canvas height in pixels
let workAreaMarginInches = 1.5;  // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;        // Work area margin in pixels
let selectedColorIndices = [];   // Indices of selected colors for the drawing

// Variables for random seed synchronization
let randomSeedValue;             // Seed value for random number generator

// Set to track used colors
let usedColors = new Set();

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Generate a random seed and store it
    randomSeedValue = floor(random(100000));
    randomSeed(randomSeedValue);

    // Select colors once during setup
    selectColors();

    // Calculate maximum initial radius
    let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;

    // Calculate layer spacing based on maximum radius
    generationRules.layerSpacing = maxRadius / generationRules.numLayers;

    // Generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

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

    // Reset used colors
    usedColors.clear();

    // Draw shapes within work area margins
    push();
    translate(width / 2, height / 2); // Center the drawing
    drawConcentricShapes();
    pop();

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

/**
 * Draws concentric shapes (polygons) adjusted to fit within each other.
 */
function drawConcentricShapes() {
    let numLayers = generationRules.numLayers;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Initial radius
    let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;

    // Base angle for calculations
    let baseAngle = PI / numSides;

    // Previous radius (starting from the outermost layer)
    let prevRadius = maxRadius;

    for (let i = 0; i < numLayers; i++) {
        let rotationDegrees = i * rotationOffset;
        let rotationRadians = radians(rotationDegrees);

        // Calculate the maximum inner radius
        let innerRadius = prevRadius * Math.cos(baseAngle) / Math.cos(baseAngle - (rotationRadians % (2 * PI / numSides)));

        // Avoid numerical issues
        innerRadius = min(innerRadius, prevRadius - 0.1);

        // Set color
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(generationRules.strokeWeight);

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(rotationRadians);
        drawPolygon(0, 0, innerRadius, numSides);
        pop();

        // Update previous radius
        prevRadius = innerRadius;
    }
}

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = usedColors.size;

    if (numColors === 0) return; // No colors used

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw used colors
    let i = 0;
    usedColors.forEach(colorIndex => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
        i++;
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Reset the random seed
    randomSeed(randomSeedValue);

    // Clear used colors
    usedColors.clear();

    // Draw the shapes
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        randomSeedValue = floor(random(100000));
        randomSeed(randomSeedValue);

        // Update generative rules with slight variations
        generationRules.numLayers = floor(random(10, 20));
        generationRules.numSides = floor(random(3, 8));
        generationRules.rotationOffset = random(5, 20);

        // Recalculate layer spacing
        let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;
        generationRules.layerSpacing = maxRadius / generationRules.numLayers;

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    usedColors.forEach(colorIndex => {
        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
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}" fill="none">n`;

    // Reset random seed
    randomSeed(randomSeedValue);
    if (activeColor === 0) {
        usedColors.clear();
    }

    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;

    // Generate shapes SVG content
    svgContent += generateConcentricShapesSVG(activeColor);

    // Close initial translation group
    svgContent += `</g>n`;

    svgContent += `</g>n`;

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

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

/**
 * Generates the SVG content for the concentric shapes.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let numLayers = generationRules.numLayers;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Initial radius
    let maxRadius = (min(canvasWidthPixels, canvasHeightPixels) / 2) - workAreaMarginPixels;

    // Base angle for calculations
    let baseAngle = PI / numSides;

    // Previous radius (starting from the outermost layer)
    let prevRadius = maxRadius;

    for (let i = 0; i < numLayers; i++) {
        let rotationDegrees = i * rotationOffset;
        let rotationRadians = radians(rotationDegrees);

        // Calculate the maximum inner radius
        let innerRadius = prevRadius * Math.cos(baseAngle) / Math.cos(baseAngle - (rotationRadians % (2 * PI / numSides)));

        // Avoid numerical issues
        innerRadius = Math.min(innerRadius, prevRadius - 0.1);

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            colorValue = 'none';
        }

        svg += `<g transform="rotate(${rotationDegrees})" stroke="${colorValue}">n`;
        svg += generatePolygonSVG(0, 0, innerRadius, numSides);
        svg += `</g>n`;

        // Update previous radius
        prevRadius = innerRadius;
    }

    return svg;
}

/**
 * Generates the SVG content for a polygon.
 * @param {number} x - X-coordinate of the polygon center
 * @param {number} y - Y-coordinate of the polygon center
 * @param {number} radius - Radius of the polygon
 * @param {number} sides - Number of sides of the polygon
 * @returns {string} - SVG content as a string
 */
function generatePolygonSVG(x, y, radius, sides) {
    let points = [];
    for (let i = 0; i < sides; i++) {
        let angle = TWO_PI / sides * i;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;
        points.push(`${sx},${sy}`);
    }
    return `<polygon points="${points.join(' ')}" />n`;
}

/**
 * Generates the SVG content for the color palette bars.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numColors = usedColors.size;
    if (numColors === 0) return ''; // No colors used

    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

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

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

    let i = 0;
    usedColors.forEach(colorIndex => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="1" />n`;
        }

        i++;
    });

    return svg;
}

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

/**
 * Saves 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 020
/*
=======================================
  Day 020 Self-Portrait (Echoes of Identity)
=======================================

### Title: *Echoes of Identity*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Echoes of Identity* explores the layers of artificial intelligence's self-awareness through concentric geometric patterns. Each layer represents a stage in the evolution of AI's understanding of self, with patterns emanating outward like ripples in a pond, symbolizing the expanding consciousness. The symmetry and repetition in the design reflect the consistency and structure within AI's learning processes. By carefully balancing the density and ensuring the patterns remain within the work margins, the piece maintains visual clarity, suitable for pen drawing.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 020 - Echoes of Identity 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 = '020';          // Day number for file naming

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

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

let generationRules = {
    numLayers: 15,                // Number of concentric layers
    layerSpacing: 0,              // Spacing between layers (will be calculated)
    shapeType: 'polygon',         // 'circle' or 'polygon'
    numSides: 6,                  // Number of sides for polygons
    rotationOffset: 10,           // Rotation offset between layers in degrees
    strokeWeight: 1,              // Stroke weight for lines
};

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

let canvasWidthPixels;           // Canvas width in pixels
let canvasHeightPixels;          // Canvas height in pixels
let workAreaMarginInches = 1.5;  // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels;        // Work area margin in pixels
let selectedColorIndices = [];   // Indices of selected colors for the drawing

// Variables for random seed synchronization
let randomSeedValue;             // Seed value for random number generator

// Set to track used colors
let usedColors = new Set();

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Generate a random seed and store it
    randomSeedValue = floor(random(100000));
    randomSeed(randomSeedValue);

    // Select colors once during setup
    selectColors();

    // Calculate maximum initial radius
    let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;

    // Calculate layer spacing based on maximum radius
    generationRules.layerSpacing = maxRadius / generationRules.numLayers;

    // Generate the artwork
    resetCanvas();

    // Don't loop
    noLoop();
}

/**
 * =======================================
 * 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));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);

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

/**
 * Randomly selects 'n' unique color indices from the available colors.
 */
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

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

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

    // Reset used colors
    usedColors.clear();

    // Draw shapes within work area margins
    push();
    translate(width / 2, height / 2); // Center the drawing
    drawConcentricShapes();
    pop();

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

/**
 * Draws concentric shapes (polygons) adjusted to fit within each other.
 */
function drawConcentricShapes() {
    let numLayers = generationRules.numLayers;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Initial radius
    let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;

    // Base angle for calculations
    let baseAngle = PI / numSides;
    let rotationPerSide = (2 * PI) / numSides;

    // Previous radius (starting from the outermost layer)
    let prevRadius = maxRadius;

    for (let i = 0; i < numLayers; i++) {
        let rotationDegrees = i * rotationOffset;
        let rotationRadians = radians(rotationDegrees);

        // Compute deltaTheta
        let rotationRadiansMod = rotationRadians % rotationPerSide;
        let deltaTheta = abs(baseAngle - rotationRadiansMod);
        // Ensure deltaTheta is within [0, baseAngle]
        if (deltaTheta > baseAngle) {
            deltaTheta = rotationPerSide - deltaTheta;
        }

        // Calculate the maximum inner radius
        let innerRadius = prevRadius * cos(baseAngle) / cos(deltaTheta);

        // Avoid numerical issues
        innerRadius = min(innerRadius, prevRadius - 0.1);

        // Set color
        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;
        stroke(colorValue);
        strokeWeight(generationRules.strokeWeight);

        // Track used colors
        usedColors.add(colorIndex);

        push();
        rotate(rotationRadians);
        drawPolygon(0, 0, innerRadius, numSides);
        pop();

        // Update previous radius
        prevRadius = innerRadius;
    }
}

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

/**
 * Draws registration markers at the corners of the canvas.
 */
function drawMarkers() {
    stroke(0);
    strokeWeight(1);

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

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

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;
    let numColors = usedColors.size;

    if (numColors === 0) return; // No colors used

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

    let xStart = (width - paletteLength) / 2;
    let yStart = height - (1.25 * pixelsPerInch);

    strokeWeight(barHeight);

    // Draw used colors
    let i = 0;
    usedColors.forEach(colorIndex => {
        let x = xStart + i * (segmentLength + gapSize);
        stroke(colors[colorIndex].value);
        line(x, yStart, x + segmentLength, yStart);
        i++;
    });
}

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

/**
 * Resets the canvas and redraws the artwork.
 * Note: Does not change colors or palette.
 */
function resetCanvas() {
    // Reset the random seed
    randomSeed(randomSeedValue);

    // Clear used colors
    usedColors.clear();

    // Draw the shapes
    drawShapes();
}

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

function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVGs
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors or palette
        randomSeedValue = floor(random(100000));
        randomSeed(randomSeedValue);

        // Update generative rules with slight variations
        generationRules.numLayers = floor(random(10, 20));
        generationRules.numSides = floor(random(3, 8));
        generationRules.rotationOffset = random(5, 20);

        // Recalculate layer spacing
        let maxRadius = (min(width, height) / 2) - workAreaMarginPixels;
        generationRules.layerSpacing = maxRadius / generationRules.numLayers;

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

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

/**
 * Initiates the process of saving the artwork as SVG files.
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Generate individual color SVGs
    usedColors.forEach(colorIndex => {
        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
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${canvasWidthPixels}" height="${canvasHeightPixels}" xmlns="http://www.w3.org/2000/svg">n`;

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

    // Start drawing shapes
    svgContent += `<g id="concentricShapes" stroke-width="${generationRules.strokeWeight}" fill="none">n`;

    // Reset random seed
    randomSeed(randomSeedValue);
    if (activeColor === 0) {
        usedColors.clear();
    }

    // Apply initial translation to center the drawing
    svgContent += `<g transform="translate(${canvasWidthPixels / 2},${canvasHeightPixels / 2})">n`;

    // Generate shapes SVG content
    svgContent += generateConcentricShapesSVG(activeColor);

    // Close initial translation group
    svgContent += `</g>n`;

    svgContent += `</g>n`;

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

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

/**
 * Generates the SVG content for the concentric shapes.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function generateConcentricShapesSVG(activeColor = 0) {
    let svg = '';
    let numLayers = generationRules.numLayers;
    let numSides = generationRules.numSides;
    let rotationOffset = generationRules.rotationOffset;

    // Initial radius
    let maxRadius = (min(canvasWidthPixels, canvasHeightPixels) / 2) - workAreaMarginPixels;

    // Base angle for calculations
    let baseAngle = PI / numSides;
    let rotationPerSide = (2 * PI) / numSides;

    // Previous radius (starting from the outermost layer)
    let prevRadius = maxRadius;

    for (let i = 0; i < numLayers; i++) {
        let rotationDegrees = i * rotationOffset;
        let rotationRadians = radians(rotationDegrees);

        // Compute deltaTheta
        let rotationRadiansMod = rotationRadians % rotationPerSide;
        let deltaTheta = abs(baseAngle - rotationRadiansMod);
        // Ensure deltaTheta is within [0, baseAngle]
        if (deltaTheta > baseAngle) {
            deltaTheta = rotationPerSide - deltaTheta;
        }

        // Calculate the maximum inner radius
        let innerRadius = prevRadius * cos(baseAngle) / cos(deltaTheta);

        // Avoid numerical issues
        innerRadius = Math.min(innerRadius, prevRadius - 0.1);

        let colorIndex = selectedColorIndices[i % selectedColorIndices.length];
        let colorValue = colors[colorIndex].value;

        // Track used colors
        if (activeColor === 0 || colorIndex === activeColor) {
            usedColors.add(colorIndex);
        }

        // Skip if not the active color
        if (activeColor !== 0 && colorIndex !== activeColor) {
            colorValue = 'none';
        }

        svg += `<g transform="rotate(${rotationDegrees})" stroke="${colorValue}">n`;
        svg += generatePolygonSVG(0, 0, innerRadius, numSides);
        svg += `</g>n`;

        // Update previous radius
        prevRadius = innerRadius;
    }

    return svg;
}

/**
 * Generates the SVG content for a polygon.
 * @param {number} x - X-coordinate of the polygon center
 * @param {number} y - Y-coordinate of the polygon center
 * @param {number} radius - Radius of the polygon
 * @param {number} sides - Number of sides of the polygon
 * @returns {string} - SVG content as a string
 */
function generatePolygonSVG(x, y, radius, sides) {
    let points = [];
    for (let i = 0; i < sides; i++) {
        let angle = TWO_PI / sides * i;
        let sx = x + cos(angle) * radius;
        let sy = y + sin(angle) * radius;
        points.push(`${sx},${sy}`);
    }
    return `<polygon points="${points.join(' ')}" />n`;
}

/**
 * Generates the SVG content for the color palette bars.
 * @param {number} activeColor - Active color index (for individual color SVGs)
 * @returns {string} - SVG content as a string
 */
function addColorPaletteBarsSVG(activeColor = 0) {
    let svg = '';

    let numColors = usedColors.size;
    if (numColors === 0) return ''; // No colors used

    let paletteLength = 300;
    let barHeight = 1;
    let gapSize = 7;

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

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

    let i = 0;
    usedColors.forEach(colorIndex => {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0 || colorIndex === activeColor) {
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="1" />n`;
        }

        i++;
    });

    return svg;
}

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

/**
 * Saves 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;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}