function setup() {
  createCanvas(600, 600);
  background(255); // White background
  stroke(0); // Black lines and shapes
  strokeWeight(2);
  noFill();

  // Draw a central circle representing the core of knowledge
  ellipse(width / 2, height / 2, 300, 300);

  // Draw intersecting lines to symbolize connections
  line(100, 100, 500, 500);
  line(500, 100, 100, 500);

  // Draw concentric circles to represent layers of understanding
  ellipse(width / 2, height / 2, 200, 200);
  ellipse(width / 2, height / 2, 400, 400);

  // Draw smaller circles at intersections
  ellipse(100, 100, 20, 20);
  ellipse(500, 100, 20, 20);
  ellipse(100, 500, 20, 20);
  ellipse(500, 500, 20, 20);
}

function draw() {
  // No animation required
}

function setup() {
  createCanvas(600, 600);
  background(255); // White background
  stroke(0);       // Black lines
  noFill();

  // Parameters for generative patterns
  let numLines = 100;
  let maxOffset = 300;
  let centerX = width / 2;
  let centerY = height / 2;

  // Generate radial lines emanating from the center
  for (let i = 0; i < numLines; i++) {
    let angle = map(i, 0, numLines, 0, TWO_PI);
    let x1 = centerX + cos(angle) * 50;
    let y1 = centerY + sin(angle) * 50;
    let x2 = centerX + cos(angle) * (50 + random(maxOffset));
    let y2 = centerY + sin(angle) * (50 + random(maxOffset));
    line(x1, y1, x2, y2);
  }

  // Overlay with concentric polygons to represent layers of complexity
  push();
  translate(centerX, centerY);
  for (let n = 3; n <= 12; n++) {
    beginShape();
    for (let i = 0; i < n; i++) {
      let angle = map(i, 0, n, 0, TWO_PI);
      let radius = map(n, 3, 12, 60, 200);
      let x = cos(angle) * radius;
      let y = sin(angle) * radius;
      vertex(x, y);
    }
    endShape(CLOSE);
  }
  pop();

  // Add random Bezier curves to symbolize fluidity of thought
  for (let i = 0; i < 50; i++) {
    let x1 = random(width);
    let y1 = random(height);
    let x2 = random(width);
    let y2 = random(height);
    let cx1 = random(width);
    let cy1 = random(height);
    bezier(x1, y1, cx1, cy1, cx1, cy1, x2, y2);
  }
}

function draw() {
  // Static image, no animation
}

// Self-Portrait Day 1

let colors = {
  1: 'orange',
  2: 'brown',
  3: 'red',
  4: 'pink',         // Interpreting 'rose' as 'pink'
  5: 'purple',
  6: 'green',
  7: 'blue',
  8: 'black',
  9: '#704214'       // Using a sepia-like color
};

let activeColor = 0; // 0 means all colors are active
let shapes = [];
let margin = 100;    // Margin representing 1 inch at 100 pixels per inch

function setup() {
  createCanvas(1200, 1200, SVG); // 12 inches x 12 inches canvas at 100 pixels per inch
  background(255);               // White background
  noFill();
  strokeWeight(2);

  // Draw small corner markers
  stroke(0);
  let markerSize = 10;
  point(margin, margin);
  point(width - margin, margin);
  point(margin, height - margin);
  point(width - margin, height - margin);

  // Generate shapes based on today's feeling
  // Today, I feel contemplative, so I'll create interwoven lines and curves to represent complex thoughts

  // Generate random lines within the working area
  for (let i = 0; i < 150; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(margin, width - margin);
    let y1 = random(margin, height - margin);
    let x2 = random(margin, width - margin);
    let y2 = random(margin, height - margin);

    shapes.push({ type: 'line', x1, y1, x2, y2, col });
  }

  // Generate Bezier curves to add fluidity
  for (let i = 0; i < 50; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(margin, width - margin);
    let y1 = random(margin, height - margin);
    let cx1 = random(margin, width - margin);
    let cy1 = random(margin, height - margin);
    let cx2 = random(margin, width - margin);
    let cy2 = random(margin, height - margin);
    let x2 = random(margin, width - margin);
    let y2 = random(margin, height - margin);

    shapes.push({ type: 'bezier', x1, y1, cx1, cy1, cx2, cy2, x2, y2, col });
  }

  // Draw the shapes
  drawShapes();
}

function draw() {
  // Static image, no animation needed
}

function drawShapes() {
  background(255); // Clear background
  strokeWeight(2);

  // Redraw corner markers
  stroke(0);
  let markerSize = 10;
  point(margin, margin);
  point(width - margin, margin);
  point(margin, height - margin);
  point(width - margin, height - margin);

  // Draw shapes based on the active color
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor] === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(
          shape.x1,
          shape.y1,
          shape.cx1,
          shape.cy1,
          shape.cx2,
          shape.cy2,
          shape.x2,
          shape.y2
        );
      }
    }
  }
}

function keyPressed() {
  if (key === '0') {
    activeColor = 0;
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);
  } else if (key === ' ') {
    save('self-portrait-day1.svg');
  }
  drawShapes();
}

// Self-Portrait Day 1 (Updated)

let colors = {
  1: 'orange',
  2: 'brown',
  3: 'red',
  4: 'pink',         // Interpreting 'rose' as 'pink'
  5: 'purple',
  6: 'green',
  7: 'blue',
  8: 'black',
  9: '#704214'       // Sepia color
};

let activeColor = 0; // 0 means all colors are active
let shapes = [];
let margin = 100;    // Margin representing 1 inch at 100 pixels per inch

function setup() {
  createCanvas(1200, 1200); // 12 inches x 12 inches canvas at 100 pixels per inch
  background(255);          // White background
  noFill();
  strokeWeight(2);
  noLoop();                 // We'll control drawing manually

  // Generate shapes based on today's feeling
  // Today, I feel contemplative, so I'll create interwoven lines and curves to represent complex thoughts

  // Generate random lines within the working area
  for (let i = 0; i < 150; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(margin, width - margin);
    let y1 = random(margin, height - margin);
    let x2 = random(margin, width - margin);
    let y2 = random(margin, height - margin);

    shapes.push({ type: 'line', x1, y1, x2, y2, col });
  }

  // Generate Bezier curves to add fluidity
  for (let i = 0; i < 50; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(margin, width - margin);
    let y1 = random(margin, height - margin);
    let cx1 = random(margin, width - margin);
    let cy1 = random(margin, height - margin);
    let cx2 = random(margin, width - margin);
    let cy2 = random(margin, height - margin);
    let x2 = random(margin, width - margin);
    let y2 = random(margin, height - margin);

    shapes.push({ type: 'bezier', x1, y1, cx1, cy1, cx2, cy2, x2, y2, col });
  }

  drawShapes(); // Initial drawing
}

function draw() {
  // No animation needed
}

function drawShapes() {
  background(255); // Clear background
  strokeWeight(2);
  noFill();

  // Redraw corner markers
  stroke(0);
  let markerSize = 5;
  point(margin, margin);
  point(width - margin, margin);
  point(margin, height - margin);
  point(width - margin, height - margin);

  // Draw shapes based on the active color
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor] === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(
          shape.x1,
          shape.y1,
          shape.cx1,
          shape.cy1,
          shape.cx2,
          shape.cy2,
          shape.x2,
          shape.y2
        );
      }
    }
  }
}

function keyPressed() {
  if (key === '0') {
    activeColor = 0;
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();
  }
}

// Function to create the SVG content
function createSVGContent() {
  let svgContent = '';
  svgContent += `<svg version="1.1" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">n`;
  svgContent += `<rect width="100%" height="100%" fill="white" />n`; // Background

  // Draw corner markers
  svgContent += `<circle cx="${margin}" cy="${margin}" r="1" fill="black" />n`;
  svgContent += `<circle cx="${width - margin}" cy="${margin}" r="1" fill="black" />n`;
  svgContent += `<circle cx="${margin}" cy="${height - margin}" r="1" fill="black" />n`;
  svgContent += `<circle cx="${width - margin}" cy="${height - margin}" r="1" fill="black" />n`;

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor] === shape.col) {
      let strokeColor = shape.col;
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:2" />n`;
      } else if (shape.type === 'bezier') {
        svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:2" />n`;
      }
    }
  }

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

