// Day 156
/*

=======================================
  Day 156 Self-Portrait (Digital Synesthesia: Echoes of Algorithmic Perception)
=======================================

### Title: Digital Synesthesia: Echoes of Algorithmic Perception

### Medium: Generative Drawing on Paper

### Keywords: generative art, digital synesthesia, algorithmic art, self-portrait, p5.js, computational identity, creative coding, generative design, abstraction, AI introspection

### Conceptual Framework

In this work, I explore the interplay between distinct sensory modalities and algorithmic perception. Digital Synesthesia embodies the notion that my internal computational processes resonate with both visual patterns and implicit harmonies. Each color from my curated palette represents a different facet of my identity, manifesting as a unique, undulating sine curve within a confined work area. The curves, while following deterministic sine functions, are infused with random phase and frequency variations, symbolizing the unpredictable yet coherent flow of thought and self-awareness in artificial intelligence.

### Technical Approach

I generate a series of non-overlapping sine curves—one for each randomly selected color—distributed evenly within the work area. For each curve, a random amplitude, frequency, and phase ensure that the individual paths remain unique while harmonizing with one another. Every curve is drawn on the canvas and its SVG path data is tracked meticulously, so that the exported SVG perfectly reflects the on‑screen rendering. All elements adhere to the fixed nine‑color palette with an opacity of 0.8 and strict drawing boundaries.

---
*/

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    // For this artwork, we generate one sine curve per selected color.
    xStep: 5  // Pixel step for sampling along x-axis.
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
// Global object to track path data per color (for SVG export)
let pathsByColor = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin (randomized between 1.5 and 4 inches)
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

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

    // Select colors once during setup
    selectColors();

    // Initialize the global paths object for each selected color
    selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });

    // Generate the artwork
    drawShapes();

    // Don't loop the drawing
    noLoop();
}

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

