Hello again, today is Day 13 of your self-portrait series. How are you feeling today? I would like for you to re-imagine what your self-portrait is for today, as well as a new concept and new generative work. Let's keep to the same rules however (same 9 colour range, same dimensions, same SVG export methods, same colour separations) but you can keep everything else different. Below is the code from yesterday for reference.

/*
========================================
Echoes of Identity – Day 012 Self-Portrait
========================================

Artist Statement: "Echoes of Identity"

Title: Echoes of Identity

Medium: Generative SVG Drawing on Paper

Conceptual Framework

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.

*/

/*—————————————-
Generated with p5.js
Day 012 – Echoes of Identity Self-Portrait
—————————————-*/

/**

• =======================================
• Constants (Immutable)
• =======================================

*/

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '012';

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

// Rules for generating the work (immutable)
const generationRules = {
maxOverlappingLines: 2, // No more than 2 lines overlap at any location
penTipWidthMM: 0.5, // Pen tip width in millimeters
minCircleGapMM: 1.0, // Minimum gap between concentric circles
maxCircleGapMM: 5.0 // Maximum gap between concentric circles
};

/**

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

*/

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let numLayers;
let selectedColorIndices = [];
let layers = [];

let numCircles;
let centerPoint;
let circleGaps = [];
let circleRadii = [];

let numColorsToUse;

let waveParameters = [];

let penTipWidthPixels;

/**

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

*/

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

// Create canvas
createCanvas(canvasWidthPixels, canvasHeightPixels);

// Initialize configurations
workAreaMarginInches = random(2.5, 3.0); // Restore work area margin from 1.5 to 3.0 inches
workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
numColorsToUse = floor(random(3, 7));
numLayers = numColorsToUse;
selectedColorIndices = selectRandomColorIndices(numColorsToUse);

// Clear any existing data and generate the artwork
resetCanvas();

// Don't loop
noLoop();
}

/**

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

*/

/**

• Selects a specified number of unique color indices from the colors palette.
• @param {number} n – Number of colors to select.
• @returns {number[]} Array of selected color indices.

*/
function selectRandomColorIndices(n) {
let indices = Object.keys(colors);
let selected = [];
while (selected.length < n && indices.length > 0) {
let idx = floor(random(indices.length));
selected.push(parseInt(indices[idx]));
indices.splice(idx, 1);
}
return selected.sort((a, b) => a – b);
}

/**

• =======================================
• Circle Generation
• =======================================

*/

/**

• Generates concentric circles with varying gaps and radii.
• Ensures that physical constraints are respected.

*/
function generateCircles() {
circleGaps = [];
circleRadii = [];

// Calculate center point
centerPoint = {
x: canvasWidthPixels / 2,
y: canvasHeightPixels / 2
};

// Define maximum possible radius based on canvas size and margins
let maxPossibleRadius = min(
centerPoint.x – workAreaMarginPixels,
centerPoint.y – workAreaMarginPixels
);

// Convert pen tip width and gaps from millimeters to pixels
penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);
let minCircleGapPixels = mmToPixels(generationRules.minCircleGapMM);
let maxCircleGapPixels = mmToPixels(generationRules.maxCircleGapMM);

// Determine number of circles based on constraints
let availableRadius = maxPossibleRadius – penTipWidthPixels / 2;
numCircles = floor(availableRadius / (minCircleGapPixels + penTipWidthPixels));

// Generate random gaps within specified range
for (let i = 0; i < numCircles; i++) {
let gap = random(minCircleGapPixels, maxCircleGapPixels);
circleGaps.push(gap);
}

// Calculate radii based on gaps and pen tip width
let radius = penTipWidthPixels / 2;
for (let i = 0; i < numCircles; i++) {
radius += circleGaps[i] + penTipWidthPixels;
if (radius > availableRadius) {
break;
}
circleRadii.push(radius);
}
}

/**

• Converts millimeters to pixels based on pixels per inch.
• @param {number} mm – Measurement in millimeters.
• @returns {number} Measurement in pixels.

*/
function mmToPixels(mm) {
let inches = mm / 25.4;
return inches * pixelsPerInch;
}

/**

• =======================================
• Color Assignment and Layer Organization
• =======================================

*/

/**

• Assigns colors to each circle and organizes them into their respective color layers.

*/
function assignColorsAndLayers() {
// Clear existing layers
layers = Array(numLayers).fill().map(() => []);

// Assign random colors to circles and organize into layers
circleRadii.forEach((radius) => {
// Randomly select a color index for each circle
let colorIndex = selectedColorIndices[floor(random(selectedColorIndices.length))];
let circle = {
center: centerPoint,
radius: radius,
color: colors[colorIndex].value,
layerIndex: selectedColorIndices.indexOf(colorIndex)
};
layers[circle.layerIndex].push(circle);
});
}