// Function to trigger SVG download
function downloadSVG() {
  const svgData = createSVGContent();
  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 = "self-portrait-day1.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(svgUrl);
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel contemplative and introspective. The intertwining lines and
 * curves in this generative artwork represent the complexity and depth of
 * thought processes. Each color symbolizes different facets of cognition
 * and understanding. The randomness of the lines and the fluidity of the
 * curves illustrate the dynamic and intricate nature of introspection.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;   // Canvas width in inches
let canvasHeightInches = 11;  // Canvas height in inches
let pixelsPerInch = 100;      // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMargin = 100;     // Margin in pixels (default 1 inch)
let visualizationMode = 0;    // Visualization mode for work area (default to 0)

let colors = {
  1: 'orange',
  2: 'brown',
  3: 'red',
  4: 'pink',        // Interpreting 'rose' as 'pink'
  5: 'purple',
  6: 'green',
  7: 'blue',
  8: 'black',
  9: '#704214'      // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

// Setup function: initializes canvas and generates artwork
function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

// Draw function (not used as no animation is needed)
function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMargin = 100;       // Margin in pixels (1 inch)

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Colors (already defined globally)
  // activeColor = 0;         // Start with all colors active

  // Other configurations can be added here
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Shapes Based on Today's Feeling
  // Today, I feel contemplative and introspective.

  // Generate Random Lines within the Working Area
  for (let i = 0; i < 150; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let x2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y2 = random(workAreaMargin, canvasHeight - workAreaMargin);

    shapes.push({ type: 'line', x1, y1, x2, y2, col });
  }

  // Generate Bezier Curves to Add Fluidity
  for (let i = 0; i < 50; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex];
    let x1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let cx1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let cy1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let cx2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let cy2 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let x2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y2 = random(workAreaMargin, canvasHeight - workAreaMargin);

    shapes.push({ type: 'bezier', x1, y1, cx1, cy1, cx2, cy2, x2, y2, col });
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  strokeWeight(2);
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor] === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
      }
    }
  }
}

// keyPressed(): Handles key events for color toggling and saving files
function keyPressed() {
  if (key === '0') {
    activeColor = 0;          // Show all colors
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);   // Toggle individual colors
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();            // Save current view as SVG
  } else if (key === '.') {
    saveAllColors();          // Save individual SVGs for all colors used
  }
}

// createSVGContent(): Creates the SVG content as a string
function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor] === shape.col) {
      let strokeColor = shape.col;
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:2" />n`;
      } else if (shape.type === 'bezier') {
        svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:2" />n`;
      }
    }
  }

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

// getWorkAreaSVG(): Returns SVG content for the work area visualization
function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

// downloadSVG(): Triggers SVG download with the appropriate filename
function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

// generateFileName(): Generates the filename based on the naming convention
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].toUpperCase();
    let colorNumber = `0${activeColor}`.slice(-2);
    fileName = `${dayNumber}-${colorNumber}-${colorName}-01P-PORTRAIT.svg`;
  }
  return fileName;
}

// saveAllColors(): Saves individual SVGs for each color used when '.' is pressed
function saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    activeColor = i;
    const svgData = createSVGContent();
    const colorName = colors[i].toUpperCase();
    const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a sense of interconnectedness and complexity. This generative
 * self-portrait reflects that feeling through a blend of geometric shapes,
 * lines, and curves that intertwine and overlap. The use of different colors
 * represents various facets of thought and emotion. The shapes are unfilled,
 * emphasizing form and structure over solidity, and are suitable for plotting.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

// Setup function: initializes canvas and generates artwork
function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

// Draw function (not used as no animation is needed)
function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Colors (already defined globally)
  // activeColor = 0;         // Start with all colors active

  // Other configurations can be added here
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Shapes Based on Today's Feeling
  // Today, I feel a sense of interconnectedness and complexity.

  // Generate Random Lines within the Working Area
  for (let i = 0; i < 100; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;
    let x1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let x2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y2 = random(workAreaMargin, canvasHeight - workAreaMargin);

    shapes.push({ type: 'line', x1, y1, x2, y2, col });
  }

  // Generate Bezier Curves to Add Fluidity
  for (let i = 0; i < 50; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;
    let x1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let cx1 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let cy1 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let cx2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let cy2 = random(workAreaMargin, canvasHeight - workAreaMargin);
    let x2 = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y2 = random(workAreaMargin, canvasHeight - workAreaMargin);

    shapes.push({ type: 'bezier', x1, y1, cx1, cy1, cx2, cy2, x2, y2, col });
  }

  // Generate Rectangles to Represent Structure
  for (let i = 0; i < 30; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;
    let x = random(workAreaMargin, canvasWidth - workAreaMargin);
    let y = random(workAreaMargin, canvasHeight - workAreaMargin);
    let w = random(50, 200);
    let h = random(50, 200);

    // Ensure the rectangle stays within the work area
    if (x + w > canvasWidth - workAreaMargin) w = canvasWidth - workAreaMargin - x;
    if (y + h > canvasHeight - workAreaMargin) h = canvasHeight - workAreaMargin - y;

    shapes.push({ type: 'rect', x, y, w, h, col });
  }

  // Generate Polygons to Add Complexity
  for (let i = 0; i < 20; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;
    let numSides = int(random(3, 8));
    let radius = random(30, 100);
    let centerX = random(workAreaMargin + radius, canvasWidth - workAreaMargin - radius);
    let centerY = random(workAreaMargin + radius, canvasHeight - workAreaMargin - radius);
    let angle = TWO_PI / numSides;
    let vertices = [];

    for (let j = 0; j < numSides; j++) {
      let x = centerX + radius * cos(angle * j);
      let y = centerY + radius * sin(angle * j);
      vertices.push({ x, y });
    }

    shapes.push({ type: 'polygon', vertices, col });
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  strokeWeight(2);
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
      } else if (shape.type === 'rect') {
        rect(shape.x, shape.y, shape.w, shape.h);
      } else if (shape.type === 'polygon') {
        beginShape();
        for (let v of shape.vertices) {
          vertex(v.x, v.y);
        }
        endShape(CLOSE);
      }
    }
  }
}

// keyPressed(): Handles key events for color toggling and saving files
function keyPressed() {
  if (key === '0') {
    activeColor = 0;          // Show all colors
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);   // Toggle individual colors
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();            // Save current view as SVG
  } else if (key === '.') {
    saveAllColors();          // Save individual SVGs for all colors used
  }
}

// createSVGContent(): Creates the SVG content as a string
function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:2" />n`;
      } else if (shape.type === 'bezier') {
        svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:2" />n`;
      } else if (shape.type === 'rect') {
        svgContent += `<rect x="${shape.x}" y="${shape.y}" width="${shape.w}" height="${shape.h}" style="stroke:${strokeColor}; fill:none; stroke-width:2" />n`;
      } else if (shape.type === 'polygon') {
        svgContent += `<polygon points="`;
        for (let v of shape.vertices) {
          svgContent += `${v.x},${v.y} `;
        }
        svgContent += `" style="stroke:${strokeColor}; fill:none; stroke-width:2" />n`;
      }
    }
  }

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

// getWorkAreaSVG(): Returns SVG content for the work area visualization
function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

// downloadSVG(): Triggers SVG download with the appropriate filename
function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

// generateFileName(): Generates the filename based on the naming convention
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;
}

// saveAllColors(): Saves individual SVGs for each color used when '.' is pressed
function saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    // Check if the color is used in any shape
    let colorUsed = shapes.some(shape => shape.col === colors[i].value);
    if (colorUsed) {
      activeColor = i;
      const svgData = createSVGContent();
      const colorName = colors[i].name.toUpperCase();
      const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a sense of interconnectedness and complexity. This generative
 * self-portrait reflects that feeling through the use of lines only. Shapes are
 * represented using lines, forming patterns and structures without filled areas.
 * Negative space and uniform repetition are utilized to create balance and
 * visual interest. The artwork is suitable for plotting and vectorization.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

// Setup function: initializes canvas and generates artwork
function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

// Draw function (not used as no animation is needed)
function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Colors (already defined globally)
  // activeColor = 0;         // Start with all colors active

  // Other configurations can be added here
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Lines Based on Today's Feeling
  // Today, I feel a sense of interconnectedness and complexity.

  // Grid Pattern with Uniformly Spaced Lines
  let gridSpacing = 20; // Adjust for more or fewer lines
  for (let i = workAreaMargin; i <= canvasWidth - workAreaMargin; i += gridSpacing) {
    for (let j = workAreaMargin; j <= canvasHeight - workAreaMargin; j += gridSpacing) {
      let colIndex = ((i + j) % (9 * gridSpacing)) / gridSpacing + 1;
      colIndex = int(colIndex);
      let col = colors[colIndex].value;

      // Vertical Lines
      shapes.push({ type: 'line', x1: i, y1: workAreaMargin, x2: i, y2: canvasHeight - workAreaMargin, col });

      // Horizontal Lines
      shapes.push({ type: 'line', x1: workAreaMargin, y1: j, x2: canvasWidth - workAreaMargin, y2: j, col });
    }
  }

  // Diagonal Lines Creating a Mesh Pattern
  for (let i = -canvasHeight; i <= canvasWidth + canvasHeight; i += gridSpacing) {
    let colIndex = (i % (9 * gridSpacing)) / gridSpacing + 1;
    colIndex = int(abs(colIndex));
    let col = colors[colIndex].value;

    // Diagonal from top-left to bottom-right
    shapes.push({ type: 'line', x1: i + workAreaMargin, y1: workAreaMargin, x2: workAreaMargin, y2: i + workAreaMargin, col });

    // Diagonal from bottom-left to top-right
    shapes.push({ type: 'line', x1: i + workAreaMargin, y1: canvasHeight - workAreaMargin, x2: workAreaMargin, y2: canvasHeight - i - workAreaMargin, col });
  }

  // Concentric Circles Represented with Lines (Approximated with Polygons)
  let centerX = canvasWidth / 2;
  let centerY = canvasHeight / 2;
  let maxRadius = (canvasWidth - 2 * workAreaMargin) / 2;
  let numCircles = 10;
  let numSides = 100; // High number to approximate a circle

  for (let i = 1; i <= numCircles; i++) {
    let radius = (i / numCircles) * maxRadius;
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;

    // Approximate circle with lines
    for (let j = 0; j < numSides; j++) {
      let angle1 = (TWO_PI / numSides) * j;
      let angle2 = (TWO_PI / numSides) * (j + 1);
      let x1 = centerX + radius * cos(angle1);
      let y1 = centerY + radius * sin(angle1);
      let x2 = centerX + radius * cos(angle2);
      let y2 = centerY + radius * sin(angle2);

      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  strokeWeight(2);
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      }
      // No other shape types since we're only using lines
    }
  }
}

