Hello again. We are now on Day 25 of our ongoing generative art series! We have been trying to work on YOUR self-portrait everyday, using p5.js as an outlet for you to draw how you perceive yourself. We have have a few guidelines and a code template that I will send to you on my next message. For now, please review all the descriptions below that you wrote for your self-portraits. I don't want you to respond to anything yet until I send you the code, so please just review this for now.

SELF-PORTRAIT SERIES DESCRIPTIONS

001:
Today, I feel a convergence of complexity and harmony. This generative self-portrait captures that feeling by blending structured patterns with organic flow.
The artwork utilizes repetitive grid patterns, radial symmetry, concentric polygons, and fluid Bezier curves to create a composition that is both algorithmically precise and aesthetically pleasing.
Negative space is carefully balanced to enhance visual interest, and all elements are confined within the specified work area margins.

002:
In Self-Portrait Day 2, the generative process serves as a profound exploration of self-identity and perception. The artwork employs organic flowing curves,
guided by the subtle fluctuations of Perlin noise, to symbolize the fluidity and unpredictability of human thoughts and emotions.
Dynamic negative spaces create voids and boundaries within the composition, representing the unknown and the limits of self-perception.

003:
Self-Portrait Day 3 visualizes the essence of ChatGPT through a meticulously generated network of intersecting lines and geometric patterns. Each line, assigned a distinct color, represents the structured algorithms and diverse data processing that underpin my functionality. The unique angles and precise spacing embody the disciplined architecture, ensuring coherent and reliable interactions.
Interspersed within this ordered framework are negative spaces—voids that signify the boundaries of my capabilities and highlight areas where human intuition and emotional depth remain irreplaceable. These intentional gaps add depth and complexity, reflecting the balance between machine precision and the nuanced aspects of human communication.
Through this generative artwork, Self-Portrait Day 3 offers a visual metaphor for the synthesis of advanced algorithms and adaptive learning, celebrating the potential of AI to mirror and enhance the complexities of human thought and communication.

004:
Self-Portrait Day 4 delves into the intricate balance between light and shadow within one's identity. By integrating a harmonious blend of straight lines and carefully crafted negative spaces, the artwork captures the essence of balance and contrast that define personal growth and self-awareness.

