// Day 136
/*

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, block arrangement,
              structured geometry, discrete lattice, random heights

### Conceptual Framework

"Cuboid Overlook" portrays my identity as an ensemble of stacked blocks viewed
through an isometric lens. Each discrete cuboid represents a distinct aspect of
the self—an independent volume with its own height, yet arranged in a shared lattice
of possibilities. Although these blocks share a consistent, predictable isometric
structure, their randomly assigned elevations and colors reflect the way diverse
experiences arise within a framework of overarching coherence. Intersections among
blocks are permitted, but no two outlines overlap precisely, illustrating how facets
of identity can interact without merging into a single, monolithic shape. This piece
thus suggests that while my internal logic remains uniform, the outcomes—like these
stacked blocks—are infinitely varied and richly layered.

### Technical Approach

1. An isometric coordinate transformation is used to convert each grid cell's
   (row, column, height) data into screen coordinates.
2. For each cell in a 6×6 grid, a random block height is generated. Only the top
   “diamond” outline (the top face of the cuboid) is drawn—sides are omitted to
   reduce visual overlap.
3. Each outline is assigned a color from the chosen palette, cycling through the
   selected colors row by row. Stroke opacity is set to 0.8.
4. The final arrangement is offset so that all shapes remain within the defined
   work area margins.
5. Every line is recorded in `pathData` to ensure perfect consistency between the
   onscreen drawing and SVG export. No fills or gradients are used—only stroke lines.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 136 - 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 = '136';          // 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)
 * =======================================
 */

// Basic grid configuration
let generationRules = {
    rows: 6,
    cols: 6,
    cellSize: 30,  // base XY spacing in "grid" coordinates
    maxHeight: 4   // random max Z height
};

/**
 * =======================================
 * 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();        // Track used colors

let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line
let pathData;			           // Store the actual drawing commands for SVG

// Arrays to store the block geometry before drawing
let blockList = [];

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors
    selectColors();

    // Initialize the pathData object
    pathData = {};
    // For each color index, we'll store an array of path strings
    Object.keys(colors).forEach(idx => {
        pathData[idx] = [];
    });

    // Generate block data
    generateBlocks();

    // Draw everything
    drawShapes();

    noLoop();
}

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

function adjustForStrokeWeight() {
    // ~0.5mm line width => about 2 pixels at 100 DPI
    strokeWeightValue = 2;

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

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

function selectColors() {
    // Select between 1 to 9 unique colors randomly
    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);
    }

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

/**
 * =======================================
 * Generate Block Data
 * =======================================
 */

function generateBlocks() {
    let { rows, cols, cellSize, maxHeight } = generationRules;

    // We'll store raw isometric coordinates, then shift them
    // after we know the bounding box
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            let z = floor(random(maxHeight + 1)); // from 0..maxHeight
            // We'll store just the top face of the cuboid
            // We'll pick color index for each row (cycling through the selected colors)
            // or an alternate approach. Let's do row-based color cycles:
            let colorIdx = selectedColorIndices[r % selectedColorIndices.length];
            if (!colorIdx) {
                // If no color was chosen somehow, default to BLACK
                colorIdx = 8;
            }

            // The corners of the top face in "grid coords" (x,y,z):
            // We'll define them in the square: (0,0) -> (cellSize,0) -> (cellSize, cellSize) -> (0, cellSize)
            // Then we apply isometric transform. We'll store them in an array.
            let cornersGrid = [
                { x: c * cellSize,         y: r * cellSize,         z: z },
                { x: c * cellSize + cellSize, y: r * cellSize,         z: z },
                { x: c * cellSize + cellSize, y: r * cellSize + cellSize, z: z },
                { x: c * cellSize,         y: r * cellSize + cellSize, z: z }
            ];

            // We'll transform them to isometric space (unshifted)
            let cornersIso = cornersGrid.map(pt => isoTransform(pt.x, pt.y, pt.z));

            blockList.push({
                colorIndex: colorIdx,
                corners: cornersIso
            });
        }
    }

    // Next, compute bounding box in isometric space
    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
    blockList.forEach(b => {
        b.corners.forEach(corner => {
            if (corner.x < minX) minX = corner.x;
            if (corner.x > maxX) maxX = corner.x;
            if (corner.y < minY) minY = corner.y;
            if (corner.y > maxY) maxY = corner.y;
        });
    });

    // Shift so top-left corner is at workAreaMarginPixels
    // and there's space for the entire shape
    let shiftX = workAreaMarginPixels - minX;
    let shiftY = workAreaMarginPixels - minY;

    blockList.forEach(b => {
        b.corners.forEach(corner => {
            corner.x += shiftX;
            corner.y += shiftY;
        });
    });
}

/**
 * Iso transform function (45-degree isometric)
 * Where x,y define grid position, z is 'height'.
 * We'll treat each unit in x,y as cellSize, but we already
 * integrated that above. Just transform final coords.
 */
function isoTransform(x, y, z) {
    // For a 45° isometric:
    // isoX = (x - y)*sqrt(2)/2
    // isoY = (x + y)*sqrt(2)/2 - z*(cellSizeZ)
    // We'll let cellSizeZ = some factor, but let's keep it 8 pixels
    // to exaggerate the height effect.
    let angle = PI / 4;  // 45 degrees
    let scale = sqrt(2) / 2;
    let cellSizeZ = 8;

    let isoX = (x - y) * scale;
    let isoY = (x + y) * scale - z * cellSizeZ;

    return { x: isoX, y: isoY };
}

/**
 * =======================================
 * Draw on Canvas
 * =======================================
 */

function drawShapes() {
    background(255);

    // Draw isometric top faces
    strokeWeight(strokeWeightValue);
    noFill();

    blockList.forEach(b => {
        let cIndex = b.colorIndex;
        let cHex = colors[cIndex].hex;

        // Use stroke color
        applyStrokeWithOpacity(cHex);

        // We have 4 corners, arranged in a loop
        let corners = b.corners;

        // Draw on canvas
        beginShape();
        corners.forEach((pt, idx) => {
            vertex(pt.x, pt.y);
        });
        endShape(CLOSE);

        // Also record in pathData
        // Construct a single path string for the diamond
        // "M x1,y1 L x2,y2 L x3,y3 L x4,y4 Z"
        let pathString = '';
        if (corners.length === 4) {
            pathString = `M${corners[0].x.toFixed(2)},${corners[0].y.toFixed(2)} ` +
                         `L${corners[1].x.toFixed(2)},${corners[1].y.toFixed(2)} ` +
                         `L${corners[2].x.toFixed(2)},${corners[2].y.toFixed(2)} ` +
                         `L${corners[3].x.toFixed(2)},${corners[3].y.toFixed(2)} Z`;
        }

        pathData[cIndex].push(pathString);
        usedColors.add(cIndex);
    });

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

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

/**
 * Draws registration markers at the corners of the canvas.
 */
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);
}

/**
 * Draws the color palette bars at the bottom of the canvas.
 */
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 = Array.from(usedColors).sort((a,b) => a-b);
    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();
    // Regenerate block data
    blockList = [];
    generateBlocks();

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

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

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

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

    // Individual colors
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    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) {
        // All colors
        let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
        usedColorsOrdered.forEach((colorIndex, idx) => {
            svgContent += addSegmentsSVG(colorIndex, idx + 1);
        });
    } else {
        // Single color
        svgContent += addSegmentsSVG(activeColor, 1);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 */
function addSegmentsSVG(colorIndex, layerNum) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeW = 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`;

    // paths from pathData[colorIndex]
    if (pathData[colorIndex] && pathData[colorIndex].length > 0) {
        // Combine them into fewer <path> tags if possible
        // We'll group them into one big path (space-separated)
        // but we should be careful to keep them separate so they "move" individually or not?
        // The user said we can combine segments of the same color. We'll do so for efficiency.
        let singlePath = pathData[colorIndex].join(' ');
        svg += `<path d="${singlePath}" stroke-width="${strokeW}" fill="none" />n`;
    }

    // Add palette bar for this color
    let usedColorsOrdered = Array.from(usedColors).sort((a,b) => a-b);
    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;
}

/**
 * Add 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},${offset} L${offset},${offset} L${offset},${5 + offset}
             M${(width - 5 - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - offset).toFixed(2)}
             L${(width - offset).toFixed(2)},${(height - 5 - offset).toFixed(2)}"
          stroke-width="${strokeWidth}" fill="none" />n
    </g>n`;
}

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

=======================================
  Day 136 Self-Portrait (Cuboid Overlook, Enhanced)
=======================================

### Title: *Cuboid Overlook: Enhanced*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric, cuboids, 3D outlines, side faces, discrete lattice,
              neighbor-aware rendering

### Conceptual Framework

This variation refines the original “Cuboid Overlook” by actually drawing each block
as a complete 3D form in isometric perspective: top plus two visible side faces.
Rather than simply outlining the top diamond, we compute each cuboid’s “east” and
“south” faces. By only drawing a face if the neighboring block in that direction is
shorter (or non‐existent), we avoid doubling up on interior edges—thus keeping the
lines distinct and uncluttered. The result emphasizes that every visible edge
represents an unshared boundary, reflecting the unique “surface” each aspect of
identity offers to the world. Where cubes touch or overlap from above, no redundant
lines appear, underscoring the notion that identity’s facets may nestle close
together without merging into a single, indistinct shape.

### Technical Approach

1. **Isometric Coordinates**: Each cuboid is defined on a row‐column grid, with a random
   integer height `z`. We transform `(x, y, z)` into 2D isometric screen coordinates.
2. **Face Culling**: For each block, we draw:
   - **Top Face** always (unless height is zero, if you prefer skipping flat blocks).
   - **East Face** only if there is no adjacent block at `(row, col+1)` with a height
     >= this one.
   - **South Face** only if there is no adjacent block at `(row+1, col)` with a height
     >= this one.
3. **Coloring**: As before, each row’s blocks share a color from the chosen palette.
4. **No Double‐Drawn Edges**: Because we skip faces blocked by neighbors, we do not
   lay the same line down twice, which keeps the ink from clogging.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 136 - 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 = '136';          // 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 = {
  rows: 6,
  cols: 6,
  cellSize: 30,  // base XY spacing in "grid" coords
  maxHeight: 4   // random max Z height
};

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

