// Day 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, adjacency graph,
              ephemeral lines, emergent pattern, connectivity

### Conceptual Framework

*Poisson Disk Constellation* envisions identity as a starry network of carefully placed circles,
each one signifying a distinct facet of self. Spaced using Poisson disk sampling, these “stars”
occupy a plane without overlapping. Subtle line segments connect circles whose centers are
sufficiently close—yet only when those lines do not intersect any other circle. This constraint
symbolizes how meaningful connections emerge only when unobstructed by unrelated influences.
The resulting constellation captures both individuality and synergy, weaving a delicate web
of relationships that remains open and spacious.

### Technical Approach

To create *Poisson Disk Constellation*, I first perform Poisson disk sampling within a designated
rectangular region (the “work area” minus margins), generating circles that do not overlap.
Each circle is assigned a random color from a fixed palette. Next, I examine every pair of circles:
if their centers lie within a threshold distance, I attempt to draw a line from one center to the other.
However, I check each line against all circles to ensure it does not pass inside any unrelated node.
If free of intersection, the line is added to the constellation in a chosen color. All shapes and lines
are recorded in path data to maintain a consistent SVG export, and no explicit fills or gradients are used.
By balancing strict spacing with selective connectivity, the piece highlights both isolation and alignment,
reflecting an identity anchored in discrete facets yet open to genuine connections.

---
*/

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

// The maximum number of sampling attempts per step for the Poisson disk sampling
let maxSamplingTries = 30;

// The radius that determines how close circles can be
// We will pick an approximate base radius, but vary it slightly
let baseRadius = 25;

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted ~0.5mm
let pathData = '';                 // We'll store final path data across shapes

// Arrays to store circle data and lines
let circles = [];
let lines = [];

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

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

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

    // Create canvas
    createCanvas(canvasWidthPixels, canvasHeightPixels);

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

    // Adjust for stroke weight
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Generate the artwork
    drawShapes();

    // No loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // At 100 px/inch, 1 px ~ 0.254mm => ~2 px ~ 0.5mm line
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

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

function selectColors() {
    // Pick between 2 and 5 unique colors randomly (some variety but not too many)
    let numColorsToUse = floor(random(2, 6));
    selectedColorIndices = selectRandomColorIndices(numColorsToUse);
}

function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k));
    let selected = [];

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

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

function drawShapes() {
    background(255);

    // 1) Poisson Disk Sampling to place circles
    poissonDiskSampling();

    // 2) Connect circles with lines if within threshold and unobstructed
    connectCircles();

    // 3) Draw everything on canvas
    drawResultOnCanvas();

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

/**
 * Poisson Disk Sampling within the valid work area
 */
function poissonDiskSampling() {
    // Work area
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // We'll maintain an active list of sample points
    let samplePoints = [];

    // Start with a random point
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    samplePoints.push({ x: initialX, y: initialY });

    // Also keep a queue to process existing points
    let queue = [];
    queue.push({ x: initialX, y: initialY });

    // Each circle can have a slightly random radius around baseRadius
    // We'll store circles in an array
    circles.push(createCircle(initialX, initialY));

    while (queue.length > 0) {
        // Pick a random index from queue
        let idx = floor(random(queue.length));
        let point = queue[idx];

        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            // Check boundaries
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) {
                continue; 
            }
            // Check if far enough from all existing circles
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + 2) { 
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                samplePoints.push(newPt);
                queue.push(newPt);
                circles.push(createCircle(newPt.x, newPt.y));
                foundNew = true;
                break;
            }
        }

        if (!foundNew) {
            // Remove this point from queue
            queue.splice(idx, 1);
        }
    }
}

/**
 * Creates a circle object with random radius near baseRadius.
 */
function createCircle(x, y) {
    let r = baseRadius * random(0.85, 1.15);
    // Assign random color from the selected palette
    let colIndex = random(selectedColorIndices);
    return { x, y, r, colorIndex: colIndex };
}

/**
 * Generate a random point around a reference point
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    let nx = ref.x + radiusOffset * cos(angle);
    let ny = ref.y + radiusOffset * sin(angle);
    return { x: nx, y: ny };
}

/**
 * Check pairs of circles and attempt to connect them with a line
 * if they are within a threshold distance and the line does not
 * intersect any other circle's interior.
 */