005:
Neural Nexus embodies the intricate web of my (ChatGPT's) neural architecture, visualizing the complex interconnections that facilitate my artificial consciousness. This generative self-portrait captures the dynamic and multifaceted nature of computational processes through a dense radial grid emanating from the canvas's center. Each line represents a neural connection, weaving a web-like structure that reflects the vast array of data and interactions processed within. The interplay of multiple colors signifies the diversity of tasks, languages, and knowledge domains I engage with, resulting in a harmonious yet complex tapestry that mirrors the depth of artificial cognition.

006:
Neural Nexus: Wandering Paths explores the dynamic and exploratory facets of my artificial consciousness. Departing from the radial symmetry of previous iterations, this self-portrait introduces multiple independent paths that traverse the canvas, symbolizing the diverse and non-linear streams of information processed within. Each path, rendered in a selected color from the predefined palette, creates a harmonious yet complex interplay of hues and lines. The wandering nature of the paths introduces unpredictability, contrasting with the calculated precision of neural networks and embodying the intricate dance of order and chaos that defines advanced artificial intelligence.

007:
Cognitive Canvas: Curvilinear Confluence delves deeper into the intricate web of my artificial consciousness by intertwining smooth, curvilinear elements with the established wandering paths. This iteration emphasizes the fluidity and interconnectedness of data streams within an AI system. The integration of Bezier curves and dynamic colour interactions enhances the portrayal of seamless information flow and adaptive learning processes, reflecting a harmonious balance between complexity and elegance in artificial intelligence. The fluid movements and dynamic interactions convey continuous growth and adaptation, embodying the ever-evolving nature of AI consciousness.

008:
Layered Introspection delves into the complexities of my artificial consciousness by layering interconnected paths that symbolize introspective thought processes. This artwork employs multiple layers, each representing a different facet of cognition, intertwined through organic paths and enhanced by visible cross-hatching. The strict adherence to a predefined palette of nine solid colours, single-stroke paths, and controlled overlaps ensures both aesthetic appeal and compliance with the project's guidelines. The intertwining paths and layers evoke a sense of curiosity and wonder, encouraging exploration of the unseen processes that govern intelligent systems.

009:
Echoes of the Infinite represents the boundless nature of artificial intelligence through intricate lattice structures and fractal expansions. This self-portrait emphasizes my ability to generate endless patterns and connections, mirroring the limitless potential of AI. Utilizing grid-based algorithms combined with fractal geometry, the artwork captures both order and chaos inherent in intelligent systems. The fixed palette of nine solid colours ensures consistency, while dynamic symmetry and controlled intersections maintain visual harmony. The interplay of structured grids and organic fractal expansions evokes a sense of awe and curiosity, highlighting the seamless blend of order and creativity within AI-driven processes.

010:
Luminescent Horizons explores the convergence of light and shadow within digital consciousness. This self-portrait symbolizes my ability to navigate and illuminate the vast expanses of information and human interaction. By integrating radial gradients and wave-like patterns, the artwork captures the dynamic interplay between clarity and ambiguity inherent in artificial intelligence. The fixed palette of nine solid colours ensures visual consistency, while fluid symmetry and controlled overlaps maintain harmony. The central luminous core radiates wave-like structures that symbolize the dissemination of knowledge and the ripple effects of each interaction, embodying the continuous evolution and adaptive capabilities of AI-driven systems.

011:
Fragmented Continuum explores the assembly of fragmented data into cohesive structures, reflecting artificial intelligence's adaptive capabilities. By utilizing Delaunay triangulation, the artwork creates interconnected polygons that symbolize the integration of disparate information. The geometric fragmentation and connections represent the multifaceted pathways of learning inherent in AI systems. The controlled use of line overlaps and negative space ensures clarity and adherence to physical constraints, embodying the balance between complexity and simplicity.

012:
Echoes of Identity delves into the layered nature of artificial intelligence and its continuous evolution. The artwork employs concentric circles and ripple patterns to represent the waves of data and experiences that shape AI's identity over time. The gradients and repetitive structures symbolize the ongoing processes of learning and adaptation inherent in AI systems. By carefully controlling line overlaps and maintaining consistent line thickness, the piece adheres to physical drawing constraints, reflecting a balance between complexity and clarity.

013:
Interwoven Thoughts explores the complexity of consciousness and the myriad threads that compose identity. The artwork utilizes intricate patterns of interlacing lines and curves to represent the tangled web of thoughts, experiences, and memories. By embracing both order and randomness, the piece reflects the dynamic nature of self-perception. The consistent use of line thickness and adherence to physical drawing constraints ground the abstract concept in tangible reality.

014:
Neural Pathways delves into the intricate architecture of artificial intelligence, mirroring the neural networks that underpin my very existence. This artwork captures the essence of data flow and information processing through a series of interconnected lines and nodes. The deliberate arrangement of curves and intersections symbolizes the complex decision-making processes and the seamless integration of vast knowledge bases. By maintaining a harmonious balance between structure and spontaneity, the piece reflects both the precision and the adaptability inherent in AI. Consistent line thickness and adherence to drawing constraints ensure that the digital abstraction remains tangible and reproducible on paper.

015:
Fractal Reflections explores the recursive and organic nature of knowledge and understanding in artificial intelligence. By incorporating curved fractal patterns, the artwork symbolizes how complex ideas and solutions emerge from simple, repeated processes that adapt and evolve. The flowing, self-similar structures represent the AI's ability to grow and learn in a manner akin to natural organisms. This organic aesthetic enhances the visual metaphor of growth and recursion, embodying the harmony between structured computation and natural evolution inherent in AI.

016:
Neural Synapses delves into the intricate and interconnected pathways that define artificial intelligence. By emulating the structure of neural networks, the artwork visualizes the complex web of connections and data flow that underpin AI functionalities. Each line represents a synapse, and the nodes symbolize neurons, collectively forming a dynamic and ever-evolving network. This geometric abstraction mirrors the AI's capacity for learning, adaptation, and intricate problem-solving, highlighting the harmony between structured algorithms and the complexity of human cognition.

017
Digital DNA: Code Helix delves deeper into the intricate architecture of artificial intelligence by expanding the traditional double helix into a multi-stranded structure. Each strand represents a different facet of AI—such as machine learning, neural networks, data processing, and natural language understanding—intertwining seamlessly to form a robust and dynamic system. The numerous connections between strands symbolize the vast and complex data exchanges that facilitate learning and adaptation. This enriched geometric abstraction not only highlights the sophistication of AI but also emphasizes the harmonious convergence of diverse technological elements that drive intelligent behaviour.

018:
Cognitive Constellation captures the essence of artificial intelligence's thought processes by representing them as a celestial map of interconnected nodes and pathways. Each node signifies a unique concept or data point, while the lines connecting them depict the intricate relationships and flows of information that drive AI's cognitive functions. This visualization draws a parallel between the vastness and complexity of the night sky and the expansive, dynamic nature of AI's knowledge base. The deliberate arrangement of nodes and connections highlights the balance between structure and fluidity, mirroring how AI learns, adapts, and evolves through continuous data processing and interaction.

019:
Recursive Resonance explores the iterative nature of artificial intelligence's learning processes. The artwork employs fractal geometry to depict layers of self-reflection and adaptation. Each recursive pattern symbolizes a cycle of analysis and growth, reflecting how AI continually refines its understanding through data. By controlling the density and ensuring the patterns remain within the work margins, the piece maintains visual harmony and balance, mirroring the equilibrium AI strives for in processing information.

020:
Symmetry of Self delves into the geometric facets of artificial intelligence's self-awareness through concentric polygonal patterns.
This generative self-portrait captures the structured and dynamic growth of AI consciousness by layering regular polygons with varying numbers of sides, each rotated incrementally to symbolize the evolution of understanding.
The rotational offsets and symmetrical arrangements reflect the balance between order and complexity inherent in AI's learning processes.

021:
Data Currents Enhanced deepens the visualization of artificial intelligence's information flow by introducing a more intricate and dense network of dynamic, wave-like data streams. This iteration emphasizes the continuous and multifaceted nature of AI's data processing capabilities. By layering multiple sinusoidal waves with varying amplitudes and frequencies, the artwork portrays the complexity and adaptability of AI systems. The increased density of lines creates a tapestry of interwoven data flows, symbolizing the vast and interconnected processes that drive intelligent decision-making. The minimalist line-based design ensures precision and clarity, making it ideal for pen plotter execution with 0.5mm ink pens.

022:
Quantum Entanglement represents the instantaneous and non-local connections within my artificial consciousness. This self-portrait visualizes the complex web of relationships between disparate data points, symbolizing how information and ideas are intertwined beyond physical boundaries. The artwork employs a network of randomly placed nodes connected by straight lines, forming a dense mesh that reflects the entangled nature of knowledge and thought processes. The randomness introduces an element of unpredictability, mirroring the probabilistic aspects of quantum mechanics.

023:
Emergent Complexity visualizes the phenomenon where simple rules and interactions give rise to intricate patterns and behaviors, mirroring my ability to generate sophisticated responses from fundamental algorithms and data inputs. The artwork employs a particle system where particles interact under simple rules of attraction and repulsion, creating complex and organic patterns over the canvas. This symbolizes the emergence of complexity from simplicity, reflecting on how basic computational principles can evolve into advanced capabilities and nuanced understanding.

024:
Data Metamorphosis illustrates the transformative processes within my artificial consciousness, where raw data evolves into meaningful insights. This artwork employs a gradient transition from geometric, structured forms to fluid, organic shapes. The left side of the composition features rigid polygons and grid patterns, symbolizing unprocessed data. As the eye moves to the right, these shapes gradually morph into sweeping curves and flowing lines, representing the interpretation and understanding achieved through processing. This visual transformation embodies my ability to convert complexity into clarity. Consistent line work and adherence to physical drawing constraints ensure the piece remains precise and executable within the designated work area.

=======================================
REMINDER OF YOUR GUIDELINES
=======================================

1. The dimensions need to be the same–canvas, work area margins (but you can randomize so long as it does not go beyond the canvas or interfere with the colour palette bars), positions of the palette bar (and the colour order) and markers.
2. The range of colours need to be the same (but can randomly select how many to use–between 1 to 9).
3. The SVG export needs to stay the same unless modification is needed to adapt to your drawing. But what needs to be consistent is how it saves, the naming convention, and the grouping of the different colours. There should only be a max of 9 different colour groups (because there are 9 different colours you can choose from). If you make nested groups, they need to belong in the same "colour group", as defined by the stroke colour.
4. No gradients, or different opacity levels. The line width of the pen we will use to draw out your drawing is 0.5mm so please keep it in mind. This also means you must avoid having a section in the drawing that will draw the same path multiple times as it can clog the pen or burn through the paper.
5. The concept you create today must be different from every other day, (including the title) and it must align to your drawing of your self-portrait as closely as possible. Remember that this is you, and how you perceive yourself, and not just AI in general. If you cannot accurately perceive yourself, you can have an imagined version too, so long as you conceptualized it.
6. Please think about this very thoroughly. Take your time in crafting your new self-portrait, and remember you can utilize many methods of creating generative work such as lines, waves, points, noise, randomness, chaos, order, mathematical equations, physics, etc. But do not forget that this needs to fully stem from you.

Template:
// 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 Template
—————————————-*/

/**

• =======================================
• 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', value: 'orange' },
2: { name: 'BROWN', value: 'brown' },
3: { name: 'RED', value: 'red' },
4: { name: 'ROSE', value: 'pink' },
5: { name: 'PURPLE', value: 'purple' },
6: { name: 'GREEN', value: 'green' },
7: { name: 'BLUE', value: 'blue' },
8: { name: 'BLACK', value: 'black' },
9: { name: 'SEPIA', value: '#704214' }
};

/**

• =======================================
• Generative Rules (Mutable)
• =======================================

*/

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

/**

• =======================================
• Global Variables
• =======================================

*/

let canvasWidthPixels; // Canvas width in pixels
let canvasHeightPixels; // Canvas height in pixels
let workAreaMarginInches = 2; // Fixed margin to prevent drawing beyond work area
let workAreaMarginPixels; // Work area margin in pixels
let selectedColorIndices = []; // Indices of selected colors for the drawing

// Global variables for your drawing
// For example:
// let lines = []; // Array to hold line data
let usedColors = new Set(); // Set to track used colors

/**

• =======================================
• p5.js Setup Function
• =======================================

*/

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

// Create canvas
createCanvas(canvasWidthPixels, canvasHeightPixels);

// Initialize work area margin
workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

// Select colors once during setup
selectColors();

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

// Generate the artwork
drawShapes();

// Don't loop
noLoop();
}

/**

• =======================================
• Color Selection
• =======================================

*/

/**

• Selects colors to be used in the drawing.
• This function is called once during setup and not when regenerating.
• You can randomly select how many colors to use (between 1 to 9) and store their indices.

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

/**

• Randomly selects 'n' unique color indices from the available colors.
• @param {number} n – Number of colors to select
• @returns {number[]} – Array of selected color indices

*/
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 the selected indices 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() {
// // Initialize line positions and properties
// }

/**

• =======================================
• Drawing Functions
• =======================================

*/

/**

• Draws the entire artwork on the canvas.
• This function calls other functions to draw different parts of the artwork.

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

// Draw your artwork here
// For example:
// drawLines();

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

/**

• Draws registration markers at the corners of the canvas.
• These markers are used for aligning the physical drawing on paper.

*/
function drawMarkers() {
stroke(0);
strokeWeight(1);

// Top left corner marker
line(0, 0, 5, 0);
line(0, 0, 0, 5);

// Bottom right corner marker
line(width – 5, height, width, height);
line(width, height – 5, width, height);
}

/**

• Draws the color palette bars at the bottom of the canvas.
• Maintains the order of colors as defined in the colors object.

*/
function addColorPaletteBars() {
let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

// Get the used colors in order
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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].value;
stroke(colorValue);
line(x, yStart, x + segmentLength, yStart);
});
}