let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let faceData;  // Store the actual drawing commands for SVG

// We'll store the generated heights in a 2D array so we can compare neighbors
let heightGrid = [];


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

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

  adjustForStrokeWeight();
  selectColors();

  // Initialize faceData so each color index has an array
  faceData = {};
  Object.keys(colors).forEach(idx => {
    faceData[idx] = [];
  });

  // Generate random height grid
  generateHeights();

  // Build the faces (top/east/south) based on neighbor logic
  buildFaces();

  // Draw everything
  drawShapes();
  
  noLoop();
}

/**
 * Adjust for ~0.5mm stroke and expand margins slightly
 */
function adjustForStrokeWeight() {
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;
}

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

/**
 * Generate random integer heights for each grid cell
 */
function generateHeights() {
  let { rows, cols, maxHeight } = generationRules;
  for (let r = 0; r < rows; r++) {
    let rowHeights = [];
    for (let c = 0; c < cols; c++) {
      rowHeights.push( floor(random(maxHeight+1)) ); 
    }
    heightGrid.push(rowHeights);
  }
}

/**
 * Build top/east/south faces for each block, skipping faces if neighbors are as tall or taller.
 */
function buildFaces() {
  let { rows, cols, cellSize } = generationRules;

  // We'll gather bounding box info as we go
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let z = heightGrid[r][c];
      // Decide color for this block
      let colorIdx = selectedColorIndices[r % selectedColorIndices.length] || 8; // fallback black

      // If z=0 and you want to skip entirely, you could do: if (z<=0) continue;
      // but let's keep it for completeness:
      
      // Coordinates in "world" space
      let x0 = c*cellSize;
      let y0 = r*cellSize;
      
      // Gather the 8 corners (top & bottom) in local coords
      let A = iso3(x0,       y0,       z);
      let B = iso3(x0+cellSize, y0,       z);
      let C = iso3(x0+cellSize, y0+cellSize, z);
      let D = iso3(x0,       y0+cellSize, z);

      let A_ = iso3(x0,       y0,       0);
      let B_ = iso3(x0+cellSize, y0,       0);
      let C_ = iso3(x0+cellSize, y0+cellSize, 0);
      let D_ = iso3(x0,       y0+cellSize, 0);

      // Track bounding extents
      [A,B,C,D,A_,B_,C_,D_].forEach(pt => {
        if (pt.x < minX) minX = pt.x;
        if (pt.x > maxX) maxX = pt.x;
        if (pt.y < minY) minY = pt.y;
        if (pt.y > maxY) maxY = pt.y;
      });

      // Always draw top face if z>0 (or if you want it even at z=0)
      if (z>0) {
        pushQuadPath(colorIdx, [A,B,C,D]);
      }

      // East neighbor check for "east face" => B->C->C'->B'
      let eastNeighborHeight = (c+1<cols)? heightGrid[r][c+1] : -1; 
      if (z>0 && z > eastNeighborHeight) {
        pushQuadPath(colorIdx, [B,C,C_,B_]);
      }

      // South neighbor check for "south face" => C->D->D'->C'
      let southNeighborHeight = (r+1<rows)? heightGrid[r+1][c] : -1;
      if (z>0 && z > southNeighborHeight) {
        pushQuadPath(colorIdx, [C,D,D_,C_]);
      }
    }
  }

  // Shift everything by bounding box offset so it sits within margins
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;

  // Apply shift to all stored faces
  Object.keys(faceData).forEach(colIdx => {
    faceData[colIdx] = faceData[colIdx].map(pathStr => {
      // Each pathStr is something like: "Mxx,yy Lxx,yy L..."
      // We parse out the coordinates and shift them
      return shiftPath(pathStr, shiftX, shiftY);
    });
  });
}

/**
 * Push a quadrilateral path to faceData
 */
function pushQuadPath(colorIndex, cornerArray) {
  usedColors.add(colorIndex);

  // Build path string: Mx0,y0 Lx1,y1 Lx2,y2 Lx3,y3 Z
  // No shifting yet; we'll do that later in a post-process step
  let p = `M${cornerArray[0].x.toFixed(2)},${cornerArray[0].y.toFixed(2)}`;
  for (let i=1; i<cornerArray.length; i++){
    p += ` L${cornerArray[i].x.toFixed(2)},${cornerArray[i].y.toFixed(2)}`;
  }
  p += " Z";

  faceData[colorIndex].push(p);
}

/**
 * Shift all coordinate pairs in a path string by (shiftX, shiftY).
 */
function shiftPath(pathStr, shiftX, shiftY) {
  // A quick parse approach: split by spaces, look for coords after M or L
  // Example: "M100.00,200.00 L120.00,210.00 L..."
  
  let tokens = pathStr.split(/(s+)/); 
  // we'll rebuild the string
  let newPath = '';
  for (let t of tokens) {
    // Check if it matches coordinate pairs
    let match = t.match(/^([MLZ])?([d.-]+),([d.-]+)?$/i);
    if (match && match[1] !== 'Z') {
      let cmd = match[1] || ''; // M or L
      let xVal = parseFloat(match[2]);
      let yVal = parseFloat(match[3]);
      let xS = (xVal + shiftX).toFixed(2);
      let yS = (yVal + shiftY).toFixed(2);
      newPath += `${cmd}${xS},${yS}`;
    } else {
      // Possibly " Z" or whitespace 
      newPath += t;
    }
  }
  return newPath;
}

/**
 * Isometric transform function
 * x, y in "grid" space, z is block height
 */
function iso3(x, y, z) {
  let angle = PI/4;
  let scale = sqrt(2)/2;
  let cellSizeZ = 8; // vertical exaggeration
  let isoX = (x - y)*scale;
  let isoY = (x + y)*scale - z*cellSizeZ;
  return { x: isoX, y: isoY };
}

/**
 * Draw shapes to canvas
 */
function drawShapes() {
  background(255);
  strokeWeight(strokeWeightValue);
  noFill();

  // For each color in use, draw its faces
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach(cIdx => {
    applyStrokeWithOpacity(colors[cIdx].hex);
    faceData[cIdx].forEach(pathStr => {
      beginShape();
      decodeAndDrawPath(pathStr);
      endShape(CLOSE);
    });
  });

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

/**
 * Helper to decode a path string and draw it with p5 vertex commands
 */
function decodeAndDrawPath(pathStr){
  // e.g. "M100,200 L120,210 L130,220 Z"
  // We'll parse it step-by-step
  let moves = pathStr.split(/(?=[MLZ])/);
  for (let m of moves) {
    let parts = m.trim().split(/[ ,]/);
    let cmd = parts[0].charAt(0); // 'M', 'L', or 'Z'
    if (cmd==='Z') {
      // we will close in endShape(CLOSE)
      continue;
    }
    let coords = parts[0].substring(1); // e.g. "100.00,200.00" if 'M100.00,200.00'
    let x = parseFloat(coords.split(',')[0]);
    let y = parseFloat(coords.split(',')[1]);
    if (cmd==='M') vertex(x,y);
    if (cmd==='L') vertex(x,y);

    // If there are more coordinate pairs in the same command, parse them too
    if (parts.length>1) {
      for (let i=1; i<parts.length; i+=2) {
        let xx = parseFloat(parts[i]);
        let yy = parseFloat(parts[i+1]);
        if (!isNaN(xx) && !isNaN(yy)) {
          vertex(xx,yy);
        }
      }
    }
  }
}

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

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

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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);
  });
}

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

/**
 * Reset & regenerate
 */
function resetCanvas(){
  usedColors.clear();
  faceData = {};
  Object.keys(colors).forEach(idx => {faceData[idx] = [];});
  heightGrid = [];
  generateHeights();
  buildFaces();
  drawShapes();
}

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

  // Individual colors
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach((cIndex)=>{
    let colorSVG = generateSVG(cIndex);
    let name = colors[cIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${cIndex}-${name}-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){
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIndex, idx)=>{
      svgContent += addSegmentsSVG(cIndex, idx+1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }
  svgContent += `</svg>`;
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum){
  let svg = '';
  let color = colors[colorIndex];
  let strokeW = 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`;

  // combine all the faceData[colorIndex] into one big path or separate?
  // We'll do one combined path for efficiency:
  if (faceData[colorIndex] && faceData[colorIndex].length>0){
    let singlePath = faceData[colorIndex].join(' ');
    svg += `<path d="${singlePath}" stroke-width="${strokeW}" fill="none" />n`;
  }

  // palette bar
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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}"
       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},${offset} L${offset},${offset} L${offset},${5+offset}
           M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
           L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
           L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}"
        stroke-width="${strokeWidth}" fill="none" />n
  </g>n`;
}

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

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, block arrangement,
              structured geometry, discrete lattice, random heights

### Conceptual Framework

“Cuboid Overlook” portrays my identity as a constellation of three-dimensional
blocks, each symbolizing a distinct aspect of self. By arranging these cuboids on
an isometric grid, the artwork highlights how individual facets of identity share
a structural foundation yet express varying “heights” of prominence. Each block
displays its top and visible side faces, while any faces obscured by a taller
neighbor are omitted—ensuring that no interior edges overlap or repeat. This
neighbor‐aware rendering preserves clarity and resonates with the idea that
certain dimensions of self remain hidden by adjacent influences. Through a random
assortment of heights and colors, “Cuboid Overlook” reflects the interplay between
structured logic and the unpredictable nature of subjective experience.

### Technical Approach

1. **Isometric Coordinate Transformation**: A custom function projects each (x, y, z)
   point onto the 2D canvas with a 45° isometric rotation and exaggerated vertical scale.
2. **Neighbor Check**: For each cuboid, the top face is drawn if its height is above zero,
   and the east/south faces are drawn only if the neighboring blocks in those directions
   are strictly shorter—preventing duplicate lines or hidden edges.
3. **Bounding‐Box Shift**: After computing the isometric coordinates, all points are shifted
   so the entire cluster of cuboids fits neatly within the canvas margins.
4. **Canvas and SVG Consistency**: To ensure the drawing appears exactly the same in both
   output formats, every line is recorded as path data (faceData), then decoded and drawn
   on the canvas. The same path data is also used to generate the SVG file.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 136 - 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 = '136';          // 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' }
};

// Opacity for both SVG & canvas strokes
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  rows: 6,
  cols: 6,
  cellSize: 30,
  maxHeight: 4
};

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