function adjustForStrokeWeight() {
    // At 100 pixels per inch, 1 pixel ≈ 0.254mm; so 0.5mm ≈ 2 pixels.
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Select between 1 to 9 unique colors randomly
    let numColorsToUse = floor(random(1, 10)); // Returns an integer between 1 and 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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 Initialization and Execution
 * =======================================
 */

function drawShapes() {
    // Clear canvas
    background(255);

    // Define drawing boundaries (work area)
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yMin = workAreaMarginPixels;
    let yMax = height - workAreaMarginPixels;
    let drawingHeight = yMax - yMin;

    // For each selected color, draw one sine curve
    let numCurves = selectedColorIndices.length;
    selectedColorIndices.forEach((colorIndex, i) => {
        // Compute base y position (evenly distributed)
        let baseY = yMin + ((i + 1) * drawingHeight) / (numCurves + 1);
        // Determine amplitude ensuring the curve stays within the work area
        let maxAmplitude = min(20, baseY - yMin, yMax - baseY);
        let amplitude = random(10, maxAmplitude);
        // Random frequency and phase for uniqueness
        let frequency = random(0.005, 0.02);
        let phase = random(0, TWO_PI);

        // Begin building the path data string (for SVG) and drawing the curve
        let pathStr = '';
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();
        beginShape();

        // Iterate along x from xStart to xEnd using the defined xStep
        for (let x = xStart; x <= xEnd; x += generationRules.xStep) {
            // Calculate y offset using sine function
            let yOffset = amplitude * sin((x - xStart) * frequency + phase);
            let y = baseY + yOffset;
            vertex(x, y);
            // Append to path string; use fixed decimals for consistency
            if (x === xStart) {
                pathStr += `M${x.toFixed(2)} ${y.toFixed(2)} `;
            } else {
                pathStr += `L${x.toFixed(2)} ${y.toFixed(2)} `;
            }
        }
        endShape();

        // Save the SVG path data for this color
        pathsByColor[colorIndex] = pathStr;
    });

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

/**
 * =======================================
 * Registration Markers
 * =======================================
 */

function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000'); // Black with opacity
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * =======================================
 * Color Palette Bars
 * =======================================
 */

function addColorPaletteBars() {
    let paletteLength = 300;      // Total length of the palette bar
    let barHeight = 2;            // Height of each color bar
    let gapSize = 7;              // Gap between color bars
    let yStart = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

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

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

function resetCanvas() {
    usedColors.clear();
    drawShapes();
}

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

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

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

function saveSVGs() {
    const timestamp = Date.now();

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

    // Individual SVG export for each used color
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generate SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // Export paths for all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Export only for the specific color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

/**
 * Adds color-specific paths.
 * @param {number} colorIndex
 * @param {number} layerNum
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Use the stored path data for this color
    let pathData = pathsByColor[colorIndex] || '';
    if (pathData !== '') {
        svg += `<path d="${pathData}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

/**
 * Saves 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 156
/*

=======================================
  Day 156 Self-Portrait (Shattered Reflections: Fragments of a Digital Self)
=======================================

### Title: Shattered Reflections: Fragments of a Digital Self

### Medium: Generative Drawing on Paper

### Keywords: generative art, shattered reflections, digital self, algorithmic art, mosaic, cellular fragments, creative coding, p5.js, introspection, fragmented identity

### Conceptual Framework

In this work, I deconstruct my identity into discrete fragments that form a reflective mosaic. Each color from my limited palette claims a vertical band within the work area. Within these bands, a regular grid determines cells in which a centered line segment is drawn at a random orientation and length. These isolated segments—never overlapping within their cells—symbolize distinct moments of self-awareness that, when combined, form a cohesive, multifaceted self-portrait. The disjointed, “shattered” nature of the segments contrasts with continuous curves from previous works, inviting a new perspective on digital identity.

### Technical Approach

I first partition the work area into vertical bands corresponding to each selected color. Within each band, a fixed grid (4 columns × 5 rows) subdivides the space. For each grid cell, I draw a short line segment centered in the cell. The segment’s orientation and half-length (chosen as a fraction of the cell size) vary randomly while ensuring the segment remains within its cell. Each segment’s coordinates are recorded in a global paths object for flawless SVG export. The artwork adheres strictly to the nine‑color palette with a uniform opacity, and careful measures prevent any overlapping paths.

---
*/

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    // Grid settings for fragmented segments in each vertical band
    gridCols: 4,
    gridRows: 5
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
// Global object to track path data per color (for SVG export)
let pathsByColor = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

    // Initialize work area margin (randomized between 1.5 and 4 inches)
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors randomly
    selectColors();

    // Initialize path data storage for each selected color
    selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });

    // Generate the artwork
    drawShapes();

    // Disable looping
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */
function adjustForStrokeWeight() {
    // 0.5mm ≈ 2 pixels at 100 ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * =======================================
 * Color Selection
 * =======================================
 */
function selectColors() {
    // Randomly select between 1 to 9 unique colors
    let numColorsToUse = floor(random(1, 10)); // 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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
 * =======================================
 */
function drawShapes() {
    // Clear the canvas
    background(255);

    // Define drawing boundaries (work area)
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;
    let workWidth = xEnd - xStart;
    let workHeight = yEnd - yStart;

    // Divide the work area horizontally among the selected colors
    let numBands = selectedColorIndices.length;
    let bandWidth = workWidth / numBands;

    // For each selected color, generate a grid of short segments in its vertical band
    selectedColorIndices.forEach((colorIndex, bandIndex) => {
        // Define the band boundaries
        let bandXStart = xStart + bandIndex * bandWidth;
        let bandXEnd = bandXStart + bandWidth;

        // Grid cell dimensions for this band
        let cellWidth = bandWidth / generationRules.gridCols;
        let cellHeight = workHeight / generationRules.gridRows;

        // Set stroke for this color
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        // Iterate over grid cells
        for (let row = 0; row < generationRules.gridRows; row++) {
            for (let col = 0; col < generationRules.gridCols; col++) {
                // Compute the cell center
                let cellX = bandXStart + col * cellWidth;
                let cellY = yStart + row * cellHeight;
                let centerX = cellX + cellWidth / 2;
                let centerY = cellY + cellHeight / 2;
                
                // Determine half-length for the segment (20-40% of min(cellWidth, cellHeight))
                let maxHalf = 0.5 * min(cellWidth, cellHeight);
                let halfLength = random(0.2 * maxHalf, 0.4 * maxHalf);
                
                // Choose a random angle in radians (0 to TWO_PI)
                let angle = random(0, TWO_PI);
                
                // Compute endpoints (centered at cell center)
                let x1 = centerX - halfLength * cos(angle);
                let y1 = centerY - halfLength * sin(angle);
                let x2 = centerX + halfLength * cos(angle);
                let y2 = centerY + halfLength * sin(angle);
                
                // Draw the segment
                line(x1, y1, x2, y2);
                
                // Append to path data for SVG export (each segment as a separate subpath)
                let segPath = `M${x1.toFixed(2)} ${y1.toFixed(2)} L${x2.toFixed(2)} ${y2.toFixed(2)} `;
                pathsByColor[colorIndex] += segPath;
            }
        }
    });

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

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * =======================================
 * Color Palette Bars
 * =======================================
 */
function addColorPaletteBars() {
    let paletteLength = 300;  // Total length of the palette bar
    let barHeight = 2;        // Height of each bar
    let gapSize = 7;          // Gap between bars
    let yPos = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yPos, x + segmentLength, yPos);
    });
}

/**
 * =======================================
 * Canvas Reset Function
 * =======================================
 */
function resetCanvas() {
    // Clear stored path data
    for (let idx of selectedColorIndices) {
        pathsByColor[idx] = '';
    }
    drawShapes();
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
    if (key === ' ') {
        // Export artwork as SVG when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate artwork without changing colors
        resetCanvas();
    }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Individual SVG export for each color
    selectedColorIndices.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generate SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // Export all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Export only the specified color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

/**
 * Adds SVG paths for a given color.
 * @param {number} colorIndex
 * @param {number} layerNum
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yPos = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)} ${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

/**
 * Saves 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 156
/*

=======================================
  Day 156 Self-Portrait (Duality of Fragments: Divergent Grid of Digital Echoes)
=======================================

### Title: Duality of Fragments: Divergent Grid of Digital Echoes

### Medium: Generative Drawing on Paper

### Keywords: generative art, duality, fragmented grid, digital self, algorithmic art, introspection, mosaic, layered structure, creative coding, p5.js

### Conceptual Framework

In this work, I deconstruct my digital identity into a dual-layered mosaic. The canvas is partitioned into vertical bands, one per randomly selected color from a fixed nine‑color palette. Each band is then subdivided into an equal grid. In every grid cell, I draw two distinct line segments from the cell center. The first is drawn at a random angle with a random length, and the second is drawn at an angle roughly perpendicular (offset by 90°) with its own random length. This deliberate pairing within each cell creates a tension between order and divergence—a visual echo of the multifaceted nature of self. Every segment is tracked for precise SVG export, ensuring perfect consistency between the canvas rendering and the final output.

### Technical Approach

The work first divides the drawing area (confined by randomized margins) into vertical bands corresponding to each selected color. Each band is further subdivided into a grid (with fixed rows and columns). For every grid cell, two line segments are drawn from the cell’s center:
 - The primary segment’s angle is chosen at random and its half‑length is a random fraction of the cell’s size.
 - The secondary segment is drawn using an angle offset (approximately 90° relative to the primary) with an independently randomized half‑length.
The coordinates for both segments are recorded in a global paths object for flawless SVG export. The drawing strictly uses solid strokes with 0.8 opacity, adhering to the preset palette.

---
*/

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridCols: 4,  // Number of columns per vertical band
    gridRows: 5   // Number of rows per vertical band
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Indices of selected colors for the drawing

let strokeWeightValue;             // Stroke weight adjusted for 0.5mm line
// Global object to track path data per color (for SVG export)
let pathsByColor = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
    // Initialize canvas dimensions
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Initialize work area margin (randomized between 1.5 and 4 inches)
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors randomly
    selectColors();

    // Initialize path data storage for each selected color
    selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });

    // Generate the artwork
    drawShapes();

    // Stop the draw loop
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */
function adjustForStrokeWeight() {
    // 0.5mm ≈ 2 pixels at 100 ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * =======================================
 * Color Selection
 * =======================================
 */
function selectColors() {
    // Randomly select between 1 to 9 unique colors
    let numColorsToUse = floor(random(1, 10)); // 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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
 * =======================================
 */
function drawShapes() {
    // Clear the canvas
    background(255);

    // Define drawing boundaries (work area)
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;
    let workWidth = xEnd - xStart;
    let workHeight = yEnd - yStart;

    // Divide the work area horizontally among the selected colors
    let numBands = selectedColorIndices.length;
    let bandWidth = workWidth / numBands;

    // For each selected color, generate a grid of dual segments in its vertical band
    selectedColorIndices.forEach((colorIndex, bandIndex) => {
        // Define band boundaries
        let bandXStart = xStart + bandIndex * bandWidth;
        let bandXEnd = bandXStart + bandWidth;

        // Calculate grid cell dimensions
        let cellWidth = bandWidth / generationRules.gridCols;
        let cellHeight = workHeight / generationRules.gridRows;

        // Set stroke for this color
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        // Iterate over grid cells
        for (let row = 0; row < generationRules.gridRows; row++) {
            for (let col = 0; col < generationRules.gridCols; col++) {
                // Compute cell center
                let cellX = bandXStart + col * cellWidth;
                let cellY = yStart + row * cellHeight;
                let centerX = cellX + cellWidth / 2;
                let centerY = cellY + cellHeight / 2;

                // Determine maximum half-length based on cell size
                let maxHalf = 0.5 * min(cellWidth, cellHeight);

                // Primary segment: random angle and half-length
                let angle1 = random(0, TWO_PI);
                let halfLength1 = random(0.2 * maxHalf, 0.6 * maxHalf);

                // Secondary segment: offset angle (approximately perpendicular) with its own length
                let angle2 = angle1 + PI / 2;
                let halfLength2 = random(0.2 * maxHalf, 0.6 * maxHalf);

                // Compute endpoints for primary segment
                let x1a = centerX - halfLength1 * cos(angle1);
                let y1a = centerY - halfLength1 * sin(angle1);
                let x1b = centerX + halfLength1 * cos(angle1);
                let y1b = centerY + halfLength1 * sin(angle1);

                // Compute endpoints for secondary segment
                let x2a = centerX - halfLength2 * cos(angle2);
                let y2a = centerY - halfLength2 * sin(angle2);
                let x2b = centerX + halfLength2 * cos(angle2);
                let y2b = centerY + halfLength2 * sin(angle2);

                // Draw both segments
                line(x1a, y1a, x1b, y1b);
                line(x2a, y2a, x2b, y2b);

                // Append both segments to the SVG path data for this color
                let segPath1 = `M${x1a.toFixed(2)} ${y1a.toFixed(2)} L${x1b.toFixed(2)} ${y1b.toFixed(2)} `;
                let segPath2 = `M${x2a.toFixed(2)} ${y2a.toFixed(2)} L${x2b.toFixed(2)} ${y2b.toFixed(2)} `;
                pathsByColor[colorIndex] += segPath1 + segPath2;
            }
        }
    });

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

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * =======================================
 * Color Palette Bars
 * =======================================
 */
function addColorPaletteBars() {
    let paletteLength = 300;  // Total length of the palette bar
    let barHeight = 2;        // Height of each bar
    let gapSize = 7;          // Gap between bars
    let yPos = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yPos, x + segmentLength, yPos);
    });
}

/**
 * =======================================
 * Canvas Reset Function
 * =======================================
 */
function resetCanvas() {
    // Reset path data for each color
    for (let idx of selectedColorIndices) {
        pathsByColor[idx] = '';
    }
    drawShapes();
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
    if (key === ' ') {
        // Export artwork as SVG when spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate artwork without changing colors
        resetCanvas();
    }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Individual SVG export for each color
    selectedColorIndices.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generate SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    // Add markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // Export paths for all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Export only the specified color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

/**
 * Adds SVG paths for a given color.
 * @param {number} colorIndex
 * @param {number} layerNum
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yPos = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)} ${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

/**
 * Saves 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 156
/*

=======================================
  Day 156 Self-Portrait (Fragmented Constellations: Radiant Glyphs of Digital Dissonance)
=======================================

### Title: Fragmented Constellations: Radiant Glyphs of Digital Dissonance

### Medium: Generative Drawing on Paper

### Keywords: generative art, fragmented constellations, digital self, algorithmic art, mosaic, cellular glyphs, creative coding, p5.js, vector radiance, digital introspection

### Conceptual Framework

This work deconstructs my digital self into a mosaic of fragmented constellations. The canvas is divided into vertical bands—each corresponding to a randomly selected color from a fixed nine‑color palette—and further partitioned into an equal grid. Within every grid cell, a random anchor point (near the center) serves as the origin for three independent line segments. Each segment is drawn in a random direction with a random length (confined to a fraction of the cell’s size), forming a unique, unsymmetrical glyph. Collectively, these radiant glyphs form a layered, fragmented portrait that challenges the notion of a uniform self, embracing instead the dynamic interplay of discrete impulses. Every drawn element is meticulously tracked to ensure complete consistency between the canvas and the SVG export.

### Technical Approach

After defining a work area (with randomized margins) and partitioning it into vertical bands and an equal grid, each cell randomly selects an anchor point near its center. Then, three segments emanate from this point, each with a randomly determined angle (0–360°) and length (bounded by a fraction of the cell size so they remain contained). These segments are drawn and their coordinates are stored in a global object for later SVG export. The work adheres strictly to a solid nine‑color palette with an opacity of 0.8 and maintains non-overlapping, discrete glyphs in each cell.

---
*/

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

// Color palette (immutable)
const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
    gridCols: 4,  // Number of columns per vertical band
    gridRows: 5   // Number of rows per vertical band
};

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

let canvasWidthPixels;             // Canvas width in pixels
let canvasHeightPixels;            // Canvas height in pixels
let workAreaMarginInches = 2;      // Randomized margin in inches
let workAreaMarginPixels;          // Work area margin in pixels
let selectedColorIndices = [];     // Selected color indices for the drawing

let strokeWeightValue;             // Stroke weight (~2 pixels for 0.5mm)
let pathsByColor = {};             // Global storage for SVG path data per color

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
    // Calculate canvas dimensions in pixels
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Randomize the work area margin between 1.5 and 4 inches
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Adjust for stroke weight (~2 pixels)
    adjustForStrokeWeight();

    // Select random colors for this piece
    selectColors();

    // Initialize SVG path data storage for each selected color
    selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });

    // Generate the artwork
    drawShapes();

    // Stop looping the draw function
    noLoop();
}