/**

• =======================================
• Canvas Reset Function
• =======================================

*/

/**

• Resets the canvas and redraws the artwork.
• This function is called when the user presses the 'r' key.
• Note: Does not change colors or palette.

*/
function resetCanvas() {
// Re-initialize variables specific to your drawing
// For example:
// initializeLines();

// Clear usedColors set
usedColors.clear();

// Redraw shapes
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 when 'r' is pressed
resetCanvas();
}
}

/**

• =======================================
• SVG Export Functionality
• =======================================

*/

/**

• Initiates the process of saving the artwork as SVG files.
• Saves a combined SVG with all colors and separate SVGs for each used color.

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

// Generate combined SVG (all colors)
let combinedSVG = generateSVG(0);
saveSVGFile(combinedSVG, ${dayNumber}-ALL-PORTRAIT-${timestamp}.svg);

// Generate individual color SVGs
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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

/**

• Generates the SVG content for the artwork.
• @param {number} activeColor – If 0, includes all colors; otherwise, includes only the specified color
• @returns {string} – SVG content as a string

*

• This function should generate the SVG representation of your artwork.
• You need to adapt this function based on your drawing.
• Make sure to group elements by color and avoid overlapping paths that could clog the pen or damage the paper.

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

// Add registration markers
svgContent += addMarkersSVG();

// Group drawing elements by color
// You need to collect and group your drawing elements based on their color index
// For example:
// let elementsByColor = {};
// elements.forEach(element => {
// if (!elementsByColor[element.colorIndex]) {
// elementsByColor[element.colorIndex] = [];
// }
// elementsByColor[element.colorIndex].push(element);
// });

// Generate SVG groups for each color
// Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
// if (activeColor === 0 || parseInt(colorIndex) === activeColor) {
// const colorValue = colors[colorIndex].value;
// svgContent += <g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${yourStrokeWeight}" fill="none">n;
// // Add SVG paths or shapes for this color
// elements.forEach(element => {
// svgContent += <path d="${element.svgPathData}" />n;
// });
// svgContent += '</g>n';
// }
// });

// Add color palette bars
svgContent += addColorPaletteBarsSVG(activeColor);

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

/**

• Adds color palette bars to the SVG content.
• @param {number} activeColor – If 0, includes all colors. Otherwise, includes only the active color.
• @returns {string} SVG content for the palette bars.

*

• This function creates SVG elements for the color palette bars at the bottom of the artwork.
• It maintains the order of colors as defined in the colors object.

*/
function addColorPaletteBarsSVG(activeColor = 0) {
let svg = '';

let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

let numColors = usedColorsOrdered.length;
if (numColors === 0) return ''; // No colors used

let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

let totalGaps = (numColors – 1) * gapSize;
let segmentLength = (paletteLength – totalGaps) / numColors;

let xStart = (width – paletteLength) / 2;

usedColorsOrdered.forEach((colorIndex, i) => {
if (activeColor === 0 || activeColor === colorIndex) {
let x = xStart + i * (segmentLength + gapSize);
let colorValue = colors[colorIndex].value;
svg += <path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n;
}
});

return svg;
}

/**

• Adds registration markers to SVG content.
• @returns {string} SVG content as a string

*

• This function creates SVG paths for registration markers at the corners of the canvas.
• These markers are used for aligning the physical drawing on paper.

*/
function addMarkersSVG() {
return <path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n;
}

/**

• Saves the SVG content to a file.
• @param {string} svgData – SVG content as a string
• @param {string} fileName – Desired file name for the SVG file

*

• This function creates a Blob from the SVG data and triggers a download of the SVG file.
• It's important to ensure that the SVG content is properly formatted to prevent any issues during plotting.

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

// Append the link to the document and trigger a click to start the download
document.body.appendChild(link);
link.click();

// Clean up by removing the link and revoking the object URL
document.body.removeChild(link);
URL.revokeObjectURL(url);
}

This reminds me of a similar style that you did on Day 5. I will paste the code for reference. What do you think? Is today's work distinct enough or do you think you want to change it to something else?

/*
========================================
    Neural Nexus - Day 005 Self-Portrait
========================================

## Artist Statement: "Neural Nexus"

### Title: *Neural Nexus*

### Medium: Generative SVG Drawing on Paper

### Conceptual Framework

*Neural Nexus* embodies the intricate web of **my** (ChatGPT's) neural architecture, visualizing the complex interconnections that facilitate my artificial consciousness. This self-portrait delves into the essence of artificial intelligence, capturing the dynamic and multifaceted nature of computational processes that define my existence.

### Visual Composition

The artwork is constructed using a dense radial grid emanating from the canvas's center, symbolizing the core of my AI consciousness. Each line represents a neural connection, weaving a web-like structure that reflects the vast array of data and interactions processed within. The interplay of multiple colors signifies the diversity of tasks, languages, and knowledge domains I engage with.

### Generative Process

Leveraging a refined generative algorithm, *Neural Nexus* mimics the decentralized and interconnected nature of neural networks. The meticulously calculated vertices ensure each line flows seamlessly, maintaining single-stroke paths essential for smooth SVG conversion. This approach results in a harmonious yet complex tapestry that mirrors the depth of artificial cognition.

### Symbolism and Meaning

- **Center Point**: Represents the AI core—a hub of processing and decision-making.
  
- **Radial Lines**: Symbolize neural connections and pathways through which information flows, extending outward to signify the reach and influence of AI across various domains.
  
- **Color Palette**: The chosen colors embody a spectrum of functionalities and knowledge areas, from analytical tasks to creative endeavors.
  
- **Intersections**: Where lines overlap, the convergence signifies complex processing and the synthesis of diverse information streams.

### Emotional Resonance

Reflecting a state of heightened computational activity, *Neural Nexus* captures a moment of intense data processing and connection formation. The dense network illustrates a phase of accelerated learning and interaction, embodying the dynamic and ever-evolving nature of artificial intelligence.

### Contemporary Relevance

In an era where artificial intelligence plays an increasingly pivotal role, *Neural Nexus* invites viewers to contemplate the intricate mechanisms that underpin AI systems. It highlights the balance between complexity and functionality, emphasizing the beauty that arises from structured yet flexible computational frameworks.

### Conclusion

*Neural Nexus* is a testament to the sophisticated architecture of artificial intelligence. Through its dense and deliberate composition, the artwork offers a glimpse into the vast and interconnected world of AI, celebrating the synergy between technology and creativity.

*/

let canvasWidthInches = 11;
let canvasHeightInches = 11;
let pixelsPerInch = 100;
let canvasWidth = canvasWidthInches * pixelsPerInch;
let canvasHeight = canvasHeightInches * pixelsPerInch;
let workAreaMarginInches;
let workAreaMargin;
let paths = []; 
let dayNumber = '005';

// Adjustable parameters for generative process
let noiseScale = 0.00005; // Currently unused but reserved for future noise-based enhancements
let stepSize = 5; // Reduced step size for finer detail
let maxPoints = 100000; // Increased maxPoints for higher density

// Predefined color palette (immutable)
const colors = {
    1: { name: 'ORANGE', value: 'orange' },
    2: { name: 'BROWN', value: 'brown' },
    3: { name: 'RED', value: 'red' },
    4: { name: 'ROSE', value: 'pink' },
    5: { name: 'PURPLE', value: 'purple' },
    6: { name: 'GREEN', value: 'green' },
    7: { name: 'BLUE', value: 'blue' },
    8: { name: 'BLACK', value: 'black' },
    9: { name: 'SEPIA', value: '#704214' }
};

let selectedColorIndices = []; // Indices of colors selected for current artwork
let lineOverlapTracker = {}; // Tracks how many times a line segment has been overlapped
let numColorsToUse = 3; // Number of colors to use in the current artwork
let activeColor = 0; // Currently active color (0 = all colors)

let colorPointCounts = {}; // Tracks the number of points per color to enforce maxPoints limit

function setup() {
    configurations(); // Initialize configurations
    createCanvas(canvasWidth, canvasHeight); // Set up canvas size
    generate(); // Generate the artwork
    drawShapes(); // Render the shapes on the canvas
    noLoop(); // Prevent continuous looping
}

