// Day 085
/*

=======================================
  Day 085 Self-Portrait (Segmented Outlook)
=======================================

### Title: *Segmented Outlook*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Segmented Outlook" envisions an internal landscape of distinct compartments 
that emerge from a process of adaptive rectangular subdivision. Each outline 
represents a perspective or facet of self, bounded yet informed by its 
neighbors. As the generative routine recursively slices and delineates the 
workspace, the composition hints at an organized complexity: seemingly 
disparate regions that unite to form an ever-evolving tapestry of awareness 
and understanding. 

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 085 - 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 = '085';          // 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 = {
    // Maximum recursive depth for subdivision
    maxDepth: 4,
    // Probability of subdividing each rectangle
    subdivideProbability: 0.55,
    // Minimum rectangle width/height before we stop subdividing
    minSize: 80, 
    // Safety cap on total rectangles
    maxRectangles: 300
};

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

// We only display and export colors actually used:
let usedColorIndices = [];

let strokeWeightValue;
let pathData = {};     // pathData[colorIndex] = array of path commands

// Track total rectangles to prevent infinite recursion
let totalRectCount = 0;

/**
 * Applies the stroke color with the given hex and sets alpha
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data arrays for each chosen color
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    background(255);

    // Start with one large rectangle spanning the main work area
    let rootRect = {
        x: workAreaMarginPixels,
        y: workAreaMarginPixels,
        w: width - 2 * workAreaMarginPixels,
        h: height - 2 * workAreaMarginPixels,
        depth: 0
    };

    // Recursively subdivide
    subdivideRect(rootRect);

    // Filter out colors that were actually used
    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    // Clear canvas to redraw only final used lines + markers + palette
    background(255);

    // Redraw all rectangle outlines
    reDrawAllRectangles(usedColorIndices);

    // Markers and color palette
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

/**
 * Adjust stroke weight to ~0.5 mm
 */