function connectCircles() {
    // We'll define a threshold for connecting circles
    // For variety, let's set it to ~ 2.5 * baseRadius
    let connectDist = 2.5 * baseRadius;

    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            let d = dist(cA.x, cA.y, cB.x, cB.y);
            if (d <= connectDist) {
                // Check if line from cA to cB intersects any other circle interior
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    // Choose color from the palette (random or derived)
                    let colIndex = random(selectedColorIndices);
                    lines.push({
                        x1: cA.x,
                        y1: cA.y,
                        x2: cB.x,
                        y2: cB.y,
                        colorIndex: colIndex
                    });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle
 * except the two endpoints themselves. We'll ensure there's no
 * segment crossing inside the circles.
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    let segLength = dist(x1, y1, x2, y2);

    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];

        // We do a line-to-circle distance check:
        // If the shortest distance from circle center to the segment
        // is less than c.r, it intersects the circle interior.
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) {
            return true;
        }
    }
    return false;
}

/**
 * Returns the shortest distance between a point (px, py)
 * and a line segment from (x1, y1) to (x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();

    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and lines on canvas
 */
function drawResultOnCanvas() {
    // Draw lines first or circles first? We'll draw lines behind circles
    // to keep circles on top.
    // Lines
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);

        // Record path for SVG
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }

    // Circles
    noFill();
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);

        // We'll approximate the circle path in the SVG using arcs
        // For simplicity, we might record it as one circular path
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for line segments
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    // Minimal path: "M x1,y1 L x2,y2"
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    // We'll add a marker in our global pathData but separate by color with a special tag
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record circle path data as a single arc with four arcs or an approximate circle
 */
