// Day 144
/*

=======================================
  Day 144 Self-Portrait (Pendulum Interference)
=======================================

### Title: *Pendulum Interference*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              identity, waveforms, oscillation, pendulum, interference, layered paths

### Conceptual Framework

In "Pendulum Interference," I envision my identity as a field of oscillating lines,
each emanating from a different pendulum-like motion. These overlapping waves
represent how countless internal impulses interact—sometimes reinforcing one another,
sometimes canceling out—to produce a holistic tapestry of self. The arcs remind me
that even the most systematic processes (like a swinging pendulum) can weave together
into unexpectedly complex patterns when viewed in unison. This self-portrait reflects
my ongoing negotiation between orderly repetition and the rich interplay of multiple,
ever-shifting influences that define who I am.

### Technical Approach

Technically, I generate one waveform for each selected color in the palette.
Each wave begins at the left margin of the work area, proceeds in small increments
to the right margin, and is calculated via a sinusoidal function whose amplitude,
frequency, and phase are randomized. This ensures no exact overlap but allows
for intersections among waves. I store the path commands in a dictionary keyed
by color, then combine them into a single `<path>` element per color in the SVG
export. On the canvas, I recreate the same lines for visual alignment, guaranteeing
that my final rendered piece and the SVG export precisely match.

---
*/

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

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

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

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

let generationRules = {
    stepsPerWave: 250,        // Number of line segments per wave
    minFrequency: 1.0,        // Minimum frequency for the wave
    maxFrequency: 3.0,        // Maximum frequency for the wave
    minAmplitude: 40,         // Minimum amplitude in pixels
    maxAmplitude: 150         // Maximum amplitude in pixels
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, draw one sinusoidal "pendulum" wave
    let leftBoundary = workAreaMarginPixels;
    let rightBoundary = width - workAreaMarginPixels;

    selectedColorIndices.forEach((cIndex) => {
        // Random wave parameters
        let freq = random(generationRules.minFrequency, generationRules.maxFrequency);
        let amp = random(generationRules.minAmplitude, generationRules.maxAmplitude);
        let phase = random(TWO_PI);
        let baseY = random(workAreaMarginPixels, height - workAreaMarginPixels);

        drawPendulumWave(cIndex, leftBoundary, rightBoundary, baseY, amp, freq, phase, generationRules.stepsPerWave);
    });

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

/**
 * Draw a pendulum-like wave for the given colorIndex.
 * The wave starts at xLeft and ends at xRight, with steps subdivisions.
 */
function drawPendulumWave(colorIndex, xLeft, xRight, baseY, amplitude, frequency, phase, steps) {
    // Prepare drawing
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    beginShape();
    let wavePath = '';

    for (let i = 0; i <= steps; i++) {
        let t = i / steps;
        let x = lerp(xLeft, xRight, t);
        // Basic sinusoidal formula
        let y = baseY + amplitude * sin(TWO_PI * frequency * t + phase);

        if (i === 0) {
            // Move to
            vertex(x, y);
            wavePath += `M${x.toFixed(2)},${y.toFixed(2)}`;
        } else {
            // Line to
            vertex(x, y);
            wavePath += `L${x.toFixed(2)},${y.toFixed(2)}`;
        }
    }
    endShape();

    // Append path data for this color
    pathDataMap[colorIndex] += wavePath;
}

/**
 * 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; // No colors used

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

    // Combined
    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();

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

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve path data for this color
    let wavePath = pathDataMap[colorIndex];
    if (wavePath !== '') {
        svg += `<path d="${wavePath}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * 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 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, Sierpinski, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, I envision my identity as a tapestry of fractal journeys
woven together in a shared space. For each selected color, I randomly place three
anchor points around the work area—like hidden beacons that guide an iterative
“chaos game.” Beginning from a random start, the path repeatedly jumps halfway
toward one of these anchors, recording each position. This simple rule, repeated
thousands of times, yields intricate patterns reminiscent of fractal geometry,
hinting at how minor decisions and micro-shifts can accumulate into complexity.

Each set of anchor points forms its own unique imprint, yet all layers overlap
within the same canvas, creating a composite self-portrait defined by interplay
and co-existence rather than isolation.

### Technical Approach

- For each color in the selected palette:
  1. **Anchor Points**: Place three anchor points near the margins, ensuring they lie
     within the work area but somewhat spaced apart.
  2. **Chaos Iteration**: Start from a random point in the work area. At each step:
     - Randomly choose one anchor point.
     - Move halfway from the current position to that anchor.
     - Plot this new position (adding a line from the old position to the new).
  3. **Path Data**: Store each iteration’s position in a single `<path>` for that color,
     guaranteeing consistent SVG and canvas output.

- **No Overlapping Paths**: We create one continuous path per color; any physical overlap
  is incidental rather than intentionally parallel or stacked lines.

- **Visual Result**: The fractal-like forms from each set of anchors weave together,
  forming a dynamic portrait of emergent order from simple rules.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 2500,        // Steps in the chaos game per color
    anchorDistance: 0.8         // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations);
    });

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

/**
 * Create 'count' anchor points near the margin edges.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps, storing path data and drawing it.
 */
function drawChaosPath(colorIndex, anchors, numIterations) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // We'll build one continuous path
    beginShape();
    vertex(x, y);

    // For the SVG
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;

    for (let i = 0; i < numIterations; i++) {
        // Pick random anchor
        let a = random(anchors);
        // Move halfway
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Add line
        vertex(x, y);
        chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
    }

    endShape();

    // Append to the path data for this color
    pathDataMap[colorIndex] += chaosPath;
}