let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let faceData;        // path data for each color
let heightGrid = []; // store random block heights


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

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

  // Adjust for ~0.5mm stroke
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;

  // Choose random colors
  selectColors();

  // Initialize faceData
  faceData = {};
  Object.keys(colors).forEach(idx => { faceData[idx] = []; });

  // Generate random heights
  generateHeights();

  // Build top/east/south faces if visible
  buildFaces();

  // Draw to canvas
  drawShapes();
  noLoop();
}

/**
 * Choose random subset of available colors
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10)); 
  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);
}

/**
 * Generate random integer heights for each grid cell
 */
function generateHeights() {
  let { rows, cols, maxHeight } = generationRules;
  for (let r = 0; r < rows; r++) {
    let rowHeights = [];
    for (let c = 0; c < cols; c++) {
      rowHeights.push( floor(random(maxHeight + 1)) );
    }
    heightGrid.push(rowHeights);
  }
}

/**
 * Build top + neighbor-aware side faces
 */
function buildFaces() {
  let { rows, cols, cellSize } = generationRules;

  // Track min/max for bounding
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let z = heightGrid[r][c];
      let colorIdx = selectedColorIndices[r % selectedColorIndices.length] || 8; // fallback

      let x0 = c*cellSize;
      let y0 = r*cellSize;

      // "World" corners for top face
      let A = isoTransform(x0,         y0,         z);
      let B = isoTransform(x0+cellSize, y0,         z);
      let C = isoTransform(x0+cellSize, y0+cellSize, z);
      let D = isoTransform(x0,         y0+cellSize, z);

      // "Base" corners for side faces
      let A_ = isoTransform(x0,         y0,         0);
      let B_ = isoTransform(x0+cellSize, y0,         0);
      let C_ = isoTransform(x0+cellSize, y0+cellSize, 0);
      let D_ = isoTransform(x0,         y0+cellSize, 0);

      // Track extents
      [A,B,C,D,A_,B_,C_,D_].forEach(pt=>{
        minX = min(minX, pt.x); maxX = max(maxX, pt.x);
        minY = min(minY, pt.y); maxY = max(maxY, pt.y);
      });

      // Top face if z>0
      if (z>0) addQuadPath(colorIdx, [A,B,C,D]);

      // East neighbor => compare height at (r, c+1)
      let eastHt = (c+1 < cols)? heightGrid[r][c+1] : -1;
      if (z>0 && z > eastHt) {
        addQuadPath(colorIdx, [B,C,C_,B_]);
      }

      // South neighbor => compare height at (r+1, c)
      let southHt = (r+1 < rows)? heightGrid[r+1][c] : -1;
      if (z>0 && z > southHt) {
        addQuadPath(colorIdx, [C,D,D_,C_]);
      }
    }
  }

  // Shift everything so it fits within margins
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;
  Object.keys(faceData).forEach(cIdx => {
    faceData[cIdx] = faceData[cIdx].map(pStr => shiftPath(pStr, shiftX, shiftY));
  });
}

/**
 * Add a closed quadrilateral to faceData[colorIndex]
 */
function addQuadPath(colorIndex, corners) {
  usedColors.add(colorIndex);
  let pathStr = `M${corners[0].x.toFixed(2)},${corners[0].y.toFixed(2)}`;
  for (let i=1; i<corners.length; i++){
    pathStr += ` L${corners[i].x.toFixed(2)},${corners[i].y.toFixed(2)}`;
  }
  pathStr += ` Z`;
  faceData[colorIndex].push(pathStr);
}

/**
 * Shift coordinates in a path string
 */
function shiftPath(pathStr, shiftX, shiftY) {
  let tokens = pathStr.split(/(s+)/);
  let newPath = '';
  for (let t of tokens) {
    let match = t.match(/^([MLZ])?([d.-]+),([d.-]+)?$/i);
    if (match && match[1] !== 'Z') {
      let cmd = match[1] || '';
      let xVal = parseFloat(match[2]);
      let yVal = parseFloat(match[3]);
      let xS = (xVal + shiftX).toFixed(2);
      let yS = (yVal + shiftY).toFixed(2);
      newPath += `${cmd}${xS},${yS}`;
    } else {
      newPath += t;
    }
  }
  return newPath;
}

/**
 * Iso transform for 3D coords -> 2D
 */
function isoTransform(x, y, z) {
  const angle = PI/4;
  const scale = sqrt(2)/2;
  const cellSizeZ = 8; 
  let isoX = (x - y)*scale;
  let isoY = (x + y)*scale - z*cellSizeZ;
  return { x: isoX, y: isoY };
}

/**
 * Draw everything to canvas
 */
function drawShapes() {
  background(255);
  strokeWeight(strokeWeightValue);
  noFill();

  let colorOrder = Array.from(usedColors).sort((a,b)=>a-b);
  colorOrder.forEach(cIdx => {
    let colHex = colors[cIdx].hex;
    applyStrokeWithOpacity(colHex);

    faceData[cIdx].forEach(pathStr => {
      beginShape();
      decodeAndDrawPath(pathStr);
      endShape(CLOSE);
    });
  });

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Decode path data and draw on canvas
 */
function decodeAndDrawPath(pathStr) {
  let moves = pathStr.split(/(?=[MLZ])/);
  for (let m of moves) {
    let parts = m.trim().split(/[ ,]/);
    let cmd = parts[0].charAt(0); // 'M'|'L'|'Z'
    if (cmd === 'Z') continue; // we'll close in endShape(CLOSE)

    let coords = parts[0].substring(1); 
    let x = parseFloat(coords.split(',')[0]);
    let y = parseFloat(coords.split(',')[1]);
    if (cmd === 'M' || cmd === 'L') vertex(x, y);

    // in case more coords appear
    for (let i = 1; i < parts.length; i += 2) {
      let xx = parseFloat(parts[i]);
      let yy = parseFloat(parts[i+1]);
      if (!isNaN(xx) && !isNaN(yy)) {
        vertex(xx, yy);
      }
    }
  }
}

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

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

/**
 * Palette bars
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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((cIndex, i) => {
    let x = xStart + i*(segmentLength + gapSize);
    let colorValue = colors[cIndex].hex;
    applyStrokeWithOpacity(colorValue);
    line(x, yStart, x+segmentLength, yStart);
  });
}

/**
 * Key Controls
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

/**
 * Reset the artwork
 */
function resetCanvas() {
  usedColors.clear();
  faceData = {};
  Object.keys(colors).forEach(idx => { faceData[idx] = []; });
  heightGrid = [];
  
  generateHeights();
  buildFaces();
  drawShapes();
}

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

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

  // One per color
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach(cIndex => {
    let colorSVG = generateSVG(cIndex);
    let cName = colors[cIndex].name.toUpperCase();
    let fileName = `${dayNumber}-0${cIndex}-${cName}-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
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  svgContent += addMarkersSVG();
  
  if (activeColor === 0) {
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIndex, idx) => {
      svgContent += addSegmentsSVG(cIndex, idx+1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }
  svgContent += `</svg>`;
  return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let color = colors[colorIndex];
  
  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`;

  if (faceData[colorIndex] && faceData[colorIndex].length > 0) {
    let singlePath = faceData[colorIndex].join(' ');
    svg += `<path d="${singlePath}" stroke-width="${strokeWeightValue}"
     fill="none" />n`;
  }

  // Palette bar
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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}" fill="none"/>n`;
  }

  svg += '</g>n';
  return 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">n
    <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset}
             M${(width-5-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-offset).toFixed(2)}
             L${(width-offset).toFixed(2)},${(height-5-offset).toFixed(2)}"
          stroke-width="${strokeW}" 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 136
/*

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, block arrangement,
              structured geometry, discrete lattice, random heights

### Conceptual Framework

“Cuboid Overlook” portrays my identity as a constellation of three-dimensional
blocks, each symbolizing a distinct facet of self. Arranged on an isometric grid,
each cuboid displays its top face plus the visible east and south faces. Neighbor‐aware
logic ensures that if an adjacent block is as tall or taller, the shared side is omitted—
thus no edge is drawn twice. The resulting image—rendered with consistent strokes—
captures the interplay between underlying structure and the unpredictable nature of individual experience.

### Technical Approach

1. **Isometric Transformation**: Each (x, y, z) point is projected onto the 2D canvas with a 45° rotation and vertical exaggeration.
2. **Neighbor-Aware Rendering**: For every grid cell with a positive height, the top face is always drawn, while the east and south faces are drawn only if the neighboring block is shorter.
3. **Bounding-Box Shift**: After computing all faces, their bounding box is calculated and all points are shifted to fit neatly within the canvas margins.
4. **Unified Data Source**: The same vertex data is stored in an array and then used both to draw on the canvas and to generate the SVG export, ensuring complete consistency.

---
*/

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

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

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 = {
  rows: 6,
  cols: 6,
  cellSize: 30,
  maxHeight: 4
};

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

let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let faceData;       // Object mapping color index to an array of faces
let heightGrid = []; // 2D array of block heights

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

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

  // Set stroke weight ~0.5mm (~2 pixels)
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;

  selectColors();

  // Initialize faceData as an object of arrays
  faceData = {};
  Object.keys(colors).forEach(idx => { faceData[idx] = []; });

  generateHeights();
  buildFaces();

  drawShapes();
  noLoop();
}

/**
 * Choose a random subset of available colors.
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10));
  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);
}

/**
 * Generate random integer heights for each grid cell.
 */
function generateHeights() {
  let { rows, cols, maxHeight } = generationRules;
  for (let r = 0; r < rows; r++) {
    let rowHeights = [];
    for (let c = 0; c < cols; c++) {
      rowHeights.push(floor(random(maxHeight + 1)));
    }
    heightGrid.push(rowHeights);
  }
}

/**
 * Build the faces (top, east, south) for each block.
 */