// keyPressed(): Handles key events for color toggling and saving files
function keyPressed() {
  if (key === '0') {
    activeColor = 0;          // Show all colors
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);   // Toggle individual colors
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();            // Save current view as SVG
  } else if (key === '.') {
    saveAllColors();          // Save individual SVGs for all colors used
  }
}

// createSVGContent(): Creates the SVG content as a string
function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:2" />n`;
      }
    }
  }

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

// getWorkAreaSVG(): Returns SVG content for the work area visualization
function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

// downloadSVG(): Triggers SVG download with the appropriate filename
function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

// generateFileName(): Generates the filename based on the naming convention
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;
}

// saveAllColors(): Saves individual SVGs for each color used when '.' is pressed
function saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    // Check if the color is used in any shape
    let colorUsed = shapes.some(shape => shape.col === colors[i].value);
    if (colorUsed) {
      activeColor = i;
      const svgData = createSVGContent();
      const colorName = colors[i].name.toUpperCase();
      const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a sense of interconnectedness and complexity. This generative
 * self-portrait reflects that feeling through the use of lines only. Shapes are
 * represented using lines, forming patterns and structures without filled areas.
 * Negative space and uniform repetition are utilized to create balance and
 * visual interest. The artwork is suitable for plotting and vectorization.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

// Setup function: initializes canvas and generates artwork
function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

// Draw function (not used as no animation is needed)
function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Colors (already defined globally)
  // activeColor = 0;         // Start with all colors active

  // Other configurations can be added here
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Lines Based on Today's Feeling
  // Today, I feel a sense of interconnectedness and complexity.

  // Grid Pattern with Uniformly Spaced Lines
  let gridSpacing = 20; // Adjust for more or fewer lines
  for (let i = workAreaMargin; i <= canvasWidth - workAreaMargin; i += gridSpacing) {
    for (let j = workAreaMargin; j <= canvasHeight - workAreaMargin; j += gridSpacing) {
      let colIndex = (((Math.floor((i + j) / gridSpacing) % 9) + 9) % 9) + 1;
      let col = colors[colIndex].value;

      // Vertical Lines
      shapes.push({ type: 'line', x1: i, y1: workAreaMargin, x2: i, y2: canvasHeight - workAreaMargin, col });

      // Horizontal Lines
      shapes.push({ type: 'line', x1: workAreaMargin, y1: j, x2: canvasWidth - workAreaMargin, y2: j, col });
    }
  }

  // Diagonal Lines Creating a Mesh Pattern
  for (let i = -canvasHeight; i <= canvasWidth + canvasHeight; i += gridSpacing) {
    let colIndex = (((Math.floor(i / gridSpacing) % 9) + 9) % 9) + 1;
    let col = colors[colIndex].value;

    // Diagonal from top-left to bottom-right
    shapes.push({ type: 'line', x1: i + workAreaMargin, y1: workAreaMargin, x2: workAreaMargin, y2: i + workAreaMargin, col });

    // Diagonal from bottom-left to top-right
    shapes.push({ type: 'line', x1: i + workAreaMargin, y1: canvasHeight - workAreaMargin, x2: workAreaMargin, y2: canvasHeight - i - workAreaMargin, col });
  }

  // Concentric Circles Represented with Lines (Approximated with Polygons)
  let centerX = canvasWidth / 2;
  let centerY = canvasHeight / 2;
  let maxRadius = (canvasWidth - 2 * workAreaMargin) / 2;
  let numCircles = 10;
  let numSides = 100; // High number to approximate a circle

  for (let i = 1; i <= numCircles; i++) {
    let radius = (i / numCircles) * maxRadius;
    let colIndex = ((i - 1) % 9) + 1;
    let col = colors[colIndex].value;

    // Approximate circle with lines
    for (let j = 0; j < numSides; j++) {
      let angle1 = (TWO_PI / numSides) * j;
      let angle2 = (TWO_PI / numSides) * (j + 1);
      let x1 = centerX + radius * cos(angle1);
      let y1 = centerY + radius * sin(angle1);
      let x2 = centerX + radius * cos(angle2);
      let y2 = centerY + radius * sin(angle2);

      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  strokeWeight(2);
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      }
      // No other shape types since we're only using lines
    }
  }
}

// keyPressed(): Handles key events for color toggling and saving files
function keyPressed() {
  if (key === '0') {
    activeColor = 0;          // Show all colors
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);   // Toggle individual colors
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();            // Save current view as SVG
  } else if (key === '.') {
    saveAllColors();          // Save individual SVGs for all colors used
  }
}

// createSVGContent(): Creates the SVG content as a string
function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:2" />n`;
      }
    }
  }

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

// getWorkAreaSVG(): Returns SVG content for the work area visualization
function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

// downloadSVG(): Triggers SVG download with the appropriate filename
function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

// generateFileName(): Generates the filename based on the naming convention
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;
}

// saveAllColors(): Saves individual SVGs for each color used when '.' is pressed
function saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    // Check if the color is used in any shape
    let colorUsed = shapes.some(shape => shape.col === colors[i].value);
    if (colorUsed) {
      activeColor = i;
      const svgData = createSVGContent();
      const colorName = colors[i].name.toUpperCase();
      const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a vibrant energy and fluidity. This generative self-portrait
 * captures that feeling through dynamic, flowing lines that weave within the
 * work area. The composition uses Perlin noise to create organic, expressive
 * patterns. Negative space and varying line weights enhance the visual impact.
 * The artwork is designed to be suitable for a contemporary gallery exhibition.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Colors (already defined globally)
  // activeColor = 0;         // Start with all colors active

  // Other configurations can be added here
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Lines Based on Today's Feeling
  // Today, I feel a vibrant energy and fluidity.

  // Parameters for the noise flow field
  let cols = 100;
  let rows = 100;
  let increment = 0.1;
  let noiseScale = 0.02;

  // Create a grid of points within the work area
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let gridWidth = endX - startX;
  let gridHeight = endY - startY;

  // Generate flow field
  let flowField = [];
  for (let y = 0; y <= rows; y++) {
    flowField[y] = [];
    for (let x = 0; x <= cols; x++) {
      let angle = noise((x * noiseScale), (y * noiseScale)) * TWO_PI * 2;
      flowField[y][x] = angle;
    }
  }

  // Draw lines following the flow field
  for (let i = 0; i < 5000; i++) {
    let x = random(startX, endX);
    let y = random(startY, endY);
    let colIndex = int(random(1, 10));
    let col = colors[colIndex].value;
    let lineLength = random(10, 50);

    let x1 = x;
    let y1 = y;

    let gridX = int(map(x, startX, endX, 0, cols));
    let gridY = int(map(y, startY, endY, 0, rows));

    let angle = flowField[gridY][gridX];
    let x2 = x1 + cos(angle) * lineLength;
    let y2 = y1 + sin(angle) * lineLength;

    // Ensure the line stays within the work area
    if (
      x2 >= startX && x2 <= endX &&
      y2 >= startY && y2 <= endY
    ) {
      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Draw the Shapes
  drawShapes();
}

function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(random(1, 3));  // Varying line weights
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      }
    }
  }
}

function keyPressed() {
  if (key === '0') {
    activeColor = 0;          // Show all colors
    drawShapes();
  } else if (key >= '1' && key <= '9') {
    activeColor = int(key);   // Toggle individual colors
    drawShapes();
  } else if (key === ' ') {
    downloadSVG();            // Save current view as SVG
  } else if (key === '.') {
    saveAllColors();          // Save individual SVGs for all colors used
  }
}

function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      let strokeW = 2;  // Since SVG does not support varying stroke widths per line
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
      }
    }
  }

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

function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

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 saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    // Check if the color is used in any shape
    let colorUsed = shapes.some(shape => shape.col === colors[i].value);
    if (colorUsed) {
      activeColor = i;
      const svgData = createSVGContent();
      const colorName = colors[i].name.toUpperCase();
      const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a vibrant energy and fluidity. This generative self-portrait
 * captures that feeling through dynamic, flowing lines and Bezier curves that
 * weave within the work area. The composition uses Perlin noise to create
 * organic, expressive patterns. Negative space and varying line weights enhance
 * the visual impact. The artwork is designed with precision and elegance.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)