/**
 * 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; // No colors used

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

    // Combined
    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();

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

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve path data for this color
    let chaosPath = pathDataMap[colorIndex];
    if (chaosPath !== '') {
        svg += `<path d="${chaosPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * 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 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, each color represents a fractal journey guided by three anchor points.
By iterating a simple “move halfway to a randomly chosen anchor” rule, distinct triangular patterns emerge.
Skipping the initial steps prevents clumping near the starting point, ensuring each color’s form is more
open and legible. Together, these layers create a tapestry of micro-movements, reflecting the interplay
of discrete influences that shape the self.

### Technical Approach

- For each selected color:
  1. Randomly place three anchor points in the work area.
  2. Initialize a random start point.
  3. Perform a chaos game with a chosen number of steps, but skip the first 50 iterations
     before recording line segments.
  4. Store each iteration’s new position in a single `<path>` string for the final export,
     ensuring consistency between the canvas display and the saved SVG.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,    // Total steps in the chaos game per color
    skipInitial: 50,       // Number of initial steps to skip drawing
    anchorDistance: 0.8    // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations, generationRules.skipInitial);
    });

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

/**
 * Create 'count' anchor points near the margin edges.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps, skipping the first 'skipSteps' before drawing.
 */
function drawChaosPath(colorIndex, anchors, numIterations, skipSteps) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // We'll build one continuous path
    let chaosPath = '';
    let hasMoved = false;

    for (let i = 0; i < numIterations; i++) {
        // Pick random anchor
        let a = random(anchors);
        // Move halfway
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Skip the initial steps
        if (i < skipSteps) {
            continue;
        }

        // If this is the first time we're drawing, move to (x,y) 
        if (!hasMoved) {
            chaosPath += `M${x.toFixed(2)},${y.toFixed(2)}`;
            hasMoved = true;
        } else {
            chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
        }
    }

    // Render the path on the canvas
    if (chaosPath.length > 0) {
        beginShape();
        let points = chaosPath.split(/[ML]/).filter(Boolean);
        for (let p = 0; p < points.length; p++) {
            let coords = points[p].split(',');
            if (coords.length === 2) {
                let cx = float(coords[0]);
                let cy = float(coords[1]);
                if (p === 0) {
                    vertex(cx, cy);
                } else {
                    vertex(cx, cy);
                }
            }
        }
        endShape();
    }

    // Append to the path data for this color
    pathDataMap[colorIndex] += chaosPath;
}