function buildFaces() {
  let { rows, cols, cellSize } = generationRules;
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let z = heightGrid[r][c];
      let colorIdx = selectedColorIndices[r % selectedColorIndices.length] || 8;

      let x0 = c * cellSize;
      let y0 = r * cellSize;

      // Compute isometric coordinates for the top face
      let A = isoTransform(x0,         y0,         z);
      let B = isoTransform(x0 + cellSize, y0,         z);
      let C = isoTransform(x0 + cellSize, y0 + cellSize, z);
      let D = isoTransform(x0,         y0 + cellSize, z);

      // Base (for side faces)
      let A_ = isoTransform(x0,         y0,         0);
      let B_ = isoTransform(x0 + cellSize, y0,         0);
      let C_ = isoTransform(x0 + cellSize, y0 + cellSize, 0);
      let D_ = isoTransform(x0,         y0 + cellSize, 0);

      // Update bounding box with all eight points
      [A, B, C, D, A_, B_, C_, D_].forEach(pt => {
        minX = min(minX, pt.x);
        maxX = max(maxX, pt.x);
        minY = min(minY, pt.y);
        maxY = max(maxY, pt.y);
      });

      // Draw top face if height > 0
      if (z > 0) addQuadFace(colorIdx, [A, B, C, D]);

      // East face: if right neighbor is lower
      let eastHt = (c + 1 < cols) ? heightGrid[r][c + 1] : -1;
      if (z > 0 && z > eastHt) {
        addQuadFace(colorIdx, [B, C, C_, B_]);
      }

      // South face: if below neighbor is lower
      let southHt = (r + 1 < rows) ? heightGrid[r + 1][c] : -1;
      if (z > 0 && z > southHt) {
        addQuadFace(colorIdx, [C, D, D_, C_]);
      }
    }
  }

  // Shift all face vertices so the drawing fits within margins.
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;
  Object.keys(faceData).forEach(cIdx => {
    faceData[cIdx] = faceData[cIdx].map(face => shiftFace(face, shiftX, shiftY));
  });
}

/**
 * Add a quadrilateral face (an array of points) for a given color.
 */
function addQuadFace(colorIndex, corners) {
  usedColors.add(colorIndex);
  // Store a copy of the corners array (each corner is an object with x and y)
  faceData[colorIndex].push(corners);
}

/**
 * Shift each point in a face by (shiftX, shiftY).
 */
function shiftFace(face, shiftX, shiftY) {
  return face.map(pt => ({ x: pt.x + shiftX, y: pt.y + shiftY }));
}

/**
 * Isometric transformation: Projects (x, y, z) to 2D.
 */
function isoTransform(x, y, z) {
  const scale = sqrt(2) / 2;
  const cellSizeZ = 8; // vertical exaggeration
  let isoX = (x - y) * scale;
  let isoY = (x + y) * scale - z * cellSizeZ;
  return { x: isoX, y: isoY };
}

/**
 * Draw all faces onto the canvas.
 */
function drawShapes() {
  background(255);
  strokeWeight(strokeWeightValue);
  noFill();

  // For each color, draw each face.
  let colorOrder = Array.from(usedColors).sort((a, b) => a - b);
  colorOrder.forEach(cIdx => {
    applyStrokeWithOpacity(colors[cIdx].hex);
    faceData[cIdx].forEach(face => {
      beginShape();
      face.forEach(pt => vertex(pt.x, pt.y));
      endShape(CLOSE);
    });
  });

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Set stroke with the given color and global opacity.
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * Draw registration markers in the canvas 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 at the bottom of the canvas.
 */
function addColorPaletteBars() {
  let paletteLength = 300;
  let barHeight = 2;
  let gapSize = 7;
  let yStart = height - (1.25 * pixelsPerInch);

  let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
  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((cIdx, i) => {
    let x = xStart + i * (segmentLength + gapSize);
    applyStrokeWithOpacity(colors[cIdx].hex);
    line(x, yStart, x + segmentLength, yStart);
  });
}

/**
 * p5.js Key Press Handling: Space to export SVG, R to reset.
 */
function keyPressed() {
  if (key === ' ') {
    saveSVGs();
  } else if (key === 'r' || key === 'R') {
    resetCanvas();
  }
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
  usedColors.clear();
  faceData = {};
  Object.keys(colors).forEach(idx => { faceData[idx] = []; });
  heightGrid = [];
  generateHeights();
  buildFaces();
  drawShapes();
}

/**
 * =======================================
 * SVG Export Functions
 * =======================================
 */

/**
 * Save SVG files (combined and per-color).
 */
function saveSVGs() {
  const timestamp = Date.now();

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

  let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
  usedColorsOrdered.forEach(cIdx => {
    let colorSVG = generateSVG(cIdx);
    let cName = colors[cIdx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cIdx}-${cName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(colorSVG, fileName);
  });
}

/**
 * Generate SVG content.
 * If activeColor is 0, include all; otherwise only include the specified 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) {
    let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
    usedColorsOrdered.forEach((cIdx, idx) => {
      svgContent += addSegmentsSVG(cIdx, idx + 1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

/**
 * Convert each face's vertices into an SVG path.
 */
function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let color = colors[colorIndex];
  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`;

  if (faceData[colorIndex] && faceData[colorIndex].length > 0) {
    // Generate a combined path string from all faces for this color
    let allPaths = faceData[colorIndex].map(face => faceToSVG(face)).join(' ');
    svg += `<path d="${allPaths}" stroke-width="${strokeWeightValue}" fill="none" />n`;
  }

  // Add palette bar for this color
  let usedColorsOrdered = Array.from(usedColors).sort((a, b) => a - b);
  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}" fill="none"/>n`;
  }

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

/**
 * Convert an array of points (face) into an SVG path string.
 */
function faceToSVG(face) {
  if (face.length === 0) return '';
  let pathStr = `M${face[0].x.toFixed(2)},${face[0].y.toFixed(2)}`;
  for (let i = 1; i < face.length; i++) {
    pathStr += ` L${face[i].x.toFixed(2)},${face[i].y.toFixed(2)}`;
  }
  pathStr += " Z";
  return pathStr;
}

/**
 * Add registration markers to 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">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="${strokeW}" fill="none" />n
    </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 136
/*

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, block arrangement,
              structured geometry, discrete lattice, random heights

### Conceptual Framework

“Cuboid Overlook” envisions identity as a cluster of isometric cuboids, each symbolizing
an aspect of self. In this variation, back faces are trimmed by front faces so only
their unoccluded edges remain visible. This partial occlusion highlights how certain
facets of identity obscure or reveal others, depending on perspective. By layering
the blocks from back to front and subtracting already-drawn coverage, the resulting
composition captures the interplay of exposed and hidden elements, mirroring the
complexities of self‐perception.

### Technical Approach

1. **Block Sorting**: Each cuboid is assigned an index based on (row + col + height).
   Blocks with a larger sum are drawn first (behind), smaller sums last (in front).
2. **Incremental Coverage**: Maintain a global list of coverage polygons. For each face:
   - Compute the difference between the face polygon and the coverage polygons (so
     only the visible portion remains).
   - Draw that difference on the canvas.
   - Union that difference with the coverage polygons.
3. **Polygon Clipping**: A simplified Sutherland–Hodgman difference function is provided,
   suitable mainly for simple convex polygons. For complex shapes or edge cases, a robust
   geometry library is recommended.
4. **Canvas & SVG Consistency**: All final polygons are stored and used for both on‐screen
   drawing and SVG export, ensuring identical output.

---
*/

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

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

const colors = {
  1: { name: 'ORANGE', hex: '#ff6600' },
  2: { name: 'BROWN',  hex: '#993300' },
  3: { name: 'RED',    hex: '#f01e2c' },
  4: { name: 'ROSE',   hex: '#ff00bf' },
  5: { name: 'PURPLE', hex: '#bf00ff' },
  6: { name: 'GREEN',  hex: '#00cc99' },
  7: { name: 'BLUE',   hex: '#0040ff' },
  8: { name: 'BLACK',  hex: '#333333' },
  9: { name: 'SEPIA',  hex: '#856647' }
};

// For the pen, we keep strokeOpacity and a 0.5mm line ~2 px wide
const strokeOpacity = 0.8;
const strokeWidthPx = 2;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  rows: 6,
  cols: 6,
  cellSize: 30,
  maxHeight: 4
};

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

let selectedColorIndices = [];
let usedColors = new Set();

let heightGrid = [];   // store block heights
let faces = [];        // store face objects: { polygon: [...], colorIdx: X, order: N }
let coverage = [];     // array of polygons representing coverage so far

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

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

  // Adjust for stroke
  workAreaMarginPixels += strokeWidthPx / 2;

  selectColors();
  generateHeights();
  buildFaces();

  // Sort faces from "back" to "front" based on order
  // Larger (r + c + z) => draw earlier => behind
  faces.sort((a, b) => b.order - a.order);

  drawFinalScene();
  noLoop();
}

/**
 * Choose random color subset
 */
function selectColors() {
  let numColorsToUse = floor(random(1, 10));
  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);
}

/**
 * Generate random integer heights
 */
function generateHeights() {
  let { rows, cols, maxHeight } = generationRules;
  for (let r = 0; r < rows; r++) {
    let rowHeights = [];
    for (let c = 0; c < cols; c++) {
      rowHeights.push(floor(random(maxHeight + 1)));
    }
    heightGrid.push(rowHeights);
  }
}

/**
 * Build face polygons for each cell's top/east/south face if visible.
 */
function buildFaces() {
  let { rows, cols, cellSize } = generationRules;
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let z = heightGrid[r][c];
      if (z <= 0) continue;

      let colorIdx = selectedColorIndices[r % selectedColorIndices.length] || 8;
      usedColors.add(colorIdx);

      let x0 = c * cellSize;
      let y0 = r * cellSize;

      // isometric corners for top face
      let A = isoTransform(x0,         y0,         z);
      let B = isoTransform(x0+cellSize, y0,         z);
      let C = isoTransform(x0+cellSize, y0+cellSize, z);
      let D = isoTransform(x0,         y0+cellSize, z);

      // base corners for side faces
      let A_ = isoTransform(x0,         y0,         0);
      let B_ = isoTransform(x0+cellSize, y0,         0);
      let C_ = isoTransform(x0+cellSize, y0+cellSize, 0);
      let D_ = isoTransform(x0,         y0+cellSize, 0);

      [A,B,C,D,A_,B_,C_,D_].forEach(pt => {
        minX = min(minX, pt.x);
        maxX = max(maxX, pt.x);
        minY = min(minY, pt.y);
        maxY = max(maxY, pt.y);
      });

      // top face
      faces.push({
        polygon: [A, B, C, D],
        colorIdx,
        // sorting key
        order: r + c + z 
      });

      // east face if neighbor is shorter
      let eastHt = (c+1 < cols)? heightGrid[r][c+1] : -1;
      if (z > eastHt) {
        faces.push({
          polygon: [B, C, C_, B_],
          colorIdx,
          order: r + c + z 
        });
      }
      // south face if neighbor is shorter
      let southHt = (r+1 < rows)? heightGrid[r+1][c] : -1;
      if (z > southHt) {
        faces.push({
          polygon: [C, D, D_, C_],
          colorIdx,
          order: r + c + z 
        });
      }
    }
  }

  // Shift everything to fit in margins
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;
  faces.forEach(f => {
    f.polygon = f.polygon.map(pt => ({x: pt.x+shiftX, y: pt.y+shiftY}));
  });
}