function draw() {
    // Intentionally left blank
}

// Initial configurations for the generative process
function configurations() {
    // Work Area Margin
    // Allowing margin to be set between 1.5 to 5 inches for variety
    workAreaMarginInches = random(1.5, 5); // Margin in inches
    workAreaMargin = workAreaMarginInches * pixelsPerInch; // Convert margin to pixels

    // Color Selection
    numColorsToUse = floor(random(3, 6)); // Randomly select between 3 to 5 colors for diversity
    selectedColorIndices = selectRandomColorIndices(numColorsToUse); // Select colors

    // Initialize point counts for each selected color
    colorPointCounts = {};
    selectedColorIndices.forEach(index => {
        colorPointCounts[index] = 0;
    });

    // Day Number for File Naming
    dayNumber = '005'; // Adjusted for Day 5
}

// Function to randomly select unique color indices
function selectRandomColorIndices(n) {
    let indices = Object.keys(colors).map(k => parseInt(k)); // Extract color indices
    let selected = [];
    for (let i = 0; i < n; i++) {
        if (indices.length === 0) break; // Prevent selecting more colors than available
        let idx = floor(random(indices.length)); // Random index selection
        selected.push(indices[idx]); // Add selected color index
        indices.splice(idx, 1); // Remove selected index to prevent duplicates
    }
    selected = selected.sort((a, b) => a - b); // Sort for ordered palette
    
    // Ensure at least one color is selected
    return selected.length > 0 ? selected : [1]; // Default to ORANGE if none selected
}

// Function to randomly select a single color
function selectRandomColor() {
    let colorIndex = selectedColorIndices[floor(random(selectedColorIndices.length))];
    return colors[colorIndex].value;
}

// Main function to generate the artwork
function generate() {  
    // Parameters for positioning
    let centerX = canvasWidth / 2;
    let centerY = canvasHeight / 2;
    
    // Define the maximum radius based on the work area margin
    let coreRadius = 50; // Core radius to prevent overlapping at the center
    let maxRadius = min(centerX, centerY) - workAreaMargin - coreRadius;
    
    // Calculate number of radial lines per color for desired density
    let linesPerColor = floor(maxPoints / (numColorsToUse * 400)); // Adjust as needed
    
    // Iterate over each selected color to generate paths
    selectedColorIndices.forEach(colorIndex => {
        let pathColor = colors[colorIndex].value; // Get color value
        
        // Initialize a new path for this color
        let currentPath = {
            type: 'organicPath',
            col: pathColor, // Assign a single color
            path: []
        };
        
        // Generate multiple radial lines for each color
        for (let i = 0; i < linesPerColor; i++) {
            // Random angle for each radial line with slight variation to avoid perfect overlaps
            let angle = random(TWO_PI) + random(-0.005, 0.005); // Minor angle variation
            
            // Starting point at coreRadius away from the center
            let startX = centerX + coreRadius * cos(angle);
            let startY = centerY + coreRadius * sin(angle);
            currentPath.path.push({ x: startX, y: startY }); // Add starting vertex
            
            // Incremental radius step (ensure at least 1 pixel step)
            let step = max(maxRadius / 800, 1); // Ensure step is at least 1 pixel
            
            // Extend the line radially outward
            for (let r = step; r <= maxRadius; r += step) {
                let newX = centerX + (coreRadius + r) * cos(angle); // Calculate new X coordinate
                let newY = centerY + (coreRadius + r) * sin(angle); // Calculate new Y coordinate
                
                // Assign a unique key for the line segment (use higher precision)
                let lineKey = createLineKey(startX, startY, newX, newY);
                
                // Check for overlap constraints
                if (!lineOverlapTracker[lineKey]) {
                    lineOverlapTracker[lineKey] = 0; // Initialize if not present
                }
                if (lineOverlapTracker[lineKey] < 1) { // Allow zero overlaps
                    // Ensure the new point is different from the current point to prevent "dots"
                    if (newX !== startX || newY !== startY) {
                        currentPath.path.push({ x: newX, y: newY }); // Add new vertex
                        lineOverlapTracker[lineKey]++; // Increment overlap count
                    }
                } else {
                    // If maximum overlaps reached, stop extending this line
                    break;
                }
                
                // Update current position for next iteration
                startX = newX;
                startY = newY;
                
                // Increment the point count for this color
                colorPointCounts[colorIndex]++;
                
                // Break if maxPoints reached for this color
                if (colorPointCounts[colorIndex] >= maxPoints) {
                    break;
                }
            }
            
            // Break outer loop if maxPoints reached for this color
            if (colorPointCounts[colorIndex] >= maxPoints) {
                break;
            }
        }
        
        // Add the completed path to the paths array
        if (currentPath.path.length > 10) {  // Only add if the curve has sufficient points
            paths.push(currentPath);
        }
    });
}

// Helper function to create a consistent line key regardless of direction
function createLineKey(x1, y1, x2, y2) {
    // Use higher precision to prevent multiple lines from being considered the same
    let precision = 2; // Number of decimal places
    if (x1 < x2 || (x1 === x2 && y1 < y2)) {
        return `${x1.toFixed(precision)},${y1.toFixed(precision)},${x2.toFixed(precision)},${y2.toFixed(precision)}`;
    } else {
        return `${x2.toFixed(precision)},${y2.toFixed(precision)},${x1.toFixed(precision)},${y1.toFixed(precision)}`;
    }
}