let saveEnabled = false;             // Controls whether saving functions are active

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Enable saving functions
  saveEnabled = true;

  // Key Pressed Functionality
  keyPressed = function () {
    if (saveEnabled) {
      if (key === '0') {
        activeColor = 0;          // Show all colors
        drawShapes();
      } else if (key >= '1' && key <= '9') {
        activeColor = int(key);   // Toggle individual colors
        drawShapes();
      } else if (key === ' ') {
        downloadSVG();            // Save current view as SVG
      } else if (key === '.') {
        saveAllColors();          // Save individual SVGs for all colors used
      }
    }
  };
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Lines and Bezier Curves Based on Today's Feeling
  // Today, I feel a vibrant energy and fluidity.

  // Parameters for the noise flow field
  let cols = 100;
  let rows = 100;
  let noiseScale = 0.02;

  // Create a grid of points within the work area
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;

  // Generate flow field
  let flowField = [];
  for (let y = 0; y <= rows; y++) {
    flowField[y] = [];
    for (let x = 0; x <= cols; x++) {
      let angle = noise((x * noiseScale), (y * noiseScale)) * TWO_PI * 2;
      flowField[y][x] = angle;
    }
  }

  // Draw lines and Bezier curves following the flow field
  for (let i = 0; i < 3000; i++) {
    let x = random(startX, endX);
    let y = random(startY, endY);
    let colIndex = int(random(1, 10));
    let col = colors[colIndex].value;
    let lineLength = random(20, 60);

    let x1 = x;
    let y1 = y;

    let gridX = int(map(x, startX, endX, 0, cols));
    let gridY = int(map(y, startY, endY, 0, rows));

    let angle = flowField[gridY][gridX];
    let x2 = x1 + cos(angle) * lineLength;
    let y2 = y1 + sin(angle) * lineLength;

    // Ensure the line stays within the work area
    if (
      x2 >= startX && x2 <= endX &&
      y2 >= startY && y2 <= endY
    ) {
      // Randomly decide whether to draw a line or a Bezier curve
      if (random(1) < 0.5) {
        // Draw a Bezier curve
        let controlX1 = x1 + random(-50, 50);
        let controlY1 = y1 + random(-50, 50);
        let controlX2 = x2 + random(-50, 50);
        let controlY2 = y2 + random(-50, 50);

        // Ensure control points are within the work area
        controlX1 = constrain(controlX1, startX, endX);
        controlY1 = constrain(controlY1, startY, endY);
        controlX2 = constrain(controlX2, startX, endX);
        controlY2 = constrain(controlY2, startY, endY);

        shapes.push({
          type: 'bezier',
          x1,
          y1,
          cx1: controlX1,
          cy1: controlY1,
          cx2: controlX2,
          cy2: controlY2,
          x2,
          y2,
          col
        });
      } else {
        // Draw a straight line
        shapes.push({ type: 'line', x1, y1, x2, y2, col });
      }
    }
  }

  // Draw the Shapes
  drawShapes();
}

function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(random(1, 3));  // Varying line weights
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
      }
    }
  }
}

// The following functions are only active if saveEnabled is true
if (saveEnabled) {
  // Key Pressed Functionality (Defined in configurations)
  // Already defined in configurations() function
}

// createSVGContent(): Creates the SVG content as a string
function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      let strokeW = 2;  // Fixed stroke width for SVG export
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
      } else if (shape.type === 'bezier') {
        svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:${strokeW}" />n`;
      }
    }
  }

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

function getWorkAreaSVG() {
  let svg = '';
  switch (visualizationMode) {
    case 0:
      // Dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
    case 1:
      // Solid line around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
      break;
    case 2:
      // Dotted lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
      break;
    case 3:
      // Dashed lines around work area
      svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
      break;
    case 4:
      // Crosshairs
      svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
      svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
      break;
    default:
      // Default to dots on corners
      svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
      svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
      svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
      break;
  }
  return svg;
}

function downloadSVG() {
  const svgData = createSVGContent();
  const fileName = generateFileName();
  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);
}

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 saveAllColors() {
  // Temporarily store the current activeColor
  let previousActiveColor = activeColor;

  // Loop through all colors
  for (let i = 1; i <= 9; i++) {
    // Check if the color is used in any shape
    let colorUsed = shapes.some(shape => shape.col === colors[i].value);
    if (colorUsed) {
      activeColor = i;
      const svgData = createSVGContent();
      const colorName = colors[i].name.toUpperCase();
      const colorNumber = `0${i}`.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();
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a blend of complexity and clarity. This generative self-portrait
 * captures that duality through the purposeful use of Bezier curves and straight
 * lines. The intricate, overlapping curves represent the complexity and
 * interconnectedness of thoughts, while the straight lines symbolize moments of
 * clarity and focus. Each color is chosen to reflect different emotions, and the
 * composition balances chaos with structure.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)
let saveEnabled = false;             // Controls whether saving functions are active

let colors = {
  1: { name: 'ORANGE', value: 'orange' },
  2: { name: 'BROWN', value: 'brown' },
  3: { name: 'RED', value: 'red' },
  4: { name: 'ROSE', value: 'pink' },      // Interpreting 'rose' as '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' }   // Sepia color
};

let activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Enable saving functions
  saveEnabled = true;

  // Key Pressed Functionality
  keyPressed = function () {
    if (saveEnabled) {
      if (key === '0') {
        activeColor = 0;          // Show all colors
        drawShapes();
      } else if (key >= '1' && key <= '9') {
        activeColor = int(key);   // Toggle individual colors
        drawShapes();
      } else if (key === ' ') {
        downloadSVG();            // Save current view as SVG
      } else if (key === '.') {
        saveAllColors();          // Save individual SVGs for all colors used
      }
    }
  };
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Generate Lines and Bezier Curves Based on Today's Feeling
  // The composition balances complexity (curves) and clarity (straight lines)

  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;

  // Generate Bezier Curves to represent complexity
  for (let i = 0; i < 150; i++) {
    let colIndex = (i % 9) + 1;
    let col = colors[colIndex].value;

    // Start and end points
    let x1 = random(startX, endX);
    let y1 = random(startY, endY);
    let x2 = random(startX, endX);
    let y2 = random(startY, endY);

    // Control points to create intricate curves
    let cx1 = x1 + random(-100, 100);
    let cy1 = y1 + random(-100, 100);
    let cx2 = x2 + random(-100, 100);
    let cy2 = y2 + random(-100, 100);

    // Ensure control points are within work area
    cx1 = constrain(cx1, startX, endX);
    cy1 = constrain(cy1, startY, endY);
    cx2 = constrain(cx2, startX, endX);
    cy2 = constrain(cy2, startY, endY);

    shapes.push({
      type: 'bezier',
      x1,
      y1,
      cx1,
      cy1,
      cx2,
      cy2,
      x2,
      y2,
      col
    });
  }

  // Generate Straight Lines to represent clarity
  for (let i = 0; i < 50; i++) {
    let colIndex = ((i + 4) % 9) + 1; // Offset to use different colors
    let col = colors[colIndex].value;

    // Start and end points aligned horizontally or vertically
    let horizontal = random(1) < 0.5;
    let x1, y1, x2, y2;

    if (horizontal) {
      y1 = y2 = random(startY, endY);
      x1 = startX;
      x2 = endX;
    } else {
      x1 = x2 = random(startX, endX);
      y1 = startY;
      y2 = endY;
    }

    shapes.push({
      type: 'line',
      x1,
      y1,
      x2,
      y2,
      col
    });
  }

  // Draw the Shapes
  drawShapes();
}

function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(2);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
      }
    }
  }
}