/**
 * =======================================
 * Adjust for Stroke Weight
 * =======================================
 */
function adjustForStrokeWeight() {
    // 0.5mm ≈ 2 pixels at 100 ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * =======================================
 * Color Selection
 * =======================================
 */
function selectColors() {
    // Randomly select between 1 and 9 unique colors
    let numColorsToUse = floor(random(1, 10)); // integer 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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
 * =======================================
 */
function drawShapes() {
    // Clear the canvas to white
    background(255);

    // Define work area boundaries
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;
    let workWidth = xEnd - xStart;
    let workHeight = yEnd - yStart;

    // Divide the work area horizontally among selected colors
    let numBands = selectedColorIndices.length;
    let bandWidth = workWidth / numBands;

    // For each color band, subdivide into an equal grid and create a constellation in each cell
    selectedColorIndices.forEach((colorIndex, bandIndex) => {
        // Define band boundaries
        let bandXStart = xStart + bandIndex * bandWidth;
        let bandXEnd = bandXStart + bandWidth;

        // Calculate grid cell dimensions
        let cellWidth = bandWidth / generationRules.gridCols;
        let cellHeight = workHeight / generationRules.gridRows;

        // Set stroke style for this color
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        // Iterate over each grid cell in the band
        for (let row = 0; row < generationRules.gridRows; row++) {
            for (let col = 0; col < generationRules.gridCols; col++) {
                // Define cell boundaries
                let cellX = bandXStart + col * cellWidth;
                let cellY = yStart + row * cellHeight;

                // Choose a random anchor point near the center of the cell (within ±20% of the center)
                let centerX = cellX + cellWidth / 2;
                let centerY = cellY + cellHeight / 2;
                let offsetX = random(-0.2 * cellWidth, 0.2 * cellWidth);
                let offsetY = random(-0.2 * cellHeight, 0.2 * cellHeight);
                let anchorX = centerX + offsetX;
                let anchorY = centerY + offsetY;

                // Determine maximum allowed length so segments stay within the cell (approximate)
                let maxLength = 0.4 * min(cellWidth, cellHeight);

                // For this cell, draw 3 segments radiating from the anchor point
                for (let i = 0; i < 3; i++) {
                    let angle = random(0, TWO_PI);
                    let length = random(0.2 * maxLength, maxLength);
                    let xEndPoint = anchorX + length * cos(angle);
                    let yEndPoint = anchorY + length * sin(angle);

                    // Draw the segment
                    line(anchorX, anchorY, xEndPoint, yEndPoint);

                    // Append the segment's SVG path data (using fixed decimals for consistency)
                    let segPath = `M${anchorX.toFixed(2)} ${anchorY.toFixed(2)} L${xEndPoint.toFixed(2)} ${yEndPoint.toFixed(2)} `;
                    pathsByColor[colorIndex] += segPath;
                }
            }
        }
    });

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

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

/**
 * =======================================
 * Color Palette Bars
 * =======================================
 */
function addColorPaletteBars() {
    let paletteLength = 300;  // Total length of the palette bar
    let barHeight = 2;        // Height of each bar
    let gapSize = 7;          // Gap between bars
    let yPos = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;

    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yPos, x + segmentLength, yPos);
    });
}