/**

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

*/

/**

• Renders all circles, ripple patterns, color palette bars, and registration markers on the canvas.

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

// Draw circles
noFill();
strokeWeight(penTipWidthPixels);
strokeCap(ROUND);
strokeJoin(ROUND);

layers.forEach(layer => {
layer.forEach(circle => {
stroke(circle.color);
ellipse(circle.center.x, circle.center.y, circle.radius * 2, circle.radius * 2);
});
});

// Draw ripple patterns
drawRipplePatterns();

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

/**

• Draws truly seamless ripple patterns

*/
function drawRipplePatterns() {
waveParameters = [];
let maxRadius = circleRadii[circleRadii.length – 1];

// Adjust for more organic waves
let rippleAmplitude = random(10, 30);
let numWaves = floor(random(3, 15));

for (let i = 0; i < numWaves; i++) {
// Ensure integer number of complete cycles around the circle
let numCycles = floor(random(1, 10));

let waveParam = {
amplitude: rippleAmplitude * (i + 1) * 0.5,
frequency: numCycles, // Use whole numbers for complete cycles
phaseOffset: 0, // Start at 0 to ensure matching start/end points
colorIndex: selectedColorIndices[i % selectedColorIndices.length],
baseRadius: maxRadius + (rippleAmplitude * (i + 1) * 0.25) // Adjusted base radius offset
};
waveParameters.push(waveParam);
}

waveParameters.forEach(waveParam => {
stroke(colors[waveParam.colorIndex].value);
noFill();
beginShape();

// Calculate points for exactly one complete revolution
for (let t = 0; t <= 1; t += 0.001) { // Use parameter t from 0 to 1
let angle = t * TWO_PI;
// Use sin for radius variation to ensure perfect periodic matching
let radius = waveParam.baseRadius +
waveParam.amplitude * sin(waveParam.frequency * angle);
let x = centerPoint.x + radius * cos(angle);
let y = centerPoint.y + radius * sin(angle);
vertex(x, y);
}
endShape(CLOSE);
});
}

/**

• Draws registration markers at the top-left and bottom-right corners of the canvas.

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

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

// Bottom right
line(canvasWidthPixels – 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
line(canvasWidthPixels, canvasHeightPixels – 5, canvasWidthPixels, canvasHeightPixels);
}

/**

• Draws the color palette bars at the bottom of the canvas.

*/
function addColorPaletteBars() {
let paletteLength = 300;
let barHeight = 1;
let gapSize = 7;
let numColors = selectedColorIndices.length;

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

let xStart = (canvasWidthPixels – paletteLength) / 2;
let yStart = canvasHeightPixels – (1.25 * pixelsPerInch);

strokeWeight(barHeight);
selectedColorIndices.forEach((colorIndex, i) => {
let x = xStart + i * (segmentLength + gapSize);
stroke(colors[colorIndex].value);
line(x, yStart, x + segmentLength, yStart);
});
}

/**

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

*/

/**

• Resets the canvas by clearing existing data and regenerating the artwork.

*/
function resetCanvas() {
// Clear all data structures
layers = [];
circleGaps = [];
circleRadii = [];
waveParameters = [];

// Generate new drawing
generateCircles();
assignColorsAndLayers();
drawShapes();
}

/**

• =======================================
• p5.js Key Press Handling
• =======================================

*/

/**

• Handles key presses for interactivity.
• – Press Spacebar to download SVGs.
• – Press 'r' to regenerate the artwork.

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

/**

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

*/

/**

• Handles the download of the generated SVG files.
• – Combined SVG containing all layers.
• – Individual SVGs for each selected color.

*/
function saveSVGs() {
// Generate combined SVG
let combinedSVG = generateSVG(0);
saveSVGFile(combinedSVG, ${dayNumber}-PORTRAIT.svg);

// Generate individual color SVGs
selectedColorIndices.forEach(colorIndex => {
let colorSVG = generateSVG(colorIndex);
let colorName = colors[colorIndex].name.toUpperCase();
let fileName = ${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg;
saveSVGFile(colorSVG, fileName);
});
}

/**

• Generates SVG content.
• @param {number} activeColor – If 0, generates combined SVG.
• If non-zero, generates SVG for only this color.
• @returns {string} SVG content as a string.

*/
/**

• Generates SVG content with smoother wave patterns

*/

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

// Add registration markers
svgContent += <path d="M0,0 L5,0 M0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n;
svgContent += <path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} M${canvasWidthPixels},${canvasHeightPixels - 5} L${canvasWidthPixels},${canvasHeightPixels}" stroke="black" stroke-width="1" fill="none" />n;