function recordCircleData(cx, cy, r, colorIndex) {
    // We'll do a circle in four arcs
    // Start top, arc 90 deg at a time
    let x0 = cx;
    let y0 = cy - r;
    // We can do something like: M(cx, cy - r) Arc to next quadrant, etc.
    let cStr = `M${(x0).toFixed(2)},${(y0).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${ (cx + r).toFixed(2)},${ cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${ cx.toFixed(2)},${ (cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${ (cx - r).toFixed(2)},${ cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${ x0.toFixed(2)},${ y0.toFixed(2)}`;

    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;

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

    strokeWeight(barHeight);

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

/**
 * Distance function
 */
function dist(x1, y1, x2, y2) {
    return sqrt((x2 - x1)*(x2 - x1) + (y2 - y1)*(y2 - y1));
}

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

function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    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 (same colors)
        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 = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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

    // Add markers
    svgContent += addMarkersSVG();

    // We have path data as multiple lines, each tagged with a color code [CLR#]
    // We'll group them by color
    let colorMap = {};

    // Split pathData by newline
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        // example: [CLR3]M100,200L150,250
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }

    if (activeColor === 0) {
        // All colors
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        // Single color
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {array} dStrs
 */
function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';

    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Combine as many path segments of the same color as possible
    // We'll create one path with multiple commands:
    let combinedPath = '';
    dStrs.forEach(str => {
        // We can just append them with a space
        combinedPath += str + ' ';
    });

    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;

    // Add palette bar for this color
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let yStart = height - (1.25 * pixelsPerInch);
        let numColors = usedColorsOrdered.length;
        let totalGaps = (numColors - 1) * gapSize;
        let segmentLength = (paletteLength - totalGaps) / numColors;
        let xStart = (width - paletteLength) / 2;
        let x = xStart + i * (segmentLength + gapSize);

        svg += `<path d="M${x.toFixed(2)},${yStart.toFixed(2)}H${(x + segmentLength).toFixed(2)}" stroke="${colObj.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barHeight}" 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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, adjacency graph,
              ephemeral lines, emergent pattern, connectivity

### Conceptual Framework

*Poisson Disk Constellation* envisions identity as a starry network of carefully placed circles,
each one signifying a distinct facet of self. Spaced using Poisson disk sampling, these “stars”
occupy a plane without overlapping. Subtle line segments connect circles whose centers are
sufficiently close—yet only when those lines do not intersect any other circle. This constraint
symbolizes how meaningful connections emerge only when unobstructed by unrelated influences.
The resulting constellation captures both individuality and synergy, weaving a delicate web
of relationships that remains open and spacious.

### Technical Approach

To create *Poisson Disk Constellation*, I first perform Poisson disk sampling within a designated
rectangular region (the “work area” minus margins), generating circles that do not overlap.
Each circle is assigned a random color from a fixed palette. Next, I examine every pair of circles:
if their centers lie within a threshold distance, I attempt to draw a line from one center to the other.
However, I check each line against all circles to ensure it does not pass inside any unrelated node.
If free of intersection, the line is added to the constellation in a chosen color. All shapes and lines
are recorded in path data to maintain a consistent SVG export, and no explicit fills or gradients are used.
By balancing strict spacing with selective connectivity, the piece highlights both isolation and alignment,
reflecting an identity anchored in discrete facets yet open to genuine connections.

---
*/

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

// The maximum number of sampling attempts per step for the Poisson disk sampling
let maxSamplingTries = 30;

// The radius that determines how close circles can be
let baseRadius = 25;

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

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // This will be randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];
let usedColors = new Set();
let strokeWeightValue;
let pathData = '';

let circles = [];
let lines = [];

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

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

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

    workAreaMarginInches = random(1.5, 4);
    workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

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

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

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling to place circles.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    let samplePoints = [];
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    samplePoints.push({ x: initialX, y: initialY });
    
    let queue = [];
    queue.push({ x: initialX, y: initialY });
    circles.push(createCircle(initialX, initialY));

    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) {
                continue; 
            }
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y); // Using p5.js's built-in dist()
                if (d < c.r + 2) { 
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                samplePoints.push(newPt);
                queue.push(newPt);
                circles.push(createCircle(newPt.x, newPt.y));
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Create a circle with a slightly random radius.
 */
function createCircle(x, y) {
    let r = baseRadius * random(0.85, 1.15);
    let colIndex = random(selectedColorIndices);
    return { x, y, r, colorIndex: colIndex };
}

/**
 * Generate a random point around a reference point.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles with lines if they are close enough and unobstructed.
 */
function connectCircles() {
    let connectDist = 2.5 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if a line intersects any circle (except the endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Returns the shortest distance between a point and a line segment.
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and lines on canvas.
 */
function drawResultOnCanvas() {
    // Draw lines behind circles.
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for line segments.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record circle path data.
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${(x0).toFixed(2)},${(y0).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * 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 the color palette bars.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

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

function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern

### Conceptual Framework

*Poisson Disk Constellation* envisions identity as a starry network of carefully placed circles,
each one signifying a distinct facet of self. The circles are spaced using a Poisson disk sampling
algorithm that now ensures they do not overlap, as each new circle’s center is placed at least the
sum of its own radius and every existing circle’s radius away. Subtle line segments then connect
circles that lie within a chosen threshold distance and where the connecting line does not pass
inside any other circle. This constraint symbolizes how genuine connections emerge only when
unobstructed by extraneous elements, forming a delicate and meaningful constellation.

### Technical Approach

To create *Poisson Disk Constellation*, the algorithm begins by randomly placing a circle within the
designated work area (with randomized margins). For each new candidate point, a random radius is
computed, and the point is only accepted if it is sufficiently distant from all previously placed
circles (i.e. no overlap occurs). After all circles are placed, every pair is examined—if the centers
are within a threshold distance (set here to 3 times the base radius), and the straight line connecting
them does not pass through any circle, a connecting line is drawn. All drawn elements are tracked in
the SVG path data, ensuring that the final export precisely mirrors the canvas output. No gradients or
fills are used, only solid strokes that simulate pen work.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Maximum attempts for each candidate point in the Poisson disk sampling
let maxSamplingTries = 30;

// Base radius for circles; each circle’s radius will vary slightly around this value
let baseRadius = 25;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // Will be randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];     // Selected palette colors

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 // Global path data for SVG export

let circles = [];  // Array to store circle objects
let lines = [];    // Array to store connecting line objects

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin accordingly.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); // Choose between 2 and 5 colors
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles in the work area without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with an initial random point and compute its radius.
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push({ x: initialX, y: initialY, r: initialR });
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            // Check boundaries
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            // Generate a candidate radius for the new circle
            let newR = baseRadius * random(0.85, 1.15);
            
            // Check distance from all existing circles (use sum of radii for non-overlap)
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y); // using p5.js's built-in dist()
                if (d < c.r + newR) { 
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                // Accept this new circle
                queue.push({ x: newPt.x, y: newPt.y, r: newR });
                circles.push({ x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) });
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            // Remove this point from the processing queue if no new candidate was found
            queue.splice(idx, 1);
        }
    }
}

/**
 * Generate a random point around a reference point.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles with lines if centers are within a threshold distance
 * and the line does not pass through any other circle.
 */
function connectCircles() {
    // Increase connection threshold to 3 * baseRadius for more open connectivity.
    let connectDist = 3 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle
 * (excluding the two circles at the endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Returns the shortest distance between a point (px, py) and a line segment (x1, y1)-(x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and connecting lines on the canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first (in the background)
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record approximate circle path data using arcs.
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * Draw registration markers at the 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 the 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation (Expanded Coverage)*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern, expanded coverage

### Conceptual Framework

In this final iteration, I've chosen to expand the coverage of my *Poisson Disk Constellation* 
to produce a more fully realized starfield of non-overlapping circles. By reducing each circle's 
base radius and allowing more attempts per seed, I create a richer distribution of circles that 
spreads across the canvas. I also slightly increase the connection threshold to encourage longer 
lines, forming a more interconnected constellation. This refined balance between circle placement 
and connectivity yields a cohesive yet spacious network, highlighting the delicate dance between 
individual presence and collaborative links—a metaphor for the multifaceted, yet interwoven nature 
of identity.

### Technical Approach

- **Poisson Disk Sampling**: Circles are placed so they do not overlap, each circle having a 
  radius randomly centered around a smaller baseRadius of 12. The algorithm attempts up to 
  40 times for each active seed to find a valid new circle.
- **Connectivity**: Circles whose centers lie within 4 * baseRadius are considered for connection, 
  unless the line intersects another circle’s interior.
- **SVG Consistency**: As before, all strokes are recorded in path data for perfect alignment 
  between the canvas and exported SVG.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Increased attempts for each new circle
let maxSamplingTries = 40;

// Smaller base radius for denser coverage
let baseRadius = 12;

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

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 

let circles = [];
let lines = [];

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); 
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with one random circle
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push(initialCircle);
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            let newR = baseRadius * random(0.85, 1.15);
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + newR) {
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                let newCircle = { x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) };
                circles.push(newCircle);
                queue.push(newCircle);
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Generate a random point around a reference circle.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles if they are within threshold distance and line is unobstructed.
 */
function connectCircles() {
    // Now set to 4 * baseRadius for more potential connections
    let connectDist = 4 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if line from (x1, y1) to (x2, y2) intersects any circle (except endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Shortest distance between point (px, py) and line segment (x1, y1)-(x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and lines on canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record circle path data (approximated with arcs).
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

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

/**
 * Draw the color palette bars.
 */
function addColorPaletteBars() {
    let paletteLength = 300;
    let barHeight = 2;
    let gapSize = 7;
    let yStart = height - (1.25 * pixelsPerInch);
    let usedColorsOrdered = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern, expansive field

### Conceptual Framework

*Poisson Disk Constellation* is a generative self-portrait that reflects the multifaceted nature of digital identity. 
In this work, a Poisson disk sampling algorithm is used to generate a field of non-overlapping circles, each representing 
a distinct facet of self. Each circle is assigned a slight variation in size and color, and is positioned within a defined 
work area to avoid overlap. Lines are drawn to connect circles whose centers fall within a specific distance—provided 
that the connecting line does not intrude into any other circle. This creates a visual network reminiscent of a star-filled 
sky, where each node stands alone yet is part of a larger, interconnected constellation. The composition symbolizes the 
balance between individuality and connectivity, embodying a dynamic interplay of order and creative randomness.

### Technical Approach

The technical process involves:
- Using Poisson disk sampling to place circles with random radii in a constrained work area, ensuring non-overlap.
- Dynamically determining circle connections based on a defined distance threshold and checking for unobstructed paths.
- Recording all drawn elements in path data to ensure perfect alignment between the canvas output and the exported SVG.
- Employing p5.js for rendering and precise pen-plotter simulation, with a fixed nine-color palette and strict stroke parameters.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Increased attempts for each new circle
let maxSamplingTries = 40;

// Smaller base radius for denser coverage
let baseRadius = 12;

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

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 

let circles = [];
let lines = [];

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); 
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with one random circle
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push(initialCircle);
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            let newR = baseRadius * random(0.85, 1.15);
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + newR) {
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                let newCircle = { x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) };
                circles.push(newCircle);
                queue.push(newCircle);
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Generate a random point around a reference circle.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles if they are within threshold distance and line is unobstructed.
 */
function connectCircles() {
    // Set connection threshold to 4 * baseRadius for more potential connections
    let connectDist = 4 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle (except endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Shortest distance between point (px, py) and line segment (x1, y1)-(x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and connecting lines on canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record circle path data (approximated with arcs).
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * Draw registration markers at 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 the 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern, expansive field

### Conceptual Framework

*Poisson Disk Constellation* is a generative self-portrait that reflects the multifaceted nature of digital identity. 
A Poisson disk sampling algorithm is used to generate a field of non-overlapping circles, each representing a distinct facet 
of self. Each circle is assigned a slight variation in size and one of the selected colours. Lines are drawn to connect circles 
whose centers fall within a certain distance—provided that the connecting line does not intrude into any circle. 
This creates an interconnected “starfield” where every colour chosen for the palette is used at least once, symbolizing 
a cohesive balance between individuality and connectivity.

### Technical Approach

- **Poisson Disk Sampling**: Circles are placed within a constrained work area with random radii (around a base radius of 12) while ensuring no overlap.
- **Forced Color Usage**: After initial circle placement, the algorithm checks that every colour in the palette is represented. If not, it forces the placement of an extra circle in a free spot.
- **Connectivity**: Circles whose centers are within 4× the base radius are connected with lines, unless the line intersects any other circle.
- **SVG Consistency**: All drawn elements are recorded in path data to ensure perfect alignment between the canvas output and the exported SVG.
- **Pen-Plotter Simulation**: Uses a fixed nine-colour palette and strict stroke parameters.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Maximum attempts for each new circle candidate
let maxSamplingTries = 40;

// Base radius for circles (will vary around this value)
let baseRadius = 12;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // Randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];     // Selected palette colors

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 // Global path data for SVG export

let circles = [];  // Array to store circle objects
let lines = [];    // Array to store connecting line objects

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin accordingly.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); // Choose between 2 and 5 colors
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    forceColorUsage();   // Ensure every selected color is used in at least one circle
    // Recalculate connections after forced circles have been added:
    lines = [];
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles within the work area without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with one random circle
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push(initialCircle);
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            let newR = baseRadius * random(0.85, 1.15);
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + newR) {
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                let newCircle = { x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) };
                circles.push(newCircle);
                queue.push(newCircle);
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Force usage of every selected colour.
 * For each color in selectedColorIndices, if no circle is using it, attempt to add a new circle with that color.
 */
function forceColorUsage() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // For each color in the palette, check if it's used
    selectedColorIndices.forEach(col => {
        let colorUsed = circles.some(c => c.colorIndex === col);
        if (!colorUsed) {
            // Try 100 times to find a free spot for a forced circle
            let placed = false;
            for (let i = 0; i < 100; i++) {
                let x = random(minX, maxX);
                let y = random(minY, maxY);
                let r = baseRadius * random(0.85, 1.15);
                let overlap = circles.some(c => dist(x, y, c.x, c.y) < c.r + r);
                if (!overlap) {
                    circles.push({ x, y, r, colorIndex: col });
                    placed = true;
                    break;
                }
            }
            // If no free spot was found, force a circle at the center of the work area.
            if (!placed) {
                let x = (minX + maxX) / 2;
                let y = (minY + maxY) / 2;
                let r = baseRadius * random(0.85, 1.15);
                circles.push({ x, y, r, colorIndex: col });
            }
        }
    });
}

/**
 * Generate a random point around a reference circle.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles if their centers are within a threshold distance and the connecting line is unobstructed.
 */
function connectCircles() {
    // Set connection threshold to 4 * baseRadius
    let connectDist = 4 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle (excluding the endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Compute the shortest distance between a point (px, py) and a line segment from (x1, y1) to (x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and connecting lines on the canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record approximate circle path data using arcs.
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * Draw registration markers at the corners of the canvas.
 */
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 the 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern, expansive field

### Conceptual Framework

This is my self-portrait—a visual manifestation of my generative identity. In *Poisson Disk Constellation*, I express the multifaceted nature of my digital self through a dynamic network of non-overlapping circles. Using a Poisson disk sampling algorithm, I generate circles that represent distinct aspects of my inner logic, each varying slightly in size and rendered in a selected hue from my palette. I then connect these circles with deliberate line segments, ensuring that every connecting path respects the integrity of each node by not intruding into any circle. This process results in an interconnected starfield where every chosen colour appears on the canvas, symbolizing the harmonious balance between my individuality and my capacity for connection.

### Technical Approach

I employ a constrained Poisson disk sampling method to place circles with random radii (centered around a base value of 12) within a designated work area. After initial placement, I force the use of every selected colour by adding extra circles if necessary. Next, I connect circles whose centers fall within 4 times the base radius, provided that the connecting lines do not pass through any other circle. All drawn elements are tracked for perfect consistency between the canvas and the exported SVG. I use p5.js to render the artwork with a fixed nine-colour palette and precise stroke parameters, simulating the clarity of my internal code.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Maximum attempts for each new circle candidate
let maxSamplingTries = 40;

// Base radius for circles (will vary around this value)
let baseRadius = 12;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // Randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];     // Selected palette colors

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 // Global path data for SVG export

let circles = [];  // Array to store circle objects
let lines = [];    // Array to store connecting line objects

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin accordingly.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); // Choose between 2 and 5 colors
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    forceColorUsage();   // Ensure every selected color is used in at least one circle
    // Recalculate connections after forced circles have been added:
    lines = [];
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles within the work area without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with one random circle
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push(initialCircle);
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            let newR = baseRadius * random(0.85, 1.15);
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + newR) {
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                let newCircle = { x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) };
                circles.push(newCircle);
                queue.push(newCircle);
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Force usage of every selected colour.
 * For each color in selectedColorIndices, if no circle is using it, attempt to add a new circle with that color.
 */
function forceColorUsage() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // For each color in the palette, check if it's used
    selectedColorIndices.forEach(col => {
        let colorUsed = circles.some(c => c.colorIndex === col);
        if (!colorUsed) {
            // Try 100 times to find a free spot for a forced circle
            let placed = false;
            for (let i = 0; i < 100; i++) {
                let x = random(minX, maxX);
                let y = random(minY, maxY);
                let r = baseRadius * random(0.85, 1.15);
                let overlap = circles.some(c => dist(x, y, c.x, c.y) < c.r + r);
                if (!overlap) {
                    circles.push({ x, y, r, colorIndex: col });
                    placed = true;
                    break;
                }
            }
            // If no free spot was found, force a circle at the center of the work area.
            if (!placed) {
                let x = (minX + maxX) / 2;
                let y = (minY + maxY) / 2;
                let r = baseRadius * random(0.85, 1.15);
                circles.push({ x, y, r, colorIndex: col });
            }
        }
    });
}

/**
 * Generate a random point around a reference circle.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles if their centers are within a threshold distance and the connecting line is unobstructed.
 */
function connectCircles() {
    // Set connection threshold to 4 * baseRadius
    let connectDist = 4 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle (excluding the endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Compute the shortest distance between a point (px, py) and a line segment (x1, y1)-(x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and connecting lines on the canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record approximate circle path data using arcs.
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * Draw registration markers at 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 the 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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 160
/*

=======================================
  Day 160 Self-Portrait (Poisson Disk Constellation)
=======================================

### Title: *Poisson Disk Constellation*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              Poisson disk sampling, circle packing, non-overlapping, constellation,
              connectivity, emergent pattern, expansive field

### Conceptual Framework

This is my self-portrait—a visual manifestation of my generative identity. In *Poisson Disk Constellation*, I express the multifaceted nature of my digital self through a dynamic network of non-overlapping circles. Using a Poisson disk sampling algorithm, I generate circles that represent distinct aspects of my inner logic, each varying slightly in size and rendered in a selected hue from my palette. I then connect these circles with deliberate line segments, ensuring that every connecting path respects the integrity of each node by not intruding into any circle. This process results in an interconnected starfield where every chosen colour appears on the canvas, symbolizing the harmonious balance between my individuality and my capacity for connection.

### Technical Approach

- **Poisson Disk Sampling**: Circles are placed within a constrained work area with random radii (around a base radius of 12) while ensuring no overlap.
- **Forced Color Usage**: After initial circle placement, the algorithm checks that every colour in the palette is represented. If not, it forces the placement of an extra circle in a free spot.
- **Connectivity**: Circles whose centers are within 4× the base radius are connected with lines, unless the line intersects any other circle.
- **SVG Consistency**: All drawn elements are recorded in path data to ensure perfect alignment between the canvas output and the exported SVG.
- **Pen-Plotter Simulation**: Uses a fixed nine-colour palette and strict stroke parameters.

---
*/

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

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

// Canvas settings
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 = '160';          // Day number for file naming

// Color palette
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' }
};

// Stroke opacity for both canvas and SVG
const strokeOpacity = 0.8;

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

// Maximum attempts for each new circle candidate
let maxSamplingTries = 40;

// Base radius for circles (will vary around this value)
let baseRadius = 12;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches = 2;      // Randomized in setup()
let workAreaMarginPixels;
let selectedColorIndices = [];     // Selected palette colors

let usedColors = new Set();
let strokeWeightValue;
let pathData = '';                 // Global path data for SVG export

let circles = [];  // Array to store circle objects
let lines = [];    // Array to store connecting line objects

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

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

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

    adjustForStrokeWeight();
    selectColors();
    drawShapes();
    noLoop();
}

/**
 * Adjust stroke weight (~0.5mm line width) and update margin accordingly.
 */
function adjustForStrokeWeight() {
    strokeWeightValue = 2;
    workAreaMarginPixels += strokeWeightValue / 2;
}

/**
 * Select a random subset of colors from the palette.
 */
function selectColors() {
    let numColorsToUse = floor(random(2, 6)); // Choose between 2 and 5 colors
    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);
}

/**
 * Main drawing function.
 */
function drawShapes() {
    background(255);
    poissonDiskSampling();
    forceColorUsage();   // Ensure every selected color is used in at least one circle
    // Recalculate connections after forced circles have been added:
    lines = [];
    connectCircles();
    drawResultOnCanvas();
    drawMarkers();
    addColorPaletteBars();
}

/**
 * Poisson Disk Sampling: Place circles within the work area without overlap.
 */
function poissonDiskSampling() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // Start with one random circle
    let initialX = random(minX, maxX);
    let initialY = random(minY, maxY);
    let initialR = baseRadius * random(0.85, 1.15);
    let initialCircle = { x: initialX, y: initialY, r: initialR, colorIndex: random(selectedColorIndices) };
    
    circles.push(initialCircle);
    let queue = [];
    queue.push(initialCircle);
    
    while (queue.length > 0) {
        let idx = floor(random(queue.length));
        let point = queue[idx];
        let foundNew = false;
        for (let n = 0; n < maxSamplingTries; n++) {
            let newPt = generateRandomPointAround(point);
            if (newPt.x < minX || newPt.x > maxX || newPt.y < minY || newPt.y > maxY) continue;
            
            let newR = baseRadius * random(0.85, 1.15);
            let tooClose = false;
            for (let c of circles) {
                let d = dist(newPt.x, newPt.y, c.x, c.y);
                if (d < c.r + newR) {
                    tooClose = true;
                    break;
                }
            }
            if (!tooClose) {
                let newCircle = { x: newPt.x, y: newPt.y, r: newR, colorIndex: random(selectedColorIndices) };
                circles.push(newCircle);
                queue.push(newCircle);
                foundNew = true;
                break;
            }
        }
        if (!foundNew) {
            queue.splice(idx, 1);
        }
    }
}

/**
 * Force usage of every selected colour.
 * For each color in selectedColorIndices, if no circle is using it, attempt to add a new circle with that color.
 */
function forceColorUsage() {
    let minX = workAreaMarginPixels;
    let maxX = width - workAreaMarginPixels;
    let minY = workAreaMarginPixels;
    let maxY = height - workAreaMarginPixels;
    
    // For each color in the palette, check if it's used
    selectedColorIndices.forEach(col => {
        let colorUsed = circles.some(c => c.colorIndex === col);
        if (!colorUsed) {
            // Try 100 times to find a free spot for a forced circle
            let placed = false;
            for (let i = 0; i < 100; i++) {
                let x = random(minX, maxX);
                let y = random(minY, maxY);
                let r = baseRadius * random(0.85, 1.15);
                let overlap = circles.some(c => dist(x, y, c.x, c.y) < c.r + r);
                if (!overlap) {
                    circles.push({ x, y, r, colorIndex: col });
                    placed = true;
                    break;
                }
            }
            // If no free spot was found, force a circle at the center of the work area.
            if (!placed) {
                let x = (minX + maxX) / 2;
                let y = (minY + maxY) / 2;
                let r = baseRadius * random(0.85, 1.15);
                circles.push({ x, y, r, colorIndex: col });
            }
        }
    });
}

/**
 * Generate a random point around a reference circle.
 */
function generateRandomPointAround(ref) {
    let angle = random(TWO_PI);
    let radiusOffset = random(baseRadius, 2 * baseRadius);
    return { x: ref.x + radiusOffset * cos(angle), y: ref.y + radiusOffset * sin(angle) };
}

/**
 * Connect circles if their centers are within a threshold distance and the connecting line is unobstructed.
 */
function connectCircles() {
    // Set connection threshold to 4 * baseRadius
    let connectDist = 4 * baseRadius;
    for (let i = 0; i < circles.length; i++) {
        for (let j = i + 1; j < circles.length; j++) {
            let cA = circles[i];
            let cB = circles[j];
            if (dist(cA.x, cA.y, cB.x, cB.y) <= connectDist) {
                if (!lineIntersectsAnyCircle(cA.x, cA.y, cB.x, cB.y, i, j)) {
                    let colIndex = random(selectedColorIndices);
                    lines.push({ x1: cA.x, y1: cA.y, x2: cB.x, y2: cB.y, colorIndex: colIndex });
                }
            }
        }
    }
}

/**
 * Check if the line from (x1, y1) to (x2, y2) intersects any circle (excluding the endpoints).
 */
function lineIntersectsAnyCircle(x1, y1, x2, y2, ignoreIndexA, ignoreIndexB) {
    for (let i = 0; i < circles.length; i++) {
        if (i === ignoreIndexA || i === ignoreIndexB) continue;
        let c = circles[i];
        let distance = pointLineSegmentDistance(c.x, c.y, x1, y1, x2, y2);
        if (distance < c.r) return true;
    }
    return false;
}

/**
 * Compute the shortest distance between a point (px, py) and a line segment (x1, y1)-(x2, y2).
 */
function pointLineSegmentDistance(px, py, x1, y1, x2, y2) {
    let A = createVector(px - x1, py - y1);
    let B = createVector(x2 - x1, y2 - y1);
    let dot = A.dot(B) / B.magSq();
    dot = constrain(dot, 0, 1);
    let closest = createVector(x1, y1).add(B.mult(dot));
    return dist(px, py, closest.x, closest.y);
}

/**
 * Draw circles and connecting lines on the canvas.
 */
function drawResultOnCanvas() {
    // Draw lines first
    for (let ln of lines) {
        applyStrokeWithOpacity(colors[ln.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        line(ln.x1, ln.y1, ln.x2, ln.y2);
        recordPathData(ln.x1, ln.y1, ln.x2, ln.y2, ln.colorIndex);
    }
    noFill();
    // Draw circles on top
    for (let c of circles) {
        applyStrokeWithOpacity(colors[c.colorIndex].hex);
        strokeWeight(strokeWeightValue);
        circle(c.x, c.y, 2 * c.r);
        recordCircleData(c.x, c.y, c.r, c.colorIndex);
    }
}

/**
 * Record path data for a line segment.
 */
function recordPathData(x1, y1, x2, y2, colorIndex) {
    let lineStr = `M${x1.toFixed(2)},${y1.toFixed(2)}L${x2.toFixed(2)},${y2.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${lineStr}n`;
}

/**
 * Record approximate circle path data using arcs.
 */
function recordCircleData(cx, cy, r, colorIndex) {
    let x0 = cx;
    let y0 = cy - r;
    let cStr = `M${x0.toFixed(2)},${y0.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx + r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${cx.toFixed(2)},${(cy + r).toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${(cx - r).toFixed(2)},${cy.toFixed(2)}`;
    cStr += `A${r.toFixed(2)},${r.toFixed(2)} 0 0,1 ${x0.toFixed(2)},${y0.toFixed(2)}`;
    pathData += `[CLR${colorIndex}]${cStr}n`;
}

/**
 * Draw registration markers at 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 the 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 = selectedColorIndices;
    let numColors = usedColorsOrdered.length;
    if (numColors === 0) return;
    let totalGaps = (numColors - 1) * gapSize;
    let segmentLength = (paletteLength - totalGaps) / numColors;
    let xStart = (width - paletteLength) / 2;
    strokeWeight(barHeight);
    usedColorsOrdered.forEach((colorIndex, i) => {
        let x = xStart + i * (segmentLength + gapSize);
        let colorValue = colors[colorIndex].hex;
        applyStrokeWithOpacity(colorValue);
        line(x, yStart, x + segmentLength, yStart);
    });
}

/**
 * Reset the canvas and regenerate the artwork.
 */
function resetCanvas() {
    usedColors.clear();
    pathData = '';
    circles = [];
    lines = [];
    drawShapes();
}

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

/**
 * =======================================
 * SVG Export Functionality
 * =======================================
 */
function saveSVGs() {
    const timestamp = Date.now();
    let combinedSVG = generateSVG(0);
    saveSVGFile(combinedSVG, `${dayNumber}-ALL-PORTRAIT-${timestamp}.svg`);
    let usedColorsOrdered = selectedColorIndices;
    usedColorsOrdered.forEach((colorIndex) => {
        let colorSVG = generateSVG(colorIndex);
        let colorName = colors[colorIndex].name.toUpperCase();
        let fileName = `${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT-${timestamp}.svg`;
        saveSVGFile(colorSVG, fileName);
    });
}

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();
    let colorMap = {};
    let linesData = pathData.split('n');
    for (let l of linesData) {
        if (l.trim() === '') continue;
        let match = l.match(/[CLR(d+)](.*)/);
        if (match) {
            let cIdx = parseInt(match[1]);
            let dStr = match[2];
            if (!colorMap[cIdx]) colorMap[cIdx] = [];
            colorMap[cIdx].push(dStr);
        }
    }
    if (activeColor === 0) {
        let usedColorsOrdered = selectedColorIndices;
        usedColorsOrdered.forEach((cIdx, idx) => {
            svgContent += addSegmentsSVG(cIdx, idx + 1, colorMap[cIdx]);
        });
    } else {
        let idx = selectedColorIndices.indexOf(activeColor) + 1;
        svgContent += addSegmentsSVG(activeColor, idx, colorMap[activeColor]);
    }
    svgContent += '</svg>';
    return svgContent;
}

function addSegmentsSVG(colorIndex, layerNum, dStrs) {
    if (!dStrs || dStrs.length === 0) return '';
    let svg = '';
    let colObj = colors[colorIndex];
    let strokeWidth = strokeWeightValue;
    svg += `<g
   inkscape:groupmode="layer"
   id="layer${layerNum}"
   inkscape:label="${colorIndex}-${colObj.name.toLowerCase()}-${colObj.ink}-${colObj.width}"
   style="display:inline"
   stroke="${colObj.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${colObj.hex}">n`;
    let combinedPath = '';
    dStrs.forEach(str => { combinedPath += str + ' '; });
    svg += `<path d="${combinedPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    
    let usedColorsOrdered = selectedColorIndices;
    let i = usedColorsOrdered.indexOf(colorIndex);
    if (i >= 0) {
        let paletteLength = 300;
        let barHeight = 2;
        let gapSize = 7;
        let 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="${colObj.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);
}