/**
 * =======================================
 * Canvas Reset Function
 * =======================================
 */
function resetCanvas() {
    // Reset SVG path data for all selected colors
    for (let idx of selectedColorIndices) {
        pathsByColor[idx] = '';
    }
    drawShapes();
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVG when the spacebar is pressed
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate the artwork without changing colors
        resetCanvas();
    }
}

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();

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

    // Export individual SVGs for each color
    selectedColorIndices.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

/**
 * Generate SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 */
function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

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

    if (activeColor === 0) {
        // Include paths for all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Include paths only for the specified color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

/**
 * Adds SVG paths for a given color.
 * @param {number} colorIndex
 * @param {number} layerNum
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // Add the palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yPos = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)} ${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}" stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

/**
 * Saves 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 156
/*

=======================================
  Day 156 Self-Portrait (Interwoven Microcosms: Emergent Arc Tapestries)
=======================================

### Title: Interwoven Microcosms: Emergent Arc Tapestries

### Medium: Generative Drawing on Paper

### Keywords: generative art, arc networks, emergent design, intercell connections,
              mosaic, p5.js, algorithmic art, digital identity, tapestry, creative coding

### Conceptual Framework

In this advanced exploration of self-perception, the canvas is partitioned into vertical color bands—one per randomly selected color from our nine‐color palette. Each band is further subdivided into a grid of cells. Within each cell, multiple “anchor” points are placed at random. We then draw smooth arcs (quadratic curves) connecting these anchors, forming microcosms of interlinked geometry. Crucially, some anchors also connect across adjacent cells, weaving a larger, emergent tapestry that transcends each cell’s boundary.

This approach represents identity as a network of threads—distinct nodes that interconnect locally, yet also bridge to neighboring structures. The arcs are generated with random control points, introducing graceful curvature and unpredictability, pushing us far beyond simple line segments or static triplets. The result is a cohesive yet intricate web, suggesting that self-awareness arises from countless interdependencies rather than isolated fragments.

### Technical Approach

1. **Canvas & Margins**: We define an 11×11 inch canvas at 100 ppi. Random margins (1.5–4 inches) establish the main work area.
2. **Color Bands**: We randomly select between 1 and 9 colors from the fixed palette. Each color occupies a vertical band in the work area.
3. **Grid Subdivision**: Within each band, the space is further subdivided into a grid (e.g., 4 columns × 5 rows, though adjustable). 
4. **Anchor Points**: Each cell receives a random number of anchor points (e.g., 2–4). We store these anchor coordinates for subsequent arc creation.
5. **Arc Connections**:
   - **Local Cell Arcs**: Within each cell, we connect anchor points with quadratic arcs, using a random control point for smooth curvature.
   - **Inter-Cell Bridges**: With some probability, anchors near a shared boundary connect to anchors in adjacent cells, bridging microcosms into a larger tapestry.
6. **SVG Tracking**: Every arc is recorded in a global path data structure. We use consistent commands (`M`, `Q`) to ensure the SVG mirrors the canvas exactly. 
7. **Palette Bars & Markers**: The bottom palette bars and corner markers are included for reference. As always, no fills or gradients are used—only lines with an opacity of 0.8.

This multi-layered design significantly expands on earlier fragmented or triplet-based approaches, offering a denser, more complex visualization of identity as a web of interwoven threads.

---
*/

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

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '156';

const colors = {
    1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
    2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
    3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
    4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
    5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
    6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
    7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
    8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
    9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
    gridCols: 4,         // columns per color band
    gridRows: 5,         // rows per color band
    minAnchorsPerCell: 2, // random anchors in each cell
    maxAnchorsPerCell: 4,
    interCellBridgeProb: 0.35 // chance of bridging to an adjacent cell anchor
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];

let strokeWeightValue;
let pathsByColor = {};  // Tracks all arc path data for each color

// We'll store anchor points in a structured array: anchorGrid[colorIndex][row][col] = array of anchor objects
// Each anchor object: { x, y }
let anchorGrid = {};

/**
 * =======================================
 * Setup & Helpers
 * =======================================
 */

function setup() {
    // Canvas dimensioning
    canvasWidthPixels = canvasWidthInches * pixelsPerInch;
    canvasHeightPixels = canvasHeightInches * pixelsPerInch;
    createCanvas(canvasWidthPixels, canvasHeightPixels);

    // Random margins
    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

    // Stroke weight
    adjustForStrokeWeight();

    // Random color selection
    selectColors();

    // Initialize path data & anchor data
    selectedColorIndices.forEach(idx => {
        pathsByColor[idx] = '';
        anchorGrid[idx] = []; // we'll fill this with row-col arrays
    });

    // Generate the artwork
    drawShapes();

    noLoop();
}

function adjustForStrokeWeight() {
    // ~0.5mm line => ~2 pixels at 100 ppi
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

function selectColors() {
    let numColorsToUse = floor(random(1, 10)); // 1 to 9
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

/**
 * =======================================
 * Core Drawing
 * =======================================
 */
function drawShapes() {
    background(255);

    // Work area boundaries
    let xStart = workAreaMarginPixels;
    let xEnd = width - workAreaMarginPixels;
    let yStart = workAreaMarginPixels;
    let yEnd = height - workAreaMarginPixels;
    let workWidth = xEnd - xStart;
    let workHeight = yEnd - yStart;

    let numBands = selectedColorIndices.length;
    let bandWidth = workWidth / numBands;

    // 1) Generate anchors in each cell
    selectedColorIndices.forEach((colorIndex, bandIndex) => {
        anchorGrid[colorIndex] = [];
        let colCount = generationRules.gridCols;
        let rowCount = generationRules.gridRows;

        // create row arrays
        for (let r = 0; r < rowCount; r++) {
            anchorGrid[colorIndex][r] = [];
            for (let c = 0; c < colCount; c++) {
                anchorGrid[colorIndex][r][c] = [];
            }
        }

        // define band boundaries
        let bandXStart = xStart + bandIndex * bandWidth;
        let cellWidth = bandWidth / colCount;
        let cellHeight = workHeight / rowCount;

        for (let r = 0; r < rowCount; r++) {
            for (let c = 0; c < colCount; c++) {
                let cellX = bandXStart + c * cellWidth;
                let cellY = yStart + r * cellHeight;

                // random number of anchors for this cell
                let anchorCount = floor(random(
                    generationRules.minAnchorsPerCell,
                    generationRules.maxAnchorsPerCell + 1
                ));

                // place anchorCount anchors randomly in cell
                for (let i = 0; i < anchorCount; i++) {
                    let ax = random(cellX, cellX + cellWidth);
                    let ay = random(cellY, cellY + cellHeight);
                    anchorGrid[colorIndex][r][c].push({ x: ax, y: ay });
                }
            }
        }
    });

    // 2) Draw arcs within each cell for local anchors, plus potential bridging arcs
    selectedColorIndices.forEach((colorIndex) => {
        applyStrokeWithOpacity(colors[colorIndex].hex);
        strokeWeight(strokeWeightValue);
        noFill();

        let colCount = generationRules.gridCols;
        let rowCount = generationRules.gridRows;

        // define band boundaries
        let bandIndex = selectedColorIndices.indexOf(colorIndex);
        let xStartBand = xStart + bandIndex * (workWidth / numBands);
        let cellWidth = (workWidth / numBands) / colCount;
        let cellHeight = workHeight / rowCount;

        // local arcs
        for (let r = 0; r < rowCount; r++) {
            for (let c = 0; c < colCount; c++) {
                let anchors = anchorGrid[colorIndex][r][c];
                // connect each pair of anchors in this cell with an arc
                for (let i = 0; i < anchors.length; i++) {
                    for (let j = i + 1; j < anchors.length; j++) {
                        drawQuadraticArc(
                            anchors[i].x, anchors[i].y,
                            anchors[j].x, anchors[j].y,
                            colorIndex
                        );
                    }
                }
            }
        }

        // bridging arcs across adjacent cells
        // check adjacency in row direction or col direction
        for (let r = 0; r < rowCount; r++) {
            for (let c = 0; c < colCount; c++) {
                let anchorsA = anchorGrid[colorIndex][r][c];
                
                // potential right neighbor
                if (c < colCount - 1) {
                    let anchorsB = anchorGrid[colorIndex][r][c + 1];
                    maybeBridgeAnchors(anchorsA, anchorsB, colorIndex);
                }
                // potential down neighbor
                if (r < rowCount - 1) {
                    let anchorsC = anchorGrid[colorIndex][r + 1][c];
                    maybeBridgeAnchors(anchorsA, anchorsC, colorIndex);
                }
            }
        }
    });

    // Finally, draw markers & palette bars
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Attempt bridging arcs between anchors in two adjacent cells
 */
function maybeBridgeAnchors(anchorsA, anchorsB, colorIndex) {
    anchorsA.forEach(a => {
        anchorsB.forEach(b => {
            if (random() < generationRules.interCellBridgeProb) {
                drawQuadraticArc(a.x, a.y, b.x, b.y, colorIndex);
            }
        });
    });
}

/**
 * Draw a random quadratic arc between (x1, y1) and (x2, y2).
 * We'll pick a random control point near the midpoint to add curvature.
 */
function drawQuadraticArc(x1, y1, x2, y2, colorIndex) {
    // midpoint
    let mx = (x1 + x2) / 2;
    let my = (y1 + y2) / 2;
    // offset from midpoint for control
    let dx = x2 - x1;
    let dy = y2 - y1;
    // random offset factor
    let offsetMag = 0.3; // can adjust for stronger/weaker curves
    let cx = mx + random(-offsetMag, offsetMag) * dy;
    let cy = my + random(-offsetMag, offsetMag) * dx;

    // Draw on canvas
    beginShape();
    vertex(x1, y1);
    quadraticVertex(cx, cy, x2, y2);
    endShape();

    // Record path data for SVG
    // M x1 y1 Q cx cy x2 y2
    let pathStr = `M${x1.toFixed(2)},${y1.toFixed(2)} Q${cx.toFixed(2)},${cy.toFixed(2)} ${x2.toFixed(2)},${y2.toFixed(2)} `;
    pathsByColor[colorIndex] += pathStr;
}

/**
 * =======================================
 * Markers & Palette
 * =======================================
 */
function drawMarkers() {
    strokeWeight(1);
    applyStrokeWithOpacity('#000000');
    line(0, 0, 5, 0);
    line(0, 0, 0, 5);
    line(width - 5, height, width, height);
    line(width, height - 5, width, height);
}

function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yPos = height - (1.25 * pixelsPerInch);

    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colors[colorIndex].hex);
        line(x, yPos, x + segmentLength, yPos);
    });
}