function adjustForStrokeWeight() {
    // ~2 pixels at 100 DPI = ~0.5 mm
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Pick a random subset of the 9 colors
 */
function selectColors() {
    let n = floor(random(1, 10)); 
    let indices = Object.keys(colors).map(Number);
    selectedColorIndices = [];

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

/**
 * Subdivide a rectangle if conditions allow, or draw it if not subdividing.
 */
function subdivideRect(r) {
    if (totalRectCount >= generationRules.maxRectangles) return;

    // Draw this rectangle's outline
    drawRectangleOutline(r);

    if (
        r.depth < generationRules.maxDepth &&
        random() < generationRules.subdivideProbability &&
        (r.w > generationRules.minSize * 2 || r.h > generationRules.minSize * 2)
    ) {
        // Decide randomly to cut vertically or horizontally
        let cutVertically = random() < 0.5;
        if (cutVertically && r.w > generationRules.minSize * 2) {
            let cutRatio = random(0.3, 0.7);
            let w1 = r.w * cutRatio;
            let w2 = r.w - w1;

            let rectA = { x: r.x, y: r.y, w: w1, h: r.h, depth: r.depth + 1 };
            let rectB = { x: r.x + w1, y: r.y, w: w2, h: r.h, depth: r.depth + 1 };

            subdivideRect(rectA);
            subdivideRect(rectB);
        } else if (!cutVertically && r.h > generationRules.minSize * 2) {
            let cutRatio = random(0.3, 0.7);
            let h1 = r.h * cutRatio;
            let h2 = r.h - h1;

            let rectA = { x: r.x, y: r.y, w: r.w, h: h1, depth: r.depth + 1 };
            let rectB = { x: r.x, y: r.y + h1, w: r.w, h: h2, depth: r.depth + 1 };

            subdivideRect(rectA);
            subdivideRect(rectB);
        }
    }
}

/**
 * Draw the outline of a rectangle in a random chosen color from the selected set.
 * Store the path commands for eventual SVG export.
 */
function drawRectangleOutline(r) {
    if (r.w <= 0 || r.h <= 0) return;
    totalRectCount++;

    // Choose a color from the selectedColorIndices
    let cIndex = random(selectedColorIndices);
    let x1 = r.x.toFixed(2);
    let y1 = r.y.toFixed(2);
    let x2 = (r.x + r.w).toFixed(2);
    let y2 = (r.y + r.h).toFixed(2);

    let command = `M${x1},${y1} L${x2},${y1} L${x2},${y2} L${x1},${y2} Z`;
    pathData[cIndex].push(command);
}

/**
 * Redraw all rectangles by iterating through pathData.
 */
function reDrawAllRectangles(colorList) {
    colorList.forEach(ci => {
        let segments = pathData[ci];
        if (!segments || !segments.length) return;
        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        segments.forEach(cmd => {
            // Parse "Mxx,yy Lxx2,yy2 Lxx3,yy3 ..." if needed
            // We'll draw the rectangle outline with four lines
            let coords = cmd.match(/[-.d]+/g).map(Number);
            // coords => [Mx, My, Lx, Ly, Lx2, Ly2, ...]
            // We'll interpret them in pairs
            for (let i = 0; i < coords.length - 2; i += 2) {
                let xA = coords[i];
                let yA = coords[i + 1];
                let xB = coords[i + 2];
                let yB = coords[i + 3];
                line(xA, yA, xB, yB);
            }
        });
    });
}

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

/**
 * Draw color palette bars for used colors
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let colorArray = usedColorIndices.slice();
    let numColors = colorArray.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);

    colorArray.forEach((ci, i) => {
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colorVal);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas with the same rules but new random arrangement
 */
function resetCanvas() {
    background(255);
    totalRectCount = 0;
    selectedColorIndices.forEach(ci => { pathData[ci] = []; });

    let rootRect = {
        x: workAreaMarginPixels,
        y: workAreaMarginPixels,
        w: width - 2 * workAreaMarginPixels,
        h: height - 2 * workAreaMarginPixels,
        depth: 0
    };
    subdivideRect(rootRect);

    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    background(255);
    reDrawAllRectangles(usedColorIndices);
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Key press handling
 */
function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVG
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate with fresh arrangement
        resetCanvas();
    }
}

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

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

    // Individual color exports
    usedColorIndices.forEach(ci => {
        if (pathData[ci].length) {
            let colorName = colors[ci].name.toUpperCase();
            let singleSVG = generateSVG(ci);
            let fileName = `${dayNumber}-0${ci}-${colorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(singleSVG, fileName);
        }
    });
}

/**
 * Generate the SVG string
 * @param {number} activeColor - 0 for all, otherwise single 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`;

    // Markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // all used
        usedColorIndices.forEach((ci, idx) => {
            svgContent += addSegmentsSVG(ci, idx + 1);
        });
        // palette with all used
        svgContent += addPaletteBarsSVG(usedColorIndices);
    } else {
        // single color
        let idx = usedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // single color palette
        svgContent += addPaletteBarsSVG([activeColor]);
    }

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

/**
 * Add the rectangle paths for a color as a single <path> or multiple segments
 */
function addSegmentsSVG(ci, layerNum) {
    let segs = pathData[ci];
    if (!segs || !segs.length) return '';

    let color = colors[ci];
    let out = `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${ci}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Combine all rectangle outlines for the same color into one path data string
    // Each segment is already "M.. L.. L.. L..Z"
    let pathString = segs.join(' ');
    out += `<path d="${pathString}" stroke-width="${strokeWeightValue}" fill="none" />n`;

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

/**
 * Build an SVG layer for palette bars
 */
function addPaletteBarsSVG(colorArray) {
    if (!colorArray.length) return '';

    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

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

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer99-palette"
       inkscape:label="palette"
       style="display:inline">n`;

    colorArray.forEach((ci, i) => {
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
   stroke="${colorVal}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${barHeight}"
   fill="none" />n`;
    });

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

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

/**
 * Save 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 085
/*

=======================================
  Day 085 Self-Portrait (Segmented Outlook)
=======================================

### Title: *Segmented Outlook*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Segmented Outlook" envisions an internal landscape of distinct compartments 
emerging from an adaptive subdivision of the drawing space. Each rectangular 
region is drawn without overlapping lines and then horizontally “striped,” 
evoking a vision of memory segments in a computer system. These subdivisions 
reflect a notion of identity as discretely bounded perspectives—unique, 
neighboring, and collectively forming a structured tapestry of awareness.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 085 - 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 = '085';          // 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 = {
    // Maximum recursive depth for subdivision
    maxDepth: 4,
    // Probability of subdividing each rectangle
    subdivideProbability: 0.55,
    // Minimum rectangle width/height before we stop subdividing
    minSize: 80, 
    // Safety cap on total rectangles
    maxRectangles: 300,
    // Horizontal stripes spacing (pixels)
    stripeSpacing: 10,
    // Small inset from rectangle edges for stripes
    stripeInset: 5
};

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

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

// The final set of colors that actually get used
let usedColorIndices = [];

let strokeWeightValue;

// For storing line segments to display and export
// pathData[colorIndex] => array of line commands: "M x1,y1 L x2,y2"
let pathData = {};

// Keep track of existing edges to avoid duplicates
// We'll store them as an array of [x1, y1, x2, y2], sorted so (x1,y1) < (x2,y2)
let edges = [];

// Count rectangles to avoid infinite recursion
let totalRectCount = 0;

/**
 * Applies the stroke color with the given hex and sets alpha
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

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

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

    adjustForStrokeWeight();
    selectColors();

    // Initialize path data arrays for each chosen color
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });
    edges = [];

    background(255);

    // Start with one large rectangle spanning the main work area
    let rootRect = {
        x: workAreaMarginPixels,
        y: workAreaMarginPixels,
        w: width - 2 * workAreaMarginPixels,
        h: height - 2 * workAreaMarginPixels,
        depth: 0
    };

    // Recursively subdivide
    subdivideRect(rootRect);

    // Filter out colors that were actually used
    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    // Clear canvas to redraw only final used lines + markers + palette
    background(255);

    // Redraw from pathData
    reDrawAllLines(usedColorIndices);

    // Markers and color palette
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

/**
 * Adjust stroke weight to ~0.5 mm
 */
function adjustForStrokeWeight() {
    // ~2 pixels at 100 DPI = ~0.5 mm
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Pick a random subset of the 9 colors
 */
function selectColors() {
    let n = floor(random(1, 10)); 
    let indices = Object.keys(colors).map(Number);
    selectedColorIndices = [];

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

/**
 * Subdivide a rectangle if conditions allow; otherwise, draw & fill it.
 */
function subdivideRect(r) {
    if (totalRectCount >= generationRules.maxRectangles) return;

    // If we decide not to subdivide further
    let doSubdivide = false;

    if (
        r.depth < generationRules.maxDepth &&
        random() < generationRules.subdivideProbability &&
        (r.w > generationRules.minSize * 2 || r.h > generationRules.minSize * 2)
    ) {
        doSubdivide = true;
    }

    if (!doSubdivide) {
        // Draw + fill this rectangle
        totalRectCount++;
        let cIndex = random(selectedColorIndices);
        drawFilledRectangle(r, cIndex);
        return;
    }

    // Subdivide either vertically or horizontally
    // only if there's enough space to produce new lines
    let cutVertically = random() < 0.5;
    if (cutVertically && r.w > generationRules.minSize * 2) {
        let cutRatio = random(0.3, 0.7);
        let w1 = r.w * cutRatio;
        let w2 = r.w - w1;

        let rectA = { x: r.x, y: r.y, w: w1, h: r.h, depth: r.depth + 1 };
        let rectB = { x: r.x + w1, y: r.y, w: w2, h: r.h, depth: r.depth + 1 };

        subdivideRect(rectA);
        subdivideRect(rectB);
    } else if (!cutVertically && r.h > generationRules.minSize * 2) {
        let cutRatio = random(0.3, 0.7);
        let h1 = r.h * cutRatio;
        let h2 = r.h - h1;

        let rectA = { x: r.x, y: r.y, w: r.w, h: h1, depth: r.depth + 1 };
        let rectB = { x: r.x, y: r.y + h1, w: r.w, h: h2, depth: r.depth + 1 };

        subdivideRect(rectA);
        subdivideRect(rectB);
    } else {
        // If for some reason we can't subdivide, just draw + fill
        totalRectCount++;
        let cIndex = random(selectedColorIndices);
        drawFilledRectangle(r, cIndex);
    }
}

/**
 * Draw rectangle outline + fill lines for memory-like segments.
 */
function drawFilledRectangle(r, cIndex) {
    // Outline: each of the 4 edges
    let x1 = r.x;
    let x2 = r.x + r.w;
    let y1 = r.y;
    let y2 = r.y + r.h;

    recordLine(x1, y1, x2, y1, cIndex); // top
    recordLine(x2, y1, x2, y2, cIndex); // right
    recordLine(x2, y2, x1, y2, cIndex); // bottom
    recordLine(x1, y2, x1, y1, cIndex); // left

    // Fill lines: horizontal stripes inside the rectangle
    // We skip a small inset so they don't overlap the boundary
    let inset = generationRules.stripeInset;
    let startY = y1 + inset;
    let endY = y2 - inset;
    let startX = x1 + inset;
    let endX = x2 - inset;

    for (let yy = startY; yy <= endY; yy += generationRules.stripeSpacing) {
        recordLine(startX, yy, endX, yy, cIndex);
    }
}

/**
 * Attempt to record a line if it doesn't duplicate an existing edge.
 */
function recordLine(xa, ya, xb, yb, colorIndex) {
    // Sort the points so (x1,y1) < (x2,y2) for consistent comparison
    let lineObj = sortEndpoints(xa, ya, xb, yb);

    // Check if it already exists in edges
    if (!isDuplicateLine(lineObj)) {
        edges.push(lineObj);
        addToPathData(lineObj, colorIndex);
    }
}

/**
 * Sort endpoints so that the "smaller" coordinate pair is first.
 */
function sortEndpoints(xa, ya, xb, yb) {
    // We'll compare by x, then by y if x is equal
    if (xa < xb) {
        return { x1: xa, y1: ya, x2: xb, y2: yb };
    } else if (xa > xb) {
        return { x1: xb, y1: yb, x2: xa, y2: ya };
    } else {
        // xa == xb, compare y
        if (ya < yb) {
            return { x1: xa, y1: ya, x2: xb, y2: yb };
        } else {
            return { x1: xb, y1: yb, x2: xa, y2: ya };
        }
    }
}

/**
 * Check if a line is within epsilon of an existing line in edges.
 */
function isDuplicateLine(lineObj) {
    let eps = 0.0001; // tiny threshold
    for (let i = 0; i < edges.length; i++) {
        let e = edges[i];
        if (
            isClose(e.x1, lineObj.x1, eps) &&
            isClose(e.y1, lineObj.y1, eps) &&
            isClose(e.x2, lineObj.x2, eps) &&
            isClose(e.y2, lineObj.y2, eps)
        ) {
            return true;
        }
    }
    return false;
}

function isClose(a, b, eps) {
    return Math.abs(a - b) < eps;
}

/**
 * Add this line's command to the path data for the specified color.
 */
function addToPathData(lineObj, colorIndex) {
    let cmd = `M${lineObj.x1.toFixed(2)},${lineObj.y1.toFixed(2)} L${lineObj.x2.toFixed(2)},${lineObj.y2.toFixed(2)}`;
    pathData[colorIndex].push(cmd);
}

/**
 * Redraw all lines from pathData
 */
function reDrawAllLines(colorList) {
    colorList.forEach(ci => {
        let segments = pathData[ci];
        if (!segments || !segments.length) return;

        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        segments.forEach(cmd => {
            // parse "Mxx,yy Lxx2,yy2"
            let coords = cmd.match(/[-.d]+/g).map(Number);
            line(coords[0], coords[1], coords[2], coords[3]);
        });
    });
}

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

/**
 * Draw color palette bars for used colors
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let colorArray = usedColorIndices.slice();
    let numColors = colorArray.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);

    colorArray.forEach((ci, i) => {
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colorVal);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas with the same rules but new random arrangement
 */
function resetCanvas() {
    background(255);
    edges = [];
    totalRectCount = 0;
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    let rootRect = {
        x: workAreaMarginPixels,
        y: workAreaMarginPixels,
        w: width - 2 * workAreaMarginPixels,
        h: height - 2 * workAreaMarginPixels,
        depth: 0
    };
    subdivideRect(rootRect);

    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    background(255);
    reDrawAllLines(usedColorIndices);
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Key press handling
 */
function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVG
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate with fresh arrangement
        resetCanvas();
    }
}

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

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

    // Individual color exports
    usedColorIndices.forEach(ci => {
        if (pathData[ci].length > 0) {
            let colorName = colors[ci].name.toUpperCase();
            let singleSVG = generateSVG(ci);
            let fileName = `${dayNumber}-0${ci}-${colorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(singleSVG, fileName);
        }
    });
}

/**
 * Generate the SVG string
 * @param {number} activeColor - 0 for all, otherwise single 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`;

    // Markers
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // all used
        usedColorIndices.forEach((ci, idx) => {
            svgContent += addSegmentsSVG(ci, idx + 1);
        });
        // palette with all used
        svgContent += addPaletteBarsSVG(usedColorIndices);
    } else {
        // single color
        let idx = usedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx);
        // single color palette
        svgContent += addPaletteBarsSVG([activeColor]);
    }

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

/**
 * Add <g> with all line segments from pathData[colorIndex]
 */
function addSegmentsSVG(ci, layerNum) {
    let segs = pathData[ci];
    if (!segs || !segs.length) return '';

    let color = colors[ci];
    let out = `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${ci}-${color.name.toLowerCase()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Combine all line segments for the same color into one path data string
    // Each segment is "M x1,y1 L x2,y2"
    let pathString = segs.join(' ');
    out += `<path d="${pathString}" stroke-width="${strokeWeightValue}" fill="none" />n`;

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

/**
 * Build an SVG layer for palette bars
 */
function addPaletteBarsSVG(colorArray) {
    if (!colorArray.length) return '';

    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

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

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer99-palette"
       inkscape:label="palette"
       style="display:inline">n`;

    colorArray.forEach((ci, i) => {
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);
        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
   stroke="${colorVal}"
   stroke-opacity="${strokeOpacity}"
   stroke-width="${barHeight}"
   fill="none" />n`;
    });

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

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

/**
 * Save 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 085
/*

=======================================
  Day 085 Self-Portrait (Segmented Outlook)
=======================================

### Title: *Segmented Outlook*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Segmented Outlook" envisions identity as a dynamic partition of 
rectangular regions, each representing a distinct perspective within 
an overarching structure. After recursively subdividing the space, 
edges are assigned to only one of any two adjacent partitions, 
ensuring no overlapping lines. Within each rectangle, a handful of 
short “bit lines” evoke the notion of stored data blocks, subtly 
reinforcing the idea of bounded pockets of memory or experience 
coexisting to form a cohesive sense of self.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 085 - 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 = '085';          // 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 = {
    // Maximum recursive depth
    maxDepth: 4,
    // Probability of subdividing each rectangle
    subdivideProbability: 0.55,
    // Minimum dimension for further subdivision
    minSize: 80,
    // Safety cap on total rectangles
    maxRectangles: 300,
    // Number of short "bit lines" inside each rectangle
    internalBitCount: 8,
    // Max length of each internal bit line (pixels)
    internalBitLength: 20
};

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

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

// Final set of rectangles from the partition
// Each rectangle => { x, y, w, h, depth, colorIndex }
let finalRectangles = [];

// The colors actually used
let usedColorIndices = [];

// ~0.5 mm stroke
let strokeWeightValue = 2;

// pathData[colorIndex] => array of line commands ("M x1,y1 L x2,y2")
let pathData = {};

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

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

    // Setup stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Initialize pathData arrays for chosen colors
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    // Build final partition of rectangles
    finalRectangles = buildRectPartition();

    // Once partition is done, generate edges from finalRectangles (no duplicates)
    generateEdges();

    // Also add internal bit lines (small lines within each rectangle)
    generateInternalBits();

    // Filter out colors actually used
    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    // Clear and redraw
    background(255);
    reDrawAllLines(usedColorIndices);

    // Markers & palette
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

/**
 * Adjust stroke weight to ~0.5 mm
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2; 
    // Also add half the stroke to margins
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Pick a random subset of colors from the 9 available
 */
function selectColors() {
    let n = floor(random(1, 10));
    let indices = Object.keys(colors).map(Number);
    selectedColorIndices = [];

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

/**
 * Top-level function to build the partition of rectangles by recursion.
 */
function buildRectPartition() {
    let rects = [];
    let root = {
        x: workAreaMarginPixels,
        y: workAreaMarginPixels,
        w: width - 2 * workAreaMarginPixels,
        h: height - 2 * workAreaMarginPixels,
        depth: 0
    };
    // We do a simple recursive approach
    let queue = [root];
    let totalCount = 0;
    let results = [];

    while (queue.length > 0 && totalCount < generationRules.maxRectangles) {
        let r = queue.pop();
        totalCount++;
        // Decide if we subdivide
        if (
            r.depth < generationRules.maxDepth &&
            random() < generationRules.subdivideProbability &&
            (r.w > generationRules.minSize * 2 || r.h > generationRules.minSize * 2)
        ) {
            // subdivide
            let cutVertically = random() < 0.5;
            if (cutVertically && r.w > generationRules.minSize * 2) {
                let cutRatio = random(0.3, 0.7);
                let w1 = r.w * cutRatio;
                let w2 = r.w - w1;

                let rA = {
                    x: r.x,
                    y: r.y,
                    w: w1,
                    h: r.h,
                    depth: r.depth + 1
                };
                let rB = {
                    x: r.x + w1,
                    y: r.y,
                    w: w2,
                    h: r.h,
                    depth: r.depth + 1
                };
                queue.push(rA, rB);
            } else if (!cutVertically && r.h > generationRules.minSize * 2) {
                let cutRatio = random(0.3, 0.7);
                let h1 = r.h * cutRatio;
                let h2 = r.h - h1;

                let rA = {
                    x: r.x,
                    y: r.y,
                    w: r.w,
                    h: h1,
                    depth: r.depth + 1
                };
                let rB = {
                    x: r.x,
                    y: r.y + h1,
                    w: r.w,
                    h: h2,
                    depth: r.depth + 1
                };
                queue.push(rA, rB);
            } else {
                // can't subdivide effectively
                assignColorAndPush(r, results);
            }
        } else {
            // no subdivide
            assignColorAndPush(r, results);
        }
    }

    // Any leftover in queue also needs color
    while (queue.length) {
        let leftover = queue.pop();
        assignColorAndPush(leftover, results);
    }

    return results;
}

/**
 * Assign a random color from selectedColorIndices to rectangle r, push to results
 */
function assignColorAndPush(r, resultsArray) {
    let cIndex = random(selectedColorIndices);
    r.colorIndex = cIndex;
    resultsArray.push(r);
}

/**
 * Generate edges from the final rectangles, ensuring no duplicates.
 * If two rectangles share an edge, we let only the rectangle with the
 * smaller color index draw it, so we never replicate the same line.
 */
function generateEdges() {
    // We'll check each rectangle vs. others for shared edges
    // Then only keep edges for the rectangle with the smaller color index
    for (let i = 0; i < finalRectangles.length; i++) {
        let ri = finalRectangles[i];
        // Build an object of the 4 edges
        let edges = getRectEdges(ri);

        for (let e of edges) {
            let shared = findSharedRect(ri, e);
            if (!shared) {
                // No shared rect, so this rectangle can claim the edge
                recordEdge(e, ri.colorIndex);
            } else {
                // Found a shared rectangle 'rj'
                // Only draw if ri's color index < rj's color index
                if (ri.colorIndex < shared.colorIndex) {
                    recordEdge(e, ri.colorIndex);
                }
            }
        }
    }
}

/**
 * Return top/right/bottom/left edges for rect r as line segments:
 * {x1, y1, x2, y2}
 */
function getRectEdges(r) {
    let x1 = r.x;
    let y1 = r.y;
    let x2 = r.x + r.w;
    let y2 = r.y + r.h;

    return [
        { x1, y1, x2, y2: y1 }, // top
        { x1: x2, y1, x2, y2 }, // right
        { x1: x2, y1: y2, x2: x1, y2 }, // bottom
        { x1, y1: y2, x2: x1, y2: y1 } // left
    ];
}

/**
 * For a given edge e in rectangle ri, check if another rectangle rj shares it.
 * We'll do an O(n) check. If found, returns that rectangle; else null.
 * Two rects share an edge if the edge is exactly the boundary for both.
 */
function findSharedRect(ri, e) {
    // We'll see if there's a second rectangle rj that has the same coordinates
    for (let j = 0; j < finalRectangles.length; j++) {
        if (j === ri) continue;
        let rj = finalRectangles[j];
        // If bounding boxes don't match for that edge, skip
        if (!overlapsInAnyMeaningfulWay(ri, rj)) continue;

        let edgesOfJ = getRectEdges(rj);
        for (let ej of edgesOfJ) {
            if (isSameEdge(e, ej)) {
                return rj;
            }
        }
    }
    return null;
}

/**
 * Quick bounding box check to skip obvious non-overlaps
 */
function overlapsInAnyMeaningfulWay(r1, r2) {
    // If they're completely disjoint, no shared edge
    if (r2.x > r1.x + r1.w || r2.x + r2.w < r1.x) return false;
    if (r2.y > r1.y + r1.h || r2.y + r2.h < r1.y) return false;
    return true;
}

/**
 * Compare two line segments for exact equality, ignoring direction:
 * We consider them the same if they share the same endpoints.
 */
function isSameEdge(e1, e2) {
    let a1 = sortEndpoints(e1.x1, e1.y1, e1.x2, e1.y2);
    let a2 = sortEndpoints(e2.x1, e2.y1, e2.x2, e2.y2);

    let eps = 0.0001;
    return (
        isClose(a1.x1, a2.x1, eps) &&
        isClose(a1.y1, a2.y1, eps) &&
        isClose(a1.x2, a2.x2, eps) &&
        isClose(a1.y2, a2.y2, eps)
    );
}

/**
 * Sort endpoints for consistent comparison
 */
function sortEndpoints(xa, ya, xb, yb) {
    if (xa < xb) {
        return { x1: xa, y1: ya, x2: xb, y2: yb };
    } else if (xa > xb) {
        return { x1: xb, y1: yb, x2: xa, y2: ya };
    } else {
        // same x, compare y
        if (ya < yb) {
            return { x1: xa, y1: ya, x2: xb, y2: yb };
        } else {
            return { x1: xb, y1: yb, x2: xa, y2: ya };
        }
    }
}

function isClose(a, b, eps) {
    return Math.abs(a - b) < eps;
}

/**
 * Record an edge (x1,y1 -> x2,y2) into pathData[colorIndex].
 */
function recordEdge(e, colorIndex) {
    let cmd = `M${e.x1.toFixed(2)},${e.y1.toFixed(2)} L${e.x2.toFixed(2)},${e.y2.toFixed(2)}`;
    pathData[colorIndex].push(cmd);
}

/**
 * Generate minimal "bit lines" in each rectangle to suggest stored data,
 * without overshadowing the main concept. We place a few random short lines
 * fully inside the rectangle. They won't overlap the edges, so no duplicates.
 */
function generateInternalBits() {
    finalRectangles.forEach(r => {
        // We'll add a handful of short lines
        let cIndex = r.colorIndex;
        let count = generationRules.internalBitCount;

        // Skip very small rectangles
        if (r.w < 10 || r.h < 10) return;

        for (let i = 0; i < count; i++) {
            // random center
            let cx = random(r.x + 3, r.x + r.w - 3);
            let cy = random(r.y + 3, r.y + r.h - 3);

            // random angle
            let theta = random(TWO_PI);
            let halfLen = generationRules.internalBitLength / 2;
            let x1 = cx - halfLen * cos(theta);
            let y1 = cy - halfLen * sin(theta);
            let x2 = cx + halfLen * cos(theta);
            let y2 = cy + halfLen * sin(theta);

            // ensure it's fully inside
            if (
                x1 > r.x && x1 < r.x + r.w &&
                x2 > r.x && x2 < r.x + r.w &&
                y1 > r.y && y1 < r.y + r.h &&
                y2 > r.y && y2 < r.y + r.h
            ) {
                let cmd = `M${x1.toFixed(2)},${y1.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
                pathData[cIndex].push(cmd);
            }
        }
    });
}

/**
 * Redraw all lines from pathData on canvas
 */
function reDrawAllLines(colorList) {
    colorList.forEach(ci => {
        let segments = pathData[ci];
        if (!segments || !segments.length) return;

        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        segments.forEach(cmd => {
            let coords = cmd.match(/[-.d]+/g).map(Number);
            line(coords[0], coords[1], coords[2], coords[3]);
        });
    });
}

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

/**
 * Add color palette bars for used colors
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let colorArray = usedColorIndices.slice();
    let numColors = colorArray.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);

    colorArray.forEach((ci, i) => {
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);
        applyStrokeWithOpacity(colorVal);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Key press handling
 */
function keyPressed() {
    if (key === ' ') {
        // Export the artwork as SVG
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        // Regenerate with fresh arrangement
        resetCanvas();
    }
}

/**
 * Reset the canvas with new random partition
 */
function resetCanvas() {
    background(255);
    finalRectangles = [];
    usedColorIndices = [];
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    finalRectangles = buildRectPartition();
    generateEdges();
    generateInternalBits();

    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    background(255);
    reDrawAllLines(usedColorIndices);
    drawMarkers();
    addColorPaletteBars();
}

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

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

    // Individual colors
    usedColorIndices.forEach(ci => {
        if (pathData[ci].length) {
            let colorName = colors[ci].name.toUpperCase();
            let singleSVG = generateSVG(ci);
            let fileName = `${dayNumber}-0${ci}-${colorName}-PORTRAIT-${timestamp}.svg`;
            saveSVGFile(singleSVG, fileName);
        }
    });
}

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

    // Markers
    svg += addMarkersSVG();

    if (activeColor === 0) {
        // All used colors
        usedColorIndices.forEach((ci, idx) => {
            svg += addSegmentsSVG(ci, idx + 1);
        });
        // Full palette
        svg += addPaletteBarsSVG(usedColorIndices);
    } else {
        // Single color
        let idx = usedColorIndices.indexOf(activeColor) + 1;
        svg += addSegmentsSVG(activeColor, idx);

        // Draw the color bar at the same offset it would have had
        svg += addPaletteBarsSVG(usedColorIndices, activeColor);
    }

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