// The following functions are only active if saveEnabled is true
if (saveEnabled) {
  // Key Pressed Functionality (Defined in configurations)
  // Already defined in configurations() function

  // createSVGContent(): Creates the SVG content as a string
  function createSVGContent() {
    let svgContent = '';
    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 work area visualization to SVG
    svgContent += getWorkAreaSVG();

    // Add shapes to SVG
    for (let shape of shapes) {
      if (activeColor === 0 || colors[activeColor].value === shape.col) {
        let strokeColor = shape.col;
        let strokeW = 2;  // Fixed stroke width for SVG export
        if (shape.type === 'line') {
          svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
        } else if (shape.type === 'bezier') {
          svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:${strokeW}" />n`;
        }
      }
    }

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

  function getWorkAreaSVG() {
    let svg = '';
    switch (visualizationMode) {
      case 0:
        // Dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
      case 1:
        // Solid line around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
        break;
      case 2:
        // Dotted lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
        break;
      case 3:
        // Dashed lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
        break;
      case 4:
        // Crosshairs
        svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
        svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
        break;
      default:
        // Default to dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
    }
    return svg;
  }

  function downloadSVG() {
    const svgData = createSVGContent();
    const fileName = generateFileName();
    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);
  }

  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 saveAllColors() {
    // Temporarily store the current activeColor
    let previousActiveColor = activeColor;

    // Loop through all colors
    for (let i = 1; i <= 9; i++) {
      // Check if the color is used in any shape
      let colorUsed = shapes.some(shape => shape.col === colors[i].value);
      if (colorUsed) {
        activeColor = i;
        const svgData = createSVGContent();
        const colorName = colors[i].name.toUpperCase();
        const colorNumber = `0${i}`.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();
  }
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * Today, I feel a blend of energy and structure—a harmonious balance between
 * fluidity and order. This generative self-portrait captures that feeling by
 * merging dynamic, flowing lines with structured grid patterns and concentric
 * circles. The composition uses Perlin noise to create organic, expressive
 * lines, while uniform grids and circles represent stability and
 * interconnectedness. Negative space and varying line weights enhance the
 * visual impact, and all elements are confined within the work area margins.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)
let saveEnabled = false;             // Controls whether saving functions are active

let 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 activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Enable saving functions
  saveEnabled = true;

  // Key Pressed Functionality
  keyPressed = function () {
    if (saveEnabled) {
      if (key === '0') {
        activeColor = 0;          // Show all colors
        drawShapes();
      } else if (key >= '1' && key <= '9') {
        activeColor = int(key);   // Toggle individual colors
        drawShapes();
      } else if (key === ' ') {
        downloadSVG();            // Save current view as SVG
      } else if (key === '.') {
        saveAllColors();          // Save individual SVGs for all colors used
      }
    }
  };
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Generate Grid Pattern with Uniformly Spaced Lines
  let gridSpacing = 50; // Adjust for more or fewer lines
  for (let i = startX; i <= endX; i += gridSpacing) {
    for (let j = startY; j <= endY; j += gridSpacing) {
      let colIndex = (((Math.floor((i + j) / gridSpacing) % 9) + 9) % 9) + 1;
      let col = colors[colIndex].value;

      // Vertical Lines
      shapes.push({ type: 'line', x1: i, y1: startY, x2: i, y2: endY, col });

      // Horizontal Lines
      shapes.push({ type: 'line', x1: startX, y1: j, x2: endX, y2: j, col });
    }
  }

  // Diagonal Mesh Pattern
  for (let i = -workAreaHeight; i <= workAreaWidth + workAreaHeight; i += gridSpacing) {
    let colIndex = (((Math.floor(i / gridSpacing) % 9) + 9) % 9) + 1;
    let col = colors[colIndex].value;

    // Diagonal from top-left to bottom-right
    shapes.push({
      type: 'line',
      x1: startX + i,
      y1: startY,
      x2: startX,
      y2: startY + i,
      col
    });

    // Diagonal from bottom-left to top-right
    shapes.push({
      type: 'line',
      x1: startX + i,
      y1: endY,
      x2: startX,
      y2: endY - i,
      col
    });
  }

  // Concentric Circles Represented with Lines (Approximated with Polygons)
  let centerX = canvasWidth / 2;
  let centerY = canvasHeight / 2;
  let maxRadius = Math.min(workAreaWidth, workAreaHeight) / 2;
  let numCircles = 5;
  let numSides = 100; // High number to approximate a circle

  for (let i = 1; i <= numCircles; i++) {
    let radius = (i / numCircles) * maxRadius;
    let colIndex = ((i - 1) % 9) + 1;
    let col = colors[colIndex].value;

    // Approximate circle with lines
    for (let j = 0; j < numSides; j++) {
      let angle1 = (TWO_PI / numSides) * j;
      let angle2 = (TWO_PI / numSides) * (j + 1);
      let x1 = centerX + radius * cos(angle1);
      let y1 = centerY + radius * sin(angle1);
      let x2 = centerX + radius * cos(angle2);
      let y2 = centerY + radius * sin(angle2);

      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Generate Flow Field Lines Using Perlin Noise
  let cols = 50;
  let rows = 50;
  let noiseScale = 0.05;

  // Create a grid of points within the work area
  let flowField = [];
  for (let y = 0; y <= rows; y++) {
    flowField[y] = [];
    for (let x = 0; x <= cols; x++) {
      let nx = x / cols;
      let ny = y / rows;
      let angle = noise(nx * noiseScale, ny * noiseScale) * TWO_PI * 4;
      flowField[y][x] = angle;
    }
  }

  // Draw lines following the flow field
  for (let i = 0; i < 1000; i++) {
    let x = random(startX, endX);
    let y = random(startY, endY);
    let colIndex = int(random(1, 10));
    let col = colors[colIndex].value;
    let lineLength = random(20, 60);

    let x1 = x;
    let y1 = y;

    let gridX = int(map(x, startX, endX, 0, cols));
    let gridY = int(map(y, startY, endY, 0, rows));

    let angle = flowField[gridY][gridX];
    let x2 = x1 + cos(angle) * lineLength;
    let y2 = y1 + sin(angle) * lineLength;

    // Ensure the line stays within the work area
    if (
      x2 >= startX && x2 <= endX &&
      y2 >= startY && y2 <= endY
    ) {
      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(2);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      }
    }
  }
}

// The following functions are only active if saveEnabled is true
if (saveEnabled) {
  // Key Pressed Functionality (Defined in configurations)
  // Already defined in configurations() function

  // createSVGContent(): Creates the SVG content as a string
  function createSVGContent() {
    let svgContent = '';
    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 work area visualization to SVG
    svgContent += getWorkAreaSVG();

    // Add shapes to SVG
    for (let shape of shapes) {
      if (activeColor === 0 || colors[activeColor].value === shape.col) {
        let strokeColor = shape.col;
        let strokeW = 2;  // Fixed stroke width for SVG export
        if (shape.type === 'line') {
          svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
        }
      }
    }

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

  function getWorkAreaSVG() {
    let svg = '';
    switch (visualizationMode) {
      case 0:
        // Dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
      case 1:
        // Solid line around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
        break;
      case 2:
        // Dotted lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
        break;
      case 3:
        // Dashed lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
        break;
      case 4:
        // Crosshairs
        svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
        svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
        break;
      default:
        // Default to dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
    }
    return svg;
  }

  function downloadSVG() {
    const svgData = createSVGContent();
    const fileName = generateFileName();
    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);
  }

  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 saveAllColors() {
    // Temporarily store the current activeColor
    let previousActiveColor = activeColor;

    // Loop through all colors
    for (let i = 1; i <= 9; i++) {
      // Check if the color is used in any shape
      let colorUsed = shapes.some(shape => shape.col === colors[i].value);
      if (colorUsed) {
        activeColor = i;
        const svgData = createSVGContent();
        const colorName = colors[i].name.toUpperCase();
        const colorNumber = `0${i}`.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();
  }
}

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * 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.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)
let saveEnabled = false;             // Controls whether saving functions are active

let 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 activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Enable saving functions
  saveEnabled = true;

  // Key Pressed Functionality
  keyPressed = function () {
    if (saveEnabled) {
      if (key === '0') {
        activeColor = 0;          // Show all colors
        drawShapes();
      } else if (key >= '1' && key <= '9') {
        activeColor = int(key);   // Toggle individual colors
        drawShapes();
      } else if (key === ' ') {
        downloadSVG();            // Save current view as SVG
      } else if (key === '.') {
        saveAllColors();          // Save individual SVGs for all colors used
      }
    }
  };
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Initialize Canvas
  background(255);            // White background
  strokeWeight(2);
  noFill();

  // Draw Work Area Visualization
  drawWorkArea();

  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Center coordinates within work area
  let centerX = startX + workAreaWidth / 2;
  let centerY = startY + workAreaHeight / 2;

  // --- Structured Patterns (Grid and Radial Lines) ---

  // Grid Pattern with Uniformly Spaced Lines
  let gridSpacing = 50;
  for (let x = startX; x <= endX; x += gridSpacing) {
    for (let y = startY; y <= endY; y += gridSpacing) {
      let colIndex = (((Math.floor((x + y) / gridSpacing) % 9) + 9) % 9) + 1;
      let col = colors[colIndex].value;

      // Vertical Lines
      shapes.push({ type: 'line', x1: x, y1: startY, x2: x, y2: endY, col });

      // Horizontal Lines
      shapes.push({ type: 'line', x1: startX, y1: y, x2: endX, y2: y, col });
    }
  }

  // Radial Lines Emanating from Center
  let numRadialLines = 100;
  for (let i = 0; i < numRadialLines; i++) {
    let angle = map(i, 0, numRadialLines, 0, TWO_PI);
    let x1 = centerX + cos(angle) * 50;
    let y1 = centerY + sin(angle) * 50;
    let x2 = centerX + cos(angle) * (50 + random(workAreaWidth / 2 - 50));
    let y2 = centerY + sin(angle) * (50 + random(workAreaHeight / 2 - 50));
    let colIndex = int(random(1, 10));
    let col = colors[colIndex].value;

    // Ensure the line ends within the work area
    if (
      x2 >= startX && x2 <= endX &&
      y2 >= startY && y2 <= endY
    ) {
      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // Concentric Polygons to Represent Layers of Complexity
  let minSides = 3;
  let maxSides = 12;
  let minRadius = 60;
  let maxRadius = Math.min(workAreaWidth, workAreaHeight) / 2 - 50;

  for (let n = minSides; n <= maxSides; n++) {
    let radius = map(n, minSides, maxSides, minRadius, maxRadius);
    let colIndex = ((n - minSides) % 9) + 1;
    let col = colors[colIndex].value;

    for (let i = 0; i < n; i++) {
      let angle1 = map(i, 0, n, 0, TWO_PI) - PI / 2;
      let angle2 = map(i + 1, 0, n, 0, TWO_PI) - PI / 2;
      let x1 = centerX + cos(angle1) * radius;
      let y1 = centerY + sin(angle1) * radius;
      let x2 = centerX + cos(angle2) * radius;
      let y2 = centerY + sin(angle2) * radius;

      shapes.push({ type: 'line', x1, y1, x2, y2, col });
    }
  }

  // --- Organic Flow (Bezier Curves) ---

  // Add Bezier Curves to Symbolize Fluidity
  let numCurves = 50;
  for (let i = 0; i < numCurves; i++) {
    let x1 = random(startX, endX);
    let y1 = random(startY, endY);
    let x2 = random(startX, endX);
    let y2 = random(startY, endY);
    let cx1 = random(startX, endX);
    let cy1 = random(startY, endY);
    let colIndex = int(random(1, 10));
    let col = colors[colIndex].value;

    shapes.push({
      type: 'bezier',
      x1,
      y1,
      cx1,
      cy1,
      cx2: cx1,  // Single control point for symmetry
      cy2: cy1,
      x2,
      y2,
      col
    });
  }

  // Draw the Shapes
  drawShapes();
}

// drawWorkArea(): Draws markers or borders based on visualizationMode
function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

// drawShapes(): Draws all shapes based on the active color
function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(2);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezier') {
        bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
      }
    }
  }
}