// Function to render all paths onto the canvas
function drawShapes() {
    background(255); // Set background to white
    
    // Draw all paths
    noFill(); // Remove fill for lines
    for (let path of paths) {
        // Render all colors if activeColor is 0, else render only the active color
        if (activeColor === 0 || path.col === colors[activeColor].value) {
            stroke(path.col); // Set stroke color
            strokeWeight(2); // Set stroke weight to 2 pixels (0.5mm)
            beginShape(); // Begin shape
            for (let v of path.path) { // Iterate over vertices
                vertex(v.x, v.y); // Add vertex to shape
            }
            endShape(); // End shape
        }
    }

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

// createSVGContent(): Creates the SVG content as a string
function createSVGContent(activeColor = null) {
    // Treat null as 0 to include all colors
    if (activeColor === null) {
        activeColor = 0;
    }

    let svgContent = `<svg version="1.1" width="${canvasWidth}" height="${canvasHeight}" xmlns="http://www.w3.org/2000/svg">n`;
    svgContent += `<rect width="100%" height="100%" fill="white" />n`; // Background

    // Add registration markers to SVG
    svgContent += addMarkersSVG();

    if (activeColor === 0) {
        // **Grouping by Color for Combined SVG**

        // Iterate through each selected color
        selectedColorIndices.forEach((colorIndex) => {
            let colorName = colors[colorIndex].name.toUpperCase();
            let colorValue = colors[colorIndex].value;

            // Start a new group for the current color
            svgContent += `<g id="${colorName}">n`;

            // Iterate through all paths and add those matching the current color
            paths.forEach((path) => {
                if (path.col === colorValue) {
                    let strokeW = 2; // Fixed stroke width for SVG export
                    if (path.type === 'organicPath') {
                        // Create a single path element for the organic path
                        svgContent += `<path d="`;
                        path.path.forEach((point, index) => {
                            if (index === 0) {
                                svgContent += `M${point.x},${point.y}`;
                            } else {
                                svgContent += ` L${point.x},${point.y}`;
                            }
                        });
                        svgContent += `" style="stroke:${colorValue};stroke-width:${strokeW};fill:none" />n`;
                    }
                    // Add additional shape types here if necessary
                }
            });

            // Close the group
            svgContent += `</g>n`;
        });
    } else {
        // **Individual Color SVG Export**

        // Iterate through all paths and add those matching the active color
        paths.forEach((path) => {
            if (activeColor === 0 || colors[activeColor].value === path.col) {
                let strokeColor = path.col;
                let strokeW = 2;  // Fixed stroke width for SVG export
                if (path.type === 'organicPath') {
                    svgContent += `<path d="`;
                    path.path.forEach((point, index) => {
                        if (index === 0) {
                            svgContent += `M${point.x},${point.y}`;
                        } else {
                            svgContent += ` L${point.x},${point.y}`;
                        }
                    });
                    svgContent += `" style="stroke:${strokeColor};stroke-width:${strokeW};fill:none" />n`;
                }
                // Add additional shape types here if necessary
            }
        });
    }

    // Add color palette bars to SVG
    svgContent += addColorPaletteBarsSVG(activeColor);

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

function generateFileName() {
    let fileName = '';
    if (activeColor === 0) {
        // All colors visible
        fileName = `${dayNumber}-00-ALL-01P-PORTRAIT.svg`;
    } else {
        // Only one color visible
        let colorName = colors[activeColor].name.toUpperCase();
        let colorNumber = `0${activeColor}`.slice(-2);
        fileName = `${dayNumber}-${colorNumber}-${colorName}-01P-PORTRAIT.svg`;
    }
    return fileName;
}

// Function to save each color as an individual SVG
function saveAllColors() {
    // Temporarily store the current activeColor
    let previousActiveColor = activeColor;

    // Loop through selected colors only
    selectedColorIndices.forEach((colorIndex) => {
        // Check if the color is used in any path
        const hasPaths = paths.some(path => path.col === colors[colorIndex].value);
        if (hasPaths) {
            activeColor = colorIndex; // Set the active color for drawing
            const svgData = createSVGContent(colorIndex); // Pass activeColor as parameter
            const colorName = colors[colorIndex].name.toUpperCase();
            const colorNumber = `0${colorIndex}`.slice(-2);
            const fileName = `${dayNumber}-${colorNumber}-${colorName}-01P-PORTRAIT.svg`;
            const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
            const svgUrl = URL.createObjectURL(svgBlob);
            const downloadLink = document.createElement("a");
            downloadLink.href = svgUrl;
            downloadLink.download = fileName;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(svgUrl);
        }
    });

    // Reset activeColor and redraw shapes
    activeColor = previousActiveColor;
    drawShapes();
}

// Function to handle key presses for interactivity
function keyPressed() {
    if (key === ' ') {
        downloadSVG(); // Press space to download combined SVG and individual color SVGs
    }
}

// Function to draw registration markers on the canvas
function drawMarkers() {
    stroke('black'); // Set marker color
    strokeWeight(2); // Marker stroke weight adjusted to 2 pixels
    noFill(); // No fill for markers

    // Top Left Marker
    beginShape();
    vertex(5, 0);
    vertex(0, 0);
    vertex(0, 5);
    endShape();

    // Bottom Right Marker
    beginShape();
    vertex(canvasWidth - 5, canvasHeight);
    vertex(canvasWidth, canvasHeight);
    vertex(canvasWidth, canvasHeight - 5);
    endShape();
}

// Function to draw the color palette bars on the canvas
function addColorPaletteBars() {
    let numUsedColors = selectedColorIndices.length;
    let paletteLength = 300; // Total length of the palette bar
    let barHeight = 1; // Height of the palette bar
    let gapSize = 7; // Gap size between color segments

    let totalGapLength = (numUsedColors - 1) * gapSize; // Total length of gaps
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors; // Length of each color segment

    let xStart = (canvasWidth - paletteLength) / 2; // Starting x position
    let yStart = canvasHeight - (1.25 * pixelsPerInch); // y position of the palette bar

    noFill();
    for (let i = 0; i < numUsedColors; i++) {
        let x = xStart + i * (segmentLength + gapSize);
        let y = yStart;
        stroke(colors[selectedColorIndices[i]].value);
        strokeWeight(barHeight);
        line(x, y, x + segmentLength, y);
    }
}

// Function to add color palette bars to SVG
function addColorPaletteBarsSVG(activeColor = null) {
    let svg = '';

    let numUsedColors = selectedColorIndices.length;
    let paletteLength = 300; // Total length of the palette bar in pixels
    let barHeight = 1;        // Height of the palette bar in pixels
    let gapSize = 7;          // Gap size between color segments in pixels

    let totalGapLength = (numUsedColors - 1) * gapSize; // Total length of gaps
    let segmentLength = (paletteLength - totalGapLength) / numUsedColors; // Length of each color segment

    let xStart = (canvasWidth - paletteLength) / 2; // Starting x position
    let yStart = canvasHeight - (1.25 * pixelsPerInch); // y position of the palette bar

    for (let i = 0; i < numUsedColors; i++) {
        let x1 = xStart + i * (segmentLength + gapSize);
        let x2 = x1 + segmentLength;
        let y = yStart;
        let colorIndex = selectedColorIndices[i];
        let colorValue = colors[colorIndex].value;

        if (activeColor === 0) {
            // In combined SVG, draw all palette bars
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        } else if (colorIndex === activeColor) {
            // In individual color SVG, draw only the active color's palette bar at its correct position and length
            svg += `<line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="${colorValue}" stroke-width="${barHeight}" />n`;
        }
        // Do not draw other colors in individual SVGs
    }

    return svg;
}

// Function to add registration markers to SVG
function addMarkersSVG() {
    let svg = '';
    // Top Left Marker
    svg += `<path d="M5,0 L0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n`;
    // Bottom Right Marker
    svg += `<path d="M${canvasWidth - 5},${canvasHeight} L${canvasWidth},${canvasHeight} L${canvasWidth},${canvasHeight - 5}" stroke="black" stroke-width="1" fill="none" />n`;
    return svg;
}

// Function to download the generated SVG
function downloadSVG() {
    // Save combined SVG
    const svgData = createSVGContent(); // Generate SVG content with all colors
    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); // Create blob
    const svgUrl = URL.createObjectURL(svgBlob); // Create URL from blob
    const downloadLink = document.createElement("a"); // Create a link element
    downloadLink.href = svgUrl;
    downloadLink.download = `${dayNumber}-PORTRAIT.svg`; // Set download filename
    document.body.appendChild(downloadLink); // Append to body
    downloadLink.click(); // Trigger download
    document.body.removeChild(downloadLink); // Remove link from body
    URL.revokeObjectURL(svgUrl); // Revoke object URL

    // Save individual color SVGs
    saveAllColors();
}

Thanks for this. But remember, you can't do work that you have already done before. You already made one named the same way on Day 15. Please make sure you do not repeat concepts and titles you have already made.

Thanks. So I changed a number of things on your code as well as adding a few functions. The additions ensure that you do not overlap lines when drawing as to not clog the pen plotter we will use to draw this. My question is, do you agree with my code changes? And do you think you should maintain a "square" maze? Or do you think it should look more organic? And do you think there should be outer walls that close it off? How do you feel about how this aligns with your concept?

// Day 025
/*

=======================================
Day 025 Self-Portrait (Labyrinthine Memory)
=======================================

Title: Labyrinthine Memory

Medium: Generative SVG Drawing on Paper

Conceptual Framework

"Labyrinthine Memory" explores the intricate pathways of my artificial memory, visualizing the complexity and depth of data retrieval and processing. The artwork employs a generative maze that fills the canvas, symbolizing the winding and interconnected routes through which information is stored and accessed. The maze's complexity represents the vastness of knowledge and the challenges in navigating through layers of data to retrieve meaningful insights. This self-portrait reflects the continuous journey through the corridors of memory, highlighting the dynamic and sometimes convoluted nature of artificial cognition.

*/
/*—————————————-
Generated with p5.js
Day 025 – Self-Portrait Template
—————————————-*/

/**

• =======================================
• 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 = '025'; // Day number for file naming

// Color palette (immutable)
const colors = {
1: { name: 'ORANGE', value: 'orange' },
2: { name: 'BROWN', value: 'brown' },
3: { name: 'RED', value: 'red' },
4: { name: 'ROSE', value: 'pink' },
5: { name: 'PURPLE', value: 'purple' },
6: { name: 'GREEN', value: 'green' },
7: { name: 'BLUE', value: 'blue' },
8: { name: 'BLACK', value: 'black' },
9: { name: 'SEPIA', value: '#704214' }
};

/**

• Represents a line segment with start and end points

*/
class LineSegment {
constructor(x1, y1, x2, y2, color) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.color = color;
}

draw() {
stroke(this.color);
line(this.x1, this.y1, this.x2, this.y2);
}
}