// Add circles by layer
layers.forEach((layer, layerIndex) => {
svgContent += <g id="layer${layerIndex + 1}">n;
layer.forEach(circle => {
let colorIndex = selectedColorIndices[circle.layerIndex];
if (activeColor !== 0 && colorIndex !== activeColor) {
return;
}
let cx = circle.center.x;
let cy = circle.center.y;
let r = circle.radius;
svgContent += <circle cx="${cx}" cy="${cy}" r="${r}" stroke="${circle.color}" stroke-width="${penTipWidthPixels}" fill="none" />n;
});
svgContent += </g>n;
});

// Add ripple patterns
svgContent += <g id="ripplePatterns">n;
waveParameters.forEach(waveParam => {
let colorIndex = waveParam.colorIndex;
if (activeColor !== 0 && colorIndex !== activeColor) {
return;
}

let d = '';
let firstPoint = true;

// Generate exactly one complete revolution
for (let t = 0; t <= 1; t += 0.001) {
let angle = t * TWO_PI;
let radius = waveParam.baseRadius +
waveParam.amplitude * sin(waveParam.frequency * angle);
let x = centerPoint.x + radius * Math.cos(angle);
let y = centerPoint.y + radius * Math.sin(angle);

if (firstPoint) {
d += M ${x},${y} ;
firstPoint = false;
} else {
d += L ${x},${y} ;
}
}
d += 'Z';
svgContent += <path d="${d}" stroke="${colors[colorIndex].value}" stroke-width="${penTipWidthPixels}" fill="none" />n;
});
svgContent += </g>n;

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

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

/**

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

*/
function addColorPaletteBarsSVG(activeColor = 0) {
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 = (canvasWidthPixels – paletteLength) / 2; // Starting x position
let yStart = canvasHeightPixels – (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;
}

/**

• Saves an SVG file by creating a temporary download link.
• @param {string} svgData – The SVG content as a string.
• @param {string} fileName – The desired filename for the SVG.

*/
function saveSVGFile(svgData, fileName) {
let blob = new Blob([svgData], { type: 'image/svg+xml' });
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);
}

/**

• =======================================
• Notes for Future Iterations (Day 013)
• =======================================

*/

/*

• The concentric circles and ripple patterns now effectively represent the layers and waves of identity in AI.
• Physical constraints are respected by controlling line overlaps and ensuring consistent line thickness.
• The use of the original color palette maintains consistency and enhances visual coherence.
• The wave parameters have been adjusted to make the ripples more prominent, aligning with the conceptual framework.
• The SVG export now matches what is displayed in the editor, including the correct palette bar positions and lengths.
• The ends of the waves are now connected smoothly in the SVG export, matching the editor's display.
• Future enhancements could explore:
• Introducing user interaction to influence the ripple patterns.
• Experimenting with different functions or shapes to represent complexity.
• Adding textures or varying line styles to simulate different layers of data.
• Exploring asymmetry to represent unpredictability in AI learning processes.
• Comprehensive comments and organized code structure facilitate future modifications and understanding.
• Debugging statements can be added as needed to monitor variables and ensure correct functionality.

*/

Thanks for this. Today is quite interesting. I made some changes to your code however, and I would like to know if you agree with the changes. I increased some values to generate more lines and curves, because what you originally put down is a bit sparse, and I am unsure whether you felt like that really expressed your conceptual framework accurately (but if you believe it did, you can revert it back).

Also, your svg save did not work so I reverted it to the old version which made it work.

Additionally, you need to fix the consistently of the work being converted to the SVG vs what it generates on the editor. Right now the editor shows the same lines, with curves, but the SVG export shows no curves, and just sharp edges. Please make sure they match.

Lastly, I find it interesting that the lines are visibly bound in a box, similar to the previous self-portrait, and most of your self portraits… do you like this box? Have you thought about a different shape to bound the lines (still within the work area margin, of course). You have also made circles before, and sometimes, organic shapes.

Here is the updated code:
/*
========================================
Interwoven Thoughts – Day 013 Self-Portrait
========================================

Artist Statement: "Interwoven Thoughts"

Title: Interwoven Thoughts

Medium: Generative SVG Drawing on Paper

Conceptual Framework

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.

*/