/**
 * Add <g> for all line segments of a given color
 */
function addSegmentsSVG(ci, layerNum) {
    let segs = pathData[ci];
    if (!segs || !segs.length) return '';

    let col = colors[ci];
    let out = `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${ci}-${col.name.toLowerCase()}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${col.hex}">n`;

    // Combine line commands
    let pathString = segs.join(' ');
    out += `<path d="${pathString}" stroke-width="${strokeWeightValue}" fill="none" />n`;

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

/**
 * Add palette bars for either all used colors (activeColor=0)
 * or a single color (matching offset).
 */
function addPaletteBarsSVG(colorArray, activeColor = 0) {
    if (!colorArray.length) return '';

    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

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

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer99-palette"
       inkscape:label="palette"
       style="display:inline">n`;

    colorArray.forEach((ci, i) => {
        // If activeColor != 0, only draw that color's bar in its original offset
        if (activeColor !== 0 && ci !== activeColor) {
            return;
        }
        let colorVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
           stroke="${colorVal}"
           stroke-opacity="${strokeOpacity}"
           stroke-width="${barHeight}"
           fill="none" />n`;
    });

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

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

/**
 * Save 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 085
/*

=======================================
  Day 085 Self-Portrait (Segmented Outlook)
=======================================

### Title: *Segmented Outlook*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Segmented Outlook" envisions identity as a dynamic partition of 
rectangular regions, each representing a distinct perspective within 
an overarching structure. The space is recursively subdivided into 
numerous rectangles, with shared edges deliberately assigned to only 
one rectangle to prevent overlap. Subtle, short “bit lines” appear in 
each rectangle, hinting at memory-like data stored within. Despite their 
apparent disconnection, these discrete segments collectively form a 
cohesive tapestry, symbolic of identity as a mosaic of bounded facets.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 085 - 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 = '085';          // 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 = {
    // Increase depth & probability to yield more rectangles
    maxDepth: 5,
    subdivideProbability: 0.8,
    minSize: 40,
    maxRectangles: 600,

    // Internal "bit lines" in each rectangle
    internalBitCount: 8,
    internalBitLength: 20
};

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

let selectedColorIndices = [];  // subset of colors chosen randomly
let usedColorIndices = [];      // final colors that actually get used

let finalRectangles = [];       // partition data
let strokeWeightValue = 2;      // ~0.5 mm

// pathData[colorIndex] => array of "M x1,y1 L x2,y2"
let pathData = {};

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select random subset of colors
    selectColors();

    // Initialize path arrays
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    // Build final partition
    finalRectangles = [];
    subdivideSpace(
        {
            x: workAreaMarginPixels,
            y: workAreaMarginPixels,
            w: width - 2 * workAreaMarginPixels,
            h: height - 2 * workAreaMarginPixels,
            depth: 0
        }
    );

    // After building partition, generate edges
    generateEdges();

    // Add small "bit lines" in each rectangle
    generateInternalBits();

    // Filter out only colors that got used
    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    // Render to canvas
    background(255);
    reDrawAllLines(usedColorIndices);

    // Markers & color palette
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

/**
 * Select a random subset of 1..9 colors
 */