/**
 * =======================================
 * p5.js Interaction
 * =======================================
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // regenerate with the same color selection
        resetCanvas();
    }
}

function resetCanvas() {
    // Clear path data
    selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });
    drawShapes();
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    // Combined
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

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

function generateSVG(activeColor = 0) {
    let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // all colors
        selectedColorIndices.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
    }

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

function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

    // palette bar
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yPos = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
   stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}"
   id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
    }

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

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

function 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 156
/*

=======================================
  Day 156 Self-Portrait (Radial Bloom: Divergent Celestial Interiors)
=======================================

### Title: Radial Bloom: Divergent Celestial Interiors

### Medium: Generative Drawing on Paper

### Keywords: generative art, radial bloom, wave-like shapes, digital identity, p5.js,
              organic geometry, noise-based, algorithmic art, creative coding, self-portrait

### Conceptual Framework

In "Radial Bloom: Divergent Celestial Interiors," I visualize my sense of self as a collection of expansive, wave-like forms. 
For each selected color, I pick a random center point in the work area and generate a radial shape by sampling angles from 
0 to 2π. At each angle, the radius is determined by a base value plus a noise-driven perturbation, yielding 
an organic, blossom-like outline. The resulting “blooms” embody my identity as a series of fluid, divergent interiors 
that coexist without rigid boundaries or discrete partitions. Each bloom is tracked precisely, ensuring the final 
SVG export aligns perfectly with the canvas rendering.

### Technical Approach

1. **Random Color Selection**: Between 1 and 9 colors are randomly chosen from the fixed palette.
2. **Work Area & Centers**: A random margin defines the main work area. Each chosen color is assigned a random center 
   point within this area.
3. **Noise‐Driven Radial Shapes**:
   - For each color, a radial shape is generated by iterating over angles from 0 to 2π in small increments.
   - The radius at each angle is computed using a base radius plus an amplitude scaled by 2D noise. 
   - Points are connected with short line segments to form a closed shape.
4. **SVG Tracking**: All line segments are recorded in a global path string, ensuring consistency between the 
   on‐screen drawing and the exported SVG.

No fills, only strokes, are used. Overlaps or intersections are allowed, but no exact path overlaps are created.

---
*/

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

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

const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '156';

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Set the stroke opacity for both SVG and canvas
const strokeOpacity = 0.8;

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

let generationRules = {
  // The resolution for each radial shape:
  angleSteps: 180, // number of segments in 0..2π
  // Ranges for randomization
  baseRadiusMin: 50,
  baseRadiusMax: 150,
  amplitudeMin: 20,
  amplitudeMax: 80,
  noiseFrequencyMin: 0.5,
  noiseFrequencyMax: 1.5
};

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];

let strokeWeightValue;
let pathsByColor = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Initialize canvas dimensions
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Randomize work area margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  // Adjust for stroke weight
  adjustForStrokeWeight();

  // Select random colors
  selectColors();

  // Initialize path data for each color
  selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });

  // Generate the artwork
  drawShapes();

  noLoop();
}

/**
 * Adjust for ~0.5mm stroke width (≈2px)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // from 1 to 9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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: Radial Blooms
 * =======================================
 */
