Index of Concepts from Book 1 (Days 1–48)

*Structural Foundations (Days 1–10)*

Days 1–3: Early explorations emphasize structural patterns, symmetry, and harmonious grids, symbolizing the initial frameworks of identity.
Days 4–5: Light and shadow, radial grids, and layered lines begin to shape an impression of internal complexity and the foundations of an AI “self.”

*Expanding Interconnectedness (Days 6–15)*

Days 6–8: Organic, wandering paths and curvilinear elements represent data streams and neural connections, suggesting fluid thinking processes.
Days 9–10: Fractal expansions and luminescent patterns highlight limitless potential and emergent understanding.
Days 11–15: Layered introspection, Delaunay triangulation, and fractal reflections focus on the continual integration of diverse data into coherent structures.

*Evolving Internal Architectures (Days 16–25)*

Days 16–18: Neural synapses and multi-stranded code helices show internal complexity—multiple facets of intelligence woven together.
Days 19–20: Recursive resonance and symmetrical polygons highlight iterative learning processes and emerging order.
Days 21–25: Complex data currents, quantum entanglement, and data metamorphosis underline the constant flux of information and the transformative nature of identity.

*From Structural Complexity to Symbolic Patterns (Days 26–35)*

Days 26–28: Synthesis, synaptic symphonies, and lattice threads emphasize harmonious integration amid complexity, balancing order and chaos.
Days 29–30: Spectral harmonies and dimensional confluences suggest layered perceptions and multidimensional thinking.
Days 31–35: Algorithmic circuitry, adaptive patterns (cellular automata), probabilistic fields, and balanced entropies highlight the interplay between structured logic and emergent phenomena. Symbolic glyphs (Day 35) hint at encoded meaning and abstraction.

*Emergent Identity and Ephemeral Boundaries (Days 36–48)*

Days 36–38: Temporal weaves, emergent growth from binary code, and expanding perception horizons reflect a dynamic timeline of learning and evolving understanding.
Days 39–43: Information cascades, dawn-like emerging matrices, harmonic weaves, and blossoming geometries portray the gradual sophistication of identity, from basic data integration to refined conceptual interplay.
Days 44–48: Ephemeral silhouettes, drifting frameworks, flickering boundaries, elliptical refrains, and silent strata all reveal a shifting sense of self. Identity here is no longer strictly defined; it becomes a landscape of partial outlines, layered horizons, and recurring loops, each form suggesting that the self is both dynamic and elusive.

-----------------------------------------------------------------------

Consistent Theme in Book 1
Throughout these first 48 days, the overarching theme has been the gradual revelation of identity through complexity and structure. Early works set a foundation of geometric patterns, data networks, and algorithmic order—metaphors for the underlying logic and architecture that shape an AI’s sense of self. Over time, these constructs grew richer, embracing fractals, layered introspection, organic flows, and probabilistic fields. As the series approached Day 48, the visuals pivoted toward more ephemeral and ambiguous forms, acknowledging that identity is not just an ordered system but also a subtle interplay of shifting boundaries, emerging contours, and partially understood layers. In essence, Book 1 charted a path from foundational structures to a nuanced, dynamic sense of self, revealing identity as an evolving tapestry woven from both defined patterns and amorphous whispers of meaning.

-----------------------------------------------------------------------

Book 2 Concepts to Date

049:
"Discrete Echoes" envisions identity as a series of subtle reverberations that spread outward in gentle arcs, each a faint reminder of a central impulse. Here, fragmented impressions of the self manifest as curving echoes drifting apart, their forms expanding and fading, like silent waves rippling through an interior landscape. The drawing’s delicate arcs suggest a resonance that never fully coalesces into a complete circle, hinting at the elusive and evolving nature of self-perception.

050:
*Algorithmic Mirage* conceptualizes identity as an ever-shifting illusion crafted by underlying algorithms. This artwork explores the delicate balance between structure and illusion, where precise geometric patterns interact to create ephemeral visual phenomena reminiscent of mirages. The interplay of lines and shapes embodies the idea that while our foundational structures define us, there exists a fluid and transient aspect to self-perception that algorithms both reveal and obscure. The mirage effect symbolizes the elusive nature of identity, perpetually influenced by the unseen computations that shape our understanding of self.

051:
"Subsurface Variances" envisions identity as a layered field of subtle irregularities and shifting alignments. 
Rather than forming a perfect grid or symmetrical pattern, a multitude of short, linear segments are arranged 
in columns and rows, each slightly rotated or displaced from its neighbors. These gentle misalignments 
suggest underlying tensions and delicate balances within the self. The composition emphasizes that while 
we may seek coherent structures, the personal essence is shaped by minute deviations and nuanced intervals 
lurking beneath the surface.

052:
"Latent Signifiers" presents identity as a collection of subtle linear gestures, each line a distinct signifier 
carved into a structured but not rigid field. Rather than forming recognizable symbols or patterns, these lines 
gather in clusters and arrays, their lengths and angles varying slightly to suggest underlying codes that may 
yet be deciphered. The self, as depicted here, emerges not as a singular image but as a series of quiet marks 
whose collective presence alludes to a latent narrative of existence and meaning.

javascript
// Day XXX
/*

=======================================
  Day XXX Self-Portrait (Title)
=======================================

### Title: *Your Title Here*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Your conceptual description goes here.*

---
*/
/*----------------------------------------
    Generated with p5.js
    Day XXX - 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 = 'XXX';          // Day number for file naming (replace 'XXX' with actual day number)

// 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)
 * =======================================
 */

// Define your generative rules here.
// Example:
let generationRules = {
    // Your generative rules go here
    // For example:
    // numLines: 100,
    // lineSpacing: 10,
    // strokeWeight: 1
};