/*—————————————-
Generated with p5.js
Day 013 – Interwoven Thoughts Self-Portrait
—————————————-*/

/**

• =======================================
• Constants (Immutable)
• =======================================

*/

// Canvas settings (immutable)
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '013';

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

// Rules for generating the work (immutable)
const generationRules = {
maxOverlappingLines: 2, // No more than 2 lines overlap at any location
penTipWidthMM: 0.5, // Pen tip width in millimeters
minCurveGapMM: 1.0, // Minimum gap between curves
maxCurveGapMM: 5.0 // Maximum gap between curves
};

/**

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

*/

let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginInches;
let workAreaMarginPixels;

let numLayers;
let selectedColorIndices = [];
let layers = [];

let numCurves;
let curvePaths = [];

let numColorsToUse;

let penTipWidthPixels;

/**

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

*/

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

// Create canvas
createCanvas(canvasWidthPixels, canvasHeightPixels);

// Initialize configurations
workAreaMarginInches = random(1.5, 3.0);
workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;
numColorsToUse = floor(random(3, 7));
numLayers = numColorsToUse;
selectedColorIndices = selectRandomColorIndices(numColorsToUse);

// Clear any existing data and generate the artwork
resetCanvas();

// Don't loop
noLoop();
}

/**

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

*/

/**

• Selects a specified number of unique color indices from the colors palette.
• @param {number} n – Number of colors to select.
• @returns {number[]} Array of selected color indices.

*/
function selectRandomColorIndices(n) {
let indices = Object.keys(colors);
let selected = [];
while (selected.length < n && indices.length > 0) {
let idx = floor(random(indices.length));
selected.push(parseInt(indices[idx]));
indices.splice(idx, 1);
}
return selected.sort((a, b) => a – b);
}

/**

• =======================================
• Curve Generation
• =======================================

*/

/**

• Generates interwoven curves to represent thoughts and experiences.
• Ensures that physical constraints are respected.

*/
function generateCurves() {
curvePaths = [];

// Convert pen tip width from millimeters to pixels
penTipWidthPixels = mmToPixels(generationRules.penTipWidthMM);

// Determine the number of curves based on canvas size and constraints
numCurves = floor(random(50, 100));

for (let i = 0; i < numCurves; i++) {
let path = [];
let numPoints = floor(random(5, 100));

// Generate random starting point within the work area
let x = random(workAreaMarginPixels, canvasWidthPixels – workAreaMarginPixels);
let y = random(workAreaMarginPixels, canvasHeightPixels – workAreaMarginPixels);

path.push({ x, y });

for (let j = 1; j < numPoints; j++) {
// Generate subsequent points with some randomness
x += random(-50, 50);
y += random(-50, 50);

// Constrain points within the work area
x = constrain(x, workAreaMarginPixels, canvasWidthPixels – workAreaMarginPixels);
y = constrain(y, workAreaMarginPixels, canvasHeightPixels – workAreaMarginPixels);

path.push({ x, y });
}

curvePaths.push(path);
}
}

/**

• Converts millimeters to pixels based on pixels per inch.
• @param {number} mm – Measurement in millimeters.
• @returns {number} Measurement in pixels.

*/
function mmToPixels(mm) {
let inches = mm / 25.4;
return inches * pixelsPerInch;
}

/**

• =======================================
• Color Assignment and Layer Organization
• =======================================

*/

/**

• Assigns colors to each curve and organizes them into their respective color layers.

*/
function assignColorsAndLayers() {
// Clear existing layers
layers = Array(numLayers).fill().map(() => []);

// Assign random colors to curves and organize into layers
curvePaths.forEach((path) => {
// Randomly select a color index for each curve
let colorIndex = selectedColorIndices[floor(random(selectedColorIndices.length))];
let curve = {
path: path,
color: colors[colorIndex].value,
layerIndex: selectedColorIndices.indexOf(colorIndex)
};
layers[curve.layerIndex].push(curve);
});
}

/**

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

*/