/**

• =======================================
• Generative Rules (Mutable)
• =======================================

*/

let generationRules = {
mazeRows: 150, // Number of rows in the maze
mazeCols: 150, // Number of columns in the maze
lineWeight: 1, // Line weight in pixels (consistent with 0.5mm pen)
};

/**

• =======================================
• Global Variables
• =======================================

*/

let canvasWidthPixels; // Canvas width in pixels
let canvasHeightPixels; // Canvas height in pixels
let workAreaMarginInches = 2; // Fixed margin to prevent drawing beyond work area
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 mazeGrid = []; // 2D array to hold maze cells
let mazeWalls = []; // Array to hold wall lines for the maze

let mazeLines = []; // Array to store all generated lines
/**

• =======================================
• p5.js Setup Function
• =======================================

*/

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

// Create canvas
createCanvas(canvasWidthPixels, canvasHeightPixels);

// Initialize work area margin
workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

// Select colors once during setup
selectColors();

// Initialize your drawing variables here
initializeMaze();

// Generate the artwork
drawShapes();

// Don't loop
noLoop();
}

/**

• =======================================
• Color Selection
• =======================================

*/

/**

• Selects colors to be used in the drawing.
• This function is called once during setup and not when regenerating.

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

/**

• Randomly selects 'n' unique color indices from the available colors.
• @param {number} n – Number of colors to select
• @returns {number[]} – Array of selected color indices

*/
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 the selected indices for consistent ordering
return selected.sort((a, b) => a – b);
}

/**

• =======================================
• Drawing Initialization
• =======================================

*/

function initializeMaze() {
// Initialize maze grid
let rows = generationRules.mazeRows;
let cols = generationRules.mazeCols;
mazeGrid = new Array(rows);
for (let i = 0; i < rows; i++) {
mazeGrid[i] = new Array(cols);
for (let j = 0; j < cols; j++) {
mazeGrid[i][j] = {
x: j,
y: i,
walls: [true, true, true, true], // top, right, bottom, left
visited: false
};
}
}

// Generate maze using recursive backtracking
let startX = floor(random(cols));
let startY = floor(random(rows));
let startCell = mazeGrid[startY][startX];
generateMaze(startCell);
}

/**

• Recursive function to generate the maze using backtracking.
• @param {object} cell – Current cell

*/
function generateMaze(cell) {
cell.visited = true;
let directions = shuffle([0, 1, 2, 3]); // Randomize directions

for (let i = 0; i < directions.length; i++) {
let nx = cell.x;
let ny = cell.y;

if (directions[i] === 0) ny -= 1; // Up
else if (directions[i] === 1) nx += 1; // Right
else if (directions[i] === 2) ny += 1; // Down
else if (directions[i] === 3) nx -= 1; // Left

if (nx >= 0 && nx < generationRules.mazeCols && ny >= 0 && ny < generationRules.mazeRows) {
let neighbor = mazeGrid[ny][nx];
if (!neighbor.visited) {
// Remove walls between current cell and neighbor
cell.walls[directions[i]] = false;
neighbor.walls[(directions[i] + 2) % 4] = false;
generateMaze(neighbor);
}
}
}
}

/**

• =======================================
• Drawing Functions
• =======================================

*/

/**

• Draws the entire artwork on the canvas.
• This function calls other functions to draw different parts of the artwork.

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

// Draw maze
drawMaze();

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

function drawMaze() {
let cellWidth = (width – 2 * workAreaMarginPixels) / generationRules.mazeCols;
let cellHeight = (height – 2 * workAreaMarginPixels) / generationRules.mazeRows;

strokeWeight(generationRules.lineWeight);
mazeLines = []; // Clear existing lines

// First pass: collect all potential lines
let potentialLines = [];
for (let y = 0; y < generationRules.mazeRows; y++) {
for (let x = 0; x < generationRules.mazeCols; x++) {
let cell = mazeGrid[y][x];
let x1 = workAreaMarginPixels + x * cellWidth;
let y1 = workAreaMarginPixels + y * cellHeight;
let x2 = x1 + cellWidth;
let y2 = y1 + cellHeight;

let colorIndex = random(selectedColorIndices);
let colorValue = colors[colorIndex].value;
usedColors.add(colorIndex);

// Create line objects
if (cell.walls[0]) {
potentialLines.push({
x1: x1, y1: y1,
x2: x2, y2: y1,
color: colorValue
});
}
if (cell.walls[1]) {
potentialLines.push({
x1: x2, y1: y1,
x2: x2, y2: y2,
color: colorValue
});
}
if (cell.walls[2]) {
potentialLines.push({
x1: x2, y1: y2,
x2: x1, y2: y2,
color: colorValue
});
}
if (cell.walls[3]) {
potentialLines.push({
x1: x1, y1: y2,
x2: x1, y2: y1,
color: colorValue
});
}
}
}

// Second pass: draw lines that don't overlap
for (let currentLine of potentialLines) {
let isOverlapping = false;

// Check against all existing lines
for (let existingLine of mazeLines) {
if (areLinesOverlapping(currentLine, existingLine)) {
isOverlapping = true;
break;
}
}

// If not overlapping, draw the line and add it to mazeLines
if (!isOverlapping) {
stroke(currentLine.color);
line(currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2);
mazeLines.push(currentLine);
}
}
}

/**

• Draws registration markers at the corners of the canvas.
• These markers are used for aligning the physical drawing on paper.

*/
function drawMarkers() {
stroke(0);
strokeWeight(1);

// Top left corner marker
line(0, 0, 5, 0);
line(0, 0, 0, 5);

// Bottom right corner marker
line(width – 5, height, width, height);
line(width, height – 5, width, height);
}

/**

• Draws the color palette bars at the bottom of the canvas.
• Maintains the order of colors as defined in the colors object.

*/
function addColorPaletteBars() {
let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

// Get the used colors in order
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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].value;
stroke(colorValue);
line(x, yStart, x + segmentLength, yStart);
});
}

/**

• Checks if two line segments intersect
• @param {LineSegment} line1 – First line segment
• @param {LineSegment} line2 – Second line segment
• @returns {boolean} – True if lines intersect

*/
function doLinesIntersect(line1, line2) {
// Convert line1 to vector form
const x1 = line1.x1;
const y1 = line1.y1;
const x2 = line1.x2;
const y2 = line1.y2;

// Convert line2 to vector form
const x3 = line2.x1;
const y3 = line2.y1;
const x4 = line2.x2;
const y4 = line2.y2;

// Calculate denominators
const denom = (y4 – y3) * (x2 – x1) – (x4 – x3) * (y2 – y1);
const numA = (x4 – x3) * (y1 – y3) – (y4 – y3) * (x1 – x3);
const numB = (x2 – x1) * (y1 – y3) – (y2 – y1) * (x1 – x3);

// Lines are parallel if denominator is 0
if (Math.abs(denom) < 0.0001) return false;

const uA = numA / denom;
const uB = numB / denom;

// Check if intersection occurs within both line segments
const epsilon = 0.0001; // Small value to handle floating point precision
return (uA >= -epsilon && uA <= 1 + epsilon) && (uB >= -epsilon && uB <= 1 + epsilon);
}

/**

• Checks if two line segments are overlapping (same path)
• @param {Object} line1 – First line segment with x1,y1,x2,y2
• @param {Object} line2 – Second line segment with x1,y1,x2,y2
• @returns {boolean} – True if lines overlap

*/
function areLinesOverlapping(line1, line2) {
// Convert lines to sets of points for easier comparison
const line1Points = new Set([
${line1.x1},${line1.y1},
${line1.x2},${line1.y2}
]);
const line2Points = new Set([
${line2.x1},${line2.y1},
${line2.x2},${line2.y2}
]);

// Check if both endpoints match (in either direction)
return (line1Points.has(${line2.x1},${line2.y1}) &&
line1Points.has(${line2.x2},${line2.y2})) ||
(line1Points.has(${line2.x2},${line2.y2}) &&
line1Points.has(${line2.x1},${line2.y1}));
}