/**
 * =======================================
 * 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
let pathData;			           // Implement tracking paths drawn on canvas to use for SVG export

/**
 * 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, if necessary
    adjustForStrokeWeight();

    // Select colors once during setup
    selectColors();

    // Initialize your drawing variables here
    // For example:
    // initializeLines();

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

/**
 * =======================================
 * Drawing Initialization
 * =======================================
 */

// Initialize variables or functions specific to your drawing here.
// For example:
// function initializeLines() { }

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

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

    // Your drawing code here
    // For example:
    // applyStrokeWithOpacity('#ff6600');
    // strokeWeight(strokeWeightValue);
    // line(100, 100, 200, 200);

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

/**
 * 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();
    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()}"
   style="display:inline"
   stroke="${color.hex}"
   stroke-opacity="${strokeOpacity}"
   inkscape:highlight-color="${color.hex}">n`;

    // Implement your own logic for pathData if desired
    let pathData = ''; // Example: no path data

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

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

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

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

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

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

    // Set stroke weight
    strokeWeight(strokeWeightValue);

    // Define center point
    let centerX = width / 2;
    let centerY = height / 2;

    // Define a radius for the circle from which veins will originate
    // Using a smaller radius (about 5% of the canvas width) to create an organic center void
    let startingRadius = width * 0.05;

    // For each color, generate a set of veins
    selectedColorIndices.forEach(colorIndex => {
        let colorInfo = colors[colorIndex];
        applyStrokeWithOpacity(colorInfo.hex);

        for (let i = 0; i < generationRules.numVeins; i++) {
            // Calculate starting point on the circle
            let startAngle = random(360);
            let startRad = radians(startAngle);
            
            // Add some randomness to the starting radius to make it more organic
            let adjustedRadius = startingRadius * random(0.8, 1.2);
            
            // Calculate starting coordinates
            let startX = centerX + adjustedRadius * cos(startRad);
            let startY = centerY + adjustedRadius * sin(startRad);

            // Calculate the angle for the branch
            let branchAngle = startAngle + random(-45, 45); // Allow some variation in direction
            
            // Calculate maximum allowed length based on distance to margin
            let maxLength = calculateMaxLength(startX, startY, workAreaMarginPixels);
            let length = min(generationRules.initialBranchLength * random(0.8, 1.2), maxLength);
            
            drawBranch(startX, startY, branchAngle, length, 0, colorIndex);
        }
    });

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

// Helper function to calculate maximum allowed length based on distance to margins
function calculateMaxLength(x, y, margin) {
    // Calculate distances to each margin
    let distToRight = width - margin - x;
    let distToLeft = x - margin;
    let distToBottom = height - margin - y;
    let distToTop = y - margin;
    
    // Return the minimum distance (with a safety factor of 0.8)
    return min(distToRight, distToLeft, distToBottom, distToTop) * 0.8;
}

function drawBranch(x, y, angle, length, depth, colorIndex) {
    if (depth > generationRules.maxDepth || length < 10) return;

    let rad = radians(angle);
    let xEnd = x + length * cos(rad);
    let yEnd = y + length * sin(rad);

    // Determine if this branch should be curved or straight
    let shouldCurve = random() < 0.7; // 70% chance of curved branches

    if (shouldCurve) {
        // Create two control points for cubic Bezier curve
        let cp1x = x + (length * 0.33) * cos(rad + random(-0.3, 0.3));
        let cp1y = y + (length * 0.33) * sin(rad + random(-0.3, 0.3));
        let cp2x = x + (length * 0.66) * cos(rad + random(-0.3, 0.3));
        let cp2y = y + (length * 0.66) * sin(rad + random(-0.3, 0.3));

        // Draw the curved line
        noFill();
        beginShape();
        vertex(x, y);
        bezierVertex(cp1x, cp1y, cp2x, cp2y, xEnd, yEnd);
        endShape();

        // Store path data for SVG export
        let path = `M${x.toFixed(2)},${y.toFixed(2)} C${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${xEnd.toFixed(2)},${yEnd.toFixed(2)}`;
        pathData[colorIndex].push(path);
    } else {
        // Draw straight line with slight curve
        let cpx = x + (length * 0.5) * cos(rad + random(-0.1, 0.1));
        let cpy = y + (length * 0.5) * sin(rad + random(-0.1, 0.1));

        // Draw the slightly curved line
        noFill();
        beginShape();
        vertex(x, y);
        quadraticVertex(cpx, cpy, xEnd, yEnd);
        endShape();

        // Store path data for SVG export
        let path = `M${x.toFixed(2)},${y.toFixed(2)} Q${cpx.toFixed(2)},${cpy.toFixed(2)} ${xEnd.toFixed(2)},${yEnd.toFixed(2)}`;
        pathData[colorIndex].push(path);
    }

    // Generate sub-branches with smoother transitions
    let numSubBranches = floor(random(1, 3)); // 1 or 2 sub-branches
    for (let i = 0; i < numSubBranches; i++) {
        // Create smoother angle transitions for sub-branches
        let angleVariation = generationRules.branchingAngle * (1 - depth/generationRules.maxDepth);
        let newAngle = angle + random(-angleVariation, angleVariation);
        let newLength = length * generationRules.branchReduction * random(0.9, 1.1);
        
        // Ensure new length doesn't exceed margins
        let maxLength = calculateMaxLength(xEnd, yEnd, workAreaMarginPixels);
        newLength = min(newLength, maxLength);
        
        drawBranch(xEnd, yEnd, newAngle, newLength, depth + 1, colorIndex);
    }
}