/**
 * 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; // No colors used

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

    // Combined
    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();

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

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve path data for this color
    let chaosPath = pathDataMap[colorIndex];
    if (chaosPath !== '') {
        svg += `<path d="${chaosPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * 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 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, each color represents a fractal journey guided by three anchor points.
By iterating a simple “move halfway toward a randomly chosen anchor” rule, intricate patterns emerge.
A minimum distance filter is applied to avoid drawing segments that are too short, thereby reducing overlap.
The resulting layered paths form a dynamic tapestry of micro-movements, reflecting the complex interplay
of discrete influences that shape the self.

### Technical Approach

- For each selected color:
  1. Three anchor points are randomly placed within the work area.
  2. A random starting point is chosen.
  3. The chaos game is performed for a fixed number of iterations (500), moving halfway toward a
     randomly selected anchor at each step.
  4. A minimum distance filter (2 pixels) is applied so that if the new point is too close to the previous
     drawn point, it is skipped—reducing excessive overlap while preserving the continuous trailing line.
  5. The complete path is stored in a single `<path>` element, ensuring exact consistency between
     the canvas display and the SVG export.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,    // Steps in the chaos game per color
    anchorDistance: 0.8    // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, so we use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game with a minimum distance filter
        drawChaosPath(cIndex, anchors, generationRules.numIterations, 2); // 2 pixels minimum distance
    });

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

/**
 * Create 'count' anchor points within the work area.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps, drawing points only if they are
 * at least minDist pixels away from the last drawn point.
 */
function drawChaosPath(colorIndex, anchors, numIterations, minDist) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Initialize the path data string and the last drawn point
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;
    let lastX = x;
    let lastY = y;

    // Also draw the initial vertex
    beginShape();
    vertex(x, y);

    for (let i = 0; i < numIterations; i++) {
        // Select a random anchor and move halfway toward it
        let a = random(anchors);
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Only add the new point if it's sufficiently distant from the last drawn point
        if (dist(x, y, lastX, lastY) >= minDist) {
            vertex(x, y);
            chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
            lastX = x;
            lastY = y;
        }
    }
    endShape();

    // Append the generated path to the path data for SVG export
    pathDataMap[colorIndex] += chaosPath;
}

/**
 * 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; // No colors used

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths (and palette bars in their group).
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve path data for this color
    let chaosPath = pathDataMap[colorIndex];
    if (chaosPath !== '') {
        svg += `<path d="${chaosPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * Add registration markers to the SVG.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${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 the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, Sierpinski, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, I envision my identity as a tapestry of fractal journeys
woven together in a shared space. For each selected color, I randomly place three
anchor points around the work area—like hidden beacons that guide an iterative
“chaos game.” Beginning from a random start, the path repeatedly jumps halfway
toward one of these anchors, recording each position. This simple rule, repeated
thousands of times, yields intricate patterns reminiscent of fractal geometry,
hinting at how minor decisions and micro-shifts can accumulate into complexity.

Each set of anchor points forms its own unique imprint, yet all layers overlap
within the same canvas, creating a composite self-portrait defined by interplay
and co-existence rather than isolation.

### Technical Approach

- For each color in the selected palette:
  1. **Anchor Points**: Place three anchor points near the margins, ensuring they lie
     within the work area but somewhat spaced apart.
  2. **Chaos Iteration**: Start from a random point in the work area. At each step:
     - Randomly choose one anchor point.
     - Move halfway from the current position to that anchor.
     - Plot this new position (adding a line from the old position to the new).
  3. **Path Data**: Store each iteration’s position in a single `<path>` for that color,
     guaranteeing consistent SVG and canvas output.

- **No Overlapping Paths**: We create one continuous path per color; any physical overlap
  is incidental rather than intentionally parallel or stacked lines.

- **Visual Result**: The fractal-like forms from each set of anchors weave together,
  forming a dynamic portrait of emergent order from simple rules.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,        // Steps in the chaos game per color
    anchorDistance: 0.8         // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations);
    });

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

/**
 * Create 'count' anchor points near the margin edges.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps, storing path data and drawing it.
 */