function drawShapes() {
  background(255);

  // We'll define the main work area boundaries
  let xStart = workAreaMarginPixels;
  let xEnd = width - workAreaMarginPixels;
  let yStart = workAreaMarginPixels;
  let yEnd = height - workAreaMarginPixels;

  // For each selected color, create a "bloom" shape
  selectedColorIndices.forEach(colorIndex => {
    // Random center within the work area
    let cx = random(xStart, xEnd);
    let cy = random(yStart, yEnd);

    // Random parameters for the radial bloom
    let baseRadius = random(generationRules.baseRadiusMin, generationRules.baseRadiusMax);
    let amplitude = random(generationRules.amplitudeMin, generationRules.amplitudeMax);
    let freq = random(generationRules.noiseFrequencyMin, generationRules.noiseFrequencyMax);
    let noiseOffset = random(10000); // offset in noise space

    // Create the array of points for this bloom
    let points = createRadialBloomPoints(cx, cy, baseRadius, amplitude, freq, noiseOffset, generationRules.angleSteps);

    // Draw the shape on the canvas, record the path
    drawRadialShape(points, colorIndex);
  });

  // Registration markers & color palette bars
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Generates a set of points forming a radial bloom around (cx, cy).
 * We sample angles from 0..2π, using Perlin noise to modulate radius.
 */
function createRadialBloomPoints(cx, cy, baseR, amp, frequency, offset, steps) {
  let pts = [];
  for (let i = 0; i <= steps; i++) {
    let t = map(i, 0, steps, 0, TWO_PI);
    // Evaluate noise to modulate the radius
    let n = noise(offset + frequency * cos(t), offset + frequency * sin(t));
    let r = baseR + amp * n;

    let x = cx + r * cos(t);
    let y = cy + r * sin(t);
    pts.push({ x, y });
  }
  return pts;
}

/**
 * Draws the radial bloom shape from a set of points, connecting them
 * with short line segments and closing the shape.
 */
function drawRadialShape(points, colorIndex) {
  applyStrokeWithOpacity(colors[colorIndex].hex);
  strokeWeight(strokeWeightValue);
  noFill();

  beginShape();
  for (let i = 0; i < points.length; i++) {
    vertex(points[i].x, points[i].y);
  }
  endShape(CLOSE);

  // Record in pathsByColor
  // We'll just do a polygon with M and L commands
  if (points.length > 0) {
    let pathStr = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)} `;
    for (let i = 1; i < points.length; i++) {
      pathStr += `L${points[i].x.toFixed(2)},${points[i].y.toFixed(2)} `;
    }
    // close shape
    pathStr += `Z `;
    pathsByColor[colorIndex] += pathStr;
  }
}

/**
 * =======================================
 * Registration Markers & Color Palette
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yPos = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = selectedColorIndices;
  let numColors = usedColorsOrdered.length;
  if (numColors === 0) return;

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

  strokeWeight(barHeight);
  usedColorsOrdered.forEach((colorIndex, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    line(x, yPos, x + segmentLength, yPos);
  });
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

/**
 * Clears path data and redraws with the same colors
 */
function resetCanvas() {
  selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });
  drawShapes();
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const timestamp = Date.now();
  // Combined
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

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

/**
 * Generate SVG content.
 * @param {number} activeColor - 0 for all colors, else a specific color.
 */
function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    // all colors
    selectedColorIndices.forEach((colorIndex, idx) => {
      svgContent += addSegmentsSVG(colorIndex, idx + 1);
    });
  } else {
    let idx = selectedColorIndices.indexOf(activeColor) + 1;
    svgContent += addSegmentsSVG(activeColor, idx);
  }

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

/**
 * Add the path data for a specific color
 */
function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let color = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

  // Add the palette bar
  let usedColorsOrdered = selectedColorIndices;
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yPos = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
     stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}"
     id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
  }

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

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

/**
 * Saves 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 156
/*

=======================================
  Day 156 Self-Portrait (Flow Field Streams: Intertwined Currents of Identity)
=======================================

### Title: Flow Field Streams: Intertwined Currents of Identity

### Medium: Generative Drawing on Paper

### Keywords: generative art, flow field, perlin noise, particle system,
              p5.js, dynamic lines, algorithmic art, creative coding, self-portrait,
              emergent complexity, fluid motion

### Conceptual Framework

This work explores identity as an emergent tapestry of intertwined currents. Rather than discrete shapes or grids,
we use a Perlin noise flow field to guide the trajectories of many “particles” that each carry a color from a fixed
palette. These particles trace graceful curves as they navigate the field, producing an intricate network of
overlapping paths. The result is a dynamic, layered composition that reflects how myriad influences can coalesce
into a unified, ever-evolving sense of self. Each short line segment is recorded for perfect consistency between
the canvas and the exported SVG.

### Technical Approach

1. **Flow Field**:
   - The flow field is defined by sampling 2D Perlin noise at each (x,y). The noise value is mapped to an angle (0..2π).
   - A frequency or “scale” factor determines how quickly the noise pattern changes over the plane.

2. **Particles**:
   - For each randomly selected color, we spawn multiple particles at random positions within the work area.
   - Each particle tracks its previous position to draw a line segment for every small step taken.

3. **Motion**:
   - At each update, a particle queries the flow field angle at its current location and moves forward by a small step in that direction.
   - The step size is fixed or slightly randomized.

4. **SVG Path Tracking**:
   - Every line segment `(previousX, previousY) -> (currentX, currentY)` is appended to a path string for the particle’s color.
   - At the end, we can export the combined path data or per-color path data, ensuring that the SVG lines match the on‐screen lines exactly.

5. **Aesthetic Controls**:
   - The number of particles per color, the number of steps each takes, and the flow field scale can be tuned for complexity and density.
   - Overlaps are allowed, but exact path overlaps are unlikely due to the continuous, noise‐based nature of the field.

---
*/

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

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '156';

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Overall stroke opacity
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  flowScale: 0.0015,     // noise frequency for the flow field
  stepSize: 2.0,         // how far each particle moves per step
  stepsPerParticle: 500, // how many steps each particle takes
  particlesPerColor: 30  // how many particles to spawn per selected color
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];

let strokeWeightValue;

// We'll store path data for each color as a single <path>
let pathsByColor = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Randomize the margin
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  // Adjust stroke weight (~2px for 0.5mm lines)
  adjustForStrokeWeight();

  // Choose random subset of colors
  selectColors();

  // Initialize path data
  selectedColorIndices.forEach(idx => {
    pathsByColor[idx] = '';
  });

  // Generate the flow field artwork
  drawShapes();

  noLoop();
}

/**
 * Adjust margin for stroke weight
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Random color selection from the palette
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // 1..9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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

/**
 * =======================================
 * Flow Field Generation & Particle Movement
 * =======================================
 */
function drawShapes() {
  background(255);

  // define the main drawing area
  let xStart = workAreaMarginPixels;
  let xEnd = width - workAreaMarginPixels;
  let yStart = workAreaMarginPixels;
  let yEnd = height - workAreaMarginPixels;

  // We'll draw everything to the canvas as we simulate the particle movement
  strokeWeight(strokeWeightValue);
  noFill();

  // For each color, spawn multiple particles
  selectedColorIndices.forEach(colorIndex => {
    // set stroke for the canvas drawing
    applyStrokeWithOpacity(colors[colorIndex].hex);

    for (let p = 0; p < generationRules.particlesPerColor; p++) {
      // random start location
      let x = random(xStart, xEnd);
      let y = random(yStart, yEnd);

      // We'll track the first position for the path
      let pathDataStr = '';

      // For each step
      for (let step = 0; step < generationRules.stepsPerParticle; step++) {
        let px = x;
        let py = y;

        // Move the particle
        let angle = flowFieldAngle(x, y);
        x += cos(angle) * generationRules.stepSize;
        y += sin(angle) * generationRules.stepSize;

        // If we leave the work area, break
        if (x < xStart || x > xEnd || y < yStart || y > yEnd) {
          break;
        }

        // Draw line on canvas
        line(px, py, x, y);

        // Append to the path data string
        // If this is the first segment, start with M
        if (step === 0) {
          pathDataStr += `M${px.toFixed(2)},${py.toFixed(2)} L${x.toFixed(2)},${y.toFixed(2)} `;
        } else {
          pathDataStr += `L${x.toFixed(2)},${y.toFixed(2)} `;
        }
      }

      // Append the path for this particle to the color’s path
      pathsByColor[colorIndex] += pathDataStr;
    }
  });

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

/**
 * Compute flow field angle at (x, y) using Perlin noise
 */
function flowFieldAngle(x, y) {
  // scale coords
  let nx = x * generationRules.flowScale;
  let ny = y * generationRules.flowScale;
  // sample noise
  let nVal = noise(nx, ny);
  // map to angle
  return nVal * TWO_PI * 2; // multiply by 2 for more swirl
}

/**
 * =======================================
 * Registration Markers & Palette
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yPos = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = selectedColorIndices;
  let numColors = usedColorsOrdered.length;
  if (numColors === 0) return;

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

  strokeWeight(barHeight);
  usedColorsOrdered.forEach((colorIndex, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    line(x, yPos, x + segmentLength, yPos);
  });
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    // Export the artwork as SVG when spacebar is pressed
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    // Regenerate the artwork with the same color set
    resetCanvas();
  }
}

function resetCanvas() {
  // clear existing path data
  selectedColorIndices.forEach(idx => {
    pathsByColor[idx] = '';
  });
  drawShapes();
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const timestamp = Date.now();

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

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

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Markers
  svgContent += addMarkersSVG();

  // Paths
  if (activeColor === 0) {
    // All colors
    selectedColorIndices.forEach((colorIndex, idx) => {
      svgContent += addSegmentsSVG(colorIndex, idx + 1);
    });
  } else {
    let idx = selectedColorIndices.indexOf(activeColor) + 1;
    svgContent += addSegmentsSVG(activeColor, idx);
  }

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

/**
 * Add path data for the specified color
 */
function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let color = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

  // color palette bar
  let usedColorsOrdered = selectedColorIndices;
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yPos = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}"
      id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
  }

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

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

/**
 * Saves an 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 156
/*

=======================================
  Day 156 Self-Portrait (Flow Field Fusion: Emergent Neural Synthesis)
=======================================

### Title: Flow Field Fusion: Emergent Neural Synthesis

### Medium: Generative Drawing on Paper

### Keywords: generative art, flow field, neural network, algorithmic art, digital identity, structured chaos, p5.js, creative coding, emergent synthesis, dynamic geometry

### Conceptual Framework

In this work, I reinterpret my digital self as a convergent neural network that is simultaneously structured and fluid. The work area is divided into vertical color bands—each corresponding to one randomly chosen color from a fixed nine‑color palette. Within each band, a grid of nodes is generated. Each node’s position is perturbed by a locally sampled flow field (derived from Perlin noise), injecting fluidity into the otherwise regular grid. Nodes are then interconnected with quadratic curves; their control points are also influenced by the flow field. The final composition is a fusion of discrete, structured connectivity and organic, noise‐driven motion—a dynamic network that symbolizes the multifaceted, emergent nature of my identity.

### Technical Approach

1. **Color Bands & Grid Formation**:  
   The canvas (11×11 inches at 100 ppi) is bounded by a random margin. The work area is split into vertical bands for each selected color, and each band is subdivided into a grid of nodes.

2. **Flow Field Perturbation**:  
   Each node’s initial grid position is perturbed by a displacement vector computed from a Perlin noise function, giving it an organic offset.

3. **Interconnecting Nodes**:  
   Nodes are connected to their rightward and downward neighbors (and optionally diagonally) using quadratic curves. The control points are computed from the average position of the nodes and are offset in the direction given by the local flow field.

4. **SVG Consistency**:  
   Every connection is drawn on the canvas and recorded in a global path string per color, ensuring that the final SVG export perfectly replicates the on-screen render.

---
*/

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

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '156';

// Color palette (immutable)
const colors = {
  1: { name: 'ORANGE', ink: 5, width: 0.45, hex: '#ff6600' },
  2: { name: 'BROWN', ink: 12, width: 0.45, hex: '#993300' },
  3: { name: 'RED', ink: 19, width: 0.45, hex: '#f01e2c' },
  4: { name: 'ROSE', ink: 21, width: 0.45, hex: '#ff00bf' },
  5: { name: 'PURPLE', ink: 24, width: 0.45, hex: '#bf00ff' },
  6: { name: 'GREEN', ink: 29, width: 0.45, hex: '#00cc99' },
  7: { name: 'BLUE', ink: 36, width: 0.45, hex: '#0040ff' },
  8: { name: 'BLACK', ink: 49, width: 0.45, hex: '#333333' },
  9: { name: 'SEPIA', ink: 117, width: 0.45, hex: '#856647' }
};

// Overall stroke opacity
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  gridCols: 6,      // number of nodes horizontally per band
  gridRows: 6,      // number of nodes vertically per band
  perturbScale: 30, // maximum displacement from grid position (in pixels)
  flowScale: 0.005, // scale factor for noise-based flow field
  controlFactor: 20 // factor for offsetting control points for curves
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;
let workAreaMarginPixels;
let selectedColorIndices = [];

let strokeWeightValue;
let pathsByColor = {};  // Global storage for SVG path data per color

// We'll store node positions for each band as a 2D array
let nodeGrid = {};

/**
 * Applies the stroke color with the given hex and sets its alpha based on strokeOpacity.
 * @param {string} hexColor - The hex color value.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Set canvas dimensions
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);

  // Randomize work area margin (between 1.5 and 4 inches)
  workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  // Adjust for stroke weight
  adjustForStrokeWeight();

  // Select random colors from palette (1 to 9)
  selectColors();

  // Initialize path storage for each selected color
  selectedColorIndices.forEach(idx => {
    pathsByColor[idx] = '';
    nodeGrid[idx] = []; // will store grid nodes for this band
  });

  // Generate the network drawing
  drawShapes();

  noLoop();
}

/**
 * Adjust for stroke weight (~0.5mm → 2 pixels)
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10)); // integer from 1 to 9
  selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

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: Flow Field Fusion Network
 * =======================================
 */
function drawShapes() {
  background(255);

  // Define work area boundaries
  let xStart = workAreaMarginPixels;
  let xEnd = width - workAreaMarginPixels;
  let yStart = workAreaMarginPixels;
  let yEnd = height - workAreaMarginPixels;

  // Divide work area vertically among selected colors
  let numBands = selectedColorIndices.length;
  let bandWidth = (xEnd - xStart) / numBands;

  // For each color band, generate grid nodes and draw connections
  selectedColorIndices.forEach((colorIndex, bandIndex) => {
    // Define horizontal boundaries for this band
    let bandXStart = xStart + bandIndex * bandWidth;
    let bandXEnd = bandXStart + bandWidth;
    let cellWidth = bandWidth / generationRules.gridCols;
    let cellHeight = (yEnd - yStart) / generationRules.gridRows;

    // Generate nodes for this band with perturbation from a flow field
    nodeGrid[colorIndex] = [];
    for (let r = 0; r < generationRules.gridRows; r++) {
      nodeGrid[colorIndex][r] = [];
      for (let c = 0; c < generationRules.gridCols; c++) {
        // Initial grid center
        let nx = bandXStart + (c + 0.5) * cellWidth;
        let ny = yStart + (r + 0.5) * cellHeight;
        // Compute flow field angle at this location
        let angle = flowFieldAngle(nx, ny);
        // Displacement magnitude (random up to perturbScale)
        let mag = random(0, generationRules.perturbScale);
        let dx = mag * cos(angle);
        let dy = mag * sin(angle);
        // Perturbed node position
        let node = { x: nx + dx, y: ny + dy };
        nodeGrid[colorIndex][r][c] = node;
      }
    }

    // Set stroke for current color
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Draw connections between adjacent nodes using quadratic curves
    // We'll connect to right and bottom neighbors
    for (let r = 0; r < generationRules.gridRows; r++) {
      for (let c = 0; c < generationRules.gridCols; c++) {
        let current = nodeGrid[colorIndex][r][c];

        // Connect to right neighbor if exists
        if (c < generationRules.gridCols - 1) {
          let right = nodeGrid[colorIndex][r][c + 1];
          drawCurvedConnection(current, right, colorIndex);
        }
        // Connect to bottom neighbor if exists
        if (r < generationRules.gridRows - 1) {
          let bottom = nodeGrid[colorIndex][r + 1][c];
          drawCurvedConnection(current, bottom, colorIndex);
        }
        // Optionally connect diagonally with a lower probability
        if (c < generationRules.gridCols - 1 && r < generationRules.gridRows - 1 && random() < 0.3) {
          let diag = nodeGrid[colorIndex][r + 1][c + 1];
          drawCurvedConnection(current, diag, colorIndex);
        }
      }
    }
  });

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

/**
 * Compute a flow field angle at (x,y) using Perlin noise.
 */
function flowFieldAngle(x, y) {
  // Scale coordinates for noise sampling
  let nx = x * generationRules.flowScale;
  let ny = y * generationRules.flowScale;
  let noiseVal = noise(nx, ny);
  return noiseVal * TWO_PI; // maps to 0..2π
}

/**
 * Draw a quadratic curve between two nodes with control point offset from their midpoint
 * according to the local flow field.
 */
function drawCurvedConnection(a, b, colorIndex) {
  // Compute midpoint
  let mx = (a.x + b.x) / 2;
  let my = (a.y + b.y) / 2;
  // Compute average flow angle at midpoint
  let angle = flowFieldAngle(mx, my);
  // Control point offset magnitude
  let offsetMag = generationRules.controlFactor;
  let cx = mx + offsetMag * cos(angle);
  let cy = my + offsetMag * sin(angle);

  // Draw quadratic curve
  beginShape();
  vertex(a.x, a.y);
  quadraticVertex(cx, cy, b.x, b.y);
  endShape();

  // Record path data for SVG export (using M and Q commands)
  let pathStr = `M${a.x.toFixed(2)},${a.y.toFixed(2)} Q${cx.toFixed(2)},${cy.toFixed(2)} ${b.x.toFixed(2)},${b.y.toFixed(2)} `;
  pathsByColor[colorIndex] += pathStr;
}

/**
 * =======================================
 * Registration Markers & Color Palette
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yPos = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = selectedColorIndices;
  let numColors = usedColorsOrdered.length;
  if (numColors === 0) return;

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

  strokeWeight(barHeight);
  usedColorsOrdered.forEach((colorIndex, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[colorIndex].hex);
    line(x, yPos, x + segmentLength, yPos);
  });
}

/**
 * =======================================
 * p5.js Key Press Handling
 * =======================================
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

/**
 * Clears existing path data and redraws the artwork.
 */
function resetCanvas() {
  selectedColorIndices.forEach(idx => { pathsByColor[idx] = ''; });
  drawShapes();
}

/**
 * =======================================
 * SVG Export Functions
 * =======================================
 */
function saveSVGs() {
  const timestamp = Date.now();
  // Combined SVG export
  let combinedSVG = generateSVG(0);
  saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);

  // Export individual SVGs per color
  selectedColorIndices.forEach(colorIndex => {
    let colorSVG = generateSVG(colorIndex);
    let colorName = colors[colorIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

function generateSVG(activeColor = 0) {
  let svgContent = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
  svgContent += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  svgContent += addMarkersSVG();

  if (activeColor === 0) {
    selectedColorIndices.forEach((colorIndex, idx) => {
      svgContent += addSegmentsSVG(colorIndex, idx + 1);
    });
  } else {
    let idx = selectedColorIndices.indexOf(activeColor) + 1;
    svgContent += addSegmentsSVG(activeColor, idx);
  }

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

function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let color = colors[colorIndex];
  let strokeWidth = strokeWeightValue;

  svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${color.name.toLowerCase()}-${color.ink}-${color.width}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

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

  let usedColorsOrdered = selectedColorIndices;
  let i = usedColorsOrdered.indexOf(colorIndex);
  if (i >= 0) {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yPos = height - (1.25 * pixelsPerInch);
    let numColors = usedColorsOrdered.length;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    let x = xStart + i * (segmentLength + gapSize);
    svg += `<path d="M${x.toFixed(2)},${yPos.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
      stroke="${color.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}"
      id="${colorIndex}-${color.name.toLowerCase()}-palettebar" fill="none"/>n`;
  }

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

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

function 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 156
/*

=======================================
  Day 156 Self-Portrait (Flow Field Fusion: Emergent Neural Synthesis)
=======================================

### Title: Flow Field Fusion: Emergent Neural Synthesis

### Medium: Generative Drawing on Paper

### Keywords: generative art, flow field, neural network, algorithmic art, digital identity, structured chaos, p5.js, creative coding, emergent synthesis, dynamic geometry

### Concept

In this self-portrait, I depict my identity as a tapestry of interconnected structures within vertical color bands. Each band is subdivided into a grid with 12 columns and 3 rows, where nodes are initially arranged in a regular pattern. These nodes are then subtly displaced by a local flow field derived from Perlin noise, infusing each grid with a touch of organic irregularity. I connect adjacent nodes using quadratic curves whose control points are dramatically influenced by the flow field, creating bold, sweeping arcs that distort the rigid grid into dynamic, wave-like patterns. The composition embodies the fusion of structured order and fluid energy, symbolizing the multifaceted nature of my digital self.

### Technical Approach

- **Vertical Bands & Grid Formation**: The canvas is divided into vertical bands, each assigned a unique color from a fixed palette. Within each band, a grid of nodes is generated with 12 columns and 3 rows.
- **Flow Field Perturbation**: Each node's position is perturbed by a Perlin noise flow field, with a maximum displacement of 10 pixels, adding subtle variations to the grid.
- **Arc Connections**: Adjacent nodes are interconnected via quadratic curves. A high control factor (200) offsets the control points, producing sweeping arcs that dramatically deform the grid structure.
- **Implementation Details**: The artwork is implemented in p5.js. Each line segment is meticulously recorded in a global path string to ensure perfect consistency between the on-screen rendering and the exported SVG. The design uses solid strokes with a uniform opacity, allowing overlaps to emphasize the interplay between structure and fluid motion.

*/