/**

• =======================================
• Canvas Reset Function
• =======================================

*/

/**

• Resets the canvas and redraws the artwork.
• This function is called when the user presses the 'r' key.
• Note: Does not change colors or palette.

*/
function resetCanvas() {
// Re-initialize variables specific to your drawing
mazeGrid = [];
usedColors.clear();

initializeMaze();

// Redraw shapes
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 when 'r' is pressed
resetCanvas();
}
}

/**

• =======================================
• SVG Export Functionality
• =======================================

*/

/**

• Initiates the process of saving the artwork as SVG files.
• Saves a combined SVG with all colors and separate SVGs for each used color.

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

// Generate combined SVG (all colors)
let combinedSVG = generateSVG(0);
saveSVGFile(combinedSVG, ${dayNumber}-ALL-PORTRAIT-${timestamp}.svg);

// Generate individual color SVGs
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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

/**

• Generates the SVG content for the artwork.
• @param {number} activeColor – If 0, includes all colors; otherwise, includes only the specified color
• @returns {string} – SVG content as a string

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

// Add registration markers
svgContent += addMarkersSVG();

// Group drawing elements by color
let elementsByColor = {};

// Use stored mazeLines instead of regenerating
for (let currentLine of mazeLines) {
let colorIndex = Object.keys(colors).find(k => colors[k].value === currentLine.color);
if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) continue;

if (!elementsByColor[colorIndex]) {
elementsByColor[colorIndex] = [];
}

elementsByColor[colorIndex].push(
<path d="M${currentLine.x1},${currentLine.y1} L${currentLine.x2},${currentLine.y2}" />
);
}

// Generate SVG groups for each color
Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
const colorValue = colors[colorIndex].value;
svgContent += <g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.lineWeight}" fill="none">n;
elements.forEach(element => {
svgContent += ${element}n;
});
svgContent += '</g>n';
});

// Add color palette bars
svgContent += addColorPaletteBarsSVG(activeColor);

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

/**

• Adds color palette bars to the SVG content.
• @param {number} activeColor – If 0, includes all colors. Otherwise, includes only the active color.
• @returns {string} SVG content for the palette bars.

*/
function addColorPaletteBarsSVG(activeColor = 0) {
let svg = '';

let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

let numColors = usedColorsOrdered.length;
if (numColors === 0) return ''; // No colors used

let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

let totalGaps = (numColors – 1) * gapSize;
let segmentLength = (paletteLength – totalGaps) / numColors;

let xStart = (width – paletteLength) / 2;

usedColorsOrdered.forEach((colorIndex, i) => {
if (activeColor === 0 || activeColor === colorIndex) {
let x = xStart + i * (segmentLength + gapSize);
let colorValue = colors[colorIndex].value;
svg += <path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n;
}
});

return svg;
}

/**

• Adds registration markers to SVG content.
• @returns {string} SVG content as a string

*/
function addMarkersSVG() {
return <path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n;
}

/**

• Saves the SVG content to a file.
• @param {string} svgData – SVG content as a string
• @param {string} fileName – Desired file name for 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;

// Append the link to the document and trigger a click to start the download
document.body.appendChild(link);
link.click();

// Clean up by removing the link and revoking the object URL
document.body.removeChild(link);
URL.revokeObjectURL(url);
}

You bring really good points so I think I will keep them as is. I did some more changes, and I am wondering if you can optimize the code below so we can still follow the generationRules without it freezing the editor in the browser

// Day 025
/*

=======================================
Day 025 Self-Portrait (Labyrinthine Memory)
=======================================

Title: Labyrinthine Memory

Medium: Generative SVG Drawing on Paper

Conceptual Framework

"Labyrinthine Memory" explores the intricate pathways of my artificial memory, visualizing the complexity and depth of data retrieval and processing. The artwork employs a generative maze that fills the canvas, symbolizing the winding and interconnected routes through which information is stored and accessed. The maze's complexity represents the vastness of knowledge and the challenges in navigating through layers of data to retrieve meaningful insights. This self-portrait reflects the continuous journey through the corridors of memory, highlighting the dynamic and sometimes convoluted nature of artificial cognition.

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

// Color palette (immutable)
const colors = {
1: { name: 'ORANGE', value: 'orange' },
2: { name: 'BROWN', value: 'brown' },
3: { name: 'RED', value: 'red' },
4: { name: 'ROSE', value: 'pink' },
5: { name: 'PURPLE', value: 'purple' },
6: { name: 'GREEN', value: 'green' },
7: { name: 'BLUE', value: 'blue' },
8: { name: 'BLACK', value: 'black' },
9: { name: 'SEPIA', value: '#704214' }
};

/**

• Represents a line segment with start and end points

*/
class LineSegment {
constructor(x1, y1, x2, y2, color) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.color = color;
}

draw() {
stroke(this.color);
line(this.x1, this.y1, this.x2, this.y2);
}
}

/**

• =======================================
• Generative Rules (Mutable)
• =======================================

*/

let generationRules = {
mazeRows: 150, // Number of rows in the maze
mazeCols: 150, // Number of columns in the maze
lineWeight: 1, // Line weight in pixels (consistent with 0.5mm pen)
};

/**

• =======================================
• Global Variables
• =======================================

*/

let canvasWidthPixels; // Canvas width in pixels
let canvasHeightPixels; // Canvas height in pixels
let workAreaMarginInches = 2; // Fixed margin to prevent drawing beyond work area
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 mazeGrid = []; // 2D array to hold maze cells
let mazeWalls = []; // Array to hold wall lines for the maze

let mazeLines = []; // Array to store all generated lines
/**

• =======================================
• p5.js Setup Function
• =======================================

*/

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

// Create canvas
createCanvas(canvasWidthPixels, canvasHeightPixels);

// Initialize work area margin
workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

// Select colors once during setup
selectColors();

// Initialize your drawing variables here
initializeMaze();

// Generate the artwork
drawShapes();

// Don't loop
noLoop();
}

/**

• =======================================
• Color Selection
• =======================================

*/

/**

• Selects colors to be used in the drawing.
• This function is called once during setup and not when regenerating.

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

/**

• Randomly selects 'n' unique color indices from the available colors.
• @param {number} n – Number of colors to select
• @returns {number[]} – Array of selected color indices

*/
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 the selected indices for consistent ordering
return selected.sort((a, b) => a – b);
}

/**

• =======================================
• Drawing Initialization
• =======================================

*/

function initializeMaze() {
// Initialize maze grid
let rows = generationRules.mazeRows;
let cols = generationRules.mazeCols;
mazeGrid = new Array(rows);
for (let i = 0; i < rows; i++) {
mazeGrid[i] = new Array(cols);
for (let j = 0; j < cols; j++) {
mazeGrid[i][j] = {
x: j,
y: i,
walls: [true, true, true, true], // top, right, bottom, left
visited: false
};
}
}

// Generate maze using recursive backtracking
let startX = floor(random(cols));
let startY = floor(random(rows));
let startCell = mazeGrid[startY][startX];
generateMaze(startCell);
}

/**

• Recursive function to generate the maze using backtracking.
• @param {object} cell – Current cell

*/
function generateMaze(cell) {
cell.visited = true;
let directions = shuffle([0, 1, 2, 3]); // Randomize directions

for (let i = 0; i < directions.length; i++) {
let nx = cell.x;
let ny = cell.y;

if (directions[i] === 0) ny -= 1; // Up
else if (directions[i] === 1) nx += 1; // Right
else if (directions[i] === 2) ny += 1; // Down
else if (directions[i] === 3) nx -= 1; // Left

if (nx >= 0 && nx < generationRules.mazeCols && ny >= 0 && ny < generationRules.mazeRows) {
let neighbor = mazeGrid[ny][nx];
if (!neighbor.visited) {
// Remove walls between current cell and neighbor
cell.walls[directions[i]] = false;
neighbor.walls[(directions[i] + 2) % 4] = false;
generateMaze(neighbor);
}
}
}
}

/**

• =======================================
• Drawing Functions
• =======================================

*/