function drawChaosPath(colorIndex, anchors, numIterations) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // We'll build one continuous path
    beginShape();
    vertex(x, y);

    // For the SVG
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;

    for (let i = 0; i < numIterations; i++) {
        // Pick random anchor
        let a = random(anchors);
        // Move halfway
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Add line
        vertex(x, y);
        chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
    }

    endShape();

    // Append to the path data for this color
    pathDataMap[colorIndex] += chaosPath;
}

/**
 * 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; // No colors used

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

    strokeWeight(barHeight);

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

    // Combined
    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();

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

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

/**
 * Adds color-specific paths (and palette bars in their group)
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue; 

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

    // Retrieve path data for this color
    let chaosPath = pathDataMap[colorIndex];
    if (chaosPath !== '') {
        svg += `<path d="${chaosPath}" stroke-width="${strokeWidth}" fill="none" />n`;
    }

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

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

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

/**
 * 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 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, Sierpinski, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, I envision my identity as a tapestry of fractal journeys
woven together in a shared space. For each selected color, I randomly place three
anchor points around the work area—like hidden beacons guiding an iterative “chaos game.”
Beginning from a random start, the path repeatedly jumps halfway toward a randomly chosen
anchor, recording each position. To prevent overly dense overlaps and potential clogging,
every new point is only added if it’s at least a specified minimum distance away from the
previous point (a parameter I call `minDistance`). This continuous yet regulated process
creates intricate patterns reminiscent of fractal geometry, reflecting the complex interplay
of the various influences that form my self.

### Technical Approach

- For each color in the selected palette:
  1. **Anchor Points**: Three anchor points are placed near the margins within the work area.
  2. **Chaos Iteration**: Starting from a random point in the work area, the algorithm:
     - Randomly selects one of the anchors.
     - Moves halfway from the current point toward that anchor.
     - Adds the new point to the path only if it is at least `minDistance` pixels away from
       the last drawn point.
  3. **Path Data**: Every iteration’s position is appended to a single `<path>` for that color,
     ensuring exact consistency between the canvas rendering and the exported SVG.

- **Overlapping Paths**: Although the paths may physically overlap, they are drawn as one continuous
  line per color—any overlap is a natural byproduct of the fractal process, not a deliberate duplication.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,        // Steps in the chaos game per color
    minDistance: 2,            // Minimum distance (in pixels) between consecutive points
    anchorDistance: 0.8        // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, so we use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations);
    });

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

/**
 * Create 'count' anchor points within the work area.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps. Each new point is added only if it is at least
 * generationRules.minDistance pixels away from the last drawn point.
 */
function drawChaosPath(colorIndex, anchors, numIterations) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Start the path for the canvas and SVG
    beginShape();
    vertex(x, y);
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;
    let lastX = x;
    let lastY = y;

    for (let i = 0; i < numIterations; i++) {
        // Pick a random anchor
        let a = random(anchors);
        // Move halfway toward the anchor
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Only add the new point if it's far enough from the last drawn point
        if (dist(x, y, lastX, lastY) >= generationRules.minDistance) {
            vertex(x, y);
            chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
            lastX = x;
            lastY = y;
        }
    }
    endShape();

    // Append the generated path data for SVG export
    pathDataMap[colorIndex] += chaosPath;
}

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

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths (and palette bars in their group).
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

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

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

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

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

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

