// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Title)
=======================================

### Title: *Superformula Resonance*

### Medium: Generative Drawing on Paper

### Keywords: superformula, parametric curves, mathematical art, algorithmic form, radial symmetry, layered scaling, color harmony, continuous stroke, SVG consistency, generative identity

### Conceptual Framework

“Superformula Resonance” interprets identity as a family of mathematical forms resonating together.  
Each shape arises from the superformula—a powerful parametric equation capable of generating many natural and abstract outlines.  
By varying parameters, scale, and rotation for each instance, the artwork echoes how our core self remains constant even as facets shift in form and perspective.  
The overlapping yet distinct curves symbolize the layered complexity of self‑perception, unified by the underlying mathematical resonance.

### Technical Approach

- **Superformula Implementation**: We compute r(θ) via the superformula for each shape, using unique parameters (m, n1, n2, n3, a, b).  
- **Layered Instances**: Between 3–5 instances of the superformula shape are drawn, each with its own scale and rotation, preventing exact overlaps.  
- **Continuous Path Tracking**: Every vertex is recorded in a single `pathData` string so that the canvas drawing and SVG export are perfectly aligned.  
- **Color & Opacity**: Selected from the nine‑color palette; stroke opacity fixed at 0.8.  
- **No Fills, No Overlaps**: Shapes are drawn purely with solid strokes; small offsets in scale/rotation ensure they don’t trace exactly atop one another.  
- **Markers & Palette Bars**: Registration markers and bottom palette bars are added as in the template to complete the compositional framework.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let shapeParams = [];
let numShapes = 0;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginPixels;
let strokeWeightValue;
let selectedColorIndices = [];
let pathData = '';  // Tracks all drawn paths for SVG export

/**
 * Superformula function
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

function applyStrokeWithOpacity(hexColor) {
  const c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);
  noLoop();

  // Randomize margin
  const workAreaMarginInches = random(1.5, 4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch;

  // Stroke weight ~0.5mm
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;

  // Choose colors
  const numColors = floor(random(1, 10));
  selectedColorIndices = selectRandomColorIndices(numColors);

  // Define superformula instances
  numShapes = floor(random(3, 6));
  for (let i = 0; i < numShapes; i++) {
    shapeParams.push({
      m: floor(random(3, 9)),
      n1: random(0.5, 2),
      n2: random(0.5, 2),
      n3: random(0.5, 2),
      a: 1, b: 1,
      scale: random(0.2, 0.45),
      rotation: random(TWO_PI)
    });
  }

  // Generate
  drawShapes();
}

/**
 * =======================================
 * Color Selection Helper
 * =======================================
 */
function selectRandomColorIndices(n) {
  const indices = Object.keys(colors).map(k => parseInt(k));
  const chosen = [];
  while (chosen.length < n && indices.length) {
    const idx = floor(random(indices.length));
    chosen.push(indices[idx]);
    indices.splice(idx, 1);
  }
  return chosen.sort((a, b) => a - b);
}

/**
 * =======================================
 * Drawing Function
 * =======================================
 */
function drawShapes() {
  background(255);
  pathData = '';

  // Draw each superformula shape
  for (let i = 0; i < numShapes; i++) {
    const p = shapeParams[i];
    const colIdx = selectedColorIndices[i % selectedColorIndices.length];
    applyStrokeWithOpacity(colors[colIdx].hex);
    strokeWeight(strokeWeightValue);
    noFill();

    // Compute vertices
    const pts = [];
    const steps = 300;
    for (let j = 0; j <= steps; j++) {
      const theta = map(j, 0, steps, 0, TWO_PI);
      const r = superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b);
      const x = width/2 + cos(theta + p.rotation) * r * canvasWidthPixels * p.scale;
      const y = height/2 + sin(theta + p.rotation) * r * canvasHeightPixels * p.scale;
      pts.push({ x, y });
    }

    // Record pathData
    let shapePath = `M${pts[0].x.toFixed(2)},${pts[0].y.toFixed(2)}`;
    for (let v = 1; v < pts.length; v++) {
      shapePath += ` L${pts[v].x.toFixed(2)},${pts[v].y.toFixed(2)}`;
    }
    shapePath += ' Z ';
    pathData += shapePath;

    // Draw on canvas
    beginShape();
    pts.forEach(v => vertex(v.x, v.y));
    endShape(CLOSE);
  }

  // Registration and palette
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Markers & Palette
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width-5, height, width, height);
  line(width, height-5, width, height);
}

function addColorPaletteBars() {
  const paletteLength = 300;
  const barHeight = 2;
  const gapSize = 7;
  const yStart = height - (1.25 * pixelsPerInch);

  const used = selectedColorIndices;
  const totalGaps = (used.length - 1) * gapSize;
  const segLength = (paletteLength - totalGaps) / used.length;
  let x = (width - paletteLength) / 2;

  strokeWeight(barHeight);
  used.forEach(ci => {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, yStart, x + segLength, yStart);
    x += segLength + gapSize;
  });
}

/**
 * =======================================
 * Key Handling: Export SVG
 * =======================================
 */
function keyPressed() {
  if (key === ' ') saveSVGs();
}

function saveSVGs() {
  const ts = Date.now();
  const allSVG = generateSVG(0);
  saveSVGFile(allSVG, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);

  selectedColorIndices.forEach((ci, idx) => {
    const svg = generateSVG(ci);
    const name = colors[ci].name.toUpperCase();
    saveSVGFile(svg, `${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`);
  });
}

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

  if (activeColor === 0) {
    selectedColorIndices.forEach((ci, layer) => {
      svg += addSegmentsSVG(ci, layer+1, 0);
    });
  } else {
    const layer = selectedColorIndices.indexOf(activeColor) + 1;
    svg += addSegmentsSVG(activeColor, layer, activeColor);
  }

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

function addMarkersSVG() {
  const sw = 1;
  const off = sw/2;
  return `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">` +
         `<path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${(width-5-off).toFixed(2)},${(height-off).toFixed(2)} L${(width-off).toFixed(2)},${(height-off).toFixed(2)} L${(width-off).toFixed(2)},${(height-5-off).toFixed(2)}" stroke-width="${sw}" fill="none"/></g>n`;
}