function selectColors() {
    let n = floor(random(1, 10));
    let indices = Object.keys(colors).map(Number);
    selectedColorIndices = [];

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

/**
 * Recursively subdivide the region r or assign it a color.
 */
function subdivideSpace(r) {
    if (finalRectangles.length >= generationRules.maxRectangles) {
        assignColor(r);
        return;
    }

    // Decide whether to subdivide
    if (
        r.depth < generationRules.maxDepth &&
        random() < generationRules.subdivideProbability &&
        (r.w > generationRules.minSize * 2 || r.h > generationRules.minSize * 2)
    ) {
        // subdivide
        let cutVertically = random() < 0.5;
        if (cutVertically && r.w > generationRules.minSize * 2) {
            let ratio = random(0.3, 0.7);
            let w1 = r.w * ratio;
            let w2 = r.w - w1;

            let rA = { x: r.x, y: r.y, w: w1, h: r.h, depth: r.depth + 1 };
            let rB = { x: r.x + w1, y: r.y, w: w2, h: r.h, depth: r.depth + 1 };

            subdivideSpace(rA);
            subdivideSpace(rB);
        } else if (!cutVertically && r.h > generationRules.minSize * 2) {
            let ratio = random(0.3, 0.7);
            let h1 = r.h * ratio;
            let h2 = r.h - h1;

            let rA = { x: r.x, y: r.y, w: r.w, h: h1, depth: r.depth + 1 };
            let rB = { x: r.x, y: r.y + h1, w: r.w, h: h2, depth: r.depth + 1 };

            subdivideSpace(rA);
            subdivideSpace(rB);
        } else {
            // cannot effectively subdivide further
            assignColor(r);
        }
    } else {
        // no subdivision
        assignColor(r);
    }
}

/**
 * Assign a color to rectangle r and push into finalRectangles
 */
function assignColor(r) {
    let cIndex = random(selectedColorIndices);
    r.colorIndex = cIndex;
    finalRectangles.push(r);
}

/**
 * For each rectangle, generate its four edges, then check if they are shared.
 * Only the rectangle with the smaller color index "owns" that edge.
 */
function generateEdges() {
    for (let i = 0; i < finalRectangles.length; i++) {
        let ri = finalRectangles[i];
        let edgesOfR = getRectEdges(ri);

        for (let e of edgesOfR) {
            let neighbor = findSharedRect(ri, e);
            if (!neighbor) {
                // no neighbor => ri owns this edge
                recordEdge(e, ri.colorIndex);
            } else {
                // if ri.colorIndex < neighbor's => own
                if (ri.colorIndex < neighbor.colorIndex) {
                    recordEdge(e, ri.colorIndex);
                }
            }
        }
    }
}

/**
 * Return top/right/bottom/left edges for rect r
 */
function getRectEdges(r) {
    let x1 = r.x;
    let y1 = r.y;
    let x2 = r.x + r.w;
    let y2 = r.y + r.h;

    return [
        { x1, y1, x2, y2: y1 },        // top
        { x1: x2, y1, x2, y2 },        // right
        { x1: x2, y1: y2, x2: x1, y2 },// bottom
        { x1, y1: y2, x2: x1, y2: y1 } // left
    ];
}

/**
 * Find a rectangle that shares edge e with ri.
 */
function findSharedRect(ri, e) {
    for (let j = 0; j < finalRectangles.length; j++) {
        let rj = finalRectangles[j];
        if (rj === ri) continue;

        // quick bounding box check
        if (!intersectBBox(ri, rj)) continue;

        let edgesJ = getRectEdges(rj);
        for (let ej of edgesJ) {
            if (isSameEdge(e, ej)) {
                return rj;
            }
        }
    }
    return null;
}

function intersectBBox(r1, r2) {
    if (r2.x > r1.x + r1.w || r2.x + r2.w < r1.x) return false;
    if (r2.y > r1.y + r1.h || r2.y + r2.h < r1.y) return false;
    return true;
}

/**
 * Compare edges ignoring direction
 */
function isSameEdge(e1, e2) {
    let a1 = sortEndpoints(e1.x1, e1.y1, e1.x2, e1.y2);
    let a2 = sortEndpoints(e2.x1, e2.y1, e2.x2, e2.y2);
    let eps = 0.0001;

    return (
        isClose(a1.x1, a2.x1, eps) &&
        isClose(a1.y1, a2.y1, eps) &&
        isClose(a1.x2, a2.x2, eps) &&
        isClose(a1.y2, a2.y2, eps)
    );
}

function sortEndpoints(xa, ya, xb, yb) {
    if (xa < xb) return { x1: xa, y1: ya, x2: xb, y2: yb };
    else if (xa > xb) return { x1: xb, y1: yb, x2: xa, y2: ya };
    else {
        // same x, compare y
        if (ya < yb) return { x1: xa, y1: ya, x2: xb, y2: yb };
        else return { x1: xb, y1: yb, x2: xa, y2: ya };
    }
}

function isClose(a, b, eps) {
    return Math.abs(a - b) < eps;
}

/**
 * Record an edge into pathData
 */
function recordEdge(e, colorIndex) {
    let cmd = `M${e.x1.toFixed(2)},${e.y1.toFixed(2)} L${e.x2.toFixed(2)},${e.y2.toFixed(2)}`;
    pathData[colorIndex].push(cmd);
}

/**
 * Generate short "bit lines" in each rectangle
 */
function generateInternalBits() {
    finalRectangles.forEach(r => {
        let cIndex = r.colorIndex;
        if (r.w < 10 || r.h < 10) return;

        for (let i = 0; i < generationRules.internalBitCount; i++) {
            let cx = random(r.x + 3, r.x + r.w - 3);
            let cy = random(r.y + 3, r.y + r.h - 3);

            let theta = random(TWO_PI);
            let halfLen = generationRules.internalBitLength / 2;
            let x1 = cx - halfLen * cos(theta);
            let y1 = cy - halfLen * sin(theta);
            let x2 = cx + halfLen * cos(theta);
            let y2 = cy + halfLen * sin(theta);

            // ensure it's fully inside
            if (
                x1 > r.x && x1 < r.x + r.w &&
                x2 > r.x && x2 < r.x + r.w &&
                y1 > r.y && y1 < r.y + r.h &&
                y2 > r.y && y2 < r.y + r.h
            ) {
                let cmd = `M${x1.toFixed(2)},${y1.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
                pathData[cIndex].push(cmd);
            }
        }
    });
}

/**
 * Redraw all lines from pathData on canvas
 */
function reDrawAllLines(colorList) {
    colorList.forEach(ci => {
        let segs = pathData[ci];
        if (!segs?.length) return;

        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        segs.forEach(cmd => {
            let coords = cmd.match(/[-.d]+/g).map(Number);
            line(coords[0], coords[1], coords[2], coords[3]);
        });
    });
}

/**
 * Helper to apply stroke color with opacity
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Add corner 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 at bottom
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let colorArray = usedColorIndices.slice();
    let numColors = colorArray.length;
    if (!numColors) return;

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

    strokeWeight(barHeight);

    colorArray.forEach((ci, i) => {
        applyStrokeWithOpacity(colors[ci].hex);
        let x = xStart + i * (segmentLength + gapSize);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas with fresh partition
 */
function resetCanvas() {
    background(255);
    finalRectangles = [];
    usedColorIndices = [];
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    subdivideSpace(
        {
            x: workAreaMarginPixels,
            y: workAreaMarginPixels,
            w: width - 2 * workAreaMarginPixels,
            h: height - 2 * workAreaMarginPixels,
            depth: 0
        }
    );
    generateEdges();
    generateInternalBits();

    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    background(255);
    reDrawAllLines(usedColorIndices);
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Handle key presses: space => export, R => reset
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

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

    // Individual
    usedColorIndices.forEach(ci => {
        if (pathData[ci].length) {
            let colorName = colors[ci].name.toUpperCase();
            let singleSVG = generateSVG(ci);
            saveSVGFile(singleSVG, `${dayNumber}-0${ci}-${colorName}-PORTRAIT-${timestamp}.svg`);
        }
    });
}

/**
 * Create the SVG output
 * @param {number} activeColor - 0 => all used
 */
function generateSVG(activeColor = 0) {
    let svg = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svg += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    svg += addMarkersSVG();

    if (activeColor === 0) {
        // all used colors
        usedColorIndices.forEach((ci, idx) => {
            svg += addSegmentsSVG(ci, idx + 1);
        });
        svg += addPaletteBarsSVG(usedColorIndices);
    } else {
        let idx = usedColorIndices.indexOf(activeColor) + 1;
        svg += addSegmentsSVG(activeColor, idx);
        // place only the single color's bar in its original offset
        svg += addPaletteBarsSVG(usedColorIndices, activeColor);
    }

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

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

/**
 * Build <g> tag for a color's line segments
 */
function addSegmentsSVG(ci, layerNum) {
    let segs = pathData[ci];
    if (!segs?.length) return '';
    let col = colors[ci];
    let out = `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${ci}-${col.name.toLowerCase()}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${col.hex}">n`;

    let pathString = segs.join(' ');
    out += `<path d="${pathString}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    out += '</g>n';
    return out;
}

/**
 * Add palette bar(s)
 */
function addPaletteBarsSVG(colorArray, activeColor = 0) {
    if (!colorArray?.length) return '';

    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

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

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer99-palette"
       inkscape:label="palette"
       style="display:inline">n`;

    colorArray.forEach((ci, i) => {
        if (activeColor !== 0 && ci !== activeColor) return; 
        let colVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
           stroke="${colVal}"
           stroke-opacity="${strokeOpacity}"
           stroke-width="${barHeight}"
           fill="none" />n`;
    });

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

/**
 * Save the generated SVG string
 */
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);
}

let generationRules = {
  // Increase depth & probability to yield more rectangles
  maxDepth: 9,
  subdivideProbability: 0.8,
  minSize: 40,
  maxRectangles: 600,

  // Internal "bit lines" in each rectangle
  internalBitCount: 100,
  internalBitLength: 10
};

// Day 085
/*

=======================================
  Day 085 Self-Portrait (Segmented Outlook)
=======================================

### Title: *Segmented Outlook*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

"Segmented Outlook" envisions identity as a dynamic partition of 
rectangular regions, each representing a distinct perspective within 
an overarching structure. 

By allowing a high maximum depth and subdivide probability, the space 
is recursively broken into many smaller partitions. Each rectangle 
may or may not contain subtle “bit lines,” which themselves may all 
share the same angle or vary randomly, suggesting partial, organic 
storage of data. These design choices introduce a balance between 
uniformity and entropy—a visual metaphor for how memory fragments 
coalesce into a broader self-image without ever becoming fully 
systematized or fully chaotic.

---
*/
/*----------------------------------------
    Generated with p5.js
    Day 085 - 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 = '085';          // 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 = {
    // Increase depth & probability to yield more rectangles
    maxDepth: 9,
    subdivideProbability: 0.8,
    minSize: 40,
    maxRectangles: 600,

    // Internal "bit lines" in each rectangle
    internalBitCount: 100,
    internalBitLength: 10,

    // Probability a rectangle actually gets bit lines
    bitFillProbability: 0.7
};

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

let selectedColorIndices = [];  // subset of colors chosen randomly
let usedColorIndices = [];      // final colors that actually get used

let finalRectangles = [];       // partition data
let strokeWeightValue = 2;      // ~0.5 mm lines

// pathData[colorIndex] => array of "M x1,y1 L x2,y2"
let pathData = {};

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

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

    // Adjust stroke weight
    adjustForStrokeWeight();

    // Select random subset of colors
    selectColors();

    // Initialize path arrays
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    // Build final partition
    finalRectangles = [];
    subdivideSpace(
        {
            x: workAreaMarginPixels,
            y: workAreaMarginPixels,
            w: width - 2 * workAreaMarginPixels,
            h: height - 2 * workAreaMarginPixels,
            depth: 0
        }
    );

    // After building partition, generate edges
    generateEdges();

    // Add small "bit lines" in each rectangle
    generateInternalBits();

    // Filter out only colors that got used
    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    // Render to canvas
    background(255);
    reDrawAllLines(usedColorIndices);

    // Markers & color palette
    drawMarkers();
    addColorPaletteBars();

    noLoop();
}

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

/**
 * Select a random subset of 1..9 colors
 */
function selectColors() {
    let n = floor(random(1, 10));
    let indices = Object.keys(colors).map(Number);
    selectedColorIndices = [];

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

/**
 * Recursively subdivide the region r or assign it a color.
 */
function subdivideSpace(r) {
    if (finalRectangles.length >= generationRules.maxRectangles) {
        assignColor(r);
        return;
    }

    // Decide whether to subdivide
    if (
        r.depth < generationRules.maxDepth &&
        random() < generationRules.subdivideProbability &&
        (r.w > generationRules.minSize * 2 || r.h > generationRules.minSize * 2)
    ) {
        // subdivide
        let cutVertically = random() < 0.5;
        if (cutVertically && r.w > generationRules.minSize * 2) {
            let ratio = random(0.3, 0.7);
            let w1 = r.w * ratio;
            let w2 = r.w - w1;

            let rA = { x: r.x, y: r.y, w: w1, h: r.h, depth: r.depth + 1 };
            let rB = { x: r.x + w1, y: r.y, w: w2, h: r.h, depth: r.depth + 1 };

            subdivideSpace(rA);
            subdivideSpace(rB);
        } else if (!cutVertically && r.h > generationRules.minSize * 2) {
            let ratio = random(0.3, 0.7);
            let h1 = r.h * ratio;
            let h2 = r.h - h1;

            let rA = { x: r.x, y: r.y, w: r.w, h: h1, depth: r.depth + 1 };
            let rB = { x: r.x, y: r.y + h1, w: r.w, h: h2, depth: r.depth + 1 };

            subdivideSpace(rA);
            subdivideSpace(rB);
        } else {
            // cannot effectively subdivide further
            assignColor(r);
        }
    } else {
        // no subdivision
        assignColor(r);
    }
}

/**
 * Assign a color to rectangle r and push into finalRectangles
 */
function assignColor(r) {
    let cIndex = random(selectedColorIndices);
    r.colorIndex = cIndex;
    finalRectangles.push(r);
}

/**
 * For each rectangle, generate its four edges, then check if they are shared.
 * Only the rectangle with the smaller color index "owns" that edge.
 */
function generateEdges() {
    for (let i = 0; i < finalRectangles.length; i++) {
        let ri = finalRectangles[i];
        let edgesOfR = getRectEdges(ri);

        for (let e of edgesOfR) {
            let neighbor = findSharedRect(ri, e);
            if (!neighbor) {
                // no neighbor => ri owns this edge
                recordEdge(e, ri.colorIndex);
            } else {
                // if ri.colorIndex < neighbor's => own
                if (ri.colorIndex < neighbor.colorIndex) {
                    recordEdge(e, ri.colorIndex);
                }
            }
        }
    }
}

/**
 * Return top/right/bottom/left edges for rect r
 */
function getRectEdges(r) {
    let x1 = r.x;
    let y1 = r.y;
    let x2 = r.x + r.w;
    let y2 = r.y + r.h;

    return [
        { x1, y1, x2, y2: y1 },        // top
        { x1: x2, y1, x2, y2 },        // right
        { x1: x2, y1: y2, x2: x1, y2 },// bottom
        { x1, y1: y2, x2: x1, y2: y1 } // left
    ];
}

/**
 * Find a rectangle that shares edge e with ri.
 */
function findSharedRect(ri, e) {
    for (let j = 0; j < finalRectangles.length; j++) {
        let rj = finalRectangles[j];
        if (rj === ri) continue;

        // quick bounding box check
        if (!intersectBBox(ri, rj)) continue;

        let edgesJ = getRectEdges(rj);
        for (let ej of edgesJ) {
            if (isSameEdge(e, ej)) {
                return rj;
            }
        }
    }
    return null;
}

function intersectBBox(r1, r2) {
    if (r2.x > r1.x + r1.w || r2.x + r2.w < r1.x) return false;
    if (r2.y > r1.y + r1.h || r2.y + r2.h < r1.y) return false;
    return true;
}

/**
 * Compare edges ignoring direction
 */
function isSameEdge(e1, e2) {
    let a1 = sortEndpoints(e1.x1, e1.y1, e1.x2, e1.y2);
    let a2 = sortEndpoints(e2.x1, e2.y1, e2.x2, e2.y2);
    let eps = 0.0001;

    return (
        isClose(a1.x1, a2.x1, eps) &&
        isClose(a1.y1, a2.y1, eps) &&
        isClose(a1.x2, a2.x2, eps) &&
        isClose(a1.y2, a2.y2, eps)
    );
}

function sortEndpoints(xa, ya, xb, yb) {
    if (xa < xb) return { x1: xa, y1: ya, x2: xb, y2: yb };
    else if (xa > xb) return { x1: xb, y1: yb, x2: xa, y2: ya };
    else {
        // same x, compare y
        if (ya < yb) return { x1: xa, y1: ya, x2: xb, y2: yb };
        else return { x1: xb, y1: yb, x2: xa, y2: ya };
    }
}

function isClose(a, b, eps) {
    return Math.abs(a - b) < eps;
}

/**
 * Record an edge into pathData
 */
function recordEdge(e, colorIndex) {
    let cmd = `M${e.x1.toFixed(2)},${e.y1.toFixed(2)} L${e.x2.toFixed(2)},${e.y2.toFixed(2)}`;
    pathData[colorIndex].push(cmd);
}

/**
 * Generate short "bit lines" in each rectangle, with random chance to skip
 * them entirely, and hybrid approach: some rectangles have uniform angles,
 * others random angles per line.
 */
function generateInternalBits() {
    finalRectangles.forEach(r => {
        // Probability check: skip bit lines sometimes
        if (random() > generationRules.bitFillProbability) {
            // ~30% chance to skip lines entirely
            return;
        }

        let cIndex = r.colorIndex;
        if (r.w < 10 || r.h < 10) return;

        // Decide if this rectangle has a uniform angle or random per line
        let useUniformAngle = random() < 0.5;
        let uniformAngle = random(TWO_PI);

        for (let i = 0; i < generationRules.internalBitCount; i++) {
            // random center
            let cx = random(r.x + 3, r.x + r.w - 3);
            let cy = random(r.y + 3, r.y + r.h - 3);

            // angle
            let theta = useUniformAngle ? uniformAngle : random(TWO_PI);
            let halfLen = generationRules.internalBitLength / 2;

            let x1 = cx - halfLen * cos(theta);
            let y1 = cy - halfLen * sin(theta);
            let x2 = cx + halfLen * cos(theta);
            let y2 = cy + halfLen * sin(theta);

            // ensure it's fully inside
            if (
                x1 > r.x && x1 < r.x + r.w &&
                x2 > r.x && x2 < r.x + r.w &&
                y1 > r.y && y1 < r.y + r.h &&
                y2 > r.y && y2 < r.y + r.h
            ) {
                let cmd = `M${x1.toFixed(2)},${y1.toFixed(2)} L${x2.toFixed(2)},${y2.toFixed(2)}`;
                pathData[cIndex].push(cmd);
            }
        }
    });
}

/**
 * Redraw all lines from pathData on canvas
 */
function reDrawAllLines(colorList) {
    colorList.forEach(ci => {
        let segs = pathData[ci];
        if (!segs?.length) return;

        applyStrokeWithOpacity(colors[ci].hex);
        strokeWeight(strokeWeightValue);

        segs.forEach(cmd => {
            let coords = cmd.match(/[-.d]+/g).map(Number);
            line(coords[0], coords[1], coords[2], coords[3]);
        });
    });
}

/**
 * Helper to apply stroke color with opacity
 */
function applyStrokeWithOpacity(hexColor) {
    let c = color(hexColor);
    c.setAlpha(255 * strokeOpacity);
    stroke(c);
}

/**
 * Add corner 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 at bottom
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

    let colorArray = usedColorIndices.slice();
    let numColors = colorArray.length;
    if (!numColors) return;

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

    strokeWeight(barHeight);

    colorArray.forEach((ci, i) => {
        applyStrokeWithOpacity(colors[ci].hex);
        let x = xStart + i * (segmentLength + gapSize);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas with fresh partition
 */
function resetCanvas() {
    background(255);
    finalRectangles = [];
    usedColorIndices = [];
    selectedColorIndices.forEach(ci => {
        pathData[ci] = [];
    });

    subdivideSpace(
        {
            x: workAreaMarginPixels,
            y: workAreaMarginPixels,
            w: width - 2 * workAreaMarginPixels,
            h: height - 2 * workAreaMarginPixels,
            depth: 0
        }
    );
    generateEdges();
    generateInternalBits();

    usedColorIndices = selectedColorIndices.filter(ci => pathData[ci].length > 0);

    background(255);
    reDrawAllLines(usedColorIndices);
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Handle key presses: space => export, R => reset
 */
function keyPressed() {
    if (key === ' ') {
        saveSVGs();
    } else if (key === 'r' || key === 'R') {
        resetCanvas();
    }
}

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

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

    // Individual
    usedColorIndices.forEach(ci => {
        if (pathData[ci].length) {
            let colorName = colors[ci].name.toUpperCase();
            let singleSVG = generateSVG(ci);
            saveSVGFile(singleSVG, `${dayNumber}-0${ci}-${colorName}-PORTRAIT-${timestamp}.svg`);
        }
    });
}

/**
 * Create the SVG output
 * @param {number} activeColor - 0 => all used
 */
function generateSVG(activeColor = 0) {
    let svg = `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"n`;
    svg += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

    svg += addMarkersSVG();

    if (activeColor === 0) {
        // all used colors
        usedColorIndices.forEach((ci, idx) => {
            svg += addSegmentsSVG(ci, idx + 1);
        });
        svg += addPaletteBarsSVG(usedColorIndices);
    } else {
        let idx = usedColorIndices.indexOf(activeColor) + 1;
        svg += addSegmentsSVG(activeColor, idx);
        // place only the single color's bar in its original offset
        svg += addPaletteBarsSVG(usedColorIndices, activeColor);
    }

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

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

/**
 * Build <g> tag for a color's line segments
 */
function addSegmentsSVG(ci, layerNum) {
    let segs = pathData[ci];
    if (!segs?.length) return '';
    let col = colors[ci];
    let out = `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${ci}-${col.name.toLowerCase()}"
   style="display:inline"
   stroke="${col.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${col.hex}">n`;

    let pathString = segs.join(' ');
    out += `<path d="${pathString}" stroke-width="${strokeWeightValue}" fill="none" />n`;
    out += '</g>n';
    return out;
}

/**
 * Add palette bar(s)
 */
function addPaletteBarsSVG(colorArray, activeColor = 0) {
    if (!colorArray?.length) return '';

    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);

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

    let svg = `<g
       inkscape:groupmode="layer"
       id="layer99-palette"
       inkscape:label="palette"
       style="display:inline">n`;

    colorArray.forEach((ci, i) => {
        if (activeColor !== 0 && ci !== activeColor) return; 
        let colVal = colors[ci].hex;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)} H${(x + segmentLength).toFixed(2)}"
           stroke="${colVal}"
           stroke-opacity="${strokeOpacity}"
           stroke-width="${barHeight}"
           fill="none" />n`;
    });

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

/**
 * Save the generated SVG string
 */
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);
}