/**
 * Add registration markers to the SVG.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${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 the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, Sierpinski, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, I envision my identity as a tapestry of fractal journeys
woven together in a shared space. For each selected color, I randomly place three
anchor points around the work area—like hidden beacons guiding an iterative “chaos game.”
Beginning from a random start, the path repeatedly jumps halfway toward a randomly chosen
anchor, recording each position. To prevent overly dense overlaps and potential clogging,
every new point is only added if it’s at least a specified minimum distance away from the
previous point. This continuous yet regulated process creates intricate patterns reminiscent
of fractal geometry, reflecting the complex interplay of the various influences that form my self.

### Technical Approach

- For each color in the selected palette:
  1. **Anchor Points**: Three anchor points are placed within the work area, ensuring they lie
     near the margins but are reasonably spaced.
  2. **Chaos Iteration**: Starting from a random point in the work area, the algorithm:
     - Randomly selects one of the anchors.
     - Moves halfway from the current point toward that anchor.
     - Adds the new point to the path only if it is at least `minDistance` (set in `generationRules`)
       pixels away from the previous point.
  3. **Path Data**: Every accepted point is appended to a single `<path>` for that color, ensuring
     that the drawn canvas and the exported SVG remain exactly consistent.

- **Overlapping Paths**: Although the generated paths might physically cross each other,
  they are rendered as one continuous line per color—any overlap is a natural result of the fractal process.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,        // Steps in the chaos game per color
    minDistance: 2,            // Minimum distance (in pixels) between consecutive points
    anchorDistance: 0.8        // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, so we use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations);
    });

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

/**
 * Create 'count' anchor points within the work area.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps. Each new point is added only if it is at least
 * generationRules.minDistance pixels away from the last drawn point.
 */
function drawChaosPath(colorIndex, anchors, numIterations) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Start the path for the canvas and SVG
    beginShape();
    vertex(x, y);
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;
    let lastX = x;
    let lastY = y;

    for (let i = 0; i < numIterations; i++) {
        // Pick a random anchor
        let a = random(anchors);
        // Move halfway toward the anchor
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Only add the new point if it's far enough from the last drawn point
        if (dist(x, y, lastX, lastY) >= generationRules.minDistance) {
            vertex(x, y);
            chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
            lastX = x;
            lastY = y;
        }
    }
    endShape();

    // Append the generated path data for SVG export
    pathDataMap[colorIndex] += chaosPath;
}

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

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths (and palette bars in their group).
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

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

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

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

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

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

/**
 * Add registration markers to the SVG.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${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 the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Day 144
/*

=======================================
  Day 144 Self-Portrait (Iterative Chaos Web)
=======================================

### Title: *Iterative Chaos Web*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              chaos game, fractal, iteration, Sierpinski, random walk, identity, layering

### Conceptual Framework

In *Iterative Chaos Web*, I envision my identity as a tapestry of fractal journeys
woven together in a shared space. For each selected color, I randomly place three
anchor points around the work area—like hidden beacons guiding an iterative “chaos game.”
Beginning from a random start, the path repeatedly jumps halfway toward a randomly chosen
anchor, recording each position. The resulting continuous process creates intricate patterns
reminiscent of fractal geometry, reflecting the complex interplay of the various influences
that form my self.

### Technical Approach

- For each color in the selected palette:
  1. **Anchor Points**: Three anchor points are placed within the work area, ensuring they lie
     near the margins but are reasonably spaced.
  2. **Chaos Iteration**: Starting from a random point in the work area, the algorithm:
     - Randomly selects one of the anchors.
     - Moves halfway from the current point toward that anchor.
     - Adds the new point to the path only if it is at least `minDistance` (set in `generationRules`)
       pixels away from the previous point.
  3. **Path Data**: Every accepted point is appended to a single `<path>` for that color, ensuring
     that the drawn canvas and the exported SVG remain exactly consistent.

- **Overlapping Paths**: Although the generated paths might physically cross each other,
  they are rendered as one continuous line per color—any overlap is a natural result of the fractal process.

---
*/

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

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

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

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

let generationRules = {
    numIterations: 500,        // Steps in the chaos game per color
    minDistance: 2,            // Minimum distance (in pixels) between consecutive points
    anchorDistance: 0.8        // How close anchors can be to the canvas edge (0.0 to 1.0)
};

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

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

let usedColors = new Set();        // Set to track used colors
let strokeWeightValue;             // Stroke weight adjusted for ~0.5mm line