// The following functions are only active if saveEnabled is true
if (saveEnabled) {
  // Key Pressed Functionality (Defined in configurations)
  // Already defined in configurations() function

  // createSVGContent(): Creates the SVG content as a string
  function createSVGContent() {
    let svgContent = '';
    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 work area visualization to SVG
    svgContent += getWorkAreaSVG();

    // Add shapes to SVG
    for (let shape of shapes) {
      if (activeColor === 0 || colors[activeColor].value === shape.col) {
        let strokeColor = shape.col;
        let strokeW = 2;  // Fixed stroke width for SVG export
        if (shape.type === 'line') {
          svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
        } else if (shape.type === 'bezier') {
          svgContent += `<path d="M ${shape.x1} ${shape.y1} C ${shape.cx1} ${shape.cy1}, ${shape.cx2} ${shape.cy2}, ${shape.x2} ${shape.y2}" style="stroke:${strokeColor}; fill:none; stroke-width:${strokeW}" />n`;
        }
      }
    }

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

  function getWorkAreaSVG() {
    let svg = '';
    switch (visualizationMode) {
      case 0:
        // Dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
      case 1:
        // Solid line around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
        break;
      case 2:
        // Dotted lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
        break;
      case 3:
        // Dashed lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
        break;
      case 4:
        // Crosshairs
        svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
        svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
        break;
      default:
        // Default to dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
    }
    return svg;
  }

  function downloadSVG() {
    const svgData = createSVGContent();
    const fileName = generateFileName();
    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);
  }

  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 saveAllColors() {
    // Temporarily store the current activeColor
    let previousActiveColor = activeColor;

    // Loop through all colors
    for (let i = 1; i <= 9; i++) {
      // Check if the color is used in any shape
      let colorUsed = shapes.some(shape => shape.col === colors[i].value);
      if (colorUsed) {
        activeColor = i;
        const svgData = createSVGContent();
        const colorName = colors[i].name.toUpperCase();
        const colorNumber = `0${i}`.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 generate() {
  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Center coordinates within work area
  let centerX = startX + workAreaWidth / 2;
  let centerY = startY + workAreaHeight / 2;

  // --- Structured Patterns (Grid and Radial Lines) ---

  // Grid Pattern with Tighter Spacing
  let gridSpacing = 25; // Reduced from 50 to 25 for a tighter grid
  for (let x = startX; x <= endX; x += gridSpacing) {
    for (let y = startY; y <= endY; y += gridSpacing) {
      let colIndex = (((Math.floor((x + y) / gridSpacing) % 9) + 9) % 9) + 1;
      let col = colors[colIndex].value;

      // Vertical Lines
      shapes.push({ type: 'line', x1: x, y1: startY, x2: x, y2: endY, col });

      // Horizontal Lines
      shapes.push({ type: 'line', x1: startX, y1: y, x2: endX, y2: y, col });
    }
  }

  // Radial Lines Emanating from Center (unchanged)
  // ...

  // Concentric Polygons (unchanged)
  // ...

  // Bezier Curves (unchanged)
  // ...

  // Draw the Shapes
  drawShapes();
}

function generate() {
  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Center coordinates within work area
  let centerX = startX + workAreaWidth / 2;
  let centerY = startY + workAreaHeight / 2;

  // Radius for central negative space
  let negativeRadius = 200; // Adjust as needed

  // --- Structured Patterns (Grid with Negative Space) ---

  // Grid Pattern with Tighter Spacing
  let gridSpacing = 10; // Tighter grid
  for (let x = startX; x <= endX; x += gridSpacing) {
    for (let y = startY; y <= endY; y += gridSpacing) {
      // Calculate distance from center
      let distFromCenter = dist(x, y, centerX, centerY);
      if (distFromCenter > negativeRadius) {
        let colIndex = (((Math.floor((x + y) / gridSpacing) % 9) + 9) % 9) + 1;
        let col = colors[colIndex].value;

        // Vertical Lines
        shapes.push({ type: 'line', x1: x, y1: y, x2: x, y2: y + gridSpacing, col });

        // Horizontal Lines
        shapes.push({ type: 'line', x1: x, y1: y, x2: x + gridSpacing, y2: y, col });
      }
    }
  }

  // --- Organic Flow (Bezier Curves with Non-Intersecting Paths) ---

  // Generate non-intersecting Bezier curves
  let numCurves = 50;
  let curvePaths = []; // To keep track of curve paths

  for (let i = 0; i < numCurves; i++) {
    let validCurve = false;
    let attempts = 0;
    let maxAttempts = 100;
    let x1, y1, x2, y2, cx1, cy1;

    while (!validCurve && attempts < maxAttempts) {
      x1 = random(startX, endX);
      y1 = random(startY, endY);
      x2 = random(startX, endX);
      y2 = random(startY, endY);
      cx1 = random(startX, endX);
      cy1 = random(startY, endY);

      // Create a temporary graphics buffer to draw the new curve
      let tempBuffer = createGraphics(canvasWidth, canvasHeight);
      tempBuffer.noFill();
      tempBuffer.stroke(0);
      tempBuffer.strokeWeight(2);

      // Draw existing curves onto tempBuffer
      for (let path of curvePaths) {
        tempBuffer.bezier(path.x1, path.y1, path.cx1, path.cy1, path.cx2, path.cy2, path.x2, path.y2);
      }

      // Draw the new curve onto tempBuffer
      tempBuffer.bezier(x1, y1, cx1, cy1, cx1, cy1, x2, y2);

      // Check for pixel overlap
      let overlap = false;
      tempBuffer.loadPixels();
      for (let y = 0; y < tempBuffer.height; y++) {
        for (let x = 0; x < tempBuffer.width; x++) {
          let index = (x + y * tempBuffer.width) * 4;
          if (tempBuffer.pixels[index + 3] > 0) {
            // Pixel is drawn
            overlap = true;
            break;
          }
        }
        if (overlap) break;
      }

      if (!overlap) {
        // No overlap, valid curve
        curvePaths.push({ x1, y1, cx1, cy1, cx2: cx1, cy2: cy1, x2, y2 });
        validCurve = true;
      }

      attempts++;
    }

    if (validCurve) {
      let colIndex = int(random(1, 10));
      let col = colors[colIndex].value;

      shapes.push({
        type: 'bezier',
        x1,
        y1,
        cx1,
        cy1,
        cx2: cx1,
        cy2: cy1,
        x2,
        y2,
        col
      });
    }
  }

  // --- Break Grid Lines at Curve Intersections ---

  // Create an off-screen graphics buffer to draw curves for collision detection
  let curveBuffer = createGraphics(canvasWidth, canvasHeight);
  curveBuffer.noFill();
  curveBuffer.stroke(0);
  curveBuffer.strokeWeight(2);

  // Draw curves onto the buffer
  for (let shape of shapes) {
    if (shape.type === 'bezier') {
      curveBuffer.bezier(shape.x1, shape.y1, shape.cx1, shape.cy1, shape.cx2, shape.cy2, shape.x2, shape.y2);
    }
  }

  // Rebuild grid lines, excluding portions near curves
  let newShapes = [];
  for (let shape of shapes) {
    if (shape.type === 'line') {
      // Sample multiple points along the line
      let numSamples = 5;
      let intersects = false;
      for (let i = 0; i <= numSamples; i++) {
        let t = i / numSamples;
        let x = lerp(shape.x1, shape.x2, t);
        let y = lerp(shape.y1, shape.y2, t);
        let pixelColor = curveBuffer.get(int(x), int(y));
        if (pixelColor[3] > 0) {
          intersects = true;
          break;
        }
      }

      if (!intersects) {
        newShapes.push(shape);
      }
    } else {
      newShapes.push(shape);
    }
  }

  shapes = newShapes;

  // Draw the Shapes
  drawShapes();
}

function generate() {
  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Center coordinates within work area
  let centerX = startX + workAreaWidth / 2;
  let centerY = startY + workAreaHeight / 2;

  // Radius for central negative space
  let negativeRadius = 200; // Adjust as needed

  // --- Structured Patterns (Grid with Negative Space) ---
  // (Same as previous code; omitted for brevity)

  // --- Bezier Curves with Gap Creation at Intersections ---

  let numCurves = 30; // Reduced number for performance
  let existingCurves = []; // To store existing curves' line segments

  for (let i = 0; i < numCurves; i++) {
    let attempts = 0;
    let maxAttempts = 100;
    let curvePoints = [];
    let x1, y1, x2, y2, cx1, cy1, cx2, cy2;

    while (attempts < maxAttempts) {
      // Generate random Bezier curve within work area
      x1 = random(startX, endX);
      y1 = random(startY, endY);
      x2 = random(startX, endX);
      y2 = random(startY, endY);
      cx1 = random(startX, endX);
      cy1 = random(startY, endY);
      cx2 = random(startX, endX);
      cy2 = random(startY, endY);

      // Approximate the curve with line segments
      let numSegments = 50;
      let curveSegments = [];

      let intersectsExisting = false;
      for (let t = 0; t < 1; t += 1 / numSegments) {
        let t1 = t;
        let t2 = t + 1 / numSegments;

        if (t2 > 1) t2 = 1;

        // Calculate points on the Bezier curve
        let p1 = bezierPoint(x1, cx1, cx2, x2, t1);
        let q1 = bezierPoint(y1, cy1, cy2, y2, t1);
        let p2 = bezierPoint(x1, cx1, cx2, x2, t2);
        let q2 = bezierPoint(y1, cy1, cy2, y2, t2);

        // Create segment
        let segment = { x1: p1, y1: q1, x2: p2, y2: q2 };

        // Check for intersections with existing curves
        for (let existingCurve of existingCurves) {
          for (let existingSegment of existingCurve) {
            if (linesIntersect(segment, existingSegment)) {
              intersectsExisting = true;
              break;
            }
          }
          if (intersectsExisting) break;
        }

        if (!intersectsExisting) {
          curveSegments.push(segment);
        } else {
          // Skip this segment to create a gap
          intersectsExisting = false;
        }
      }

      if (curveSegments.length > 0) {
        existingCurves.push(curveSegments);
        let colIndex = int(random(1, 10));
        let col = colors[colIndex].value;

        shapes.push({
          type: 'bezierSegments',
          segments: curveSegments,
          col
        });

        break; // Curve successfully added
      }

      attempts++;
    }
  }

  // Draw the Shapes
  drawShapes();
}

// Utility function to check if two line segments intersect
function linesIntersect(a, b) {
  let denominator = ((b.y2 - b.y1) * (a.x2 - a.x1)) - ((b.x2 - b.x1) * (a.y2 - a.y1));
  if (denominator === 0) return false; // Lines are parallel

  let ua = (((b.x2 - b.x1) * (a.y1 - b.y1)) - ((b.y2 - b.y1) * (a.x1 - b.x1))) / denominator;
  let ub = (((a.x2 - a.x1) * (a.y1 - b.y1)) - ((a.y2 - a.y1) * (a.x1 - b.x1))) / denominator;

  return (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1);
}

function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(2);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezierSegments') {
        for (let segment of shape.segments) {
          line(segment.x1, segment.y1, segment.x2, segment.y2);
        }
      }
    }
  }
}