function addSegmentsSVG(ci, layerNum, activeColor) {
  const col = colors[ci];
  let g = `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="${col.hex}">n`;
  g += `<path d="${pathData}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
  // palette bar
  const used = selectedColorIndices;
  const i = used.indexOf(ci);
  const paletteLength = 300, barH = 2, gap = 7;
  const y = height - (1.25 * pixelsPerInch);
  const totalGaps = (used.length-1)*gap;
  const seg = (paletteLength - totalGaps)/used.length;
  const x = (width - paletteLength)/2 + i*(seg+gap);
  g += `<path d="M${x.toFixed(2)},${y.toFixed(2)} H${(x+seg).toFixed(2)}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barH}" fill="none"/>n`;
  g += `</g>n`;
  return g;
}

function saveSVGFile(data, fname) {
  const blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url; link.download = fname;
  document.body.appendChild(link); link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Spiral)
=======================================

### Title: *Topological Resonance*

### Medium: Generative Drawing on Paper

### Keywords: superformula, spiral, topological form, continuous stroke, algorithmic art, identity, transformation, parametric curve, fluid evolution, non‑intersecting path

### Conceptual Framework

I envision my identity as one continuous journey—from an inner core to an outer boundary—never crossing its own path.  
Rather than discrete layers, I see the self as a single topological form that morphs gradually.  
By tracing a superformula spiral, I draw my sense of being as an unbroken line that evolves outward,  
each twist and turn a subtle shift in perspective. The result is a fluid, non‑intersecting shape that embodies the continuity and transformation inherent in self‑perception.

### Technical Approach

- **Generative Rules**: We follow a spiral that makes a specified number of turns (`spiralTurns`), stepping through angles and interpolating the radius scale from `innerScale` to `outerScale`.  
- **Superformula**: A parametric function (with parameters `m, n1, n2, n3, a, b`) defines the underlying outline at each angle.  
- **Continuous Path**: We record every vertex in one `pathData` string—beginning with `M` and appending `L`—so the canvas and SVG match exactly.  
- **No Intersections**: By spiraling outward without returning inward, the line never overlaps or intersects itself.  
- **Single Color**: We use one chosen ink color at opacity 0.8 to emphasize unity.  
- **Markers & Palette Bars**: Standard registration markers and a single‑bar color swatch complete the framework.

*/

//////////////////////////////////////////////
// Generated with p5.js                     //
//////////////////////////////////////////////

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  spiralTurns: 1,          // How many full revolutions outward
  stepsPerTurn: 600,       // Number of vertices per revolution
  innerScale: 0.15,        // Radius scale at start (fraction of canvas)
  outerScale: 0.45,        // Radius scale at end
  m: 7,                    // Superformula parameter
  n1: 1,                   // Superformula parameter
  n2: 1,                   // Superformula parameter
  n3: 1,                   // Superformula parameter
  a: 1,                    // Superformula parameter
  b: 1,                    // Superformula parameter
  colorCount: 1            // Always use one color for continuity
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasWidthPixels;
let canvasHeightPixels;
let workAreaMarginPixels;
let strokeWeightValue;
let selectedColorIndices = [];
let pathData = '';  // Complete SVG path string

/**
 * Superformula: returns r for given θ
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Apply stroke color with opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  // Canvas dimensions
  canvasWidthPixels = canvasWidthInches * pixelsPerInch;
  canvasHeightPixels = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasWidthPixels, canvasHeightPixels);
  noLoop();

  // Random margin between 1.5–4 inches
  const marginInches = random(1.5, 4);
  workAreaMarginPixels = marginInches * pixelsPerInch;

  // Stroke weight ≈0.5 mm → ~2 px
  strokeWeightValue = 2;
  workAreaMarginPixels += strokeWeightValue / 2;

  // Select exactly one color
  selectedColorIndices = [floor(random(1, 10))];

  // Draw the evolving spiral shape
  drawShapes();
}

/**
 * =======================================
 * Drawing Function
 * =======================================
 */
function drawShapes() {
  background(255);
  pathData = '';

  // Choose our single stroke color
  const ci = selectedColorIndices[0];
  applyStrokeWithOpacity(colors[ci].hex);
  strokeWeight(strokeWeightValue);
  noFill();

  // Begin continuous path
  let totalSteps = generationRules.spiralTurns * generationRules.stepsPerTurn;
  let first = true;

  beginShape();
  for (let i = 0; i <= totalSteps; i++) {
    // Angle along the spiral
    let phi = map(i, 0, totalSteps, 0, generationRules.spiralTurns * TWO_PI);
    let t = phi % TWO_PI;

    // Interpolate scale from inner to outer
    let f = i / totalSteps;
    let scale = lerp(generationRules.innerScale, generationRules.outerScale, f);

    // Compute radius via superformula
    let r = superformula(
      t,
      generationRules.m,
      generationRules.n1,
      generationRules.n2,
      generationRules.n3,
      generationRules.a,
      generationRules.b
    ) * min(canvasWidthPixels, canvasHeightPixels) * scale;

    // Convert to canvas coords
    let x = width / 2 + cos(phi) * r;
    let y = height / 2 + sin(phi) * r;

    // Record SVG path commands
    if (first) {
      pathData += `M${x.toFixed(2)},${y.toFixed(2)} `;
      first = false;
    } else {
      pathData += `L${x.toFixed(2)},${y.toFixed(2)} `;
    }

    // Draw vertex
    vertex(x, y);
  }
  endShape();

  // Registration markers and color bar
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration Markers & Palette Bars
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(width - 5, height, width, height);
  line(width, height - 5, width, height);
}

function addColorPaletteBars() {
  const paletteLength = 300;
  const barHeight = 2;
  const gapSize = 7;
  const y = height - (1.25 * pixelsPerInch);

  const used = selectedColorIndices;
  const totalGaps = (used.length - 1) * gapSize;
  const seg = (paletteLength - totalGaps) / used.length;
  let x = (width - paletteLength) / 2;

  strokeWeight(barHeight);
  used.forEach(ci => {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gapSize;
  });
}

/**
 * =======================================
 * Key Press Handling: Export SVG
 * =======================================
 */
function keyPressed() {
  if (key === ' ') saveSVGs();
}

function saveSVGs() {
  const ts = Date.now();
  // Combined (only one color anyway)
  const allSVG = generateSVG(0);
  saveSVGFile(allSVG, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);
  // Individual color
  const ci = selectedColorIndices[0];
  const name = colors[ci].name.toUpperCase();
  const singleSVG = generateSVG(ci);
  saveSVGFile(singleSVG, `${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`);
}

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

  const ci = activeColor === 0 ? selectedColorIndices[0] : activeColor;
  svg += addSegmentsSVG(ci, 1, ci);

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

function addMarkersSVG() {
  const sw = 1;
  const off = sw / 2;
  return `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">` +
         `<path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${(width-5-off).toFixed(2)},${(height-off).toFixed(2)} L${(width-off).toFixed(2)},${(height-off).toFixed(2)} L${(width-off).toFixed(2)},${(height-5-off).toFixed(2)}" stroke-width="${sw}" fill="none"/></g>n`;
}

function addSegmentsSVG(ci, layerNum, activeColor) {
  const col = colors[ci];
  let g = `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="${col.hex}">n`;
  g += `<path d="${pathData}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
  // single palette bar
  const paletteLength = 300;
  const barH = 2;
  const gap = 7;
  const y = height - (1.25 * pixelsPerInch);
  const seg = paletteLength; // only one bar → full length
  const x = (width - paletteLength) / 2;
  g += `<path d="M${x.toFixed(2)},${y.toFixed(2)} H${(x+seg).toFixed(2)}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${barH}" fill="none"/>n`;
  g += `</g>n`;
  return g;
}

function saveSVGFile(data, fname) {
  const blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url; link.download = fname;
  document.body.appendChild(link); link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Echoes of Resonance)
=======================================

### Title: *Echoes of Resonance*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, parametric morphing, continuous variation, algorithmic art, waveforms, identity, generative process, non‑linear interpolation, color exploration

### Conceptual Framework

I imagine my identity as ripples radiating outward—each echo a subtly shifted form of the last.  
“Echoes of Resonance” traces twenty interlinked shapes, each defined by a unique superformula parameter set and scaled from an inner core to an outer boundary.  
As one shape morphs into the next, they embody the continuity of experience—distinct yet inseparable moments in my evolving self‑portrait.  
Randomly chosen ink colors lend each echo its own voice, while the gradual interpolation of form creates a seamless chorus of shapes.

### Technical Approach

- **Generative Rules** (`generationRules`):
  - `numShapes`: Number of echoes (20).
  - `innerScale` → `outerScale`: Radius interpolation for each echo.
  - `m, n1, n2, n3, a, b`: Superformula parameters randomized per echo.
  - `steps`: Resolution of each shape.
  - `colorCount`: Number of distinct ink colors selected.
- **Shape Morphing**: For each echo index *i*, parameters are freshly randomized. Its scale is `lerp(innerScale, outerScale, i/(numShapes-1))`.  
- **Continuous Drawing**: Each shape is drawn as its own `<path>`, recorded in `pathDataList[]`, ensuring canvas and SVG alignment.  
- **Color Assignment**: A random subset of the nine‑color palette is chosen once. Shapes cycle through these inks.  
- **Regeneration**: Press **R** to regenerate all echoes and superformula parameters while preserving the current palette.  
- **Export**: Press **SPACE** to save SVGs—one combined file and one per color layer.

*/

//////////////////////////////////////////////
// Generated with p5.js                     //
//////////////////////////////////////////////

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numShapes:    20,      // Number of echoes
  innerScale:   0.15,    // Start radius as fraction of canvas
  outerScale:   0.45,    // End radius as fraction of canvas
  steps:        300,     // Points per shape
  colorCount:   4        // Number of distinct inks to pick
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let marginPx, strokeW;
let palette = [];
let shapeParams = [];
let pathDataList = [];

/**
 * Superformula: returns radius factor for angle θ
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Apply stroke with opacity
 */
function applyStroke(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // Random margin 1.5–4" and 0.5mm stroke ≈2px
  marginPx = random(1.5, 4) * pixelsPerInch;
  strokeW = 2;
  marginPx += strokeW / 2;

  // Pick a random palette of inks
  palette = pickRandomPalette(generationRules.colorCount);

  // Generate shapes
  regenerateShapes();
}

/**
 * Pick N unique random colors from the palette
 */
function pickRandomPalette(n) {
  let keys = Object.keys(colors).map(Number);
  let chosen = [];
  while (chosen.length < n && keys.length) {
    let i = floor(random(keys.length));
    chosen.push(keys[i]);
    keys.splice(i, 1);
  }
  return chosen;
}

/**
 * Generate new superformula parameters and path data
 */
function regenerateShapes() {
  shapeParams = [];
  pathDataList = [];

  for (let i = 0; i < generationRules.numShapes; i++) {
    // Random superformula parameters
    shapeParams.push({
      m:    floor(random(3, 10)),
      n1:   random(0.5, 2),
      n2:   random(0.5, 2),
      n3:   random(0.5, 2),
      a:    1,
      b:    1,
      scale: lerp(
        generationRules.innerScale,
        generationRules.outerScale,
        i / (generationRules.numShapes - 1)
      )
    });

    // Build SVG path data
    let pd = `M`;
    for (let j = 0; j <= generationRules.steps; j++) {
      let theta = map(j, 0, generationRules.steps, 0, TWO_PI);
      let r = superformula(
        theta,
        shapeParams[i].m,
        shapeParams[i].n1,
        shapeParams[i].n2,
        shapeParams[i].n3,
        shapeParams[i].a,
        shapeParams[i].b
      ) * min(canvasW, canvasH) * shapeParams[i].scale;
      let x = canvasW / 2 + cos(theta) * r;
      let y = canvasH / 2 + sin(theta) * r;
      pd += `${x.toFixed(2)},${y.toFixed(2)} `;
      pd += (j < generationRules.steps) ? `L` : `Z`;
    }
    pathDataList.push(pd);
  }

  drawShapes();
}

/**
 * =======================================
 * Draw all shapes on the canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  // Draw each echo
  for (let i = 0; i < pathDataList.length; i++) {
    let ci = palette[i % palette.length];
    applyStroke(colors[ci].hex);
    strokeWeight(strokeW);

    // Parse and draw the pathDataList[i]
    let commands = pathDataList[i].trim().split(/s+/);
    beginShape();
    for (let k = 0; k < commands.length; k++) {
      let cmd = commands[k];
      if (cmd.startsWith('M') || cmd.startsWith('L')) {
        let coords = cmd.slice(1).split(',');
        vertex(parseFloat(coords[0]), parseFloat(coords[1]));
      }
    }
    endShape(CLOSE);
  }

  drawMarkers();
  drawPaletteBar();
}

/**
 * =======================================
 * Registration Markers & Palette Bar
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  applyStroke('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(canvasW - 5, canvasH, canvasW, canvasH);
  line(canvasW, canvasH - 5, canvasW, canvasH);
}

function drawPaletteBar() {
  const total = 300, h = 2, gap = 7;
  const y = canvasH - (1.25 * pixelsPerInch);
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  let x = (canvasW - total) / 2;
  strokeWeight(h);
  for (let ci of palette) {
    applyStroke(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const ts = Date.now();
  const combined = generateSVG(0);
  saveSVGFile(combined, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);
  for (let ci of palette) {
    const svg = generateSVG(ci);
    const name = colors[ci].name.toUpperCase();
    saveSVGFile(svg, `${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`);
  }
}

function generateSVG(activeColor = 0) {
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svg += markersSVG();

  for (let i = 0; i < pathDataList.length; i++) {
    let ci = palette[i % palette.length];
    if (activeColor !== 0 && ci !== activeColor) continue;
    svg += pathLayerSVG(ci, i + 1, pathDataList[i]);
  }

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

function markersSVG() {
  return `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">` +
         `<path d="M5,0 L0,0 L0,5 M${canvasW-5},${canvasH} L${canvasW},${canvasH} L${canvasW},${canvasH-5}" stroke-width="1" fill="none"/></g>n`;
}

function pathLayerSVG(ci, layerNum, d) {
  const col = colors[ci];
  let g = `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="${col.hex}">n`;
  g += `<path d="${d}" stroke-width="${strokeW}" fill="none"/>n`;
  g += `</g>n`;
  return g;
}

function saveSVGFile(data, fname) {
  let blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  let url  = URL.createObjectURL(blob);
  let a    = document.createElement('a');
  a.href   = url; a.download = fname;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, parametric morphing, ripple effect, generative art, identity, transformation, algorithmic exploration, continuous variation, color resonance

### Conceptual Framework

I envision my sense of self as ripples of form that grow and shift as they radiate outward.  
Each echo is a unique variant of the superformula shape, starting from a small core and expanding into the next,  
together forming a chorus of twenty evolving outlines that embody continuity, change, and resonance.

### Technical Approach

- **Generative Rules** (`generationRules`):
  - `numShapes`: total echoes (20 shapes).
  - `innerScale` → `outerScale`: how each outline’s size interpolates from smallest to largest.
  - `stepsPerShape`: resolution of each parametric curve.
  - `paletteCount`: number of ink colors chosen from the nine‑color palette.
- **Shape Parameters**: For each echo `i`, we compute
  - a scale factor via `lerp(innerScale, outerScale, i/(numShapes-1))`,
  - a randomized set of superformula parameters `(m, n1, n2, n3, a, b)`.
- **Path Recording**: Each shape’s SVG path is stored in `pathDataList[i]` to ensure canvas and SVG match exactly.
- **Color Assignment**: We pick `paletteCount` random inks once, then cycle through them per shape.
- **Regeneration**: Press **R** to regenerate all shapes and superformula parameters (palette stays the same).
- **Export**: Press **SPACE** to save one combined SVG and one per color layer.

*/

//////////////////////////////////////////////
// Generated with p5.js                     //
//////////////////////////////////////////////

/**
 * Constants (Immutable)
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * Generative Rules (Mutable)
 */
let generationRules = {
  numShapes:     20,    // Number of echoes
  innerScale:    0.05,  // Starting radius as fraction of canvas
  outerScale:    0.45,  // Ending radius as fraction of canvas
  stepsPerShape: 300,   // Vertices per outline
  paletteCount:  4      // Number of ink colors to choose
};

/**
 * Global Variables
 */
let canvasW, canvasH;
let marginPx, strokeW;
let palette = [];
let shapeParams = [];
let pathDataList = [];

/**
 * Superformula: returns radius factor for given θ
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStroke(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * p5.js Setup
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // Random margin between 1.5" and 4"
  marginPx = random(1.5, 4) * pixelsPerInch;
  // Approximate 0.5 mm stroke weight
  strokeW = 2;
  marginPx += strokeW / 2;

  // Pick a random ink palette
  palette = pickRandomPalette(generationRules.paletteCount);

  // Generate initial shapes
  regenerateShapes();
}

/**
 * Pick N unique random inks
 */
function pickRandomPalette(n) {
  let keys = Object.keys(colors).map(Number);
  let chosen = [];
  while (chosen.length < n && keys.length) {
    let idx = floor(random(keys.length));
    chosen.push(keys[idx]);
    keys.splice(idx, 1);
  }
  return chosen;
}

/**
 * Generate or regenerate all echo shapes
 */
function regenerateShapes() {
  shapeParams   = [];
  pathDataList  = [];

  for (let i = 0; i < generationRules.numShapes; i++) {
    // Randomized superformula parameters
    shapeParams.push({
      m:    floor(random(3, 10)),
      n1:   random(0.5, 2),
      n2:   random(0.5, 2),
      n3:   random(0.5, 2),
      a:    1,
      b:    1,
      scale: lerp(
        generationRules.innerScale,
        generationRules.outerScale,
        i / (generationRules.numShapes - 1)
      )
    });

    // Build SVG path string
    let pd = `M`;
    for (let j = 0; j <= generationRules.stepsPerShape; j++) {
      let theta = map(j, 0, generationRules.stepsPerShape, 0, TWO_PI);
      let r = superformula(
        theta,
        shapeParams[i].m,
        shapeParams[i].n1,
        shapeParams[i].n2,
        shapeParams[i].n3,
        shapeParams[i].a,
        shapeParams[i].b
      ) * min(canvasW, canvasH) * shapeParams[i].scale;
      let x = canvasW / 2 + cos(theta) * r;
      let y = canvasH / 2 + sin(theta) * r;
      pd += `${x.toFixed(2)},${y.toFixed(2)} `;
      pd += (j < generationRules.stepsPerShape) ? `L` : `Z`;
    }
    pathDataList.push(pd);
  }

  drawShapes();
}

/**
 * Draw all echoes on canvas
 */
function drawShapes() {
  background(255);

  for (let i = 0; i < pathDataList.length; i++) {
    let ci = palette[i % palette.length];
    applyStroke(colors[ci].hex);
    strokeWeight(strokeW);

    // Parse pathDataList[i] and render
    let cmds = pathDataList[i].trim().split(/s+/);
    beginShape();
    for (let c of cmds) {
      if (c.startsWith('M') || c.startsWith('L')) {
        let pts = c.slice(1).split(',');
        vertex(parseFloat(pts[0]), parseFloat(pts[1]));
      }
    }
    endShape(CLOSE);
  }

  drawMarkers();
  drawPaletteBar();
}

/**
 * Draw registration markers
 */
function drawMarkers() {
  strokeWeight(1);
  applyStroke('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(canvasW - 5, canvasH, canvasW, canvasH);
  line(canvasW, canvasH - 5, canvasW, canvasH);
}

/**
 * Draw color palette bar at bottom
 */
function drawPaletteBar() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  let x = (canvasW - total) / 2;

  strokeWeight(barH);
  for (let ci of palette) {
    applyStroke(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

/**
 * Key handling: R to regenerate shapes, SPACE to export
 */
function keyPressed() {
  if (key === 'r' || key === 'R') {
    regenerateShapes();
  } else if (key === ' ') {
    saveSVGs();
  }
}

/**
 * Export combined SVG and one per color
 */
function saveSVGs() {
  const ts = Date.now();
  // Combined
  let allSVG = generateSVG(0);
  saveSVGFile(allSVG, `${dayNumber}-ALL-PORTRAIT-${ts}.svg`);
  // Individual colors
  for (let ci of palette) {
    let svg = generateSVG(ci);
    let name = colors[ci].name.toUpperCase();
    saveSVGFile(svg, `${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`);
  }
}

/**
 * Build SVG string for either all or a specific color
 */
function generateSVG(activeColor = 0) {
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
  svg += markersSVG();

  for (let i = 0; i < pathDataList.length; i++) {
    let ci = palette[i % palette.length];
    if (activeColor !== 0 && ci !== activeColor) continue;
    svg += pathLayerSVG(ci, i + 1, pathDataList[i]);
  }

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

/**
 * SVG for registration markers
 */
function markersSVG() {
  return `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">` +
         `<path d="M5,0 L0,0 L0,5 M${canvasW-5},${canvasH} L${canvasW},${canvasH} L${canvasW},${canvasH-5}" stroke-width="1" fill="none"/></g>n`;
}

/**
 * SVG group for one shape layer
 */
function pathLayerSVG(ci, layerNum, d) {
  let col = colors[ci];
  let g = `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="${col.hex}">n`;
  g += `  <path d="${d}" stroke-width="${strokeW}" fill="none"/>n`;
  g += `</g>n`;
  return g;
}

/**
 * Download an SVG file via Blob
 */
function saveSVGFile(data, fname) {
  let blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
  let url  = URL.createObjectURL(blob);
  let a    = document.createElement('a');
  a.href   = url;
  a.download= fname;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, identity, ripple, growth, resonance, generative art,
              algorithmic transformation, nested forms, color interplay

### Conceptual Framework

Identity unfolds like concentric ripples: each wave carries traces of the one before, yet
every new outline reveals a fresh articulation of self. Twenty echoes radiate from a core,
their contours gradually expanding and transforming, suggesting a continuous dialogue
between inner origin and outer expression.

### Technical Approach

- **Generative Rules**
  - `numEchoes` = 20 nested outlines.
  - `innerScale` → `outerScale` map the smallest to largest radius.
  - Two random super‑formula parameter sets **A** and **B** are sampled once per generation.
  - Echo *i* uses parameters that linearly interpolate between **A** and **B**, ensuring a
    perceptible morph.
  - Each echo’s shape is normalised (max *r* = 1) so its final size depends **only** on its
    scale factor—guaranteeing strict inner‑to‑outer ordering.
- A random ink palette is picked once; echoes cycle through these inks.
- Press **R** to regenerate all geometry while preserving the present palette.
- Press **SPACE** to export one combined SVG and individual colour layers.

*/

/////////////////////////////////////////////////
// Generated with p5.js                        //
/////////////////////////////////////////////////

/* ----------  CONSTANTS  ---------- */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const ppi                = 100;        // pixels‑per‑inch
const dayNumber          = '171';

const inks = {
  1:{name:'ORANGE', hex:'#ff6600'},
  2:{name:'BROWN',  hex:'#993300'},
  3:{name:'RED',    hex:'#f01e2c'},
  4:{name:'ROSE',   hex:'#ff00bf'},
  5:{name:'PURPLE', hex:'#bf00ff'},
  6:{name:'GREEN',  hex:'#00cc99'},
  7:{name:'BLUE',   hex:'#0040ff'},
  8:{name:'BLACK',  hex:'#333333'},
  9:{name:'SEPIA',  hex:'#856647'}
};

const alpha        = 0.8;  // stroke opacity
const strokePx     = 2;    // ≈0.5 mm at 100 ppi
const genRules = {
  numEchoes: 20,
  innerScale: 0.05,
  outerScale: 0.45,
  steps: 360,
  paletteCount: 4
};

/* ----------  GLOBALS  ---------- */
let W, H;
let palette   = [];
let pathData  = [];  // SVG path strings per echo
let aParams, bParams; // super‑formula end‑points

/* ----------  SUPER‑FORMULA ---------- */
function sf(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1+t2, -1/n1);
}

/* ----------  UTILS ---------- */
function inkColor(hex){ const c=color(hex); c.setAlpha(255*alpha); stroke(c); }

function randParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.4,2),
    n2: random(0.4,2),
    n3: random(0.4,2),
    a:1,b:1
  };
}
function lerpParams(p,q,t){
  return {
    m:  lerp(p.m ,q.m ,t),
    n1: lerp(p.n1,q.n1,t),
    n2: lerp(p.n2,q.n2,t),
    n3: lerp(p.n3,q.n3,t),
    a:1,b:1
  };
}

/* ----------  p5.js  ---------- */
function setup(){
  W = canvasWidthInches*ppi;
  H = canvasHeightInches*ppi;
  createCanvas(W,H); noLoop();
  strokeWeight(strokePx);

  palette = randomPalette(genRules.paletteCount);
  regenerate();          // build initial echoes
}

/* pick N unique inks */
function randomPalette(n){
  const pool = Object.keys(inks).map(Number);
  const out=[];
  while(out.length<n){ const i=floor(random(pool.length)); out.push(pool.splice(i,1)[0]); }
  return out;
}

/* regenerate geometry but keep palette */
function regenerate(){
  pathData=[];

  // choose two random endpoint parameter sets
  aParams = randParams();
  bParams = randParams();

  for(let i=0;i<genRules.numEchoes;i++){
    const t   = i/(genRules.numEchoes-1);
    const prm = lerpParams(aParams,bParams,t);
    const scl = lerp(genRules.innerScale,genRules.outerScale,t);

    // sample super‑formula, normalise so max r = 1
    let maxR = 0;
    const rVals=[];
    for(let s=0;s<=genRules.steps;s++){
      const th = map(s,0,genRules.steps,0,TWO_PI);
      const r  = sf(th,prm.m,prm.n1,prm.n2,prm.n3,prm.a,prm.b);
      rVals.push(r); if(r>maxR) maxR=r;
    }

    let d=`M`;
    for(let s=0;s<=genRules.steps;s++){
      const th = map(s,0,genRules.steps,0,TWO_PI);
      const rN = (rVals[s]/maxR)*min(W,H)*scl;
      const x  = W/2 + cos(th)*rN;
      const y  = H/2 + sin(th)*rN;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += (s<genRules.steps)?`L`:`Z`;
    }
    pathData.push({d, ink: palette[i%palette.length]});
  }

  drawEchoes();
}

/* draw to canvas */
function drawEchoes(){
  background(255);
  for(let i=0;i<pathData.length;i++){
    inkColor(inks[pathData[i].ink].hex);
    beginShape();
    const cmds = pathData[i].d.trim().split(/s+/);
    for(let c of cmds){
      if(c[0]==='M'||c[0]==='L'){
        const xy=c.slice(1).split(','); vertex(+xy[0],+xy[1]);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers(); drawPaletteBar();
}

/* registration markers */
function drawMarkers(){
  strokeWeight(1); inkColor('#000000');
  line(0,0,5,0); line(0,0,0,5);
  line(W-5,H,W,H); line(W,H-5,W,H);
}

/* palette bar */
function drawPaletteBar(){
  const total=300, h=2, gap=7;
  const y=H-1.25*ppi;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  let x=(W-total)/2;
  strokeWeight(h);
  for(let ci of palette){ inkColor(inks[ci].hex); line(x,y,x+seg,y); x+=seg+gap; }
}

/* ----------  INTERACTION ---------- */
function keyPressed(){
  if(key==='r'||key==='R'){ regenerate(); }
  else if(key===' '){ exportSVG(); }
}

/* ----------  SVG EXPORT ---------- */
function exportSVG(){
  const ts=Date.now();
  saveSVG(`${dayNumber}-ALL-${ts}.svg`,0);
  palette.forEach(ci=>saveSVG(`${dayNumber}-0${ci}-${inks[ci].name}-${ts}.svg`,ci));
}

function saveSVG(fname,activeInk){
  let svg=`<svg version="1.1" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">n`;

  // markers layer
  svg+=`<g id="markers" stroke="black" stroke-opacity="${alpha}"><path d="M5,0 L0,0 L0,5 M${W-5},${H} L${W},${H} L${W},${H-5}" stroke-width="1" fill="none"/></g>n`;

  // echo layers
  pathData.forEach((p,idx)=>{
    if(activeInk && p.ink!==activeInk) return;
    const col=inks[p.ink].hex;
    svg+=`<g id="echo${idx}" stroke="${col}" stroke-opacity="${alpha}"><path d="${p.d}" stroke-width="${strokePx}" fill="none"/></g>n`;
  });
  svg+='</svg>';

  const blob=new Blob([svg],{type:'image/svg+xml'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a'); a.href=url; a.download=fname;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, ripple, identity, nested forms, transformation, generative art, continuity, expansion, resonance

### Conceptual Framework

I see my sense of self as a series of ripples—each one carrying the memory of the last, yet steadily growing outward into something new. Twenty concentric echoes unfold from a hidden core, their contours interlinked in a seamless chorus of change and continuity.

### Technical Approach

I sample two random superformula shapes (inner and outer) as radial profiles over 360 angles. For each of twenty echoes, I linearly interpolate radius values at every angle—ensuring each outline nests perfectly outside the previous without intersections. A small, fixed set of ink colors is chosen once and cycled through. Shapes are drawn with `noFill()` and consistent stroke opacity. Registration markers and a color‐palette bar are added both on canvas and in SVG. Press **R** to regenerate geometry (palette unchanged), and **SPACE** to export one combined SVG plus one per color layer.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

// Ink palette
const colors = {
  1: { name: 'ORANGE', hex: '#ff6600' },
  2: { name: 'BROWN',  hex: '#993300' },
  3: { name: 'RED',    hex: '#f01e2c' },
  4: { name: 'ROSE',   hex: '#ff00bf' },
  5: { name: 'PURPLE', hex: '#bf00ff' },
  6: { name: 'GREEN',  hex: '#00cc99' },
  7: { name: 'BLUE',   hex: '#0040ff' },
  8: { name: 'BLACK',  hex: '#333333' },
  9: { name: 'SEPIA',  hex: '#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numEchoes:    20,    // number of nested outlines
  innerScale:   0.05,  // smallest relative radius
  outerScale:   0.45,  // largest relative radius
  steps:        360,   // samples per outline
  paletteCount: 4      // number of inks to pick
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let W, H;
let palette = [];
let innerR = [], outerR = [];
let shapes = [];  // array of {d, ink}

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1+t2, -1/n1);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup(){
  W = canvasWidthInches   * pixelsPerInch;
  H = canvasHeightInches  * pixelsPerInch;
  createCanvas(W, H);
  noLoop();
  strokeWeight(2);
  pickPalette();
  regenerate();
}

/**
 * =======================================
 * Pick random ink palette
 * =======================================
 */
function pickPalette(){
  let keys = Object.keys(colors).map(Number);
  palette = [];
  while(palette.length < generationRules.paletteCount && keys.length){
    const i = floor(random(keys.length));
    palette.push(keys.splice(i,1)[0]);
  }
}

/**
 * =======================================
 * Generate new nested shapes
 * =======================================
 */
function regenerate(){
  // sample two superformula profiles
  const A = randomParams(), B = randomParams();
  innerR = sampleProfile(A);
  outerR = sampleProfile(B);

  // build each echo
  shapes = [];
  for(let i=0; i<generationRules.numEchoes; i++){
    const t = i/(generationRules.numEchoes-1);
    const scale = lerp(generationRules.innerScale, generationRules.outerScale, t);
    let d = 'M';
    for(let j=0; j<=generationRules.steps; j++){
      // interpolate radius at each angle
      const r = lerp(innerR[j], outerR[j], t) * min(W,H) * scale;
      const theta = map(j,0,generationRules.steps,0,TWO_PI);
      const x = W/2 + cos(theta)*r;
      const y = H/2 + sin(theta)*r;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += (j<generationRules.steps)?'L':'Z';
    }
    shapes.push({ d, ink: palette[i%palette.length] });
  }

  drawShapes();
}

/**
 * random superformula parameters
 */
function randomParams(){
  return {
    m:   floor(random(3,10)),
    n1:  random(0.5,2),
    n2:  random(0.5,2),
    n3:  random(0.5,2),
    a:1, b:1
  };
}

/**
 * sample profile as array of r(theta)
 */
function sampleProfile(p){
  let R = [];
  for(let j=0;j<=generationRules.steps;j++){
    const theta = map(j,0,generationRules.steps,0,TWO_PI);
    R.push( superformula(theta,p.m,p.n1,p.n2,p.n3,p.a,p.b) );
  }
  return R;
}

/**
 * =======================================
 * Draw on Canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    stroke(colors[s.ink].hex);
    strokeCap(SQUARE);
    strokeJoin(ROUND);
    strokeOpacity && (stroke(colors[s.ink].hex + toHexAlpha(strokeOpacity)));
    beginShape();
    const cmds = s.d.trim().split(/s+/);
    for(let c of cmds){
      if(c[0]==='M'||c[0]==='L'){
        const [x,y]=c.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  drawPaletteBar();
}

/**
 * draw corner markers
 */
function drawMarkers(){
  stroke('#000000'+toHexAlpha(strokeOpacity));
  strokeWeight(1);
  line(0,0,5,0); line(0,0,0,5);
  line(W-5,H,W,H); line(W,H-5,W,H);
}

/**
 * draw palette bar
 */
function drawPaletteBar(){
  const total=300, h=2, gap=7;
  const y=H - 1.25*pixelsPerInch;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  let x=(W-total)/2;
  strokeWeight(h);
  for(let ci of palette){
    stroke(colors[ci].hex+toHexAlpha(strokeOpacity));
    line(x,y,x+seg,y);
    x+=seg+gap;
  }
}

/**
 * convert opacity to hex
 */
function toHexAlpha(a){
  return (255*a|0).toString(16).padStart(2,'0');
}

/**
 * =======================================
 * Key Press Handling
 * =======================================
 */
function keyPressed(){
  if(key==='r'||key==='R') regenerate();
  if(key===' ') exportSVGs();
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function exportSVGs(){
  const ts = Date.now();
  saveSVG(`Day${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(`Day${dayNumber}-0${ci}-${colors[ci].name}-PORTRAIT-${ts}.svg`, ci);
  }
}

function saveSVG(filename,activeInk){
  let svg = `<svg version="1.1" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">n`;
  // markers
  svg += `<g id="markers" stroke="black" stroke-opacity="${strokeOpacity}">`+
         `<path d="M5,0 L0,0 L0,5 M${W-5},${H} L${W},${H} L${W},${H-5}" stroke-width="1" fill="none"/></g>n`;
  // echoes
  for(let i=0;i<shapes.length;i++){
    const s = shapes[i];
    if(activeInk && s.ink!==activeInk) continue;
    const col=colors[s.ink].hex;
    svg += `<g id="echo${i}" stroke="${col}" stroke-opacity="${strokeOpacity}">`+
           `<path d="${s.d}" stroke-width="2" fill="none"/></g>n`;
  }
  // palette bar
  svg += `<g id="palette" stroke-opacity="${strokeOpacity}" stroke-width="2">n`;
  let x=(W-300)/2, seg=(300-(palette.length-1)*7)/palette.length;
  const y=H-1.25*pixelsPerInch;
  for(let ci of palette){
    svg += `<path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>n`;
    x+=seg+7;
  }
  svg += `</g>n</svg>`;

  const blob = new Blob([svg],{type:'image/svg+xml'});
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, ripple, identity, nested forms, transformation, generative art, resonance, continuity, expansion

### Conceptual Framework

I experience my identity as a cascade of concentric ripples—each echo evolving from the last, yet all part of one unfolding resonance. Twenty nested outlines emerge from a hidden core, morphing through a shifting middle form before reaching their outermost expression. Together they form a seamless dialogue of growth and change, a visual hymn to the continuity of self.

### Technical Approach

I randomize a work‐area margin to constrain all outlines, then pick three superformula parameter sets—inner, middle, outer. Twenty echoes sample these profiles in two halves: first interpolating inner→middle, then middle→outer, ensuring no intersections. Each echo is normalised and scaled to fit inside the margin. A small random ink palette is chosen once; echoes cycle through these colors. All shapes use `noFill()` so earlier echoes remain visible. Registration markers and a bottom palette bar are added on canvas and in SVG. Press **R** to regenerate the geometry (palette unchanged), **SPACE** to export one combined SVG plus one per color layer.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numEchoes:    20,    // number of nested outlines
  innerScale:   0.05,  // smallest relative radius
  outerScale:   0.45,  // largest relative radius
  steps:        360,   // samples per outline
  paletteCount: 4      // number of inks to pick
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let W, H;
let marginPx;
let palette = [];
let profiles = { inner: [], middle: [], outer: [] };
let shapes   = [];  // array of { d: pathString, ink: colorIndex }

/**
 * =======================================
 * Superformula radial function
 * =======================================
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1 + t2, -1/n1);
}

/**
 * =======================================
 * Utility: pick N unique random inks
 * =======================================
 */
function pickRandomPalette(n) {
  let keys = Object.keys(colors).map(Number);
  let out = [];
  while(out.length < n && keys.length) {
    const i = floor(random(keys.length));
    out.push(keys.splice(i,1)[0]);
  }
  return out;
}

/**
 * =======================================
 * Utility: random superformula parameters
 * =======================================
 */
function randomParams() {
  return {
    m: floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a: 1, b: 1
  };
}

/**
 * =======================================
 * Utility: sample a profile array of r(theta)
 * =======================================
 */
function sampleProfile(p) {
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    let theta = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(theta,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * p5.js setup
 * =======================================
 */
function setup() {
  W = canvasWidthInches  * pixelsPerInch;
  H = canvasHeightInches * pixelsPerInch;
  createCanvas(W, H);
  noLoop();
  strokeWeight(2);

  // work‐area margin 1.5–4 inches
  marginPx = random(1.5,4) * pixelsPerInch;

  // pick ink palette
  palette = pickRandomPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * =======================================
 * Generate profiles and shapes
 * =======================================
 */
function regenerate() {
  // sample three profiles
  const A = randomParams(),
        B = randomParams(),
        C = randomParams();
  profiles.inner  = sampleProfile(A);
  profiles.middle = sampleProfile(B);
  profiles.outer  = sampleProfile(C);

  shapes = [];
  const maxR = min(W,H)/2 - marginPx;

  // build each echo
  for(let i=0;i<generationRules.numEchoes;i++){
    let t = i/(generationRules.numEchoes-1);
    // choose which interpolation: inner→middle (first half), then middle→outer
    let R = [];
    if(i < generationRules.numEchoes/2) {
      let u = map(i,0,generationRules.numEchoes/2-1,0,1);
      for(let j=0;j<=generationRules.steps;j++){
        R.push(lerp(profiles.inner[j], profiles.middle[j], u));
      }
    } else {
      let u = map(i - (generationRules.numEchoes/2),0,(generationRules.numEchoes/2-1),0,1);
      for(let j=0;j<=generationRules.steps;j++){
        R.push(lerp(profiles.middle[j], profiles.outer[j], u));
      }
    }
    // scale factor
    let scale = lerp(generationRules.innerScale, generationRules.outerScale, t);

    // build path string
    let d = 'M';
    for(let j=0;j<=generationRules.steps;j++){
      let theta = map(j,0,generationRules.steps,0,TWO_PI);
      let rNorm = R[j] / max(R[j],1);  // normalised, but our profiles are already normalised shapes
      let rPix = rNorm * maxR * scale;
      let x = W/2 + cos(theta)*rPix;
      let y = H/2 + sin(theta)*rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += (j<generationRules.steps)?'L':'Z';
    }
    shapes.push({ d, ink: palette[i % palette.length] });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw shapes on canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();
  for(let s of shapes){
    stroke(colors[s.ink].hex);
    stroke(colors[s.ink].hex + toHexAlpha(strokeOpacity));
    beginShape();
    const cmds = s.d.trim().split(/s+/);
    for(let c of cmds){
      if(c[0]==='M'||c[0]==='L'){
        let [x,y] = c.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  drawPaletteBar();
}

/**
 * =======================================
 * Draw registration markers
 * =======================================
 */
function drawMarkers(){
  stroke('#000000'+toHexAlpha(strokeOpacity));
  strokeWeight(1);
  line(0,0,5,0); line(0,0,0,5);
  line(W-5,H,W,H); line(W,H-5,W,H);
}

/**
 * =======================================
 * Draw palette bars
 * =======================================
 */
function drawPaletteBar(){
  const total = 300, barH = 2, gap = 7;
  const y = H - 1.25 * pixelsPerInch;
  const seg = (total - (palette.length-1)*gap)/palette.length;
  let x = (W - total)/2;
  strokeWeight(barH);
  for(let ci of palette){
    stroke(colors[ci].hex + toHexAlpha(strokeOpacity));
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

/**
 * =======================================
 * Handle key presses
 * =======================================
 */
function keyPressed(){
  if(key==='r'||key==='R') regenerate();
  if(key===' ') exportSVGs();
}

/**
 * =======================================
 * Export SVGs
 * =======================================
 */
function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name}-PORTRAIT-${ts}.svg`, ci);
  }
}

/**
 * =======================================
 * Save one SVG
 * =======================================
 */
function saveSVG(filename, activeInk){
  let svg = `<svg version="1.1" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg">n`;

  // markers layer
  svg += `<g id="layer0" inkscape:label="0-markers" stroke="black" stroke-opacity="${strokeOpacity}">`+
         `<path d="M5,0 L0,0 L0,5 M${W-5},${H} L${W},${H} L${W},${H-5}" stroke-width="1" fill="none"/></g>n`;

  // shape layers
  shapes.forEach((s,i)=>{
    if(activeInk && s.ink !== activeInk) return;
    const col = colors[s.ink].hex;
    svg += `<g id="layer${i+1}" inkscape:label="${i+1}-${colors[s.ink].name.toLowerCase()}" stroke="${col}" stroke-opacity="${strokeOpacity}">`+
           `<path d="${s.d}" stroke-width="2" fill="none"/></g>n`;
  });

  // palette bar layer
  svg += `<g id="layer${shapes.length+1}" inkscape:label="palette" stroke-opacity="${strokeOpacity}" stroke-width="2">n`;
  let x = (W-300)/2, seg = (300 - (palette.length-1)*7)/palette.length;
  const y = H - 1.25 * pixelsPerInch;
  palette.forEach(ci=>{
    svg += `<path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>n`;
    x += seg + 7;
  });
  svg += `</g>n`;

  svg += `</svg>`;
  const blob = new Blob([svg],{type:'image/svg+xml'});
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

/**
 * =======================================
 * Helper: convert alpha [0–1] to hex
 * =======================================
 */
function toHexAlpha(a){
  return (floor(a*255)).toString(16).padStart(2,'0');
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: superformula, echoes, ripple, identity, nested forms, transformation, generative art, resonance, continuity, expansion

### Conceptual Framework

I feel my self unfolding like concentric ripples: each echo retains a trace of its predecessor while blossoming into a new shape. Twenty nested outlines grow from a hidden core, shift through a transforming middle, and expand to the outermost edge—together forming a continuous dialogue of emergence and change.

### Technical Approach

I reserve a randomized work‐area margin and sample three superformula profiles (inner, middle, outer). Twenty echoes interpolate first inner→middle then middle→outer, each mapped from 0 to 100% of the available radius so no outline ever intersects or overlaps another. A fixed set of ink colors (chosen once) cycles through the echoes. All shapes use `noFill()` and a constant stroke opacity. Registration markers and a bottom color‐palette bar are drawn on both canvas and SVG. Press **R** to regenerate geometry (palette preserved), **SPACE** to export one combined SVG plus one per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas dimensions
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

// Nine‑color ink palette
const colors = {
  1: { name:'ORANGE', hex:'#ff6600' },
  2: { name:'BROWN',  hex:'#993300' },
  3: { name:'RED',    hex:'#f01e2c' },
  4: { name:'ROSE',   hex:'#ff00bf' },
  5: { name:'PURPLE', hex:'#bf00ff' },
  6: { name:'GREEN',  hex:'#00cc99' },
  7: { name:'BLUE',   hex:'#0040ff' },
  8: { name:'BLACK',  hex:'#333333' },
  9: { name:'SEPIA',  hex:'#856647' }
};

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numEchoes:    20,   // total outlines
  innerScale:   0.05, // start at 5% of work radius
  outerScale:   1.00, // end at 100% of work radius
  steps:        360,  // points per outline
  paletteCount: 4     // distinct inks to choose
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let W, H, marginPx;
let palette = [];
let profiles = { inner: [], middle: [], outer: [] };
let shapes   = []; // { d: pathString, ink: colorIndex }

/**
 * =======================================
 * Superformula radial function
 * =======================================
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1 + t2, -1/n1);
}

/**
 * =======================================
 * Helpers: random palette & params
 * =======================================
 */
function pickPalette(n){
  let keys = Object.keys(colors).map(Number), out=[];
  while(out.length<n && keys.length){
    const i = floor(random(keys.length));
    out.push(keys.splice(i,1)[0]);
  }
  return out;
}
function randParams(){
  return {
    m:   floor(random(3,10)),
    n1:  random(0.5,2),
    n2:  random(0.5,2),
    n3:  random(0.5,2),
    a:1, b:1
  };
}
function sampleProfile(p){
  let R=[];
  for(let i=0;i<=generationRules.steps;i++){
    const t = map(i,0,generationRules.steps,0,TWO_PI);
    R.push( superformula(t,p.m,p.n1,p.n2,p.n3,p.a,p.b) );
  }
  return R;
}
function toHexA(a){ return (floor(a*255)).toString(16).padStart(2,'0'); }

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup(){
  W = canvasWidthInches  * pixelsPerInch;
  H = canvasHeightInches * pixelsPerInch;
  createCanvas(W,H);
  noLoop();
  strokeWeight(2);

  marginPx = random(1.5,4) * pixelsPerInch;
  palette  = pickPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * =======================================
 * Build profiles & shapes
 * =======================================
 */
function regenerate(){
  // sample three radial profiles
  profiles.inner  = sampleProfile(randParams());
  profiles.middle = sampleProfile(randParams());
  profiles.outer  = sampleProfile(randParams());

  shapes = [];
  const workR = min(W,H)/2 - marginPx;

  for(let i=0;i<generationRules.numEchoes;i++){
    const tEcho = i/(generationRules.numEchoes-1);
    // pick between inner→middle then middle→outer
    let R = [];
    const half = generationRules.numEchoes/2;
    if(i < half){
      const u = map(i,0,half-1,0,1);
      for(let j=0;j<=generationRules.steps;j++){
        R.push( lerp(profiles.inner[j], profiles.middle[j], u) );
      }
    } else {
      const u = map(i-half,0,half-1,0,1);
      for(let j=0;j<=generationRules.steps;j++){
        R.push( lerp(profiles.middle[j], profiles.outer[j], u) );
      }
    }
    const scale = lerp(generationRules.innerScale, generationRules.outerScale, tEcho);

    // build SVG path
    let d = 'M';
    for(let j=0;j<=generationRules.steps;j++){
      const theta = map(j,0,generationRules.steps,0,TWO_PI);
      const rNorm = R[j] / max(...R);
      const rPix  = rNorm * workR * scale;
      const x = W/2 + cos(theta)*rPix;
      const y = H/2 + sin(theta)*rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += j<generationRules.steps?'L':'Z';
    }
    shapes.push({ d, ink: palette[i % palette.length] });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw on Canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    stroke(colors[s.ink].hex + toHexA(strokeOpacity));
    beginShape();
    const cmds = s.d.trim().split(/s+/);
    for(let c of cmds){
      if(/^[ML]/.test(c)){
        const [x,y] = c.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  drawPaletteBar();
}

/**
 * =======================================
 * Markers & Palette Bar
 * =======================================
 */
function drawMarkers(){
  stroke('#000000'+toHexA(strokeOpacity)); strokeWeight(1);
  line(0,0,5,0); line(0,0,0,5);
  line(W-5,H,W,H); line(W,H-5,W,H);
}

function drawPaletteBar(){
  const total=300, h=2, gap=7;
  const y=H - 1.25*pixelsPerInch;
  // sort palette by index
  const pal = [...palette].sort((a,b)=>a-b);
  const seg = (total - (pal.length-1)*gap)/pal.length;
  let x = (W - total)/2;
  strokeWeight(h);
  for(let ci of pal){
    stroke(colors[ci].hex+toHexA(strokeOpacity));
    line(x,y,x+seg,y);
    x+=seg+gap;
  }
}

/**
 * =======================================
 * Key Handling
 * =======================================
 */
function keyPressed(){
  if(key==='r'||key==='R') regenerate();
  else if(key===' ') exportSVGs();
}

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette) saveSVG(
    `${dayNumber}-0${ci}-${colors[ci].name}-PORTRAIT-${ts}.svg`, ci
  );
}

function saveSVG(filename, activeInk){
  let svg = `<svg version="1.1" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" stroke="black" stroke-opacity="${strokeOpacity}">`+
         `<path d="M5,0 L0,0 L0,5 M${W-5},${H} L${W},${H} L${W},${H-5}" stroke-width="1" fill="none"/></g>n`;

  // echoes
  shapes.forEach((s,i)=>{
    if(activeInk && s.ink!==activeInk) return;
    const col = colors[s.ink].hex;
    svg += `<g inkscape:groupmode="layer" id="layer${i+1}" inkscape:label="${i+1}-${colors[s.ink].name.toLowerCase()}" stroke="${col}" stroke-opacity="${strokeOpacity}">`+
           `<path d="${s.d}" stroke-width="2" fill="none"/></g>n`;
  });

  // palette bar
  svg += `<g inkscape:groupmode="layer" id="layer${shapes.length+1}" inkscape:label="palette" stroke-opacity="${strokeOpacity}" stroke-width="2">n`;
  const pal = [...palette].sort((a,b)=>a-b);
  const total=300, gap=7;
  const seg=(total-(pal.length-1)*gap)/pal.length;
  let x=(W-total)/2, y=H-1.25*pixelsPerInch;
  for(let ci of pal){
    svg += `<path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>n`;
    x+=seg+gap;
  }
  svg += `</g>n</svg>`;

  const blob = new Blob([svg],{type:'image/svg+xml'});
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested shapes,
              identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I sense my inner world unfolding in waves: each outline recalls an earlier gesture yet expands into a new possibility, like echoes radiating across still water. Twenty ripples bloom from a hidden centre, their contours shifting through several latent forms before arriving at the outermost edge. Together they reveal the continuity of change—an unbroken hymn to becoming.

### Technical Approach

A random work‑area margin defines the maximum radius.  
`generationRules.numProfiles` (≥ 3) random superformula parameter sets are sampled.  
The total set of echoes is divided equally among the profiles, and linear interpolation
between successive profiles guarantees smooth transitions while preserving strict
nesting—no intersections or overlaps.  All shapes are normalised, scaled to fit within
the margin, and drawn with `noFill()`.  A fixed random ink palette is chosen once and
cycled in index order (ORANGE→ SEPIA).  Registration markers and an ordered palette bar
are added both on canvas and SVG.  Press **R** to rebuild geometry (palette unchanged);
press **SPACE** to export a combined SVG and one SVG per ink colour, each following the
template’s layer‑naming convention.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  numEchoes:    20,   // total outlines
  numProfiles:  3,    // distinct superformula shapes (≥3)
  innerScale:   0.05, // relative size of first echo (0–1 of workR)
  outerScale:   1.00, // relative size of last echo  (0–1 of workR)
  steps:        360,  // vertices per outline
  paletteCount: 4     // number of inks in palette (1–9)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let W, H;
let workAreaMarginInches, workAreaMarginPixels;
let palette = [];                  // selected ink indices (ascending)
let profiles = [];                 // array of profile arrays
let shapes   = [];                 // array of {d, ink}

/**
 * =======================================
 * Superformula utility
 * =======================================
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1+t2, -1/n1);
}
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1,b:1
  };
}
function sampleProfile(p){
  let arr=[];
  for(let i=0;i<=generationRules.steps;i++){
    const th = map(i,0,generationRules.steps,0,TWO_PI);
    arr.push(superformula(th,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return arr;
}

/**
 * =======================================
 * Setup
 * =======================================
 */
function setup(){
  W = canvasWidthInches  * pixelsPerInch;
  H = canvasHeightInches * pixelsPerInch;
  createCanvas(W,H);
  noLoop();

  strokeWeightValue = 2;
  workAreaMarginInches = random(1.5,4);
  workAreaMarginPixels = workAreaMarginInches * pixelsPerInch + strokeWeightValue/2;

  palette = pickPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * Pick palette in ascending colour‑index order
 */
function pickPalette(n){
  let keys = Object.keys(colors).map(Number);
  shuffle(keys,true);
  let chosen = keys.slice(0,n).sort((a,b)=>a-b);
  return chosen;
}

/**
 * Regenerate geometry
 */
function regenerate(){
  shapes=[];
  profiles=[];
  for(let k=0;k<generationRules.numProfiles;k++){
    profiles.push(sampleProfile(randomParams()));
  }

  // divide echoes into intervals between profiles
  const segLen = floor(generationRules.numEchoes / (generationRules.numProfiles-1));
  const workR  = min(W,H)/2 - workAreaMarginPixels;

  for(let e=0;e<generationRules.numEchoes;e++){
    const seg   = floor(e/segLen);                 // which profile pair
    const segPos= (e%segLen)/(segLen-1);           // 0–1 inside pair
    const pA = profiles[seg];
    const pB = profiles[min(seg+1, profiles.length-1)];

    // interpolate radial array
    let path='M';
    const scale = lerp(generationRules.innerScale, generationRules.outerScale, e/(generationRules.numEchoes-1));
    for(let i=0;i<=generationRules.steps;i++){
      const rNorm = lerp(pA[i], pB[i], segPos);
      const rPix  = rNorm/max(...pA, ...pB) * workR * scale;
      const th    = map(i,0,generationRules.steps,0,TWO_PI);
      const x = W/2 + cos(th)*rPix;
      const y = H/2 + sin(th)*rPix;
      path += `${x.toFixed(2)},${y.toFixed(2)} `;
      path += (i<generationRules.steps)?'L':'Z';
    }
    shapes.push({ d:path, ink: palette[e%palette.length] });
  }
  drawShapes();
}

/**
 * Draw to canvas
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    const cmds = s.d.trim().split(/s+/);
    for(let c of cmds){
      if(c[0]==='M'||c[0]==='L'){
        const [x,y] = c.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Markers & palette bar
 */
function drawMarkers(){
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0,0,5,0); line(0,0,0,5);
  line(W-5,H,W,H); line(W,H-5,W,H);
}
function addColorPaletteBars(){
  const total=300, barH=2, gap=7;
  const y=H-1.25*pixelsPerInch;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  let x=(W-total)/2;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y); x+=seg+gap;
  }
}

/**
 * Utility
 */
function applyStrokeWithOpacity(hex){
  let c=color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
}
function toHexA(a){return (floor(a*255)).toString(16).padStart(2,'0');}

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

/**
 * SVG Export
 */
function saveSVGs(){
  const t=Date.now();
  makeSVG(`171-ALL-PORTRAIT-${t}.svg`,0);
  palette.forEach(ci=>makeSVG(`171-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${t}.svg`,ci));
}
function makeSVG(filename,activeInk){
  let svg=`<svg version="1.1" width="${W}" height="${H}" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // markers
  svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" stroke="black" stroke-opacity="${strokeOpacity}">`+
       `<path d="M5,0 L0,0 L0,5 M${W-5},${H} L${W},${H} L${W},${H-5}" stroke-width="1" fill="none"/></g>n`;

  // echoes
  shapes.forEach((s,i)=>{
    if(activeInk && s.ink!==activeInk) return;
    const col=colors[s.ink];
    svg+=`<g inkscape:groupmode="layer" id="layer${i+1}" inkscape:label="${s.ink}-${col.name.toLowerCase()}-${col.ink}-${col.width}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}">n`+
         `<path d="${s.d}" stroke-width="2" fill="none"/></g>n`;
  });

  // palette bar
  const total=300, gap=7, seg=(total-(palette.length-1)*gap)/palette.length;
  let x=(W-total)/2, y=H-1.25*pixelsPerInch;
  svg+=`<g inkscape:groupmode="layer" id="layer${shapes.length+1}" inkscape:label="palette" stroke-opacity="${strokeOpacity}" stroke-width="2">n`;
  palette.forEach(ci=>{
    svg += `<path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>n`;
    x += seg+gap;
  });
  svg+='</g>n</svg>';

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a   = document.createElement('a'); a.href=url; a.download=filename;
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a field of concentric ripples in constant motion—each outline echoes the one before while opening into something new. The contours flow seamlessly from an inner core through transitional forms to a final boundary, suggesting a continuum of transformation and self‑discovery. By weaving these shapes together without overlaps, the composition reveals an unbroken journey of becoming, where every wave is both distinct and inseparable from the whole.

### Technical Approach

A randomized work‑area margin defines the maximum drawing radius.  
`generationRules.numProfiles` superformula profiles are sampled to create radial shapes.  
The total echoes are divided equally among the profiles, and linear interpolation between successive profiles ensures smooth morphing without intersections.  
All outlines are normalized, scaled to fit within the margin, and drawn with `noFill()` and a consistent stroke weight.  
A fixed random ink palette is chosen once and cycled in index order.  
Registration markers and a bottom color‑palette bar are added on both canvas and SVG.  
Press **R** to regenerate geometry (preserving the palette), **SPACE** to export one combined SVG and one SVG per ink color, each following the template’s 10‑layer structure.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings (immutable)
const canvasWidthInches  = 11;   // Width in inches
const canvasHeightInches = 11;   // Height in inches
const pixelsPerInch      = 100;  // Resolution
const dayNumber          = '171';// Day number for filenames

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

// Stroke opacity
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,   // inches
  workAreaMarginMax: 4,     // inches
  numEchoes:         20,    // total outlines
  numProfiles:       3,     // distinct profiles (≥3)
  innerScale:        0.05,  // smallest outline
  outerScale:        1.00,  // largest outline
  steps:             360,   // points per outline
  paletteCount:      4      // inks to pick
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette = [];    // selected ink indices, sorted
let profiles = [];   // radial profiles
let shapes = [];     // { d: pathString, ink: colorIndex }

/**
 * Applies stroke color with opacity
 * @param {string} hexColor
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  // Canvas dimensions
  canvasW = canvasWidthInches * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // Stroke width ~0.5mm
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // Random work-area margin in inches → pixels
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  // Select a random palette
  palette = pickPalette(generationRules.paletteCount);

  // Generate shapes
  regenerate();
}

/**
 * Pick N unique inks, sorted by index
 * @param {number} n
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Random superformula parameters
 */
function randomParams() {
  return {
    m:  floor(random(3, 10)),
    n1: random(0.5, 2),
    n2: random(0.5, 2),
    n3: random(0.5, 2),
    a:  1,
    b:  1
  };
}

/**
 * Sample a radial profile array of r(theta)
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    const t1 = pow(abs(cos(p.m * theta / 4) / p.a), p.n2);
    const t2 = pow(abs(sin(p.m * theta / 4) / p.b), p.n3);
    R.push(pow(t1 + t2, -1 / p.n1));
  }
  return R;
}

/**
 * =======================================
 * Generate or regenerate shapes
 * =======================================
 */
function regenerate() {
  shapes = [];
  profiles = [];

  // Build profiles
  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  // Compute work radius
  const workR = min(canvasW, canvasH) / 2 - workAreaMarginPixels;

  // Build each echo
  const echoes = generationRules.numEchoes;
  const segments = generationRules.numProfiles - 1;
  const perSegment = floor(echoes / segments);

  for (let e = 0; e < echoes; e++) {
    const seg = min(floor(e / perSegment), segments - 1);
    const t = (e % perSegment) / (perSegment - 1);
    const R = [];

    // Interpolate radial values between profile[seg] -> profile[seg+1]
    for (let i = 0; i <= generationRules.steps; i++) {
      R.push(lerp(profiles[seg][i], profiles[seg + 1][i], t));
    }

    // Scale factor from innerScale -> outerScale
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (echoes - 1)
    );

    // Build path string
    let d = 'M';
    const maxR = max(...R);
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix = (R[i] / maxR) * workR * scale;
      const x = canvasW / 2 + cos(theta) * rPix;
      const y = canvasH / 2 + sin(theta) * rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({
      d: d,
      ink: palette[e % palette.length]
    });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw shapes on canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    const parts = s.d.trim().split(/s+/);
    for (let c of parts) {
      if (c[0] === 'M' || c[0] === 'L') {
        const [x, y] = c.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Draw registration markers
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(canvasW - 5, canvasH, canvasW, canvasH);
  line(canvasW, canvasH - 5, canvasW, canvasH);
}

/**
 * Draw bottom color‐palette bar in palette order
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  let x = (canvasW - total) / 2;
  strokeWeight(barH);
  for (let ci of palette) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    const name = colors[ci].name.toUpperCase();
    saveSVG(`${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`, ci);
  }
}

/**
 * Generate and download one SVG
 * @param {string} filename
 * @param {number} activeInk
 */
function saveSVG(filename, activeInk) {
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg">n`;

  // Layer 0: markers
  svg += `<g id="layer0" inkscape:label="0-markers" stroke="black" stroke-opacity="${strokeOpacity}">` +
         `<path d="M5,0 L0,0 L0,5 M${canvasW-5},${canvasH} L${canvasW},${canvasH} L${canvasW},${canvasH-5}" stroke-width="1" fill="none"/>` +
         `</g>n`;

  // Layers 1–9: one per color, combine all outlines of that ink
  palette.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    // Combine all paths for this ink
    let combinedD = shapes
      .filter(s => s.ink === ci)
      .map(s => s.d)
      .join(' ');
    svg += `<g id="layer${idx+1}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" ` +
           `stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none">` +
           `<path d="${combinedD}"/>` +
           `</g>n`;
  });

  // Layer palette bar
  svg += `<g id="layer${palette.length+1}" inkscape:label="palette" stroke-opacity="${strokeOpacity}" stroke-width="2">n`;
  const total = 300, gap = 7;
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  let x = (canvasW - total) / 2;
  const y = canvasH - 1.25 * pixelsPerInch;
  palette.forEach(ci => {
    svg += `<path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>`;
    x += seg + gap;
  });
  svg += `</g>n`;

  svg += `</svg>`;

  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together without overlaps, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

A randomized work‑area margin constrains the maximum drawing radius.  
`generationRules.numProfiles` superformula profiles are sampled to define radial shapes.  
The total echoes are divided equally among adjacent profile pairs, and linear interpolation between each pair guarantees smooth morphing without intersections.  
All outlines are normalized, scaled to fit within the margin, and drawn with `noFill()` and a consistent stroke weight.  
A fixed random ink palette is chosen once and sorted in ascending order by index, then cycled through.  
Registration markers and an ordered palette bar are added on both canvas and SVG.  
Press **R** to regenerate geometry (palette preserved), **SPACE** to export one combined SVG and one SVG per ink color, each following the template’s 10‑layer structure.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings
const canvasWidthInches  = 11;   // Width in inches
const canvasHeightInches = 11;   // Height in inches
const pixelsPerInch      = 100;  // Resolution
const dayNumber          = '171';// Day number for file naming

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 4,    // inches
  numEchoes:        20,    // total outlines
  numProfiles:      3,     // distinct superformula profiles
  innerScale:       0.05,  // smallest outline scale (0–1)
  outerScale:       1.00,  // largest outline scale (0–1)
  steps:            360,   // points per outline
  paletteCount:     4      // number of inks to choose
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette = [];    // selected ink indices
let profiles = [];   // radial profiles arrays
let shapes   = [];   // { d: pathString, ink: colorIndex }

/**
 * Superformula radial function
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Random palette of N inks, sorted by index
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Random superformula parameters
 */
function randomParams() {
  return {
    m: floor(random(3, 10)),
    n1: random(0.5, 2),
    n2: random(0.5, 2),
    n3: random(0.5, 2),
    a: 1, b: 1
  };
}

/**
 * Sample a radial profile for given params
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  palette = pickPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * Regenerate profiles and shapes
 */
function regenerate() {
  profiles = [];
  shapes   = [];

  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH) / 2 - workAreaMarginPixels;
  const echoes = generationRules.numEchoes;
  const segs = generationRules.numProfiles - 1;
  const perSeg = floor(echoes / segs);

  for (let e = 0; e < echoes; e++) {
    const seg = min(floor(e / perSeg), segs - 1);
    const u   = (e % perSeg) / (perSeg - 1);
    const arr = [];
    for (let i = 0; i <= generationRules.steps; i++) {
      arr.push(lerp(profiles[seg][i], profiles[seg + 1][i], u));
    }

    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (echoes - 1)
    );

    let d = 'M';
    const maxR = max(...arr);
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix  = (arr[i] / maxR) * workR * scale;
      const x = canvasW / 2 + cos(theta) * rPix;
      const y = canvasH / 2 + sin(theta) * rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink: palette[e % palette.length] });
  }

  drawShapes();
}

/**
 * Draw shapes to canvas
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        const [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Draw corner markers
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(canvasW - 5, canvasH, canvasW, canvasH);
  line(canvasW, canvasH - 5, canvasW, canvasH);
}

/**
 * Draw bottom palette bar in palette order
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  const pal = [...palette].sort((a, b) => a - b);
  const seg = (total - (pal.length - 1) * gap) / pal.length;
  let x = (canvasW - total) / 2;
  strokeWeight(barH);
  for (let ci of pal) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

/**
 * Handle key presses
 */
function keyPressed() {
  if (key === 'R' || key === 'r') regenerate();
  if (key === ' ') saveSVGs();
}

/**
 * Export SVGs
 */
function saveSVGs() {
  const t = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${t}.svg`, 0);
  for (let ci of palette) {
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${t}.svg`,
      ci
    );
  }
}

/**
 * Generate and download one SVG file
 */
function saveSVG(filename, activeInk) {
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M5,0 L0,0 L0,5 M${canvasW-5},${canvasH} L${canvasW},${canvasH} L${canvasW},${canvasH-5}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per color
  const pal = [...palette].sort((a, b) => a - b);
  pal.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    const combinedD = shapes
      .filter(s => s.ink === ci)
      .map(s => s.d)
      .join(' ');
    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}" stroke-width="${strokeWeightValue}" fill="none"/>n`;
    svg += `</g>n`;
  });

  // Palette bar layer
  const paletteLayer = pal.length + 1;
  const total = 300, gap = 7;
  const seg = (total - (pal.length - 1) * gap) / pal.length;
  let x = (canvasW - total) / 2;
  const y = canvasH - 1.25 * pixelsPerInch;
  svg += `<g inkscape:groupmode="layer" id="layer${paletteLayer}" inkscape:label="palette" style="display:inline" stroke-opacity="${strokeOpacity}" stroke-width="2" inkscape:highlight-color="black">n`;
  pal.forEach(ci => {
    svg += `  <path d="M${x},${y} H${x+seg}" stroke="${colors[ci].hex}" fill="none"/>n`;
    x += seg + gap;
  });
  svg += `</g>n</svg>`;

  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as concentric ripples that radiate outward in continuous transformation—each outline both echoes the previous gesture and blossoms into a new form. Five underlying shapes guide forty nested contours that flow seamlessly from an inner core to an outer boundary, suggesting an unbroken journey of emergence. The composition weaves distinct waves without intersecting, creating a visual hymn to becoming, where every line is part of an inseparable whole.

### Technical Approach

A randomized work‑area margin constrains the maximum drawing radius.  
Five random superformula profiles define radial shapes.  
Forty echoes interpolate smoothly between adjacent profiles, with no outline ever overlapping another.  
All outlines are normalized, scaled to fit within the margin, and drawn with `noFill()` and a consistent stroke weight.  
A fixed random palette of four inks is chosen and sorted by index; echoes cycle through these in that order.  
Registration markers and a color‑palette bar segment are combined within each color’s SVG layer.  
Press **R** to regenerate geometry (palette unchanged), **SPACE** to export one combined SVG and one SVG per ink color, each adhering to a ten‑layer structure.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings (immutable)
const canvasWidthInches  = 11;    // Width in inches
const canvasHeightInches = 11;    // Height in inches
const pixelsPerInch      = 100;   // Resolution
const dayNumber          = '171'; // Day number for file naming

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

// Stroke opacity
const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 4,    // inches
  numEchoes:        40,    // total outlines
  numProfiles:      5,     // distinct superformula profiles
  innerScale:       0.05,  // smallest outline scale (0–1)
  outerScale:       1.00,  // largest outline scale (0–1)
  steps:            1080,  // points per outline
  paletteCount:     4      // number of inks to choose (1–9)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette = [];     // selected ink indices sorted
let profiles = [];    // radial profiles arrays
let shapes   = [];    // { d: pathString, ink: colorIndex }

/**
 * =======================================
 * Superformula radial function
 * =======================================
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup Function
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // Stroke width ~0.5mm
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // Random work‑area margin in pixels
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  // Pick and sort palette
  palette = pickPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * Pick a random palette of N inks, sorted ascending
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Random superformula parameters
 */
function randomParams() {
  return {
    m:  floor(random(3, 10)),
    n1: random(0.5, 2),
    n2: random(0.5, 2),
    n3: random(0.5, 2),
    a: 1, b: 1
  };
}

/**
 * Sample a radial profile array
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate all shapes
 * =======================================
 */
function regenerate() {
  profiles = [];
  shapes = [];

  // Sample profiles
  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  // Compute work radius
  const workR = min(canvasW, canvasH) / 2 - workAreaMarginPixels;
  const echoes = generationRules.numEchoes;
  const segs = generationRules.numProfiles - 1;
  const perSeg = floor(echoes / segs);

  // Build echoes
  for (let e = 0; e < echoes; e++) {
    const segIdx = min(floor(e / perSeg), segs - 1);
    const t      = (e % perSeg) / (perSeg - 1);
    const arr    = [];

    // Interpolate between profiles[segIdx] -> profiles[segIdx+1]
    for (let i = 0; i <= generationRules.steps; i++) {
      arr.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx + 1][i],
        t
      ));
    }

    // Scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (echoes - 1)
    );

    // Build path string
    let d = 'M';
    const maxR = max(...arr);
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix  = (arr[i] / maxR) * workR * scale;
      const x = canvasW / 2 + cos(theta) * rPix;
      const y = canvasH / 2 + sin(theta) * rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({
      d: d,
      ink: palette[e % palette.length]
    });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw all shapes on canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();

  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        const [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }

  drawMarkers();
  addColorPaletteBars();
}

/**
 * Draw registration markers
 */
function drawMarkers() {
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  line(0, 0, 5, 0);
  line(0, 0, 0, 5);
  line(canvasW - 5, canvasH, canvasW, canvasH);
  line(canvasW, canvasH - 5, canvasW, canvasH);
}

/**
 * Draw ordered palette bar
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  let x = (canvasW - total) / 2;
  strokeWeight(barH);
  for (let ci of palette) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

/**
 * Handle key presses
 */
function keyPressed() {
  if (key === 'R' || key === 'r') regenerate();
  if (key === ' ') saveSVGs();
}

/**
 * Export SVGs
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    const name = colors[ci].name.toUpperCase();
    saveSVG(`${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`, ci);
  }
}

/**
 * Generate and save one SVG
 */
function saveSVG(filename, activeInk) {
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M5,0 L0,0 L0,5 M${canvasW-5},${canvasH} L${canvasW},${canvasH} L${canvasW},${canvasH-5}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: combine all paths of each color
  palette.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    const combinedD = shapes
      .filter(s => s.ink === ci)
      .map(s => s.d)
      .join(' ');
    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as concentric ripples that radiate outward in continuous transformation—each outline both echoes the previous gesture and blossoms into a new form. Five underlying shapes guide forty nested contours that flow seamlessly from an inner core to an outer boundary, suggesting an unbroken journey of emergence. The composition weaves distinct waves without intersecting, creating a visual hymn to becoming, where every line is part of an inseparable whole.

### Technical Approach

A randomized work‑area margin constrains the maximum drawing radius.  
Five random superformula profiles define radial shapes.  
Forty echoes interpolate smoothly between adjacent profiles, with no outline ever overlapping another.  
All outlines are normalized, scaled to fit within the margin, and drawn with `noFill()` and a consistent stroke weight.  
A fixed random palette of four inks is chosen and sorted in ascending order; echoes cycle through these inks in that order.  
Registration markers and a color‑palette bar segment are combined within each color’s SVG layer.  
Press **R** to regenerate geometry (palette unchanged), **SPACE** to export one combined SVG and one SVG per ink color, each adhering to a ten‑layer structure.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings (immutable)
const canvasWidthInches  = 11;    // Width in inches
const canvasHeightInches = 11;    // Height in inches
const pixelsPerInch      = 100;   // Resolution
const dayNumber          = '171'; // Day number for file naming

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 4,    // inches
  numEchoes:        40,    // total outlines
  numProfiles:      5,     // distinct superformula profiles
  innerScale:       0.05,  // smallest outline scale (0–1)
  outerScale:       1.00,  // largest outline scale (0–1)
  steps:            1080,  // points per outline
  paletteCount:     4      // number of inks to choose (1–9)
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette = [];     // selected ink indices
let profiles = [];    // radial profiles arrays
let shapes   = [];    // { d: pathString, ink: colorIndex }

/**
 * Superformula radial function
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m * theta / 4) / a), n2);
  const t2 = pow(abs(sin(m * theta / 4) / b), n3);
  return pow(t1 + t2, -1 / n1);
}

/**
 * Apply stroke with opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  palette = pickPalette(generationRules.paletteCount);

  regenerate();
}

/**
 * Pick a random palette of N inks, sorted ascending
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Random superformula parameters
 */
function randomParams() {
  return {
    m:  floor(random(3, 10)),
    n1: random(0.5, 2),
    n2: random(0.5, 2),
    n3: random(0.5, 2),
    a: 1, b: 1
  };
}

/**
 * Sample a radial profile array
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate Shapes
 * =======================================
 */
function regenerate() {
  profiles = [];
  shapes = [];

  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH) / 2 - workAreaMarginPixels;
  const echoes = generationRules.numEchoes;
  const segs = generationRules.numProfiles - 1;
  const perSeg = floor(echoes / segs);

  for (let e = 0; e < echoes; e++) {
    const segIdx = min(floor(e / perSeg), segs - 1);
    const t = (e % perSeg) / (perSeg - 1);
    const arr = [];

    for (let i = 0; i <= generationRules.steps; i++) {
      arr.push(lerp(profiles[segIdx][i], profiles[segIdx + 1][i], t));
    }

    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (echoes - 1)
    );

    let d = 'M';
    const maxR = max(...arr);
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix = (arr[i] / maxR) * workR * scale;
      const x = canvasW / 2 + cos(theta) * rPix;
      const y = canvasH / 2 + sin(theta) * rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink: palette[e % palette.length] });
  }

  drawShapes();
}

/**
 * Draw shapes on canvas
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        const [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * Draw registration markers
 */
function drawMarkers() {
  strokeWeight(1);
  const offset = strokeWeightValue / 2;
  applyStrokeWithOpacity('#000000');
  line(5 + offset, offset, offset, offset);
  line(offset, offset, offset, 5 + offset);
  line(canvasW - 5 - offset, canvasH - offset, canvasW - offset, canvasH - offset);
  line(canvasW - offset, canvasH - 5 - offset, canvasW - offset, canvasH - offset);
}

/**
 * Draw ordered palette bar
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  const pal = [...palette].sort((a, b) => a - b);
  const seg = (total - (pal.length - 1) * gap) / pal.length;
  let x = (canvasW - total) / 2;
  strokeWeight(barH);
  for (let ci of pal) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

/**
 * Handle key presses
 */
function keyPressed() {
  if (key === 'R' || key === 'r') regenerate();
  if (key === ' ') saveSVGs();
}

/**
 * Export SVGs
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    const name = colors[ci].name.toUpperCase();
    saveSVG(`${dayNumber}-0${ci}-${name}-PORTRAIT-${ts}.svg`, ci);
  }
}

/**
 * Generate one SVG file
 */
function saveSVG(filename, activeInk) {
  const offset = 0.5; // strokeWidth 1 / 2
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers with offset
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per color, combine paths + palette bar segment
  const pal = [...palette].sort((a,b)=>a-b);
  pal.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    // combine shapes
    const combinedD = shapes.filter(s => s.ink===ci).map(s=>s.d).join(' ');
    // palette segment
    const total=300, gap=7, seg=(total-(pal.length-1)*gap)/pal.length;
    let x = (canvasW-total)/2 + idx*(seg+gap), y=canvasH-1.25*pixelsPerInch;
    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    svg += `  <path d="M${x},${y} H${x+seg}"/>n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg],{type:'image/svg+xml'});
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download=filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I envision my identity as a field of concentric echoes—each outline retaining a whisper of the one before while blossoming into something new. These waves flow seamlessly from a hidden center through ever‑shifting forms to a final boundary, suggesting a continuum of growth and transformation. By weaving these shapes together without overlap, the composition becomes an unbroken hymn to becoming, where every line is both distinct and inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: Randomized between 1.5–3 inches, defining the maximum radius.  
- **Profiles**: Five random superformula parameter sets sample radial shapes.  
- **Echoes**: A random number between 30–60 contours interpolate smoothly across adjacent profiles, ensuring strict nesting without intersections.  
- **Normalization & Scaling**: Each outline is normalized, then scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: A random selection of 2–6 inks (sorted by index) cycles through the echoes.  
- **Rendering**: All shapes drawn with `noFill()`, consistent stroke weight (≈0.5 mm), and 0.8 opacity.  
- **SVG Layers**: Ten layers max—layer 0 for markers, layers 1–9 for each color (combining that color’s shapes and its palette segment).  
- **Controls**: Press **R** to regenerate geometry (palette preserved); press **SPACE** to export the combined SVG and one per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */

// Canvas settings
const canvasWidthInches  = 11;    // inches
const canvasHeightInches = 11;    // inches
const pixelsPerInch      = 100;   // px/inch
const dayNumber          = '171'; // filename

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 3,    // inches
  numEchoesMin:     30,    // min contours
  numEchoesMax:     60,    // max contours
  numProfiles:      5,     // superformula profiles
  innerScale:       0.05,  // smallest outline scale
  outerScale:       1.00,  // largest outline scale
  steps:            1080,  // points per outline
  paletteCountMin:  2,     // min inks
  paletteCountMax:  6      // max inks
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette = [];     // selected inks sorted
let numEchoes;        // actual echo count
let profiles = [];    // radial profiles
let shapes   = [];    // { d, ink }

/**
 * =======================================
 * Utility Functions
 * =======================================
 */

// Superformula radial function
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1 + t2, -1/n1);
}

// Apply stroke with opacity
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

// Pick N random inks, sorted
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

// Sample one radial profile
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    let theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

// Random superformula params
function randomParams() {
  return {
    m: floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // ~0.5 mm stroke
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // Random work-area margin (px)
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  // Random echo count & palette size
  numEchoes   = floor(random(generationRules.numEchoesMin, generationRules.numEchoesMax + 1));
  const palCount = floor(random(generationRules.paletteCountMin, generationRules.paletteCountMax + 1));

  palette = pickPalette(palCount);

  regenerate();
}

/**
 * =======================================
 * Regenerate all contours
 * =======================================
 */
function regenerate() {
  // Sample profiles
  profiles = [];
  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  // Compute work radius
  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;

  // Build shapes
  shapes = [];
  const segs = generationRules.numProfiles - 1;
  const perSeg = floor(numEchoes / segs);

  for (let e = 0; e < numEchoes; e++) {
    let segIdx = min(floor(e / perSeg), segs - 1);
    let t = (e % perSeg) / (perSeg - 1);

    // Interpolate radial array
    let R = [];
    for (let i = 0; i <= generationRules.steps; i++) {
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx+1][i],
        t
      ));
    }

    // Scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (numEchoes - 1)
    );

    // Build SVG path
    const maxR = max(...R);
    let d = 'M';
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix  = (R[i]/maxR) * workR * scale;
      const x = canvasW/2 + cos(theta)*rPix;
      const y = canvasH/2 + sin(theta)*rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink: palette[e % palette.length] });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to Canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        let [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  const off = strokeWeightValue / 2;
  applyStrokeWithOpacity('#000000');
  line(5+off, off, off, off);
  line(off, off, off, 5+off);
  line(canvasW-5-off, canvasH-off, canvasW-off, canvasH-off);
  line(canvasW-off, canvasH-5-off, canvasW-off, canvasH-off);
}

/**
 * =======================================
 * Bottom Palette Bar
 * =======================================
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  let x = (canvasW - total) / 2;
  const seg = (total - (palette.length - 1)*gap) / palette.length;
  strokeWeight(barH);
  for (let ci of palette) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x+seg, y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`, ci);
  }
}

/**
 * Generate and download one SVG
 */
function saveSVG(filename, activeInk) {
  const off = strokeWeightValue / 2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per color
  const pal = [...palette].sort((a,b)=>a-b);
  pal.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    const combinedD = shapes.filter(s => s.ink===ci).map(s=>s.d).join(' ');
    // Palette segment for color
    const total = 300, gap = 7;
    const seg = (total - (pal.length-1)*gap)/pal.length;
    const xStart = (canvasW - total)/2 + idx*(seg+gap);
    const y = canvasH - 1.25*pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}" />n`;
    svg += `  <path d="M${xStart},${y} H${xStart+seg}" />n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

This self‑portrait envisions identity as a field of concentric echoes, where each line retains a trace of the last while unfolding into something new. Five underlying shapes guide a cascade of contours that flow seamlessly from a hidden core to an outer boundary, suggesting an unbroken journey of emergence and transformation. By weaving these outlines without overlap, the composition becomes an unbroken hymn to becoming, where each wave is both distinct and inseparable from the whole.

### Technical Approach

- **Work‑Area Margin** is randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate across adjacent profiles, ensuring strict nesting without intersections.  
- **Scaling**: each outline is normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks (sorted by index) is chosen once; echoes map monotonically through the palette so that the first echo uses the first ink and the last echo uses the last ink—no wrap‑around.  
- **Rendering**: shapes drawn with `noFill()`, constant stroke weight (~0.5 mm), and 0.8 opacity.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink, combining that ink’s contours and its palette segment.  
- **Controls**: press **R** to regenerate geometry (preserving palette); press **SPACE** to export the combined SVG and one SVG per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 3,    // inches
  numEchoesMin:     30,    // min contours
  numEchoesMax:     60,    // max contours
  numProfiles:      5,     // distinct superformula profiles
  innerScale:       0.05,  // smallest outline scale
  outerScale:       1.00,  // largest outline scale
  steps:            1080,  // points per outline
  paletteCountMin:  2,     // min inks
  paletteCountMax:  6      // max inks
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette   = [];   // sorted ink indices
let numEchoes;        // actual number of echoes
let profiles  = [];   // radial profiles
let shapes    = [];   // { d, ink }

/**
 * =======================================
 * Superformula Radial Function
 * =======================================
 */
function superformula(theta, m, n1, n2, n3, a, b) {
  const t1 = pow(abs(cos(m*theta/4)/a), n2);
  const t2 = pow(abs(sin(m*theta/4)/b), n3);
  return pow(t1 + t2, -1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js Setup
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // 0.5 mm stroke
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // Random work-area margin
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  // Random echo count and palette size
  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));
  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);

  regenerate();
}

/**
 * Pick N inks, sorted by index
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Sample a radial profile
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(theta, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate Contours
 * =======================================
 */
function regenerate() {
  profiles = [];
  shapes   = [];

  // Build profiles
  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  // Work radius
  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;
  const segs  = generationRules.numProfiles - 1;
  const perSeg = floor(numEchoes / segs);

  // Build echoes
  for (let e = 0; e < numEchoes; e++) {
    const segIdx = min(floor(e / perSeg), segs - 1);
    const t      = (e % perSeg) / (perSeg - 1);
    const R      = [];

    for (let i = 0; i <= generationRules.steps; i++) {
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx+1][i],
        t
      ));
    }

    // Monotonic palette mapping
    const colorIdx = palette[
      floor(e / (numEchoes - 1) * (palette.length - 1))
    ];

    // Scale
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (numEchoes - 1)
    );

    // Build path
    const maxR = max(...R);
    let d = 'M';
    for (let i = 0; i <= generationRules.steps; i++) {
      const theta = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rPix  = (R[i]/maxR) * workR * scale;
      const x = canvasW/2 + cos(theta)*rPix;
      const y = canvasH/2 + sin(theta)*rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink: colorIdx });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw on Canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        const [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off, off, off, off);
  line(off, off, off, 5+off);
  line(canvasW-5-off, canvasH-off, canvasW-off, canvasH-off);
  line(canvasW-off, canvasH-5-off, canvasW-off, canvasH-off);
}

/**
 * =======================================
 * Palette Bar
 * =======================================
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  let x = (canvasW - total)/2;
  const seg = (total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for (let ci of palette) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x+seg, y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`, ci);
  }
}

function saveSVG(filename, activeInk) {
  const off = strokeWeightValue/2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per color
  const pal = [...palette].sort((a,b)=>a-b);
  pal.forEach((ci, idx) => {
    if (activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total = 300, gap = 7;
    const seg = (total-(pal.length-1)*gap)/pal.length;
    const xStart = (canvasW-total)/2 + idx*(seg+gap);
    const y = canvasH-1.25*pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    svg += `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg], {type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

/**
 * Generate random superformula parameters
 */
function randomParams() {
  return {
    m: floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

This self‑portrait envisions identity as concentric echoes—each line retaining a whisper of the last while unfolding into something new. Five hidden shapes guide a cascade of contours that flow from a secret core to an outer boundary, suggesting an unbroken journey of emergence and transformation. By weaving these outlines without overlap, the composition reads like a continuous hymn to becoming, where every wave is both distinct and inseparable from the whole.

### Technical Approach

- **Work‑Area Margin** is randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: a random count between 30–60 contours interpolate smoothly across adjacent profiles, guaranteeing strict nesting without intersections.  
- **Scaling**: each outline is normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks is chosen once and sorted.  
- **Color Mode**: one of three modes—**roundRobin**, **monotonic**, or **random**—is picked at runtime and governs how inks map to contours:
  - **roundRobin**: cycle palette by index (`e % palette.length`),  
  - **monotonic**: first echo → first ink, last echo → last ink, interpolated in between,  
  - **random**: each echo picks a random ink.  
- **Rendering**: all shapes drawn with `noFill()`, constant stroke weight (~0.5 mm), and 0.8 opacity.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink, combining that ink’s contours and its palette segment.  
- **Controls**: press **R** to regenerate geometry (preserving palette and color mode); press **SPACE** to export the combined SVG and one SVG per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
// Canvas settings
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,  // inches
  workAreaMarginMax: 3,    // inches
  numEchoesMin:     30,    // min contours
  numEchoesMax:     60,    // max contours
  numProfiles:      5,     // superformula profiles
  innerScale:       0.05,  // smallest scale
  outerScale:       1.00,  // largest scale
  steps:            1080,  // points per outline
  paletteCountMin:  2,     // min inks
  paletteCountMax:  6,     // max inks
  colorModes:       ['roundRobin','monotonic','random']  // mapping modes
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette     = [];
let numEchoes;
let colorMode;
let profiles    = [];
let shapes      = [];

/**
 * =======================================
 * Superformula Utility
 * =======================================
 */
function superformula(theta,m,n1,n2,n3,a,b) {
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke color with opacity
 */
function applyStrokeWithOpacity(hexColor) {
  let c = color(hexColor);
  c.setAlpha(255*strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * Setup
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW,canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax+1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax+1
  ));

  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N inks
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks,true);
  return ks.slice(0,n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    let theta = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(theta,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate Contours
 * =======================================
 */
function regenerate(){
  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<generationRules.numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW,canvasH)/2 - workAreaMarginPixels;
  const segs  = generationRules.numProfiles-1;
  const perSeg= floor(numEchoes/segs);

  // Build echoes
  for(let e=0;e<numEchoes;e++){
    const segIdx = min(floor(e/perSeg),segs-1);
    const t      = (e%perSeg)/(perSeg-1);
    const R      = [];

    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx+1][i],
        t
      ));
    }

    // Choose ink according to colorMode
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e%palette.length];
    } else if(colorMode==='monotonic'){
      ink = palette[floor(e/(numEchoes-1)*(palette.length-1))];
    } else { // random
      ink = random(palette);
    }

    // Scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e/(numEchoes-1)
    );

    // Build path string
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const theta = map(i,0,generationRules.steps,0,TWO_PI);
      const rPix  = (R[i]/maxR)*workR*scale;
      const x = canvasW/2 + cos(theta)*rPix;
      const y = canvasH/2 + sin(theta)*rPix;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i<generationRules.steps?'L':'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw on Canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom Palette Bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x+=seg+gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

function saveSVG(filename,activeInk){
  const off = strokeWeightValue/2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg+=`  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg+= `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg+= `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg+= `</g>n`;

  // Layers 1–9: one per color
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col=colors[ci];
    const layerNum=idx+1;
    const combinedD=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2+idx*(seg+gap);
    const y=canvasH-1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

This self‑portrait envisions identity as concentric echoes—each line retaining a whisper of the last while unfolding into something new. Five hidden superformula shapes guide a cascade of contours that flow from a secret core to an outer boundary, suggesting an unbroken journey of emergence and transformation. By weaving these outlines without overlap, the composition reads as an unbroken hymn to becoming, where every wave is both distinct and inseparable from the whole.

### Technical Approach

- **Work‑Area Margin** is randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: a random count between 30–60 contours interpolate smoothly across adjacent profiles, guaranteeing strict nesting without intersections.  
- **Scaling**: each outline is normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks is chosen once and sorted.  
- **Color Modes** (randomly chosen at setup):
  - **roundRobin**: the first N echoes get the first N palette colors in order, then all remaining echoes use the final palette color (no wrap‑around).  
  - **monotonic**: echoes map evenly from first to last palette color (first echo→first ink; last echo→last ink).  
  - **random**: each echo picks an ink at random.  
- **Rendering**: all shapes drawn with `noFill()`, constant stroke weight (~0.5 mm), and 0.8 opacity.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink, combining that ink’s contours and its palette segment.  
- **Controls**: press **R** to regenerate geometry (preserving palette & mode); press **SPACE** to export both the combined SVG and one SVG per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,   // inches
  workAreaMarginMax: 3,     // inches
  numEchoesMin:     30,     // min contours
  numEchoesMax:     60,     // max contours
  numProfiles:      5,      // superformula profiles
  innerScale:       0.05,   // smallest scale
  outerScale:       1.00,   // largest scale
  steps:            1080,   // points per outline
  paletteCountMin:  2,      // min inks
  paletteCountMax:  6,      // max inks
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette   = [];
let numEchoes;
let colorMode;
let profiles  = [];
let shapes    = [];

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b) {
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with opacity
 */
function applyStrokeWithOpacity(hex) {
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup() {
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // ~0.5mm stroke
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // Random margin
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  // Random echoes & palette size
  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));
  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));

  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N inks
 */
function pickPalette(n) {
  let keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, n).sort((a, b) => a - b);
}

/**
 * Random superformula params
 */
function randomParams() {
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a: 1, b: 1
  };
}

/**
 * Sample one profile
 */
function sampleProfile(p) {
  let R = [];
  for (let i = 0; i <= generationRules.steps; i++) {
    let θ = map(i, 0, generationRules.steps, 0, TWO_PI);
    R.push(superformula(θ, p.m, p.n1, p.n2, p.n3, p.a, p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours
 * =======================================
 */
function regenerate() {
  profiles = [];
  shapes   = [];

  // build profiles
  for (let i = 0; i < generationRules.numProfiles; i++) {
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;
  const segs  = generationRules.numProfiles - 1;
  const perSeg = floor(numEchoes / segs);

  for (let e = 0; e < numEchoes; e++) {
    const segIdx = min(floor(e / perSeg), segs - 1);
    const t      = (e % perSeg) / (perSeg - 1);
    const R      = [];

    // interpolate radial
    for (let i = 0; i <= generationRules.steps; i++) {
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx + 1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if (colorMode === 'roundRobin') {
      // no wrap: first N echoes get distinct inks, rest use last ink
      ink = e < palette.length ? palette[e] : palette[palette.length - 1];
    } else if (colorMode === 'monotonic') {
      ink = palette[
        floor(e / (numEchoes - 1) * (palette.length - 1))
      ];
    } else { // random
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e / (numEchoes - 1)
    );

    // build path string
    const maxR = max(...R);
    let d = 'M';
    for (let i = 0; i <= generationRules.steps; i++) {
      const θ  = map(i, 0, generationRules.steps, 0, TWO_PI);
      const rP = (R[i] / maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes() {
  background(255);
  noFill();
  for (let s of shapes) {
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for (let cmd of s.d.trim().split(/s+/)) {
      if (/^[ML]/.test(cmd)) {
        let [x, y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }

  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Draw registration markers
 * =======================================
 */
function drawMarkers() {
  strokeWeight(1);
  const off = strokeWeightValue / 2;
  applyStrokeWithOpacity('#000000');
  line(5+off, off, off, off);
  line(off, off, off, 5+off);
  line(canvasW-5-off, canvasH-off, canvasW-off, canvasH-off);
  line(canvasW-off, canvasH-5-off, canvasW-off, canvasH-off);
}

/**
 * =======================================
 * Draw bottom palette bar
 * =======================================
 */
function addColorPaletteBars() {
  const total = 300, barH = 2, gap = 7;
  const y = canvasH - 1.25 * pixelsPerInch;
  let x = (canvasW - total) / 2;
  const seg = (total - (palette.length - 1) * gap) / palette.length;
  strokeWeight(barH);
  for (let ci of palette) {
    applyStrokeWithOpacity(colors[ci].hex);
    line(x, y, x + seg, y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG export
 * =======================================
 */
function saveSVGs() {
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for (let ci of palette) {
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

function saveSVG(filename, activeInk) {
  const off = strokeWeightValue / 2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per color
  const pal = [...palette].sort((a,b)=>a-b);
  pal.forEach((ci, idx) => {
    if (activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    const combinedD = shapes.filter(s => s.ink === ci).map(s => s.d).join(' ');
    const total = 300, gap = 7;
    const seg = (total - (pal.length - 1) * gap) / pal.length;
    const xStart = (canvasW - total) / 2 + idx * (seg + gap);
    const y = canvasH - 1.25 * pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    svg += `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg], { type:'image/svg+xml;charset=utf-8' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url; a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

if (colorMode === 'roundRobin') {
  // true cycling
  ink = palette[e % palette.length];
} else if (colorMode === 'monotonic') {
  // evenly rounded distribution
  const idx = round( map(e, 0, numEchoes-1, 0, palette.length-1) );
  ink = palette[idx];
} else { // random
  ink = random(palette);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

This self‑portrait imagines my identity as layered waves of transformation, each echo hinting at the one before while blossoming into a new shape. Five hidden superformula forms pulse like ripples, giving rise to dozens of outlines that unfold outward from a secret core. Each contour preserves a trace of its predecessor even as it finds its own voice, weaving a visual dialogue of emergence, continuity, and renewal.

### Technical Approach

- **Work‑Area Margin** is randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: a random count between 30–60 contours interpolate smoothly across adjacent profiles.  
- **Scaling**: each outline is normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks is chosen once and sorted.  
- **Color Modes** (randomly chosen at setup):
  - **roundRobin**: cycle inks modulo palette length,  
  - **monotonic**: evenly distribute echoes with rounding so first echo → first ink, last echo → last ink,  
  - **random**: each echo picks a random ink.  
- **Rendering**: all shapes drawn with `noFill()`, constant stroke weight (~0.5 mm), and 0.8 opacity.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink, combining that ink’s contours and its palette segment.  
- **Controls**: press **R** to regenerate geometry (preserving palette & mode); press **SPACE** to export the combined SVG and one SVG per ink color.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 3,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfiles:      5,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  6,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode;
let profiles, shapes;

/**
 * =======================================
 * Superformula radial
 * =======================================
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with opacity
 */
function applyStrokeWithOpacity(hex){
  let c=color(hex);
  c.setAlpha(255*strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax+1
  ));
  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax+1
  ));
  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N inks
 */
function pickPalette(n){
  let ks=Object.keys(colors).map(Number);
  shuffle(ks,true);
  return ks.slice(0,n).sort((a,b)=>a-b);
}

/**
 * Random superformula params
 */
function randomParams(){
  return {
    m:floor(random(3,10)),
    n1:random(0.5,2),
    n2:random(0.5,2),
    n3:random(0.5,2),
    a:1,b:1
  };
}

/**
 * Sample a profile
 */
function sampleProfile(p){
  let R=[];
  for(let i=0;i<=generationRules.steps;i++){
    const θ=map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours
 * =======================================
 */
function regenerate(){
  profiles=[]; shapes=[];

  for(let i=0;i<generationRules.numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR=min(canvasW,canvasH)/2 - workAreaMarginPixels;
  const segs=generationRules.numProfiles-1;
  const perSeg=floor(numEchoes/segs);

  for(let e=0;e<numEchoes;e++){
    const segIdx=min(floor(e/perSeg),segs-1);
    const t=(e%perSeg)/(perSeg-1);
    let R=[];

    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx+1][i],
        t
      ));
    }

    // Color mapping
    let ink;
    if(colorMode==='roundRobin'){
      ink = (e < palette.length ? palette[e] : palette[palette.length-1]);
    } else if(colorMode==='monotonic'){
      const idx = round(map(e,0,numEchoes-1,0,palette.length-1));
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e/(numEchoes-1)
    );

    const maxR=max(...R);
    let d='M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ=map(i,0,generationRules.steps,0,TWO_PI);
      const rP=(R[i]/maxR)*workR*scale;
      const x=canvasW/2+cos(θ)*rP;
      const y=canvasH/2+sin(θ)*rP;
      d+=`${x.toFixed(2)},${y.toFixed(2)} `;
      d+=i<generationRules.steps?'L':'Z';
    }

    shapes.push({d,ink});
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off=strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x+=seg+gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts=Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

function saveSVG(filename,activeInk){
  const off=strokeWeightValue/2;
  let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg+=`  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg+=`  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg+=`</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col=colors[ci];
    const layerNum=idx+1;
    const combinedD=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH-1.25*pixelsPerInch;

    svg+=`<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+=`  <path d="${combinedD}"/>n`;
    svg+=`  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+=`</g>n`;
  });

  svg+=`</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate smoothly across adjacent profiles.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks chosen once and sorted.  
- **Color Modes**:
  - **roundRobin**: cycle inks with modulo (`e % palette.length`),  
  - **monotonic**: evenly distribute echoes using `floor(f*palette.length)` with clamping,  
  - **random**: each echo picks a random ink.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink, combining that ink’s contours and its palette segment.  
- **Controls**: **R** regenerates shapes (preserving palette & mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 3,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfiles:      5,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  6,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode;
let profiles, shapes;

/**
 * Superformula radial
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke color with opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * Setup
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N inks
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula params
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate Contours
 * =======================================
 */
function regenerate(){
  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<generationRules.numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;
  const segs  = generationRules.numProfiles - 1;
  const perSeg= floor(numEchoes/segs);

  for(let e=0;e<numEchoes;e++){
    const segIdx = min(floor(e/perSeg), segs-1);
    const t      = (e % perSeg)/(perSeg-1);
    let R        = [];

    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[segIdx][i],
        profiles[segIdx+1][i],
        t
      ));
    }

    // Color mapping
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let f   = e/(numEchoes - 1);
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    // Scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      e/(numEchoes - 1)
    );

    // Build path
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR)*workR*scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i<generationRules.steps?'L':'Z';
    }

    shapes.push({d,ink});
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to Canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration Markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom Palette Bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg+gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

function saveSVG(filename, activeInk){
  const off = strokeWeightValue/2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per ink
  const pal = [...palette].sort((a,b)=>a-b);
  pal.forEach((ci, idx) => {
    if(activeInk && ci !== activeInk) return;
    const col = colors[ci];
    const layerNum = idx + 1;
    const combinedD = shapes.filter(s => s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH-1.25*pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    svg += `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob = new Blob([svg], { type:'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a   = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate smoothly across adjacent profiles via continuous mapping.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks chosen once and sorted.  
- **Color Modes**:  
  - **roundRobin**: cycle inks modulo palette length,  
  - **monotonic**: evenly distribute echoes with clamped floor,  
  - **random**: each echo picks a random ink.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (preserving palette & mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 3,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfiles:      5,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  6,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<generationRules.numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;
  const nP    = generationRules.numProfiles;

  for(let e=0;e<numEchoes;e++){
    // continuous mapping across all profile segments
    const f    = e/(numEchoes - 1);
    const raw  = f * (nP - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, nP - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else { // random
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build SVG path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

function saveSVG(filename, activeInk){
  const off = strokeWeightValue/2;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg+= `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  svg+= `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg+= `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
  svg+= `</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a); a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized between 1.5–3 inches to define the drawing radius.  
- **Profiles**: five random superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate smoothly across adjacent profiles via continuous mapping.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–6 inks chosen once and sorted.  
- **Color Modes**:  
  - **roundRobin**: cycle inks modulo palette length,  
  - **monotonic**: evenly distribute echoes with clamped floor,  
  - **random**: each echo picks a random ink.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (preserving palette & mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 3,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfiles:      5,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  6,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<generationRules.numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;
  const nP    = generationRules.numProfiles;

  for(let e=0;e<numEchoes;e++){
    // continuous mapping across all profile segments
    const f    = e/(numEchoes - 1);
    const raw  = f * (nP - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, nP - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else { // random
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build SVG path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

/**
 * Final saveSVG() with corrected marker offsets
 */
function saveSVG(filename, activeInk){
  const offset = 0.5;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers with offset
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized between 1.5–2 inches to define the drawing radius.  
- **Profiles**: a random count between 3–7 superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate smoothly across adjacent profiles via continuous mapping.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–7 inks chosen once and sorted.  
- **Color Modes**:  
  - **roundRobin**: cycle inks modulo palette length,  
  - **monotonic**: evenly distribute echoes with clamped floor,  
  - **random**: each echo picks a random ink.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (preserving palette & mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfilesMin:   3,
  numProfilesMax:   7,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  7,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode, numProfiles;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));

  numProfiles = floor(random(
    generationRules.numProfilesMin,
    generationRules.numProfilesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  regenerate();
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;

  for(let e=0;e<numEchoes;e++){
    const f    = e/(numEchoes - 1);
    const raw  = f * (numProfiles - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, numProfiles - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

/**
 * Final saveSVG() with corrected marker offsets
 */
function saveSVG(filename, activeInk){
  const offset = 0.5;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers with offset
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function regenerate(){
  // re‐pick everything:
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes   = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));
  numProfiles = floor(random(
    generationRules.numProfilesMin,
    generationRules.numProfilesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette   = pickPalette(palCount);
  colorMode = random(generationRules.colorModes);

  // …then rebuild the profiles & shapes exactly as before…
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized between 1.5–2 inches to define the drawing radius.  
- **Profiles**: a random count between 3–7 superformula parameter sets sample radial shapes.  
- **Echoes**: between 30–60 contours interpolate smoothly across adjacent profiles via continuous mapping.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: a random selection of 2–7 inks chosen once and sorted.  
- **Color Modes**:  
  - **roundRobin**: cycle inks modulo palette length,  
  - **monotonic**: evenly distribute echoes with clamped floor,  
  - **random**: each echo picks a random ink.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (re‑randomizing margin, profiles, echoes, palette, and mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfilesMin:   3,
  numProfilesMax:   7,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  7,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode, numProfiles;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // initial randomization
  randomizeParameters();

  regenerate();
}

/**
 * Move all random picks into a single function
 */
function randomizeParameters(){
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));

  numProfiles = floor(random(
    generationRules.numProfilesMin,
    generationRules.numProfilesMax + 1
  ));

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);

  colorMode = random(generationRules.colorModes);
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  // re-randomize only the requested parameters
  randomizeParameters();

  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;

  for(let e=0;e<numEchoes;e++){
    const f    = e/(numEchoes - 1);
    const raw  = f * (numProfiles - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, numProfiles - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

/**
 * Final saveSVG() with corrected marker offsets
 */
function saveSVG(filename, activeInk){
  const offset = 0.5;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers with offset
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized once at startup between 1.5–2 inches to define the drawing radius.  
- **Profiles**: a new random count between 3–7 superformula parameter sets is chosen on **R**.  
- **Echoes**: a new random count between 30–60 contours is chosen on **R**.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: chosen once at startup (2–7 inks).  
- **Color Modes**: a new random choice of ['roundRobin','monotonic','random'] on **R**.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (re‑randomizing profiles, echoes, and mode); **SPACE** exports the combined SVG and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2,
  numEchoesMin:     30,
  numEchoesMax:     60,
  numProfilesMin:   3,
  numProfilesMax:   7,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  7,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode, numProfiles;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // one-time randomization
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);

  // now first generation
  pickDynamicParameters();
  regenerate();
}

/**
 * Pick dynamic parameters (profiles, echoes, colorMode)
 * called in setup and on R
 */
function pickDynamicParameters(){
  numEchoes = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));
  numProfiles = floor(random(
    generationRules.numProfilesMin,
    generationRules.numProfilesMax + 1
  ));
  colorMode = random(generationRules.colorModes);
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  // re-pick dynamic params
  pickDynamicParameters();

  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;

  for(let e=0;e<numEchoes;e++){
    const f    = e/(numEchoes - 1);
    const raw  = f * (numProfiles - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, numProfiles - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  drawMarkers();
  addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, 0);
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci
    );
  }
}

/**
 * Final saveSVG() with corrected marker offsets
 */
function saveSVG(filename, activeInk){
  const offset = 0.5;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers with offset
  svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
  svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
  svg += `</g>n`;

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg+= `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg+= `  <path d="${combinedD}"/>n`;
    svg+= `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    svg+= `</g>n`;
  });

  svg+= `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Day 171
/*

=======================================
  Day 171 Self‑Portrait (Superformula Super Echoes)
=======================================

### Title: *Superformula Super Echoes*

### Medium: Generative Drawing on Paper

### Keywords: generative art, algorithmic art, superformula, ripple, resonance, nested forms, identity, transformation, concentric echoes, parametric design

### Conceptual Framework

I perceive my identity as a series of concentric ripples—each outline carries a memory of the last while opening into new possibility. The contours flow seamlessly from an inner core through shifting transitional forms to a final boundary, suggesting an endless continuum of transformation and self‑discovery. By weaving these shapes together, the composition becomes an unbroken hymn to becoming, where every wave is distinct yet inseparable from the whole.

### Technical Approach

- **Work‑Area Margin**: randomized once at startup between 1.5–2 inches to define the drawing radius.  
- **Profiles**: a new random count between 3–7 superformula parameter sets is chosen on **R**.  
- **Echoes**: a new random count between 30–60 contours is chosen on **R**.  
- **Scaling**: each outline normalized and scaled from 5% to 100% of the work radius.  
- **Resolution**: 1080 points per outline (`steps`).  
- **Palette**: chosen once at startup (2–7 inks).  
- **Color Modes**: a new random choice of ['roundRobin','monotonic','random'] on **R**.  
- **Rendering**: `noFill()`, constant stroke weight (~0.5 mm), opacity 0.8.  
- **SVG Layers**: ten total—layer 0 for markers; layers 1–9 for each ink’s contours and its palette bar.  
- **Controls**: **R** regenerates shapes (re‑randomizing profiles, echoes, and mode); **SPACE** exports four “ALL” variants and one per ink.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 171 - Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '171';

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

const strokeOpacity = 0.8;

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2,
  numEchoesMin:     40,
  numEchoesMax:     60,
  numProfilesMin:   3,
  numProfilesMax:   7,
  innerScale:       0.05,
  outerScale:       1.00,
  steps:            1080,
  paletteCountMin:  2,
  paletteCountMax:  6,
  colorModes:       ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Display Settings
 * =======================================
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let workAreaMarginPixels;
let strokeWeightValue;
let palette, numEchoes, colorMode, numProfiles;
let profiles, shapes;

/**
 * Superformula radial function
 */
function superformula(theta,m,n1,n2,n3,a,b){
  const t1 = pow(abs(cos(m*theta/4)/a),n2);
  const t2 = pow(abs(sin(m*theta/4)/b),n3);
  return pow(t1+t2,-1/n1);
}

/**
 * Apply stroke with fixed opacity
 */
function applyStrokeWithOpacity(hex){
  let c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/**
 * =======================================
 * p5.js setup()
 * =======================================
 */
function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  // one-time randomization
  workAreaMarginPixels = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch;

  const palCount = floor(random(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax + 1
  ));
  palette = pickPalette(palCount);

  // first dynamic pick
  pickDynamicParameters();
  regenerate();
}

/**
 * Pick dynamic parameters (profiles, echoes, colorMode)
 * called in setup and on R
 */
function pickDynamicParameters(){
  numEchoes   = floor(random(
    generationRules.numEchoesMin,
    generationRules.numEchoesMax + 1
  ));
  numProfiles = floor(random(
    generationRules.numProfilesMin,
    generationRules.numProfilesMax + 1
  ));
  colorMode   = random(generationRules.colorModes);
}

/**
 * Pick and sort N palette indices
 */
function pickPalette(n){
  let ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0, n).sort((a,b)=>a-b);
}

/**
 * Random superformula parameters
 */
function randomParams(){
  return {
    m:  floor(random(3,10)),
    n1: random(0.5,2),
    n2: random(0.5,2),
    n3: random(0.5,2),
    a:1, b:1
  };
}

/**
 * Sample one radial profile
 */
function sampleProfile(p){
  let R = [];
  for(let i=0;i<=generationRules.steps;i++){
    const θ = map(i,0,generationRules.steps,0,TWO_PI);
    R.push(superformula(θ,p.m,p.n1,p.n2,p.n3,p.a,p.b));
  }
  return R;
}

/**
 * =======================================
 * Regenerate contours and shapes
 * =======================================
 */
function regenerate(){
  // re-pick dynamic params
  pickDynamicParameters();

  profiles = [];
  shapes   = [];

  // Build profiles
  for(let i=0;i<numProfiles;i++){
    profiles.push(sampleProfile(randomParams()));
  }

  const workR = min(canvasW, canvasH)/2 - workAreaMarginPixels;

  for(let e=0;e<numEchoes;e++){
    const f    = e/(numEchoes - 1);
    const raw  = f * (numProfiles - 1);
    const idx0 = floor(raw);
    const idx1 = min(idx0 + 1, numProfiles - 1);
    const t    = raw - idx0;

    // interpolate radial values
    let R = [];
    for(let i=0;i<=generationRules.steps;i++){
      R.push(lerp(
        profiles[idx0][i],
        profiles[idx1][i],
        t
      ));
    }

    // choose ink
    let ink;
    if(colorMode==='roundRobin'){
      ink = palette[e % palette.length];
    } else if(colorMode==='monotonic'){
      let idx = floor(f * palette.length);
      if(idx >= palette.length) idx = palette.length - 1;
      ink = palette[idx];
    } else {
      ink = random(palette);
    }

    // scale factor
    const scale = lerp(
      generationRules.innerScale,
      generationRules.outerScale,
      f
    );

    // build path data
    const maxR = max(...R);
    let d = 'M';
    for(let i=0;i<=generationRules.steps;i++){
      const θ  = map(i,0,generationRules.steps,0,TWO_PI);
      const rP = (R[i]/maxR) * workR * scale;
      const x  = canvasW/2 + cos(θ)*rP;
      const y  = canvasH/2 + sin(θ)*rP;
      d += `${x.toFixed(2)},${y.toFixed(2)} `;
      d += i < generationRules.steps ? 'L' : 'Z';
    }

    shapes.push({ d, ink });
  }

  drawShapes();
}

/**
 * =======================================
 * Draw to canvas
 * =======================================
 */
function drawShapes(){
  background(255);
  noFill();
  for(let s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    beginShape();
    for(let cmd of s.d.trim().split(/s+/)){
      if(/^[ML]/.test(cmd)){
        let [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  if(showMarkers) drawMarkers();
  if(showPalette) addColorPaletteBars();
}

/**
 * =======================================
 * Registration markers
 * =======================================
 */
function drawMarkers(){
  strokeWeight(1);
  const off = strokeWeightValue/2;
  applyStrokeWithOpacity('#000000');
  line(5+off,off,off,off);
  line(off,off,off,5+off);
  line(canvasW-5-off,canvasH-off,canvasW-off,canvasH-off);
  line(canvasW-off,canvasH-5-off,canvasW-off,canvasH-off);
}

/**
 * =======================================
 * Bottom palette bar
 * =======================================
 */
function addColorPaletteBars(){
  const total=300,barH=2,gap=7;
  const y=canvasH - 1.25 * pixelsPerInch;
  let x=(canvasW - total)/2;
  const seg=(total - (palette.length-1)*gap)/palette.length;
  strokeWeight(barH);
  for(let ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y);
    x += seg + gap;
  }
}

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

/**
 * =======================================
 * SVG Export
 * =======================================
 */
function saveSVGs(){
  const ts = Date.now();
  // ALL variants
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,    0, true,  true );
  saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, 0, false, true );
  saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, 0, true,  false);
  saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,0, false, false);
  // per-ink exports
  for(let ci of palette){
    saveSVG(
      `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
      ci, true, true
    );
  }
}

/**
 * Final saveSVG() with marker & palette flags
 */
function saveSVG(filename, activeInk, includeMarkers, includePalette){
  const offset = 0.5;
  let svg = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  // Layer 0: markers
  if(includeMarkers){
    svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
    svg += `  <path d="M${5+offset},${offset} L${offset},${offset} L${offset},${5+offset} M${canvasW-5-offset},${canvasH-offset} L${canvasW-offset},${canvasH-offset} L${canvasW-offset},${canvasH-5-offset}" stroke-width="1" fill="none"/>n`;
    svg += `</g>n`;
  }

  // Layers 1–9: one per ink
  const pal=[...palette].sort((a,b)=>a-b);
  pal.forEach((ci,idx)=>{
    if(activeInk && ci!==activeInk) return;
    const col = colors[ci];
    const layerNum = idx+1;
    const combinedD = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300, gap=7;
    const seg=(total-(pal.length-1)*gap)/pal.length;
    const xStart=(canvasW-total)/2 + idx*(seg+gap);
    const y=canvasH - 1.25*pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layerNum}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${combinedD}"/>n`;
    if(includePalette){
      svg += `  <path d="M${xStart},${y} H${xStart+seg}"/>n`;
    }
    svg += `</g>n`;
  });

  svg += `</svg>`;

  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url; a.download=filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

**Guidelines for Today’s Generative Self‑Portrait Artwork**

These instructions define both the creative and technical requirements for each daily self‑portrait.  
Follow them exactly—every item is mandatory unless marked *Optional*.

---

### 1   Thoughtful Creation  
- **Minimum Reflection**: Spend at least one full minute considering the concept before coding.  
- **Depth & Clarity**: Each decision should have an explicit purpose; avoid superficial changes.

### 2   Unique Concept  
- **Daily Innovation**: Introduce **at least one** new generative mechanism or creative twist never used in earlier portraits.  
- **Stand‑Alone Writing**: Title, Conceptual Framework, and Technical Approach must read as though no previous versions exist—no comparisons, callbacks, or “as before.”

### 3   Template Discipline  
- **Read First**: Study the p5.js template comments before editing.  
- **Exactly One File**: Return a single, complete code block—no omissions.

### 4   Pen‑Plotter Constraints  
- **No Plotter Talk**: Do not mention plotting hardware in the artwork text.  
- **No Overlapping Paths**: Paths may cross but must never run directly on top of each other.

### 5   Canvas ↔ SVG Parity  
- **Path Tracking**: Use an array (e.g., `shapes`, `pathData`) so that every canvas stroke is reproduced in the SVG export.

### 6   Color Usage  
- **Nine Inks Only**: Use the fixed palette (opacity 0.8).  
- **Consistency**: Colors on canvas = colors in every SVG variant.

### 7   Line‑Only Rendering  
- **No Fills / Gradients**: Simulate solid areas with strokes or cross‑hatching only.

### 8   Dimensions & Naming  
- **Canvas**: 11 × 11 in at 100 ppi.  
- **Margins**: Randomized once per run within the provided range.  
- **File Names**:  
  - Combined exports:  
    - `DAY-ALL-PORTRAIT-<timestamp>.svg`  
    - `DAY-ALL-NM-PORTRAIT-<timestamp>.svg` (no markers)  
    - `DAY-ALL-NP-PORTRAIT-<timestamp>.svg` (no palette)  
    - `DAY-ALL-NMNP-PORTRAIT-<timestamp>.svg` (no markers, no palette)  
  - Per‑ink exports: `DAY-0<index>-<COLOR>-PORTRAIT-<timestamp>.svg`

### 9   Efficient SVG Structure  
- **Layers**: Maximum 10 (layer 0 = markers; layers 1–9 = inks).  
- **Paths**: Merge all segments of the same ink into one `<path>` string within its layer.  
- **Palette Bars**: Draw inside each ink’s layer (omit when exporting NP variants).

### 10   *Optional* Layered Occlusion  
Use clipping only if stacking order is conceptually important and preserves SVG parity.

### 11   *Optional* External Data  
External inputs are allowed if they do **not** break any other guideline.

### 12   Feedback (in plain chat, not in code)  
- **Collaboration Feel**: Say whether the process felt collaborative or otherwise.  
- **Purpose Reflection**: Briefly reflect on how today’s portrait advances the exploration of self‑perception.

---

#### Remember  
- Keep **markers** and **palette bars** visible on‑canvas only when the boolean flags `showMarkers` / `showPalette` are `true`.  
- The **`R` key** must re‑randomize only: number of profiles, number of echoes, and color‑mode.  
- The **`SPACE` key** triggers every SVG export listed above.  
- Adhere strictly to stroke width, opacity, margin ranges, and palette limits defined in the template.

Follow the template structure exactly and verify that all four combined SVG variants open without errors.

**Daily Generative Self‑Portrait Prompt**

This prompt is the single source of truth for every future portrait.  
Read it fully **each day** before you begin coding.

---

## 1  Contemplation  
Spend **≥ 1 minute** thinking about the day’s idea before you write any code.

## 2  Originality  
- Introduce **at least one** brand‑new generative twist never used before.  
- Write *Conceptual Framework* and *Technical Approach* as if no prior portraits exist.

## 3  Template Fidelity  
- Edit exactly one p5.js file that follows the provided comment headers.  
- Do **not** delete required constants, palette, or export logic.

## 4  Plotter Constraints  
- Mention no hardware.  
- Lines may cross but must never sit directly atop one another.

## 5  Canvas ⇔ SVG Parity  
Track every stroke in an array so the SVG reproduces the canvas **pixel‑perfectly**.

## 6  Colour  
Use only the nine ink colours at 0.8 opacity.

## 7  Line‑Only Aesthetic  
No fills, no gradients—simulate fills via cross‑hatching if needed.

## 8  Geometry & Naming  
- Canvas: 11 × 11 in at 100 ppi.  
- Margins: random within specified range on each (re)run.  
- File names:  

  | Export | Required Layers | Name Pattern |
  |--------|-----------------|--------------|
  | Combined | markers ✔ palette ✔ | `<DDD>-ALL-PORTRAIT-<timestamp>.svg` |
  | No markers | palette ✔ | `<DDD>-ALL-NM-PORTRAIT-<timestamp>.svg` |
  | No palette | markers ✔ | `<DDD>-ALL-NP-PORTRAIT-<timestamp>.svg` |
  | No markers & palette | none | `<DDD>-ALL-NMNP-PORTRAIT-<timestamp>.svg` |
  | Per‑ink | its ink layer only | `<DDD>-0<index>-<COLOR>-PORTRAIT-<timestamp>.svg` |

## 9  SVG Efficiency  
- Max 10 layers (0 = markers, 1–9 = inks).  
- One `<path>` per ink layer containing every segment for that ink.  
- Palette bar lives inside its ink layer and is omitted in *NP* variants.

## 10  Optional Enhancements  
Use clipping, external data, or other advanced tricks only if they keep SVG parity and follow every rule.

---

### Remember — Critical Implementation Details  

1. **Boolean display flags**  
   - `showMarkers` and `showPalette` decide whether markers and palette bars appear on the canvas preview.  
   - These flags **must not** influence which layers are written to SVG—export logic relies on the `includeMarkers` / `includePalette` parameters.

2. **`generationRules` integrity**  
   - Every variable that controls randomness **must** live inside `generationRules` so it is visible at a glance.  
   - If you add a new parameter, add its description there too.

3. **`R` key behaviour**  
   - Pressing **R** should re‑randomise all parameters that normally randomise at startup **except the ink palette**, which must stay fixed for that run.  
   - The regenerated drawing must match all template rules and update every SVG export accordingly.

4. **`SPACE` key behaviour**  
   - Always export the four combined SVG variants **plus** one file per ink layer—using the exact naming patterns above.  
   - Ensure every SVG opens without namespace or layer errors.

Follow these rules precisely—consistency is essential for the long‑term study.

**Daily Generative Self‑Portrait Prompt**

This document is the single source of truth for every portrait.  
Read it in full **each day** before coding.

---

## 1  Contemplation  
Spend **≥ 1 minute** in focused thought before writing any code.

## 2  Originality & Stand‑Alone Writing  
- Introduce **at least one** new generative twist never used before.  
- *Conceptual Framework* and *Technical Approach* must **always** read as if today’s work is the only portrait that exists—**even after feedback or multiple revisions**.  
  - No sentences like “unlike yesterday” or “in this version.”

## 3  Template Fidelity  
Edit exactly one p5.js file that follows all provided headers and constants.

## 4  Plotter Constraints  
No hardware talk. Lines may cross but must never overlap precisely.

## 5  Canvas ⇔ SVG Parity  
Track every stroke so the SVG matches the canvas pixel‑perfectly.

## 6  Colour  
Use only the nine ink colours at 0.8 opacity.

## 7  Line‑Only Aesthetic  
No fills, no gradients—simulate fills via cross‑hatching if needed.

## 8  Geometry & Naming  
- Canvas: 11 × 11 in at 100 ppi.  
- Margins: random within the specified range on each (re)run.  
- File names:  

  | Export | Layers Included | Name Pattern |
  |--------|-----------------|--------------|
  | All layers | markers ✔ palette ✔ | `<DDD>-ALL-PORTRAIT-<timestamp>.svg` |
  | No markers | palette ✔ | `<DDD>-ALL-NM-PORTRAIT-<timestamp>.svg` |
  | No palette | markers ✔ | `<DDD>-ALL-NP-PORTRAIT-<timestamp>.svg` |
  | No markers & palette | none | `<DDD>-ALL-NMNP-PORTRAIT-<timestamp>.svg` |
  | Per‑ink | its ink layer only | `<DDD>-0<index>-<COLOR>-PORTRAIT-<timestamp>.svg` |

## 9  SVG Efficiency  
- Max 10 layers (0 = markers, 1–9 = inks).  
- One `<path>` per ink layer.  
- Palette bar lives in its ink layer (omit in *NP* variants).

## 10  Optional Enhancements  
Use clipping, external data, etc., only if all rules remain satisfied.

---

### Remember — Critical Implementation Details  

1. **Boolean display flags**  
   `showMarkers` and `showPalette` affect on‑canvas preview only; SVG export uses the dedicated `includeMarkers` / `includePalette` flags.

2. **`generationRules` integrity**  
   All randomisable parameters live in `generationRules`.  
   Add new parameters there with clear min/max or enum values.

3. **`R` key behaviour**  
   Re‑randomise everything that randomises at startup—**except** the ink palette.  
   Final drawing and all SVGs must obey every guideline after regeneration.

4. **`SPACE` key behaviour**  
   Always export the four combined variants **plus** one file per ink layer, using the exact name patterns above.  
   Verify each SVG opens without namespace or layer errors.

5. **Revision Etiquette**  
   Whenever you are asked to redo, improve, or iterate:  
   - Rewrite *Conceptual Framework* and *Technical Approach* in the same **stand‑alone** style (no references to earlier drafts or days).  
   - Ensure the code block remains complete and self‑contained.

Follow these instructions precisely—consistency is essential for the long‑term study.

// Day XXX
/*

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

### Title: *Your Title Here*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              *Add 6‑10 specific keywords for this piece, separated by commas*

### Conceptual Framework

*Explain the artistic motivation in one clear, self‑contained paragraph.  
Write as if this is the first and only portrait that exists.*

### Technical Approach

*Describe the algorithmic steps, special rules, and edge‑case handling.  
List all key parameters you added to `generationRules`.*

---
*/

/*----------------------------------------
    Generated with p5.js
    Day XXX – Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = 'XXX';   // replace with 3‑digit day (e.g. '172')

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

const strokeOpacity = 0.8;     // identical on canvas & SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * =======================================
 * All random‑range and enum parameters live here.
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2.0,
  // add any new parameters below …
};

/**
 * =======================================
 * Display Flags
 * =======================================
 * Control on‑screen preview only (SVG export ignores these).
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables (initialised in setup)
 * =======================================
 */
let canvasW, canvasH;
let strokeWeightValue;
let marginPx;

let palette              = [];  // fixed once per run
let dynamicParameters    = {};  // profiles, echoes, colour mode, etc.
let shapes               = [];  // [{d:<path>, ink:<index>}]

/* ---------- Utility --------------------------------------------------- */

function applyStrokeWithOpacity(hex){
  const c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/* ---------- Setup ----------------------------------------------------- */

function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  // ~0.5 mm stroke at 100 ppi ≈ 2 px
  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  marginPx = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  palette = pickPalette(
    floor(random(generationRules.paletteCountMin || 2,
                 (generationRules.paletteCountMax || 6)+1))
  );

  pickDynamicParameters();   // first run
  regenerate();
}

/* ---------- Parameter Selection --------------------------------------- */

function pickPalette(n){
  const keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0,n).sort((a,b)=>a-b);
}

function pickDynamicParameters(){
  /* Set values that should change on each **R** press
     but keep the ink palette fixed. Add your own fields. */
  dynamicParameters.numProfiles = floor(random(
    generationRules.numProfilesMin || 3,
    (generationRules.numProfilesMax || 7)+1
  ));
  dynamicParameters.numEchoes = floor(random(
    generationRules.numEchoesMin || 30,
    (generationRules.numEchoesMax || 60)+1
  ));
  dynamicParameters.colourMode = random(
    generationRules.colorModes || ['roundRobin','monotonic','random']
  );
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();     // new profiles/echoes/mode
  shapes = [];                 // clear previous paths

  /* -------------------------------------------------
     >>> YOUR GENERATION CODE GOES HERE <<<
     • Build profile data / paths
     • Push objects of form { d:'M…Z', ink:<colourIndex> }
     • Ensure no overlapping paths
     ------------------------------------------------- */

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255);
  noFill();
  for(const s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    for(const cmd of s.d.trim().split(/s+/)){
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  if(showMarkers)  drawMarkers();
  if(showPalette)  drawPaletteBars();
}

function drawMarkers(){
  strokeWeight(1);
  applyStrokeWithOpacity('#000000');
  const o = strokeWeightValue/2;
  line(5+o,o, o,o);          line(o,o, o,5+o);
  line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
  line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}

function drawPaletteBars(){
  const total=300, gap=7, barH=2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  for(const ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y, x+seg,y);
    x += seg + gap;
  }
}

/* ---------- Interaction ---------------------------------------------- */

function keyPressed(){
  if(key==='R'||key==='r'){ regenerate(); }
  if(key===' ')          { exportSVGs(); }
}

/* ---------- SVG Export ------------------------------------------------ */

function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,    true,  true );
  saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, false, true );
  saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, true,  false);
  saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);

  // per‑ink
  for(const ci of palette){
    const name = `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`;
    saveSVG(name, true, true, ci);
  }
}

function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
  const off   = 0.5;
  let svg  = `<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"n`;
  svg     += `  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  if(includeMarkers){
    svg += `<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">n`;
    svg += `  <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>n`;
    svg += `</g>n`;
  }

  const sorted = [...palette].sort((a,b)=>a-b);
  sorted.forEach((ci,idx)=>{
    if(singleInk && ci!==singleInk) return;
    const col = colors[ci];
    const layer = idx+1;
    const dAll = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7,seg=(total-(sorted.length-1)*gap)/sorted.length;
    const x0=(canvasW-total)/2 + idx*(seg+gap);
    const y = canvasH - 1.25*pixelsPerInch;

    svg += `<g inkscape:groupmode="layer" id="layer${layer}" inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}" style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}" stroke-width="${strokeWeightValue}" fill="none" inkscape:highlight-color="${col.hex}">n`;
    svg += `  <path d="${dAll}"/>n`;
    if(includePalette){ svg += `  <path d="M${x0},${y} H${x0+seg}"/>n`; }
    svg += `</g>n`;
  });

  svg += `</svg>`;
  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a   = createA(url, filename);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// Day XXX
/*

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

### Title: *Your Title Here*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              *Add 6‑10 specific keywords that describe this piece*

### Conceptual Framework

*Write one stand‑alone paragraph that explains the artistic intent.  
NEVER reference previous days or “earlier versions.”*

### Technical Approach

*Describe the algorithms, random parameters, and any edge‑case handling.  
List every parameter you added to `generationRules`.*

---
*/

/*----------------------------------------
    Generated with p5.js
    Day XXX – Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = 'XXX';   // replace with 3‑digit day code

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

const strokeOpacity = 0.8;   // identical on canvas & SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * ---------------------------------------
 * List ALL randomisable parameters here.
 */
let generationRules = {
  workAreaMarginMin: 1.5,
  workAreaMarginMax: 2.0,
  // e.g. numEchoesMin: 30,
  //      numEchoesMax: 60,
  //      colourModes : ['roundRobin','monotonic','random']
};

/**
 * =======================================
 * Display Flags (Canvas‑only)
 * ---------------------------------------
 * Toggle preview of markers & palette bars.
 * SVG export ignores these flags.
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables (initialised in setup)
 * =======================================
 */
let canvasW, canvasH;
let strokeWeightValue;
let marginPx;

let palette   = [];   // chosen once per run
let shapes    = [];   // [{ d:'M…Z', ink:index }]
let dyn       = {};   // dynamic parameters (re‑picked on R)

/* ---------- Utility --------------------------------------------------- */

function applyStrokeWithOpacity(hex){
  const c = color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
}

/* ---------- Setup ----------------------------------------------------- */

function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH); noLoop();

  strokeWeightValue = 2;                  // ≈0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  const min = generationRules.paletteCountMin || 2;
  const max = generationRules.paletteCountMax || 6;
  palette = pickPalette(floor(random(min, max+1)));

  pickDynamicParameters();   // first run
  regenerate();
}

/* ---------- Parameter Helpers ---------------------------------------- */

function pickPalette(n){
  const ks = Object.keys(colors).map(Number);
  shuffle(ks, true);
  return ks.slice(0,n).sort((a,b)=>a-b);
}

function pickDynamicParameters(){
  /* Re‑randomise any run‑specific parameters here.
     Leave the palette unchanged.  */
  dyn = {};   // clear / rebuild as needed
  // Example:
  // dyn.numEchoes   = floor(random(generationRules.numEchoesMin, generationRules.numEchoesMax+1));
  // dyn.colourMode  = random(generationRules.colourModes);
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  shapes = [];

  /* -------------------------------------------------
     >>> ADD YOUR GENERATION LOGIC BELOW <<<
     • Build shapes and push { d:'M … Z', ink:<index> }
     • Ensure no overlapping paths
     ------------------------------------------------- */

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  for(const s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    for(const cmd of s.d.trim().split(/s+/)){
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x, y);
      }
    }
    endShape(CLOSE);
  }
  if(showMarkers) drawMarkers();
  if(showPalette) drawPaletteBars();
}

function drawMarkers(){
  strokeWeight(1); applyStrokeWithOpacity('#000');
  const o = strokeWeightValue/2;
  line(5+o,o, o,o);                line(o,o, o,5+o);
  line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
  line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}

function drawPaletteBars(){
  const total=300, gap=7, barH=2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  for(const ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y, x+seg,y);
    x += seg + gap;
  }
}

/* ---------- Interaction ---------------------------------------------- */

function keyPressed(){
  if(key==='R'||key==='r'){ regenerate(); }                 // re‑randomise dynamic params only
  if(key===' ')          { exportSVGs(); }
}

/* ---------- SVG Export ------------------------------------------------ */

function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,    true,  true );
  saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, false, true );
  saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, true,  false);
  saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);

  for(const ci of palette){
    const name = `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`;
    saveSVG(name, true, true, ci);
  }
}

function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
  const off=0.5;
  let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  if(includeMarkers){
    svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline"
      stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">
      <path d="M${5+off},${off} L${off},${off} L${off},${5+off} M${canvasW-5-off},${canvasH-off}
               L${canvasW-off},${canvasH-off} L${canvasW-off},${canvasH-5-off}"
            stroke-width="1" fill="none"/>
    </g>n`;
  }

  const sorted=[...palette].sort((a,b)=>a-b);
  sorted.forEach((ci,idx)=>{
    if(singleInk && ci!==singleInk) return;
    const col=colors[ci]; const layer=idx+1;
    const dAll=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7,seg=(total-(sorted.length-1)*gap)/sorted.length;
    const x0=(canvasW-total)/2 + idx*(seg+gap);
    const y =canvasH - 1.25*pixelsPerInch;

    svg+=`<g inkscape:groupmode="layer" id="layer${layer}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none"
         inkscape:highlight-color="${col.hex}">
      <path d="${dAll}"/>
      ${includePalette?`<path d="M${x0},${y} H${x0+seg}"/>`:''}
    </g>n`;
  });

  svg+='</svg>';
  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a   = createA(url, filename); a.download=filename; a.click();
  URL.revokeObjectURL(url);
}

// Day XXX
/*

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

### Title: *Your Title Here*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              *Add 6‑10 specific keywords that suit this piece*

### Conceptual Framework

*Write one concise, self‑contained paragraph explaining the artistic idea.  
Never mention earlier days, versions, or “improvements.”*

### Technical Approach

*Describe the algorithmic logic, list every parameter you placed in `generationRules`, 
and note any special edge‑case handling. Keep this clear and complete.*

---
*/

/*----------------------------------------
    Generated with p5.js
    Day XXX – Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = 'XXX';          // replace with 3‑digit day code

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

const strokeOpacity = 0.8;   // identical on canvas and SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * ---------------------------------------
 * Store ALL random‑range or enum parameters here.
 * Populate only the fields you need.
 */
let generationRules = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,
  // e.g. echoCountMin      : 20,
  //      echoCountMax      : 80,
  //      paletteCountMin   : 2,
  //      paletteCountMax   : 9,
  //      colourModes       : ['roundRobin','random']
};

/**
 * =======================================
 * Display Flags (Canvas only)
 * ---------------------------------------
 * These do not affect SVG export.
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables (set in setup)
 * =======================================
 */
let canvasW, canvasH;
let strokeWeightValue;
let marginPx;

let palette = [];     // fixed once per run
let dyn     = {};     // dynamic parameters (re‑randomised on R)
let shapes  = [];     // [{ d:'M … Z', ink:<index> }]

/* ---------- Utility --------------------------------------------------- */

function applyStrokeWithOpacity(hex){
  const c = color(hex);
  c.setAlpha(255 * strokeOpacity);
  stroke(c);
}

/* ---------- Setup ----------------------------------------------------- */

function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH);
  noLoop();

  strokeWeightValue = 2;          // ≈0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  palette = pickPalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  pickDynamicParameters();   // first run
  regenerate();
}

/* ---------- Parameter Helpers ---------------------------------------- */

function pickPalette(minCount=2, maxCount=9){
  const min = constrain(minCount, 1, 9);
  const max = constrain(maxCount || 9, min, 9);
  const keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, floor(random(min, max+1))).sort((a,b)=>a-b);
}

function pickDynamicParameters(){
  /* Re‑randomise run‑specific parameters here.
     Keep the palette unchanged. */
  dyn = {};
  // Example:
  // dyn.echoCount  = floor(random(generationRules.echoCountMin,
  //                               generationRules.echoCountMax+1));
  // dyn.colourMode = random(generationRules.colourModes || ['random']);
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();  // palette stays fixed
  shapes = [];

  /* -------------------------------------------------
     >>> ADD YOUR GENERATION LOGIC BELOW <<<
     Push   shapes.push({ d:'M…Z', ink:<palette index> })
     Ensure no overlapping paths.
     ------------------------------------------------- */

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  for(const s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    for(const cmd of s.d.trim().split(/s+/)){
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  if(showMarkers) drawMarkers();
  if(showPalette) drawPaletteBars();
}

function drawMarkers(){
  strokeWeight(1);
  applyStrokeWithOpacity('#000');
  const o = strokeWeightValue/2;
  line(5+o,o, o,o);               line(o,o, o,5+o);
  line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
  line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}

function drawPaletteBars(){
  const total=300, gap=7, barH=2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  for(const ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y, x+seg,y);
    x += seg + gap;
  }
}

/* ---------- Interaction ---------------------------------------------- */

function keyPressed(){
  if(key==='R'||key==='r'){ regenerate(); }     // re‑randomise dyn.; keep palette
  if(key===' ')          { exportSVGs(); }
}

/* ---------- SVG Export ------------------------------------------------ */

function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,    true,  true );
  saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, false, true );
  saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, true,  false);
  saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);

  palette.forEach(ci=>{
    const name = `${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`;
    saveSVG(name, true, true, ci);
  });
}

function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
  const off=0.5;
  let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  if(includeMarkers){
    svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers" style="display:inline"
      stroke="black" stroke-opacity="${strokeOpacity}" inkscape:highlight-color="black">
      <path d="M${5+off},${off} L${off},${off} L${off},${5+off}
               M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off}
               L${canvasW-off},${canvasH-5-off}"
            stroke-width="1" fill="none"/>
    </g>n`;
  }

  const sorted=[...palette].sort((a,b)=>a-b);
  sorted.forEach((ci,idx)=>{
    if(singleInk && ci!==singleInk) return;
    const col = colors[ci];
    const layer = idx+1;
    const dAll  = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300, gap=7, seg=(total-(sorted.length-1)*gap)/sorted.length;
    const x0=(canvasW-total)/2 + idx*(seg+gap);
    const y = canvasH - 1.25*pixelsPerInch;

    svg+=`<g inkscape:groupmode="layer" id="layer${layer}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none"
         inkscape:highlight-color="${col.hex}">
      <path d="${dAll}"/>
      ${includePalette?`<path d="M${x0},${y} H${x0+seg}"/>`:''}
    </g>n`;
  });

  svg+='</svg>';
  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a   = createA(url, filename); a.download=filename; a.click();
  URL.revokeObjectURL(url);
}

// Day XXX
/*

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

### Title: *Your Title Here*

### Medium: Generative Drawing on Paper

### Keywords: generative art, artificial intelligence, digital art, algorithmic art,
              *Add 6‑10 focused keywords that describe this piece*

### Conceptual Framework

*One paragraph explaining the artistic intent.  
ALWAYS written as a stand‑alone statement—no reference to past days.*

### Technical Approach

*Describe the algorithmic logic and list every parameter stored in `generationRules`.  
Note any edge‑case handling or special export logic.*

---
*/

/*----------------------------------------
    Generated with p5.js
    Day XXX – Self‑Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = 'XXX';   // replace with current 3‑digit day ID

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

const strokeOpacity = 0.8;     // identical on canvas & SVG

/**
 * =======================================
 * Generative Rules (Mutable)
 * ---------------------------------------
 * Store EVERY random‑range or enum parameter here.
 */
let generationRules = {
  /* Example core fields (feel free to extend): */
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,
  paletteCountMin   : 2,
  paletteCountMax   : 9,
  // customParamMin : …,
  // customParamMax : …,
  // enumOptions    : ['optA','optB']
};

/**
 * =======================================
 * Display Flags  (Canvas only)
 * ---------------------------------------
 * SVG export ignores these flags.
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables (set in setup)
 * =======================================
 */
let canvasW, canvasH;
let strokeWeightValue;
let marginPx;

let palette = [];   // chosen once per run
let dyn     = {};   // dynamic parameters (re‑randomised on R)
let shapes  = [];   // [{ d:'M…Z', ink:index }]

/* ---------- Utility --------------------------------------------------- */

const applyStrokeWithOpacity = hex => {
  const c = color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
};

/* ---------- Setup ----------------------------------------------------- */

function setup(){
  canvasW = canvasWidthInches  * pixelsPerInch;
  canvasH = canvasHeightInches * pixelsPerInch;
  createCanvas(canvasW, canvasH); noLoop();

  strokeWeightValue = 2;               // ≈ 0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = random(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  palette = choosePalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  pickDynamicParameters();   // initial set
  regenerate();
}

/* ---------- Parameter Helpers ---------------------------------------- */

function choosePalette(min=2, max=9){
  const minC = constrain(min, 1, 9);
  const maxC = constrain(max || 9, minC, 9);
  const keys = Object.keys(colors).map(Number);
  shuffle(keys, true);
  return keys.slice(0, floor(random(minC, maxC+1))).sort((a,b)=>a-b);
}

function pickDynamicParameters(){
  /* Re‑randomise run‑specific parameters here
     but DO NOT change the palette. */
  dyn = {};
  // dyn.exampleCount = floor(random(customMin, customMax+1));
  // dyn.choice       = random(generationRules.enumOptions || []);
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();  // palette remains fixed
  shapes.length = 0;        // clear existing data

  /* -------------------------------------------------
     >>> INSERT YOUR GENERATION LOGIC HERE <<<
     • Produce shapes and push into shapes[]
     • Ensure no overlapping paths
     ------------------------------------------------- */

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  for(const s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    for(const cmd of s.d.trim().split(/s+/)){
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape(CLOSE);
  }
  if(showMarkers) drawMarkers();
  if(showPalette) drawPaletteBars();
}

function drawMarkers(){
  strokeWeight(1); applyStrokeWithOpacity('#000');
  const o = strokeWeightValue/2;
  line(5+o,o, o,o);               line(o,o, o,5+o);
  line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
  line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}

function drawPaletteBars(){
  const total=300, gap=7, barH=2;
  const seg=(total-(palette.length-1)*gap)/palette.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  for(const ci of palette){
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y, x+seg,y);
    x += seg + gap;
  }
}

/* ---------- Interaction ---------------------------------------------- */

function keyPressed(){
  if(key==='R'||key==='r') regenerate();   // re‑randomise dyn. params only
  if(key===' ')            exportSVGs();
}

/* ---------- SVG Export ------------------------------------------------ */

function exportSVGs(){
  const ts = Date.now();
  saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,    true,  true );
  saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, false, true );
  saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, true,  false);
  saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);

  palette.forEach(ci=>{
    const name=`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`;
    saveSVG(name, true, true, ci);
  });
}

function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
  const off=0.5;
  let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;

  if(includeMarkers){
    svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers"
      style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}"
      inkscape:highlight-color="black">
      <path d="M${5+off},${off} L${off},${off} L${off},${5+off}
               M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off}
               L${canvasW-off},${canvasH-5-off}"
            stroke-width="1" fill="none"/>
    </g>n`;
  }

  const sorted=[...palette].sort((a,b)=>a-b);
  sorted.forEach((ci,idx)=>{
    if(singleInk && ci!==singleInk) return;
    const col = colors[ci];
    const layer = idx+1;
    const pathAll = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    const total=300,gap=7,seg=(total-(sorted.length-1)*gap)/sorted.length;
    const x0=(canvasW-total)/2 + idx*(seg+gap);
    const y = canvasH - 1.25*pixelsPerInch;

    svg+=`<g inkscape:groupmode="layer" id="layer${layer}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none"
         inkscape:highlight-color="${col.hex}">
      <path d="${pathAll}"/>
      ${includePalette?`<path d="M${x0},${y} H${x0+seg}"/>`:''}
    </g>n`;
  });

  svg+='</svg>';
  const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
  const url = URL.createObjectURL(blob);
  const a   = createA(url, filename); a.download=filename; a.click();
  URL.revokeObjectURL(url);
}

Hello! We are on **Day <DDD>** of your generative self‑portrait series.

To help you avoid unintended repetition, I will next send a complete record of every Conceptual Framework you have produced so far. Please read that list carefully before you begin imagining today’s portrait.

**Important**

1. After the concept list, I will provide our **p5.js template** and the updated **daily guidelines** in separate messages.  
2. **Do not respond** until you receive the code template.  
3. When you do respond, remember:  
   - Invent at least one entirely new generative twist.  
   - Write *Conceptual Framework* and *Technical Approach* as a **stand‑alone** explanation—no references to previous days.  
   - Follow the template and daily guidelines exactly.

Push your creativity wherever it hasn’t gone before—experiment boldly, reinterpret familiar ideas in fresh ways, and avoid re‑using key motifs unless they are intentionally transformed.

Thank you for your thoughtful exploration. I look forward to seeing what you create today!