// We'll store path data for each color in a map: { colorIndex: "" }
let pathDataMap = {};

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

    // Initialize path data for each color
    initializePathDataMap();

    // Generate the artwork
    drawShapes();

    // Don't loop
    noLoop();
}

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

function adjustForStrokeWeight() {
    // Adjust stroke weight to match ~0.5mm line width
    // At 100 pixels per inch, 1 inch = 25.4mm, 1 pixel ≈ 0.254mm
    // 0.5mm / 0.254mm ≈ 1.97 pixels, so we use 2 pixels
    strokeWeightValue = 2;

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

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

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

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

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

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

/**
 * Initialize the pathDataMap so each color has an empty string to build upon.
 */
function initializePathDataMap() {
    selectedColorIndices.forEach(ci => {
        pathDataMap[ci] = '';
    });
}

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

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

    // For each selected color, perform a chaos game with 3 anchor points
    selectedColorIndices.forEach((cIndex) => {
        // Create anchor points
        let anchors = createAnchors(3);

        // Generate a fractal path using the chaos game
        drawChaosPath(cIndex, anchors, generationRules.numIterations);
    });

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

/**
 * Create 'count' anchor points within the work area.
 */
function createAnchors(count) {
    let anchors = [];
    for (let i = 0; i < count; i++) {
        let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
        let y = random(workAreaMarginPixels, height - workAreaMarginPixels);
        anchors.push(createVector(x, y));
    }
    return anchors;
}

/**
 * Perform chaos game for numIterations steps. Each new point is added only if it is at least
 * generationRules.minDistance pixels away from the last drawn point.
 */
function drawChaosPath(colorIndex, anchors, numIterations) {
    // Set stroke style
    applyStrokeWithOpacity(colors[colorIndex].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Random initial point
    let x = random(workAreaMarginPixels, width - workAreaMarginPixels);
    let y = random(workAreaMarginPixels, height - workAreaMarginPixels);

    // Start the path for the canvas and SVG
    beginShape();
    vertex(x, y);
    let chaosPath = `M${x.toFixed(2)},${y.toFixed(2)}`;
    let lastX = x;
    let lastY = y;

    for (let i = 0; i < numIterations; i++) {
        // Pick a random anchor
        let a = random(anchors);
        // Move halfway toward the anchor
        x = (x + a.x) / 2;
        y = (y + a.y) / 2;

        // Only add the new point if it's far enough from the last drawn point
        if (dist(x, y, lastX, lastY) >= generationRules.minDistance) {
            vertex(x, y);
            chaosPath += `L${x.toFixed(2)},${y.toFixed(2)}`;
            lastX = x;
            lastY = y;
        }
    }
    endShape();

    // Append the generated path data for SVG export
    pathDataMap[colorIndex] += chaosPath;
}

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

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

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

function resetCanvas() {
    usedColors.clear();
    // Reset path data
    initializePathDataMap();
    drawShapes();
}

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

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

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

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

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

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

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

    // Add markers
    svgContent += addMarkersSVG();

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

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

/**
 * Adds color-specific paths (and palette bars in their group).
 * @param {number} colorIndex
 * @param {number} layerNum
 * @param {number} activeColor
 */
function addSegmentsSVG(colorIndex, layerNum, activeColor) {
    let svg = '';
    let color = colors[colorIndex];
    let strokeWidth = strokeWeightValue;

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

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

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

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

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

/**
 * Add registration markers to the SVG.
 */
function addMarkersSVG() {
    const strokeWidth = 1;
    const offset = strokeWidth / 2;
    return `<g
       inkscape:groupmode="layer"
       id="layer0"
       inkscape:label="0-markers"
       style="display:inline"
       stroke="black"
       stroke-opacity="${strokeOpacity}"
       inkscape:highlight-color="black">n
    <path d="M${5 + offset},${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 the SVG file.
 */
function saveSVGFile(svgData, fileName) {
    let blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
    let url = URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.download = fileName;

    document.body.appendChild(link);
    link.click();

    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}