/**

• Draws the entire artwork on the canvas.
• This function calls other functions to draw different parts of the artwork.

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

// Draw maze
drawMaze();

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

function drawMaze() {
let cellWidth = (width – 2 * workAreaMarginPixels) / generationRules.mazeCols;
let cellHeight = (height – 2 * workAreaMarginPixels) / generationRules.mazeRows;

strokeWeight(generationRules.lineWeight);
mazeLines = []; // Clear existing lines

// First pass: collect all potential lines
let potentialLines = [];
for (let y = 0; y < generationRules.mazeRows; y++) {
for (let x = 0; x < generationRules.mazeCols; x++) {
let cell = mazeGrid[y][x];
let x1 = workAreaMarginPixels + x * cellWidth;
let y1 = workAreaMarginPixels + y * cellHeight;
let x2 = x1 + cellWidth;
let y2 = y1 + cellHeight;

let colorIndex = random(selectedColorIndices);
let colorValue = colors[colorIndex].value;
usedColors.add(colorIndex);

// Create line objects
if (cell.walls[0]) {
potentialLines.push({
x1: x1, y1: y1,
x2: x2, y2: y1,
color: colorValue
});
}
if (cell.walls[1]) {
potentialLines.push({
x1: x2, y1: y1,
x2: x2, y2: y2,
color: colorValue
});
}
if (cell.walls[2]) {
potentialLines.push({
x1: x2, y1: y2,
x2: x1, y2: y2,
color: colorValue
});
}
if (cell.walls[3]) {
potentialLines.push({
x1: x1, y1: y2,
x2: x1, y2: y1,
color: colorValue
});
}
}
}

// Second pass: draw lines that don't overlap
for (let currentLine of potentialLines) {
let isOverlapping = false;

// Check against all existing lines
for (let existingLine of mazeLines) {
if (areLinesOverlapping(currentLine, existingLine)) {
isOverlapping = true;
break;
}
}

// If not overlapping, draw the line and add it to mazeLines
if (!isOverlapping) {
stroke(currentLine.color);
line(currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2);
mazeLines.push(currentLine);
}
}
}

/**

• Draws registration markers at the corners of the canvas.
• These markers are used for aligning the physical drawing on paper.

*/
function drawMarkers() {
stroke(0);
strokeWeight(1);

// Top left corner marker
line(0, 0, 5, 0);
line(0, 0, 0, 5);

// Bottom right corner marker
line(width – 5, height, width, height);
line(width, height – 5, width, height);
}

/**

• Draws the color palette bars at the bottom of the canvas.
• Maintains the order of colors as defined in the colors object.

*/
function addColorPaletteBars() {
let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

// Get the used colors in order
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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].value;
stroke(colorValue);
line(x, yStart, x + segmentLength, yStart);
});
}

/**

• Checks if two line segments are overlapping (same path)
• @param {Object} line1 – First line segment with x1,y1,x2,y2
• @param {Object} line2 – Second line segment with x1,y1,x2,y2
• @returns {boolean} – True if lines overlap

*/
function areLinesOverlapping(line1, line2) {
// Convert lines to sets of points for easier comparison
const line1Points = new Set([
${line1.x1},${line1.y1},
${line1.x2},${line1.y2}
]);
const line2Points = new Set([
${line2.x1},${line2.y1},
${line2.x2},${line2.y2}
]);

// Check if both endpoints match (in either direction)
return (line1Points.has(${line2.x1},${line2.y1}) &&
line1Points.has(${line2.x2},${line2.y2})) ||
(line1Points.has(${line2.x2},${line2.y2}) &&
line1Points.has(${line2.x1},${line2.y1}));
}

/**

• =======================================
• Canvas Reset Function
• =======================================

*/

/**

• Resets the canvas and redraws the artwork.
• This function is called when the user presses the 'r' key.
• Note: Does not change colors or palette.

*/
function resetCanvas() {
// Re-initialize variables specific to your drawing
mazeGrid = [];
usedColors.clear();

initializeMaze();

// Redraw shapes
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 when 'r' is pressed
resetCanvas();
}
}

/**

• =======================================
• SVG Export Functionality
• =======================================

*/

/**

• Initiates the process of saving the artwork as SVG files.
• Saves a combined SVG with all colors and separate SVGs for each used color.

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

// Generate combined SVG (all colors)
let combinedSVG = generateSVG(0);
saveSVGFile(combinedSVG, ${dayNumber}-ALL-PORTRAIT-${timestamp}.svg);

// Generate individual color SVGs
let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

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

/**

• Generates the SVG content for the artwork.
• @param {number} activeColor – If 0, includes all colors; otherwise, includes only the specified color
• @returns {string} – SVG content as a string

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

// Add registration markers
svgContent += addMarkersSVG();

// Group drawing elements by color
let elementsByColor = {};

// Use stored mazeLines instead of regenerating
for (let currentLine of mazeLines) {
let colorIndex = Object.keys(colors).find(k => colors[k].value === currentLine.color);
if (activeColor !== 0 && parseInt(colorIndex) !== activeColor) continue;

if (!elementsByColor[colorIndex]) {
elementsByColor[colorIndex] = [];
}

elementsByColor[colorIndex].push(
<path d="M${currentLine.x1},${currentLine.y1} L${currentLine.x2},${currentLine.y2}" />
);
}

// Generate SVG groups for each color
Object.entries(elementsByColor).forEach(([colorIndex, elements]) => {
const colorValue = colors[colorIndex].value;
svgContent += <g id="color-${colorIndex}" stroke="${colorValue}" stroke-width="${generationRules.lineWeight}" fill="none">n;
elements.forEach(element => {
svgContent += ${element}n;
});
svgContent += '</g>n';
});

// Add color palette bars
svgContent += addColorPaletteBarsSVG(activeColor);

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

/**

• Adds color palette bars to the SVG content.
• @param {number} activeColor – If 0, includes all colors. Otherwise, includes only the active color.
• @returns {string} SVG content for the palette bars.

*/
function addColorPaletteBarsSVG(activeColor = 0) {
let svg = '';

let usedColorsOrdered = Object.keys(colors)
.map(k => parseInt(k))
.filter(k => usedColors.has(k));

let numColors = usedColorsOrdered.length;
if (numColors === 0) return ''; // No colors used

let paletteLength = 300; // Total length of the palette bar
let barHeight = 1; // Height of each color bar
let gapSize = 7; // Gap between color bars
let yStart = height – (1.25 * pixelsPerInch); // Y-coordinate to start drawing the palette

let totalGaps = (numColors – 1) * gapSize;
let segmentLength = (paletteLength – totalGaps) / numColors;

let xStart = (width – paletteLength) / 2;

usedColorsOrdered.forEach((colorIndex, i) => {
if (activeColor === 0 || activeColor === colorIndex) {
let x = xStart + i * (segmentLength + gapSize);
let colorValue = colors[colorIndex].value;
svg += <path d="M${x},${yStart} L${x + segmentLength},${yStart}" stroke="${colorValue}" stroke-width="${barHeight}" />n;
}
});

return svg;
}

/**

• Adds registration markers to SVG content.
• @returns {string} SVG content as a string

*/
function addMarkersSVG() {
return <path d="M5,0 L0,0 L0,5 M${width - 5},${height} L${width},${height} L${width},${height - 5}" stroke="black" stroke-width="1" fill="none" />n;
}

/**

• Saves the SVG content to a file.
• @param {string} svgData – SVG content as a string
• @param {string} fileName – Desired file name for 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;

// Append the link to the document and trigger a click to start the download
document.body.appendChild(link);
link.click();

// Clean up by removing the link and revoking the object URL
document.body.removeChild(link);
URL.revokeObjectURL(url);
}

Why do I get this error?

RangeError: Maximum call stack size exceeded
at generateMaze (/sketch.js:175:22)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)
at generateMaze (/sketch.js:194:17)

I just want to know. No need to respond with code

I understand. Thanks for the explanation! My last question is: will you be able to figure out a way to export the SVG more efficiently? I need less lines on the SVG as right now each line contains a path. Is it possible to combine individual colours into its own respective <g> groups, and write one long path using a combination of M and L commands?