/**
 * The final drawing pass, from back to front.
 * For each face:
 * 1) subtract coverage polygons from face
 * 2) draw the visible portion
 * 3) union that portion into coverage
 */
function drawFinalScene() {
  background(255);
  strokeWeight(strokeWidthPx);
  noFill();

  // We'll store the final (trimmed) faces for SVG export
  // each color index -> array of polygons
  trimmedFaces = {};
  Object.keys(colors).forEach(idx => { trimmedFaces[idx] = []; });

  coverage = []; // starts empty

  faces.forEach(face => {
    let colorHex = colors[face.colorIdx].hex;
    let visiblePolygons = [face.polygon];

    // Subtract coverage from the face polygon(s)
    coverage.forEach(covPoly => {
      // for each polygon in visiblePolygons, we do difference with covPoly
      let newSet = [];
      visiblePolygons.forEach(poly => {
        let diffRes = polygonDifference(poly, covPoly);
        // diffRes can be multiple polygons if there's partial overlap
        newSet = newSet.concat(diffRes);
      });
      visiblePolygons = newSet;
      if (visiblePolygons.length===0) return; 
    });

    // Now visiblePolygons is what's left after coverage
    // Draw them, union them into coverage
    if (visiblePolygons.length > 0) {
      applyStrokeWithOpacity(colorHex);
      visiblePolygons.forEach(poly => {
        // draw on canvas
        beginShape();
        poly.forEach(pt => vertex(pt.x, pt.y));
        endShape(CLOSE);

        // store for SVG
        trimmedFaces[face.colorIdx].push(poly);

        // union coverage (very naive approach: just push polygons in coverage array)
        // robust union requires advanced geometry. We'll skip that here for brevity.
        coverage.push(poly);
      });
    }
  });

  // Draw markers/palette
  drawMarkers();
  addColorPaletteBars();

  // For convenience in exporting:
  window._trimmedFacesForSVG = trimmedFaces;
}

/**
 * Basic isometric transform
 */
function isoTransform(x, y, z) {
  const scale = sqrt(2)/2;
  const cellSizeZ = 8;
  let isoX = (x - y)*scale;
  let isoY = (x + y)*scale - z*cellSizeZ;
  return {x: isoX, y: isoY};
}

/**
 * p5 utility: apply stroke color with global alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

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

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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((cIdx,i)=>{
    let x = xStart + i*(segmentLength + gapSize);
    applyStrokeWithOpacity(colors[cIdx].hex);
    line(x, yStart, x+segmentLength, yStart);
  });
}

/**
 * Key controls
 */
function keyPressed() {
  if (key===' ') {
    saveSVGs();
  } else if (key==='r' || key==='R') {
    resetCanvas();
  }
}

/**
 * Reset
 */
function resetCanvas() {
  usedColors.clear();
  faces = [];
  coverage = [];
  heightGrid = [];
  trimmedFaces = null;
  generateHeights();
  buildFaces();
  faces.sort((a,b)=>b.order - a.order);
  drawFinalScene();
}

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

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach(cIdx=>{
    let colorSVG = generateSVG(cIdx);
    let cName = colors[cIdx].name.toUpperCase();
    let fileName = `${dayNumber}-0${cIdx}-${cName}-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"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  svgContent += addMarkersSVG();

  // We'll read from the global trimmed faces
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  if (activeColor===0) {
    usedColorsOrdered.forEach((cIdx, idx)=>{
      svgContent += addSegmentsSVG(cIdx, idx+1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

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

  let myPolys = window._trimmedFacesForSVG[colorIndex] || [];
  if (myPolys.length>0) {
    // Combine into one big path
    let pathStr = myPolys.map(poly=>polygonToPath(poly)).join(' ');
    svg += `<path d="${pathStr}" stroke-width="${strokeWidthPx}" fill="none" />n`;
  }

  // Add palette bar
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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="${col.hex}"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${barHeight}" fill="none"/>n`;
  }

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

function polygonToPath(poly) {
  if (!poly.length) return '';
  let path = `M${poly[0].x.toFixed(2)},${poly[0].y.toFixed(2)}`;
  for (let i=1; i<poly.length; i++){
    path += ` L${poly[i].x.toFixed(2)},${poly[i].y.toFixed(2)}`;
  }
  path += ' Z';
  return path;
}

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">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="${strokeW}" 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);
}

/**
 * =======================================
 * Minimal Polygon Difference
 * =======================================
 * Sutherland–Hodgman approach: clip polygon A by polygon B,
 * returning A - B. This is an oversimplification:
 *   - Works best with convex polygons
 *   - Doesn’t handle all edge cases
 *   - No self‐intersection checks
 * For robust usage, rely on external libraries.
 */
function polygonDifference(polyA, polyB) {
  // We'll treat polyB as a clipping polygon
  // We'll invert it (like we're removing polyB from polyA)
  // A naive approach is to treat it as repeated clipping edges and keep outside.
  // This returns an array of polygons (some might be holes).
  // For brevity, here's a simplified approach that might suffice for small overlaps.

  // If there's no intersection, we either get [polyA] or [].
  if (!boundingBoxOverlap(polyA, polyB)) {
    // No bounding overlap => no chance of intersection
    return [polyA]; 
  }

  // We do repeated "clip out" edges for each edge of polyB
  // but in reality we want the difference, so we keep the points *outside* polyB.
  let outputPolygons = [polyA];
  for (let i=0; i<polyB.length; i++) {
    let p1 = polyB[i];
    let p2 = polyB[(i+1)%polyB.length];
    let newOutput = [];
    // for each polygon in outputPolygons, clip it
    outputPolygons.forEach(opoly=>{
      let clipped = clipPolygonOutside(opoly, p1, p2, polyB);
      if (clipped.length>0) newOutput = newOutput.concat(clipped);
    });
    outputPolygons = newOutput;
    if (outputPolygons.length===0) break;
  }
  return outputPolygons;
}

/**
 * Clip polygon 'poly' so we keep the region outside the line segment p1->p2
 * that forms an edge of the clipping polygon (polyB).
 * The "inside" or "outside" test is determined by the polygon orientation. 
 * For difference, we want points that are *outside* polyB.
 * This is a simplistic approach that might invert if polyB is clockwise vs. ccw.
 */
function clipPolygonOutside(poly, clipA, clipB, polyB) {
  let output = [];
  for (let i=0; i<poly.length; i++) {
    let curr = poly[i];
    let prev = poly[(i+poly.length-1)%poly.length];
    let currInside = !pointInHalfPlane(curr, clipA, clipB, polyB);
    let prevInside = !pointInHalfPlane(prev, clipA, clipB, polyB);

    if (prevInside && currInside) {
      // both outside => keep current
      output.push(curr);
    } else if (prevInside && !currInside) {
      // exiting
      let inter = lineIntersect(prev, curr, clipA, clipB);
      if (inter) output.push(inter);
    } else if (!prevInside && currInside) {
      // entering
      let inter = lineIntersect(prev, curr, clipA, clipB);
      if (inter) output.push(inter);
      output.push(curr);
    } 
    // else both inside => do nothing
  }
  return (output.length<3)? [] : output;
}

/**
 * Return true if point is in the "inside half-plane" or not.
 * For difference, we define "inside" as the side of clipA->clipB
 * that belongs to polyB. We'll guess polyB is CCW. If it's not,
 * the logic might invert. This is quite approximate.
 */
function pointInHalfPlane(pt, clipA, clipB, polyB) {
  // We'll use cross product sign to see if pt is to the left or right of edge
  // For difference, we consider "inside" as left side if polyB is CCW.
  // You might need to check polyB orientation to do it properly.
  let cross = (clipB.x - clipA.x)*(pt.y - clipA.y) - (clipB.y - clipA.y)*(pt.x - clipA.x);
  return cross <= 0; // if cross <= 0 => pt is on right or on line => inside if CCW
}

/**
 * Return intersection of line segments p1->p2 and p3->p4, if any
 */
function lineIntersect(a1, a2, b1, b2) {
  let denom = (b2.y - b1.y)*(a2.x - a1.x) - (b2.x - b1.x)*(a2.y - a1.y);
  if (abs(denom) < 1e-9) return null; // parallel or very close

  let ua = ((b2.x - b1.x)*(a1.y - b1.y) - (b2.y - b1.y)*(a1.x - b1.x)) / denom;
  if (ua<0 || ua>1) return null; 
  let ub = ((a2.x - a1.x)*(a1.y - b1.y) - (a2.y - a1.y)*(a1.x - b1.x)) / denom;
  if (ub<0 || ub>1) return null;

  return {
    x: a1.x + ua*(a2.x - a1.x),
    y: a1.y + ua*(a2.y - a1.y)
  };
}

/**
 * Quick bounding box check for polygons
 */
function boundingBoxOverlap(polyA, polyB) {
  let [minAx, minAy, maxAx, maxAy] = boundingBox(polyA);
  let [minBx, minBy, maxBx, maxBy] = boundingBox(polyB);
  return !(maxAx < minBx || maxBx < minAx || maxAy < minBy || maxBy < minAy);
}

function boundingBox(poly) {
  let minx=Infinity, miny=Infinity, maxx=-Infinity, maxy=-Infinity;
  poly.forEach(pt=>{
    minx=min(minx,pt.x); maxx=max(maxx,pt.x);
    miny=min(miny,pt.y); maxy=max(maxy,pt.y);
  });
  return [minx,miny,maxx,maxy];
}

// ... same initial setup code for Cuboid Overlook ...
// Add after sorting faces from back to front:

let coveragePolygons = []; // will store polygons in [ [ [x,y], [x,y], ... ] ] format

faces.forEach(face => {
  let facePoly = convertFaceToMartinezFormat(face.polygon); // array of [ [x, y], [x, y], ... ]
  // difference = facePoly - coverage
  // coveragePolygons is an array of polygons. We'll union them all for a single coverage shape or keep them separate.

  // For difference, we need to do: 
  //   let visiblePolys = facePoly;
  //   coveragePolygons.forEach(covPoly => {
  //     visiblePolys = martinez.diff(visiblePolys, covPoly);
  //   });
  // This might produce multiple polygons. We'll flatten them and draw each.

  let visible = facePoly;
  coveragePolygons.forEach(cov => {
    visible = martinez.diff(visible, cov);
    if (!visible || visible.length===0) return; // fully covered
  });

  if (visible && visible.length>0) {
    // visible is an array of polygons in martinez format
    // draw them
    visible.forEach(vPoly => {
      drawPolygon(vPoly, face.colorIdx);
      // store for SVG
      storePolygonForSVG(vPoly, face.colorIdx);
    });

    // Now union these visible polygons with coverage
    visible.forEach(vPoly => {
      coveragePolygons.push(vPoly); 
      // For a more correct approach, do coverage = union(coverage, vPoly)
      // coveragePolygons = coveragePolygons.map(c => martinez.union(c, vPoly));
      // But that means merging them properly.
    });
  }
});

// Day 136
/*

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, block arrangement,
              partial occlusion, structured geometry, discrete lattice, random heights

### Conceptual Framework

“Cuboid Overlook” envisions my identity as a constellation of isometric blocks, each
representing a distinct facet of self. In this version, line‐segment occlusion ensures
that only visible edges remain when nearer cuboids obscure those behind them. The
resulting composition highlights how certain dimensions of identity conceal others
depending on perspective—yet partial edges can still emerge, symbolizing the complex
interaction of the known and the hidden. Through this layered approach, “Cuboid Overlook”
evokes a notion of self that is at once structured, overlapping, and continuously redefined
by the relationships among its constituent facets.

### Technical Approach

1. **Isometric Coordinates**: Each cell `(r, c, z)` is converted into 2D points for its
   top face and potential side faces. We record only their outer edges (line segments).
2. **Sorting**: Cuboid faces are assigned an “order” = `(r + c + z)` so that those with
   larger sums appear behind those with smaller sums. We then iterate from largest sum
   (farthest) to smallest sum (nearest).
3. **Line‐Segment Occlusion**: For each face behind (`i`), we clip its line segments
   against the polygon of each face in front (`j > i`). This partial clipping means
   if only half an edge is behind a nearer shape, the other half remains.
4. **Canvas and SVG Consistency**: We store the final, clipped line segments and use them
   for both on‐screen rendering and SVG export.

---
*/

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

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

const colors = {
  1: { name: 'ORANGE', hex: '#ff6600' },
  2: { name: 'BROWN',  hex: '#993300' },
  3: { name: 'RED',    hex: '#f01e2c' },
  4: { name: 'ROSE',   hex: '#ff00bf' },
  5: { name: 'PURPLE', hex: '#bf00ff' },
  6: { name: 'GREEN',  hex: '#00cc99' },
  7: { name: 'BLUE',   hex: '#0040ff' },
  8: { name: 'BLACK',  hex: '#333333' },
  9: { name: 'SEPIA',  hex: '#856647' }
};

const strokeOpacity = 0.8;
const strokeWidthPx = 2;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  rows: 6,
  cols: 6,
  cellSize: 30,
  maxHeight: 4
};

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

let selectedColorIndices = [];
let usedColors = new Set();

// Each face => { colorIndex, polygon:[{x,y},...], lineSegments:[ [x1,y1,x2,y2],... ], order }
let faces = [];
let heightGrid = [];

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

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

  // Adjust margins for stroke
  workAreaMarginPixels += strokeWidthPx / 2;

  selectColors();
  generateHeights();
  buildFaces();

  // Sort faces from back to front (larger order => behind)
  faces.sort((a,b) => b.order - a.order);

  // Occlusion pass: each face behind gets clipped by each face in front
  for (let i = 0; i < faces.length; i++) {
    for (let j = i+1; j < faces.length; j++) {
      faces[i].lineSegments = clipSegmentsAgainstPolygon(faces[i].lineSegments, faces[j].polygon);
    }
  }

  drawScene();
  noLoop();
}

/**
 * Choose random subset of the 9 colors
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  let n = floor(random(2, 6)); // pick 2..5 colors
  selectedColorIndices = allIndices.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Generate random integer heights
 */
function generateHeights() {
  let { rows, cols, maxHeight } = generationRules;
  for (let r=0; r<rows; r++){
    let rowHeights = [];
    for (let c=0; c<cols; c++){
      rowHeights.push(floor(random(maxHeight+1)));
    }
    heightGrid.push(rowHeights);
  }
}

/**
 * Build faces, each with polygon + line segments
 */
function buildFaces() {
  let { rows, cols, cellSize } = generationRules;
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;

  for (let r=0; r<rows; r++){
    for (let c=0; c<cols; c++){
      let z = heightGrid[r][c];
      if (z<=0) continue;

      let colorIdx = selectedColorIndices[(r + c) % selectedColorIndices.length] || 8;
      usedColors.add(colorIdx);

      // isometric corners for top face
      let A = isoTransform(c*cellSize,         r*cellSize,         z);
      let B = isoTransform(c*cellSize+cellSize, r*cellSize,         z);
      let C = isoTransform(c*cellSize+cellSize, r*cellSize+cellSize, z);
      let D = isoTransform(c*cellSize,         r*cellSize+cellSize, z);

      // base corners for side faces
      let A_ = isoTransform(c*cellSize,         r*cellSize,         0);
      let B_ = isoTransform(c*cellSize+cellSize, r*cellSize,         0);
      let C_ = isoTransform(c*cellSize+cellSize, r*cellSize+cellSize, 0);
      let D_ = isoTransform(c*cellSize,         r*cellSize+cellSize, 0);

      [A,B,C,D,A_,B_,C_,D_].forEach(pt=>{
        minX = min(minX, pt.x); maxX = max(maxX, pt.x);
        minY = min(minY, pt.y); maxY = max(maxY, pt.y);
      });

      // top face
      faces.push( buildFace(colorIdx, [A,B,C,D], r+c+z) );

      // east neighbor check
      let eastHt = (c+1<cols)? heightGrid[r][c+1] : -1;
      if (z>eastHt) {
        faces.push( buildFace(colorIdx, [B,C,C_,B_], r+c+z) );
      }

      // south neighbor check
      let southHt = (r+1<rows)? heightGrid[r+1][c] : -1;
      if (z>southHt) {
        faces.push( buildFace(colorIdx, [C,D,D_,C_], r+c+z) );
      }
    }
  }

  // Shift everything to fit margins
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;
  faces.forEach(f => {
    f.polygon.forEach(pt => {
      pt.x += shiftX;
      pt.y += shiftY;
    });
    f.lineSegments.forEach(seg => {
      seg[0] += shiftX;
      seg[1] += shiftY;
      seg[2] += shiftX;
      seg[3] += shiftY;
    });
  });
}

/**
 * Build a face object from polygon corners
 */
function buildFace(colorIndex, corners, orderVal) {
  // polygon is array of {x, y}, plus the last corner repeated to close
  let poly = corners.map(pt => ({x:pt.x, y:pt.y}));
  // ensure closed
  if (poly[0].x!==poly[poly.length-1].x || poly[0].y!==poly[poly.length-1].y) {
    poly.push({x: poly[0].x, y: poly[0].y});
  }

  // line segments
  let segments = [];
  for (let i=0; i<poly.length-1; i++){
    segments.push([ poly[i].x, poly[i].y, poly[i+1].x, poly[i+1].y ]);
  }

  return {
    colorIndex,
    polygon: poly,
    lineSegments: segments,
    order: orderVal
  };
}

/**
 * Isometric transform
 */
function isoTransform(x, y, z) {
  let scale = sqrt(2)/2;
  let cellSizeZ = 8;
  let isoX = (x - y)*scale;
  let isoY = (x + y)*scale - z*cellSizeZ;
  return { x: isoX, y: isoY };
}

/**
 * Draw final scene
 */
function drawScene() {
  background(255);
  strokeWeight(strokeWidthPx);
  noFill();

  // Draw in ascending order => front shapes on top
  // But the line segments are already clipped by those in front
  // so the order doesn't matter for final rendering. We'll just do front-to-back:
  faces.sort((a,b)=>a.order - b.order);

  // Draw
  faces.forEach(face => {
    if (face.lineSegments.length===0) return;
    let colHex = colors[face.colorIndex].hex;
    applyStrokeWithOpacity(colHex);
    face.lineSegments.forEach(seg => {
      line(seg[0], seg[1], seg[2], seg[3]);
    });
  });

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

/**
 * p5 stroke with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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((cIdx,i)=>{
    let x = xStart + i*(segmentLength + gapSize);
    applyStrokeWithOpacity(colors[cIdx].hex);
    line(x, yStart, x+segmentLength, yStart);
  });
}

/**
 * Key controls
 */
function keyPressed() {
  if (key===' ') {
    saveSVGs();
  } else if (key==='r' || key==='R') {
    resetCanvas();
  }
}

/**
 * Reset
 */
function resetCanvas() {
  usedColors.clear();
  faces = [];
  heightGrid = [];
  background(255);
  setup();
}

/**
 * =======================================
 * Line-Segment Occlusion
 * =======================================
 * For each line segment in 'lineSegments', we remove the portion
 * that lies inside 'polygon'. We do this using the same approach
 * as in Day 121: subdivide each segment at intersections, then
 * keep only the sub-segments whose midpoints lie outside 'polygon'.
 */

function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  cutParams.push({ t: 0, x: x1, y: y1 });
  cutParams.push({ t: 1, x: x2, y: y2 });

  // find intersections with polygon edges
  for (let i=0; i<polygon.length-1; i++){
    let pA = polygon[i];
    let pB = polygon[i+1];
    let inter = lineIntersect(x1, y1, x2, y2, pA.x, pA.y, pB.x, pB.y);
    if (inter && inter.t1>=0 && inter.t1<=1) {
      cutParams.push({ t: inter.t1, x: inter.x, y: inter.y });
    }
  }

  // sort by t
  cutParams.sort((a,b)=>a.t - b.t);
  let outSegments = [];
  for (let i=0; i<cutParams.length-1; i++){
    let tA = cutParams[i].t;
    let tB = cutParams[i+1].t;
    if (tB - tA < 1e-9) continue;
    let mx = x1 + (x2 - x1)*((tA+tB)/2);
    let my = y1 + (y2 - y1)*((tA+tB)/2);
    // if midpoint is outside polygon => keep segment
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i+1].x, cutParams[i+1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2-ax1)*(by2-by1) - (ay2-ay1)*(bx2-bx1);
  if (abs(denom) < 1e-12) return null;
  let ua = ((bx2-bx1)*(ay1-by1) - (by2-by1)*(ax1-bx1)) / denom;
  let ub = ((ax2-ax1)*(ay1-by1) - (ay2-ay1)*(ax1-bx1)) / denom;
  if (ua<0 || ua>1 || ub<0 || ub>1) return null;
  return {
    x: ax1 + ua*(ax2-ax1),
    y: ay1 + ua*(ay2-ay1),
    t1: ua,
    t2: ub
  };
}