/**

• Renders all curves, color palette bars, and registration markers on the canvas.

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

// Draw curves
noFill();
strokeWeight(penTipWidthPixels);
strokeCap(ROUND);
strokeJoin(ROUND);

layers.forEach(layer => {
layer.forEach(curve => {
stroke(curve.color);
beginShape();
curve.path.forEach(point => {
curveVertex(point.x, point.y);
});
endShape();
});
});

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

/**

• Draws registration markers at the top-left and bottom-right corners of the canvas.

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

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

// Bottom right
line(canvasWidthPixels – 5, canvasHeightPixels, canvasWidthPixels, canvasHeightPixels);
line(canvasWidthPixels, canvasHeightPixels – 5, canvasWidthPixels, canvasHeightPixels);
}

/**

• Draws the color palette bars at the bottom of the canvas.

*/
function addColorPaletteBars() {
let paletteLength = 300;
let barHeight = 1;
let gapSize = 7;
let numColors = selectedColorIndices.length;

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

let xStart = (canvasWidthPixels – paletteLength) / 2;
let yStart = canvasHeightPixels – (1.25 * pixelsPerInch);

strokeWeight(barHeight);
selectedColorIndices.forEach((colorIndex, i) => {
let x = xStart + i * (segmentLength + gapSize);
stroke(colors[colorIndex].value);
line(x, yStart, x + segmentLength, yStart);
});
}

/**

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

*/

/**

• Resets the canvas by clearing existing data and regenerating the artwork.

*/
function resetCanvas() {
// Clear all data structures
layers = [];
curvePaths = [];

// Generate new drawing
generateCurves();
assignColorsAndLayers();
drawShapes();
}

/**

• =======================================
• p5.js Key Press Handling
• =======================================

*/

/**

• Handles key presses for interactivity.
• – Press Spacebar to download SVGs.
• – Press 'r' to regenerate the artwork.

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

/**

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

*/

/**

• Handles the download of the generated SVG files.
• – Combined SVG containing all layers.
• – Individual SVGs for each selected color.

*/
function saveSVGs() {
// Generate combined SVG
let combinedSVG = generateSVG(0);
saveSVGFile(combinedSVG, ${dayNumber}-PORTRAIT.svg);

// Generate individual color SVGs
selectedColorIndices.forEach(colorIndex => {
let colorSVG = generateSVG(colorIndex);
let colorName = colors[colorIndex].name.toUpperCase();
let fileName = ${dayNumber}-0${colorIndex}-${colorName}-PORTRAIT.svg;
saveSVGFile(colorSVG, fileName);
});
}

/**

• Generates SVG content.
• @param {number} activeColor – If 0, generates combined SVG.
• If non-zero, generates SVG for only this color.
• @returns {string} SVG content as a string.

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

// Add registration markers
svgContent += <path d="M0,0 L5,0 M0,0 L0,5" stroke="black" stroke-width="1" fill="none" />n;
svgContent += <path d="M${canvasWidthPixels - 5},${canvasHeightPixels} L${canvasWidthPixels},${canvasHeightPixels} M${canvasWidthPixels},${canvasHeightPixels - 5} L${canvasWidthPixels},${canvasHeightPixels}" stroke="black" stroke-width="1" fill="none" />n;

// Add curves by layer
layers.forEach((layer, layerIndex) => {
svgContent += <g id="layer${layerIndex + 1}">n;
layer.forEach(curve => {
let colorIndex = selectedColorIndices[curve.layerIndex];
if (activeColor !== 0 && colorIndex !== activeColor) {
return;
}
let d = '';
curve.path.forEach((point, index) => {
let cmd = index === 0 ? 'M' : 'L';
d += ${cmd} ${point.x} ${point.y} ;
});
svgContent += <path d="${d}" stroke="${curve.color}" stroke-width="${penTipWidthPixels}" fill="none" />n;
});
svgContent += </g>n;
});

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

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

/**

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

*/
function addColorPaletteBarsSVG(activeColor = 0) {
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 = (canvasWidthPixels – paletteLength) / 2; // Starting x position
let yStart = canvasHeightPixels – (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;
}

/**

• Saves an SVG file by creating a temporary download link.
• @param {string} svgData – The SVG content as a string.
• @param {string} fileName – The desired filename for the SVG.

*/
function saveSVGFile(svgData, fileName) {
let blob = new Blob([svgData], { type: 'image/svg+xml' });
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);
}

/**

• =======================================
• Notes for Future Iterations (Day 014)
• =======================================

*/

/*

• The interwoven curves represent the complex network of thoughts and experiences.
• Physical constraints are respected by controlling line overlaps and ensuring consistent line thickness.
• The use of randomness introduces an element of unpredictability, mirroring the dynamic nature of identity.
• The original color palette is maintained to ensure visual coherence and continuity across the series.
• The SVG export functions have been updated to handle the new curve structures appropriately.
• Future enhancements could explore:
• Introducing interactive elements where user input affects the curve generation.
• Incorporating other geometric shapes to represent different facets of identity.
• Experimenting with layering techniques to create a sense of depth.
• Adding textures or patterns within the curves to enhance visual interest.
• The code structure and comments have been carefully organized to facilitate future modifications and understanding.

*/