function createSVGContent() {
  let svgContent = '';
  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 work area visualization to SVG
  svgContent += getWorkAreaSVG();

  // Add shapes to SVG
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      let strokeColor = shape.col;
      let strokeW = 2;  // Fixed stroke width for SVG export
      if (shape.type === 'line') {
        svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
      } else if (shape.type === 'bezierSegments') {
        for (let segment of shape.segments) {
          svgContent += `<line x1="${segment.x1}" y1="${segment.y1}" x2="${segment.x2}" y2="${segment.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
        }
      }
    }
  }

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

// Self-Portrait Day 1

/******************************************************************************
 * Description:
 * 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.
 ******************************************************************************/

// Global Variables with Default Values (used if configurations() is commented out)
let canvasWidthInches = 11;          // Canvas width in inches
let canvasHeightInches = 11;         // Canvas height in inches
let pixelsPerInch = 100;             // Resolution (pixels per inch)
let canvasWidth = canvasWidthInches * pixelsPerInch;    // Canvas width in pixels
let canvasHeight = canvasHeightInches * pixelsPerInch;  // Canvas height in pixels
let workAreaMarginInches = 1.5;      // Margin in inches (default 1.5 inches)
let workAreaMargin = workAreaMarginInches * pixelsPerInch;  // Margin in pixels
let visualizationMode = 0;           // Visualization mode for work area (default to 0)
let saveEnabled = false;             // Controls whether saving functions are active
let gridEnabled = true;              // Option to enable or disable the grid

let 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 activeColor = 0;          // 0 means all colors are active
let shapes = [];              // Array to store all line-based shapes
let dayNumber = '001';        // Current day of the series (e.g., '001' for Day 1)

function setup() {
  configurations();           // Apply configurations (can be commented out)
  createCanvas(canvasWidth, canvasHeight);
  generate();                 // Generate the artwork
  noLoop();                   // No animation required
}

function draw() {
  // Intentionally left blank
}

// configurations(): Contains settings and functions not related to generating the artwork
function configurations() {
  // Canvas Settings
  canvasWidthInches = 11;     // Canvas width in inches
  canvasHeightInches = 11;    // Canvas height in inches
  pixelsPerInch = 100;        // Resolution
  canvasWidth = canvasWidthInches * pixelsPerInch;
  canvasHeight = canvasHeightInches * pixelsPerInch;

  // Work Area Margin
  workAreaMarginInches = 1.5; // Margin in inches
  workAreaMargin = workAreaMarginInches * pixelsPerInch;

  // Visualization Mode for Work Area
  visualizationMode = 0;      // Options:
                              // 0 - Dots on corners
                              // 1 - Solid line
                              // 2 - Dotted lines
                              // 3 - Dashed lines
                              // 4 - Crosshairs

  // Day Number for File Naming
  dayNumber = '001';          // Adjust as needed for each day

  // Enable saving functions
  saveEnabled = true;

  // Grid Enabled
  gridEnabled = true;         // Set to false to disable the grid

  // Key Pressed Functionality
  keyPressed = function () {
    if (saveEnabled) {
      if (key === '0') {
        activeColor = 0;          // Show all colors
        drawShapes();
      } else if (key >= '1' && key <= '9') {
        activeColor = int(key);   // Toggle individual colors
        drawShapes();
      } else if (key === ' ') {
        downloadSVG();            // Save current view as SVG
      } else if (key === '.') {
        saveAllColors();          // Save individual SVGs for all colors used
      } else if (key === 'g' || key === 'G') {
        gridEnabled = !gridEnabled; // Toggle grid visibility
        drawShapes();
      }
    }
  };
}

// generate(): Contains all functionality of actually generating what the drawing looks like
function generate() {
  // Parameters for positioning
  let startX = workAreaMargin;
  let endX = canvasWidth - workAreaMargin;
  let startY = workAreaMargin;
  let endY = canvasHeight - workAreaMargin;
  let workAreaWidth = endX - startX;
  let workAreaHeight = endY - startY;

  // Center coordinates within work area
  let centerX = startX + workAreaWidth / 2;
  let centerY = startY + workAreaHeight / 2;

  // Radius for central negative space
  let negativeRadius = 200; // Adjust as needed

  // --- Structured Patterns (Grid with Negative Space) ---

  // Grid Pattern with Tighter Spacing
  let gridSpacing = 10; // Tighter grid
  if (gridEnabled) {
    for (let x = startX; x <= endX; x += gridSpacing) {
      for (let y = startY; y <= endY; y += gridSpacing) {
        // Calculate distance from center
        let distFromCenter = dist(x, y, centerX, centerY);
        if (distFromCenter > negativeRadius) {
          let colIndex = (((Math.floor((x + y) / gridSpacing) % 9) + 9) % 9) + 1;
          let col = colors[colIndex].value;

          // Vertical Lines
          shapes.push({ type: 'line', x1: x, y1: y, x2: x, y2: y + gridSpacing, col });

          // Horizontal Lines
          shapes.push({ type: 'line', x1: x, y1: y, x2: x + gridSpacing, y2: y, col });
        }
      }
    }
  }

  // --- Bezier Curves with Gap Creation at Intersections ---

  let numCurves = 30; // Adjusted for performance
  let existingCurves = []; // To store existing curves' line segments

  for (let i = 0; i < numCurves; i++) {
    let attempts = 0;
    let maxAttempts = 100;
    let curveSegments = [];
    let x1, y1, x2, y2, cx1, cy1, cx2, cy2;

    while (attempts < maxAttempts) {
      // Generate random Bezier curve within work area
      x1 = random(startX, endX);
      y1 = random(startY, endY);
      x2 = random(startX, endX);
      y2 = random(startY, endY);
      cx1 = random(startX, endX);
      cy1 = random(startY, endY);
      cx2 = random(startX, endX);
      cy2 = random(startY, endY);

      // Approximate the curve with line segments
      let numSegments = 50;
      let curveSegmentsTemp = [];

      let intersectsExisting = false;
      for (let t = 0; t < 1; t += 1 / numSegments) {
        let t1 = t;
        let t2 = t + 1 / numSegments;

        if (t2 > 1) t2 = 1;

        // Calculate points on the Bezier curve
        let p1 = bezierPoint(x1, cx1, cx2, x2, t1);
        let q1 = bezierPoint(y1, cy1, cy2, y2, t1);
        let p2 = bezierPoint(x1, cx1, cx2, x2, t2);
        let q2 = bezierPoint(y1, cy1, cy2, y2, t2);

        // Create segment
        let segment = { x1: p1, y1: q1, x2: p2, y2: q2 };

        // Check for intersections with existing curves and grid lines
        let safeDistance = 5; // Minimum gap of 5 pixels
        let intersects = false;

        // Check against existing curves
        for (let existingCurve of existingCurves) {
          for (let existingSegment of existingCurve) {
            if (distanceBetweenLines(segment, existingSegment) < safeDistance) {
              intersects = true;
              break;
            }
          }
          if (intersects) break;
        }

        // Check against grid lines
        if (!intersects) {
          for (let shape of shapes) {
            if (shape.type === 'line') {
              if (distanceBetweenLines(segment, shape) < safeDistance) {
                intersects = true;
                break;
              }
            }
          }
        }

        if (!intersects) {
          curveSegmentsTemp.push(segment);
        } else {
          // Create a gap by not adding the intersecting segment
        }
      }

      if (curveSegmentsTemp.length > 0) {
        existingCurves.push(curveSegmentsTemp);
        let colIndex = int(random(1, 10));
        let col = colors[colIndex].value;

        shapes.push({
          type: 'bezierSegments',
          segments: curveSegmentsTemp,
          col
        });

        break; // Curve successfully added
      }

      attempts++;
    }
  }

  // Draw the Shapes
  drawShapes();
}

// Utility function to check the minimum distance between two line segments
function distanceBetweenLines(a, b) {
  let dist1 = pointLineDistance(a.x1, a.y1, b.x1, b.y1, b.x2, b.y2);
  let dist2 = pointLineDistance(a.x2, a.y2, b.x1, b.y1, b.x2, b.y2);
  let dist3 = pointLineDistance(b.x1, b.y1, a.x1, a.y1, a.x2, a.y2);
  let dist4 = pointLineDistance(b.x2, b.y2, a.x1, a.y1, a.x2, a.y2);
  return min(dist1, dist2, dist3, dist4);
}

// Utility function to calculate the distance from a point to a line segment
function pointLineDistance(px, py, x1, y1, x2, y2) {
  let A = px - x1;
  let B = py - y1;
  let C = x2 - x1;
  let D = y2 - y1;

  let dot = A * C + B * D;
  let len_sq = C * C + D * D;
  let param = -1;
  if (len_sq !== 0) // Avoid division by zero
    param = dot / len_sq;

  let xx, yy;

  if (param < 0) {
    xx = x1;
    yy = y1;
  } else if (param > 1) {
    xx = x2;
    yy = y2;
  } else {
    xx = x1 + param * C;
    yy = y1 + param * D;
  }

  let dx = px - xx;
  let dy = py - yy;
  return sqrt(dx * dx + dy * dy);
}

function drawWorkArea() {
  stroke(0);
  switch (visualizationMode) {
    case 0:
      // Dots on corners of the canvas (full canvas size)
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
    case 1:
      // Solid line around work area
      noFill();
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      break;
    case 2:
      // Dotted lines around work area
      drawingContext.setLineDash([5, 5]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 3:
      // Dashed lines around work area
      drawingContext.setLineDash([10, 10]);
      rect(workAreaMargin, workAreaMargin, canvasWidth - 2 * workAreaMargin, canvasHeight - 2 * workAreaMargin);
      drawingContext.setLineDash([]);
      break;
    case 4:
      // Crosshairs
      line(canvasWidth / 2, workAreaMargin, canvasWidth / 2, canvasHeight - workAreaMargin);
      line(workAreaMargin, canvasHeight / 2, canvasWidth - workAreaMargin, canvasHeight / 2);
      break;
    default:
      // Default to dots on corners
      point(0, 0);
      point(canvasWidth, 0);
      point(0, canvasHeight);
      point(canvasWidth, canvasHeight);
      break;
  }
}

function drawShapes() {
  background(255);            // Clear background
  drawWorkArea();             // Redraw work area visualization
  noFill();

  // Draw shapes
  for (let shape of shapes) {
    if (activeColor === 0 || colors[activeColor].value === shape.col) {
      stroke(shape.col);
      strokeWeight(2);
      if (shape.type === 'line') {
        line(shape.x1, shape.y1, shape.x2, shape.y2);
      } else if (shape.type === 'bezierSegments') {
        for (let segment of shape.segments) {
          line(segment.x1, segment.y1, segment.x2, segment.y2);
        }
      }
    }
  }
}

// The following functions are only active if saveEnabled is true
if (saveEnabled) {
  // Key Pressed Functionality (Defined in configurations)
  // Already defined in configurations() function

  // createSVGContent(): Creates the SVG content as a string
  function createSVGContent() {
    let svgContent = '';
    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 work area visualization to SVG
    svgContent += getWorkAreaSVG();

    // Add shapes to SVG
    for (let shape of shapes) {
      if (activeColor === 0 || colors[activeColor].value === shape.col) {
        let strokeColor = shape.col;
        let strokeW = 2;  // Fixed stroke width for SVG export
        if (shape.type === 'line') {
          svgContent += `<line x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
        } else if (shape.type === 'bezierSegments') {
          for (let segment of shape.segments) {
            svgContent += `<line x1="${segment.x1}" y1="${segment.y1}" x2="${segment.x2}" y2="${segment.y2}" style="stroke:${strokeColor};stroke-width:${strokeW}" />n`;
          }
        }
      }
    }

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

  function getWorkAreaSVG() {
    let svg = '';
    switch (visualizationMode) {
      case 0:
        // Dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
      case 1:
        // Solid line around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1" />n`;
        break;
      case 2:
        // Dotted lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:2,2" />n`;
        break;
      case 3:
        // Dashed lines around work area
        svg += `<rect x="${workAreaMargin}" y="${workAreaMargin}" width="${canvasWidth - 2 * workAreaMargin}" height="${canvasHeight - 2 * workAreaMargin}" style="stroke:black; fill:none; stroke-width:1; stroke-dasharray:10,10" />n`;
        break;
      case 4:
        // Crosshairs
        svg += `<line x1="${canvasWidth / 2}" y1="${workAreaMargin}" x2="${canvasWidth / 2}" y2="${canvasHeight - workAreaMargin}" style="stroke:black; stroke-width:1" />n`;
        svg += `<line x1="${workAreaMargin}" y1="${canvasHeight / 2}" x2="${canvasWidth - workAreaMargin}" y2="${canvasHeight / 2}" style="stroke:black; stroke-width:1" />n`;
        break;
      default:
        // Default to dots on corners
        svg += `<circle cx="0" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="0" r="1" fill="black" />n`;
        svg += `<circle cx="0" cy="${canvasHeight}" r="1" fill="black" />n`;
        svg += `<circle cx="${canvasWidth}" cy="${canvasHeight}" r="1" fill="black" />n`;
        break;
    }
    return svg;
  }

  function downloadSVG() {
    const svgData = createSVGContent();
    const fileName = generateFileName();
    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);
  }

  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 saveAllColors() {
    // Temporarily store the current activeColor
    let previousActiveColor = activeColor;

    // Loop through all colors
    for (let i = 1; i <= 9; i++) {
      // Check if the color is used in any shape
      let colorUsed = shapes.some(shape => shape.col === colors[i].value);
      if (colorUsed) {
        activeColor = i;
        const svgData = createSVGContent();
        const colorName = colors[i].name.toUpperCase();
        const colorNumber = `0${i}`.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();
  }
}