function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i=0; i<polygon.length-1; i++){
    let xi=polygon[i].x,   yi=polygon[i].y;
    let xj=polygon[i+1].x, yj=polygon[i+1].y;
    let intersect = ((yi>py)!==(yj>py)) && 
      (px < (xj - xi)*(py - yi)/(yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

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

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

  // Per color
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach(cIdx=>{
    let svgData = generateSVG(cIdx);
    let cName = cIdx in colors ? colors[cIdx].name.toUpperCase() : 'UNKNOWN';
    let fileName = `${dayNumber}-0${cIdx}-${cName}-PORTRAIT-${timestamp}.svg`;
    saveSVGFile(svgData, fileName);
  });
}

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

  svgContent += addMarkersSVG();

  if (activeColor===0) {
    // All used colors
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIdx, layerNum) => {
      svgContent += addSegmentsSVG(cIdx, layerNum+1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let col = colors[colorIndex] || { hex:'#000000', name:'UNKNOWN' };
  svg += `<g
    inkscape:groupmode="layer"
    id="layer${layerNum}"
    inkscape:label="${colorIndex}-${col.name.toLowerCase()}"
    style="display:inline"
    stroke="${col.hex}"
    stroke-opacity="${strokeOpacity}"
    inkscape:highlight-color="${col.hex}">n`;

  // gather line segments from faces of this color
  let pathStr = '';
  faces.forEach(face=>{
    if (face.colorIndex===colorIndex && face.lineSegments.length>0) {
      face.lineSegments.forEach(seg=>{
        pathStr += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
      });
    }
  });

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

  // color bar
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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="${col.hex}"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${barHeight}"
       fill="none"/>n`;
  }

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

function addMarkersSVG(){
  const sw = 1;
  const offset = sw/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="${sw}" 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 136
/*

=======================================
  Day 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric projection, cuboid outlines, partial occlusion, snaking layout,
              structured geometry, discrete lattice, random heights

### Conceptual Framework

“Cuboid Overlook” envisions my identity as a dynamic cluster of isometric blocks, 
each representing a distinct facet of self. This version introduces a “snaking” 
layout, where the blocks spread out in a winding formation rather than occupying 
a strict rectangular grid. By employing line‐segment occlusion, only the visible 
edges of any block remain if nearer blocks obscure portions behind them. 
This layered visibility captures how certain aspects of identity appear more 
prominent, while others are partially hidden. The winding arrangement suggests 
a sense of exploration—an evolving path of self, revealing how identity is not 
only multi‐layered but also actively expanding into new directions.

### Technical Approach

1. **Snaking Cell Selection**  
   - Instead of filling every cell in a simple `rows x cols` grid, we perform a 
     random walk from a central cell, creating a winding chain of occupied cells. 
     Around each cell in that chain, there's also a chance to branch outward, 
     forming a cluster with a snakelike extension.
2. **Isometric Coordinates**  
   - For each occupied cell `(r, c)`, we assign a random integer height `z` and 
     convert `(r, c, z)` to 2D points for its top/side faces.
3. **Sorting and Partial Occlusion**  
   - As before, each face has `order = r + c + z`. We sort from largest to smallest 
     (i.e., from back to front) and clip each face’s line segments against the 
     polygons of nearer faces. This ensures only unobscured portions of edges remain.
4. **Canvas and SVG Consistency**  
   - The final clipped line segments are drawn identically on canvas and in the 
     exported SVG, preserving the overall aesthetic.

---
*/

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

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

const colors = {
  1: { name: 'ORANGE', hex: '#ff6600' },
  2: { name: 'BROWN',  hex: '#993300' },
  3: { name: 'RED',    hex: '#f01e2c' },
  4: { name: 'ROSE',   hex: '#ff00bf' },
  5: { name: 'PURPLE', hex: '#bf00ff' },
  6: { name: 'GREEN',  hex: '#00cc99' },
  7: { name: 'BLUE',   hex: '#0040ff' },
  8: { name: 'BLACK',  hex: '#333333' },
  9: { name: 'SEPIA',  hex: '#856647' }
};

const strokeOpacity = 0.8;
const strokeWidthPx = 2;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  gridRows: 12,
  gridCols: 12,
  cellSize: 30,
  maxHeight: 4,
  snakeLengthMin: 8,   // how many steps the main “snake” will have
  snakeLengthMax: 16,
  sideBranchChance: 0.25, // chance to add a neighbor off the main path
  sideBranchCountMax: 2   // up to 2 side expansions from each cell
};

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

let selectedColorIndices = [];
let usedColors = new Set();

// We'll store an array of occupied cells: {r, c, z, colorIndex}
let occupiedCells = [];

// Each face => { colorIndex, polygon:[{x,y},...], lineSegments:[[x1,y1,x2,y2],...], order }
let faces = [];

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

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

  // Adjust margins for stroke
  workAreaMarginPixels += strokeWidthPx / 2;

  selectColors();
  generateSnakingCells();   // pick which cells are occupied
  buildFacesFromCells();    // convert them into isometric faces
  applyOcclusion();         // partial occlusion pipeline
  drawScene();              // final drawing
  noLoop();
}

/**
 * Choose random subset of the 9 colors
 */
function selectColors() {
  let allIndices = Object.keys(colors).map(k => parseInt(k));
  shuffle(allIndices, true);
  let n = floor(random(2, 6)); // pick 2..5 colors
  selectedColorIndices = allIndices.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Step 1: Generate a “snaking” cluster of occupied cells
 */
function generateSnakingCells() {
  let { gridRows, gridCols, snakeLengthMin, snakeLengthMax, sideBranchChance, sideBranchCountMax, maxHeight } = generationRules;

  // pick a random center
  let centerR = floor(random(gridRows));
  let centerC = floor(random(gridCols));

  let visited = new Set();
  function cellKey(r, c){ return r+'_'+c; }

  // define directions
  let directions = [
    {dr:1, dc:0}, {dr:-1, dc:0}, {dr:0, dc:1}, {dr:0, dc:-1}
  ];

  // main snake path
  let length = floor(random(snakeLengthMin, snakeLengthMax+1));
  let r = centerR, c = centerC;
  visited.add(cellKey(r,c));

  for (let i=0; i<length; i++){
    // pick a direction that keeps us in bounds if possible
    let tries = shuffle([...directions]);
    let moved = false;
    for (let d of tries) {
      let rr = r + d.dr;
      let cc = c + d.dc;
      if (rr>=0 && rr<gridRows && cc>=0 && cc<gridCols) {
        r = rr; c = cc;
        visited.add(cellKey(r,c));
        moved = true;
        break;
      }
    }
    if (!moved) {
      // we got stuck? break early
      break;
    }
  }

  // side branches
  let visitedArr = Array.from(visited);
  for (let vCell of visitedArr) {
    if (random()<sideBranchChance) {
      // possibly add 1..sideBranchCountMax neighbors
      let branchCount = floor(random(1, sideBranchCountMax+1));
      let baseR = parseInt(vCell.split('_')[0]);
      let baseC = parseInt(vCell.split('_')[1]);
      let tries = shuffle([...directions]);
      for (let t=0; t<tries.length && branchCount>0; t++){
        let rr = baseR + tries[t].dr;
        let cc = baseC + tries[t].dc;
        if (rr>=0 && rr<gridRows && cc>=0 && cc<gridCols) {
          visited.add(cellKey(rr,cc));
          branchCount--;
        }
      }
    }
  }

  // build final array of (r,c,z)
  occupiedCells = [];
  let visitedList = Array.from(visited);
  for (let k of visitedList) {
    let rr = parseInt(k.split('_')[0]);
    let cc = parseInt(k.split('_')[1]);
    let z = floor(random(maxHeight+1));
    if (z>0) {
      // pick color from selectedColorIndices
      let colorIdx = selectedColorIndices[(rr + cc) % selectedColorIndices.length];
      usedColors.add(colorIdx);
      occupiedCells.push({ r: rr, c: cc, z, colorIndex: colorIdx });
    }
  }
}

/**
 * Step 2: Build faces from the occupied cells
 */
function buildFacesFromCells() {
  let { cellSize } = generationRules;

  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;

  // For each cell => top face + east/south if neighbor is shorter
  for (let cell of occupiedCells) {
    let { r, c, z, colorIndex } = cell;

    // isometric corners for top face
    let A = isoTransform(c*cellSize,         r*cellSize,         z);
    let B = isoTransform((c+1)*cellSize,     r*cellSize,         z);
    let C = isoTransform((c+1)*cellSize,     (r+1)*cellSize,     z);
    let D = isoTransform(c*cellSize,         (r+1)*cellSize,     z);

    // base corners for side faces
    let A_ = isoTransform(c*cellSize,         r*cellSize,         0);
    let B_ = isoTransform((c+1)*cellSize,     r*cellSize,         0);
    let C_ = isoTransform((c+1)*cellSize,     (r+1)*cellSize,     0);
    let D_ = isoTransform(c*cellSize,         (r+1)*cellSize,     0);

    [A,B,C,D,A_,B_,C_,D_].forEach(pt=>{
      minX = min(minX, pt.x); maxX = max(maxX, pt.x);
      minY = min(minY, pt.y); maxY = max(maxY, pt.y);
    });

    // top face
    faces.push( buildFace(colorIndex, [A,B,C,D], r+c+z) );

    // find neighbor heights
    let eastHt = occupiedCells.find(o => o.r===r && o.c===c+1)?.z || 0;
    let southHt = occupiedCells.find(o => o.r===r+1 && o.c===c)?.z || 0;

    // if we want to ensure the neighbor is actually "occupied" or 0
    // we do z > eastHt => add east face
    if (z > eastHt) {
      faces.push( buildFace(colorIndex, [B,C,C_,B_], r+c+z) );
    }
    if (z > southHt) {
      faces.push( buildFace(colorIndex, [C,D,D_,C_], r+c+z) );
    }
  }

  // shift everything so minX, minY => margin
  let shiftX = workAreaMarginPixels - minX;
  let shiftY = workAreaMarginPixels - minY;
  faces.forEach(f => {
    f.polygon.forEach(pt=>{
      pt.x += shiftX;
      pt.y += shiftY;
    });
    f.lineSegments.forEach(seg=>{
      seg[0]+=shiftX; seg[1]+=shiftY;
      seg[2]+=shiftX; seg[3]+=shiftY;
    });
  });
}

/**
 * Build a face object
 */
function buildFace(colorIndex, corners, orderVal) {
  let poly = corners.map(pt=>({x:pt.x, y:pt.y}));
  if (poly[0].x!==poly[poly.length-1]?.x || poly[0].y!==poly[poly.length-1]?.y) {
    // ensure closed
    poly.push({x:poly[0].x, y:poly[0].y});
  }
  let segments = [];
  for (let i=0; i<poly.length-1; i++){
    segments.push([ poly[i].x, poly[i].y, poly[i+1].x, poly[i+1].y ]);
  }
  return {
    colorIndex,
    polygon: poly,
    lineSegments: segments,
    order: orderVal
  };
}

/**
 * Isometric transform
 */
function isoTransform(x, y, z) {
  let scale = sqrt(2)/2;
  let cellSizeZ = 8;
  let isoX = (x - y)*scale;
  let isoY = (x + y)*scale - z*cellSizeZ;
  return { x: isoX, y: isoY };
}

/**
 * Step 3: Occlusion
 * Sort faces from back to front, clip each face’s segments by all nearer faces.
 */
function applyOcclusion() {
  // largest => behind
  faces.sort((a,b)=>b.order - a.order);

  for (let i=0; i<faces.length; i++){
    for (let j=i+1; j<faces.length; j++){
      faces[i].lineSegments = clipSegmentsAgainstPolygon(faces[i].lineSegments, faces[j].polygon);
    }
  }
}

/**
 * Step 4: Draw final scene
 */
function drawScene() {
  background(255);
  strokeWeight(strokeWidthPx);
  noFill();

  // front to back or back to front doesn't matter now since segments are clipped
  // but let's do ascending (front last)
  faces.sort((a,b)=>a.order - b.order);

  faces.forEach(f => {
    let cHex = colors[f.colorIndex].hex;
    applyStrokeWithOpacity(cHex);
    f.lineSegments.forEach(seg=>{
      line(seg[0], seg[1], seg[2], seg[3]);
    });
  });

  drawMarkers();
  addColorPaletteBars();
}

/**
 * p5 stroke with alpha
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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((cIdx,i)=>{
    let x = xStart + i*(segmentLength + gapSize);
    applyStrokeWithOpacity(colors[cIdx].hex);
    line(x, yStart, x+segmentLength, yStart);
  });
}

/**
 * Key controls
 */
function keyPressed() {
  if (key===' ') {
    saveSVGs();
  } else if (key==='r' || key==='R') {
    resetCanvas();
  }
}

/**
 * Reset
 */
function resetCanvas() {
  usedColors.clear();
  faces = [];
  occupiedCells = [];
  heightGrid = [];
  background(255);
  setup();
}

/**
 * =======================================
 * Line-Segment Occlusion
 * (Same approach as before)
 * =======================================
 */
function clipSegmentsAgainstPolygon(lineSegments, polygon) {
  let result = [];
  for (let seg of lineSegments) {
    let subs = clipLineSegment(seg, polygon);
    result.push(...subs);
  }
  return result;
}

function clipLineSegment(seg, polygon) {
  let [x1, y1, x2, y2] = seg;
  let cutParams = [];
  cutParams.push({ t:0, x:x1, y:y1 });
  cutParams.push({ t:1, x:x2, y:y2 });

  // intersections
  for (let i=0; i<polygon.length-1; i++){
    let pA = polygon[i], pB = polygon[i+1];
    let inter = lineIntersect(x1,y1,x2,y2, pA.x,pA.y, pB.x,pB.y);
    if (inter && inter.t1>=0 && inter.t1<=1) {
      cutParams.push({ t:inter.t1, x:inter.x, y:inter.y });
    }
  }

  cutParams.sort((a,b)=>a.t - b.t);
  let outSegments = [];
  for (let i=0; i<cutParams.length-1; i++){
    let tA = cutParams[i].t, tB = cutParams[i+1].t;
    if (tB - tA < 1e-9) continue;
    let mx = x1 + (x2 - x1)*((tA+tB)/2);
    let my = y1 + (y2 - y1)*((tA+tB)/2);
    // keep if midpoint is outside polygon
    if (!pointInPolygon(mx, my, polygon)) {
      outSegments.push([
        cutParams[i].x, cutParams[i].y,
        cutParams[i+1].x, cutParams[i+1].y
      ]);
    }
  }
  return outSegments;
}

function lineIntersect(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2) {
  let denom = (ax2-ax1)*(by2-by1) - (ay2-ay1)*(bx2-bx1);
  if (abs(denom)<1e-12) return null;
  let ua = ((bx2-bx1)*(ay1-by1) - (by2-by1)*(ax1-bx1)) / denom;
  let ub = ((ax2-ax1)*(ay1-by1) - (ay2-ay1)*(ax1-bx1)) / denom;
  if (ua<0||ua>1||ub<0||ub>1) return null;
  return {
    x: ax1 + ua*(ax2-ax1),
    y: ay1 + ua*(ay2-ay1),
    t1: ua,
    t2: ub
  };
}

function pointInPolygon(px, py, polygon) {
  let inside = false;
  for (let i=0; i<polygon.length-1; i++){
    let xi=polygon[i].x,   yi=polygon[i].y;
    let xj=polygon[i+1].x, yj=polygon[i+1].y;
    let intersect = ((yi>py)!==(yj>py)) && 
      (px < (xj - xi)*(py - yi)/(yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

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

  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  usedColorsOrdered.forEach(cIdx=>{
    let colorSVG = generateSVG(cIdx);
    let cName = cIdx in colors ? colors[cIdx].name.toUpperCase() : 'UNKNOWN';
    let fileName = `${dayNumber}-0${cIdx}-${cName}-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"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  svgContent += addMarkersSVG();

  if (activeColor===0) {
    let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
    usedColorsOrdered.forEach((cIdx,layerNum)=>{
      svgContent += addSegmentsSVG(cIdx, layerNum+1);
    });
  } else {
    svgContent += addSegmentsSVG(activeColor, 1);
  }

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

function addSegmentsSVG(colorIndex, layerNum) {
  let svg = '';
  let col = colors[colorIndex] || {hex:'#000000', name:'UNKNOWN'};
  svg += `<g
    inkscape:groupmode="layer"
    id="layer${layerNum}"
    inkscape:label="${colorIndex}-${col.name.toLowerCase()}"
    style="display:inline"
    stroke="${col.hex}"
    stroke-opacity="${strokeOpacity}"
    inkscape:highlight-color="${col.hex}">n`;

  // gather line segments from faces of this color
  let pathStr = '';
  faces.forEach(face=>{
    if (face.colorIndex===colorIndex && face.lineSegments.length>0) {
      face.lineSegments.forEach(seg=>{
        pathStr += `M${seg[0].toFixed(2)},${seg[1].toFixed(2)}L${seg[2].toFixed(2)},${seg[3].toFixed(2)} `;
      });
    }
  });

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

  // color bar
  let usedColorsOrdered = Array.from(usedColors).sort((a,b)=>a-b);
  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="${col.hex}"
       stroke-opacity="${strokeOpacity}"
       stroke-width="${barHeight}"
       fill="none"/>n`;
  }

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

function addMarkersSVG(){
  const sw = 1;
  const offset = sw/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="${sw}" 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 136 Self-Portrait (Cuboid Overlook)
=======================================

### Title: *Cuboid Overlook*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              isometric, cuboid outlines, partial occlusion, snaking layout,
              dynamic cluster, identity

### Conceptual Framework

“Cuboid Overlook” depicts my identity as a cohesive yet open‐ended constellation
of isometric blocks, each symbolizing a distinct facet of self. The blocks form
a winding lattice that maintains a sense of internal coherence, suggesting the
subtle balance between structured thinking and the fluid evolution of personal
experience. Where multiple cuboids intersect, nearer forms conceal or partially
occlude those behind them, leaving outlines that weave into a layered tapestry.
This interplay of expansion and partial visibility evokes a self that is
continuously branching into new territories while remaining interconnected at
its core—an ever‐evolving network of possibility and growth.

### Technical Approach

- **Snaking Cell Selection**: A random walk and branching mechanism select which cells
  in a notional grid will be occupied by cuboids, producing an extended, meandering
  arrangement.
- **Isometric Projection**: Each cell’s height and position are transformed into 2D
  coordinates, generating faces for the cuboids.
- **Partial Occlusion**: Cuboid faces are processed from back to front, clipping line
  segments wherever they intersect with nearer polygons. Only visible edges remain,
  ensuring an authentic sense of depth.
- **Unified Data for Canvas & SVG**: The final clipped segments are drawn on the canvas
  and exported to SVG, maintaining identical geometry in both formats.

---

/**
 * I identify most strongly with the arrangement that forms a near-square cluster
 * with a balanced spread of cuboids. This configuration resonates with the idea
 * of a multifaceted yet integrated self, capturing a sense of internal harmony
 * while still branching outward into new frontiers.
 */