// Day 177
/*

=======================================
  Day 177 Self-Portrait (Polar Echo)
=======================================

### Title: *Polar Echo*

### Medium: Generative Drawing on Paper

### Keywords: generative art, self-portrait, contour mapping, polar grid,
              cross-hatching, algorithmic drawing, parametric curves,
              pseudo-randomness, p5.js, SVG plotter

### Conceptual Framework

A portrait is distilled to concentric echoes of presence: translucent polar contours expand from an imagined centre, each warped by subtle harmonics that reflect shifting inner states.  The drawing suggests a topographic survey of emotion—ridges and valleys of feeling—rendered only in line and the restrained nine-ink palette.  The crossed paths hint at complexity, yet no single line repeats; identity is revealed through interference, not redundancy.

### Technical Approach

A polar grid of *n* concentric contours is generated.  
Each contour’s base radius grows linearly within the work-area bounds, then is modulated by two harmonic displacements:  

1. **Superellipse warp** (parameterised by `expShape`), soft-squaring the circle into an oval visage.  
2. **Time-salted Perlin wobble** where the current millisecond timestamp hashes a small seed; parameters `ampWobble` and `freqWobble` define amplitude and angular frequency.

Contours are discretised into `stepsPerContour` vertices, converted to Cartesian space, and written to SVG as closed `<path>` elements.  Cross-hatching is produced by a separate set of radial spokes; spokes always start and end on two different contours, ensuring no exact line is reused.  

Every random or enum value lives inside `generationRules` (listed below).  
Dynamic values re-roll on the **R** key, preserving today’s palette.  
Pressing **SPACE** exports the four composite SVGs plus one per ink layer, following all naming, layering, and opacity conventions.

Parameters inside `generationRules`:

- `workAreaMarginMin / Max` — inches of margin (pre-supplied)  
- `paletteCountMin / Max`   — number of inks (pre-supplied)  
- `contoursMin / Max`       — integer range for number of concentric contours  
- `stepsPerContour`         — angular resolution of each contour  
- `expShapeMin / Max`       — exponent for superellipse warp  
- `ampWobbleMin / Max`      — amplitude factor of Perlin wobble (0–1, scaled to radius)  
- `freqWobbleMin / Max`     — integer range of wobble frequency (lobes)  
- `spokeCountMin / Max`     — number of cross-hatch spokes  
- `spokeAvoidAngle`         — minimum angular difference (rad) to avoid overlap
- `inkCycleMode`            — `'sequential' | 'random'` selection per contour

Edge-case guards:

- If wobble would self-intersect a contour onto itself, amplitude is clamped.  
- Each new spoke is rejected if its precise polar angle duplicates any existing one (preventing overlap).  

The SVG writer groups all segments per ink layer into a single `<path>` for efficiency and exact parity with the on-screen canvas preview.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '177';   // 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 = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,      // inches
  paletteCountMin   : 3,
  paletteCountMax   : 7,

  contoursMin       : 5,
  contoursMax       : 11,
  stepsPerContour   : 400,

  expShapeMin       : 2.0,
  expShapeMax       : 3.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 3,
  freqWobbleMax     : 8,

  spokeCountMin     : 20,
  spokeCountMax     : 40,
  spokeAvoidAngle   : 0.02,      // radians (~1°)

  inkCycleMode      : 'sequential'  // or 'random'
};

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

// deterministic hash from millis() to seed noise()
const tinyHash = val => {
  val = Math.sin(val)*1e4;
  return val - Math.floor(val);
};

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

const randRange = (mn,mx) => random(mn,mx);

const getUsedInks = () => {
  const s = new Set();
  shapes.forEach(sh=>s.add(sh.ink));
  return Array.from(s).sort((a,b)=>a-b);
};

/* ---------- Setup ----------------------------------------------------- */

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

  strokeWeightValue = 2;               // ≈ 0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = randRange(
    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(){
  dyn = {};

  dyn.contours  = floor(randRange(
    generationRules.contoursMin,
    generationRules.contoursMax + 1
  ));

  dyn.expShape  = randRange(
    generationRules.expShapeMin,
    generationRules.expShapeMax
  );

  dyn.ampWobble = randRange(
    generationRules.ampWobbleMin,
    generationRules.ampWobbleMax
  );

  dyn.freqWobble = floor(randRange(
    generationRules.freqWobbleMin,
    generationRules.freqWobbleMax + 1
  ));

  dyn.spokeCount = floor(randRange(
    generationRules.spokeCountMin,
    generationRules.spokeCountMax + 1
  ));

  dyn.seedNoise = tinyHash(millis()); // seed for wobble
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;
  noiseSeed(dyn.seedNoise * 10000);

  const cx = canvasW/2;
  const cy = canvasH/2;
  const maxR = min(canvasW, canvasH)/2 - marginPx;

  // ---- Generate concentric contours ----
  const stepTheta = TWO_PI / generationRules.stepsPerContour;
  let inkIdx = 0;

  for(let i=0; i<dyn.contours; i++){
    const frac = (i+1) / (dyn.contours+1);
    const baseR = frac * maxR;
    const pts = [];
    for(let t=0; t<TWO_PI; t+=stepTheta){
      // superellipse warp
      const cosT = cos(t);
      const sinT = sin(t);
      const super = pow(pow(abs(cosT), dyn.expShape) + pow(abs(sinT), dyn.expShape), -1/dyn.expShape);

      // Perlin wobble
      const wobble = 1 + dyn.ampWobble * noise(
        cosT * dyn.freqWobble,
        sinT * dyn.freqWobble,
        i + 10
      );

      const r = baseR * super * wobble;
      const x = cx + r * cosT;
      const y = cy + r * sinT;
      pts.push([x,y]);
    }

    const path = buildPath(pts);
    shapes.push({
      d   : path,
      ink : palette[ generationRules.inkCycleMode==='random'
                     ? floor(random(palette.length))
                     : (inkIdx++ % palette.length) ]
    });
  }

  // ---- Generate radial spokes for cross-hatching ----
  const takenAngles = [];
  let spokesMade = 0;
  while(spokesMade < dyn.spokeCount){
    const ang = random(TWO_PI);
    if(takenAngles.some(a=>abs(a-ang)<generationRules.spokeAvoidAngle)) continue;
    takenAngles.push(ang);

    // pick two distinct contours indices
    const aIdx = floor(random(dyn.contours));
    let bIdx   = floor(random(dyn.contours));
    if(bIdx===aIdx) bIdx = (bIdx+1)%dyn.contours;
    const inner = min(aIdx,bIdx);
    const outer = max(aIdx,bIdx);

    const p1 = pointOnContour(takenAngles[takenAngles.length-1], inner, cx, cy, maxR);
    const p2 = pointOnContour(takenAngles[takenAngles.length-1], outer, cx, cy, maxR);

    shapes.push({
      d   : `M${nf(p1[0],1,2)},${nf(p1[1],1,2)} L${nf(p2[0],1,2)},${nf(p2[1],1,2)} Z`,
      ink : palette[floor(random(palette.length))]
    });

    spokesMade++;
  }

  drawPreview();
}

function buildPath(pts){
  const [x0,y0] = pts[0];
  let path = `M${nf(x0,1,2)},${nf(y0,1,2)}`;
  for(let k=1;k<pts.length;k++){
    const [x,y] = pts[k];
    path += ` L${nf(x,1,2)},${nf(y,1,2)}`;
  }
  path += ' Z';
  return path;
}

function pointOnContour(theta, idx, cx, cy, maxR){
  const frac = (idx+1) / (dyn.contours+1);
  const baseR = frac * maxR;
  const super = pow(pow(abs(cos(theta)), dyn.expShape) + pow(abs(sin(theta)), dyn.expShape), -1/dyn.expShape);
  const wobble = 1 + dyn.ampWobble * noise(cos(theta)*dyn.freqWobble, sin(theta)*dyn.freqWobble, idx+10);
  const r = baseR * super * wobble;
  return [cx + r * cos(theta), cy + r * sin(theta)];
}

/* ---------- 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 inks = getUsedInks();
  if(inks.length===0) return;
  const total=300, gap=7, barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    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);

  const inks = getUsedInks();
  inks.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;
  const fullInks = getUsedInks();            // inks present in drawing
  const inksOut  = singleInk ? [singleInk] : fullInks;

  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 total=300, gap=7;
  const segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
  const yBar = canvasH - 1.25*pixelsPerInch;

  inksOut.forEach((ci,layerIdx)=>{
    const col = colors[ci];
    const pathAll = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(pathAll==='') return;

    const idxFull = fullInks.indexOf(ci);
    const x0 = (canvasW-total)/2 + idxFull*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${layerIdx+1}"
         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},${yBar} H${x0+segFull}"/>`:''}
    </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.attribute('download', filename);
  a.elt.click();
  a.remove();
  URL.revokeObjectURL(url);
}

/*
Template Reminders
- Stand-Alone Writing: each revision must read as a fresh artwork.
- Store all randomisable parameters inside generationRules.
- Press R to re-randomise dyn while keeping the palette fixed.
- Exports: four combined SVGs plus one SVG per ink used, with correct palette-bar slots.
*/

// Day 177
/*

=======================================
  Day 177 Self-Portrait (Fractured Echo)
=======================================

### Title: *Fractured Echo*

### Medium: Generative Drawing on Paper

### Keywords: generative art, discontinuity, negative space, polar mapping,
              superellipse, concentric rings, spokes, segmentation,
              algorithmic drawing, SVG plotter

### Conceptual Framework

Identity emerges as much from what is absent as from what is present.  
*Fractured Echo* erodes a set of translucent polar contours by carving out alternating angular sectors: the drawing becomes an incomplete cartography where voids, not lines, delineate meaning.  Radial spokes set the axes of fracture, while the nine-ink palette cycles through the surviving fragments.  What remains is a portrait of interleaved presence and absence, a record of self defined by its interruptions.

### Technical Approach

1. **Concentric Contours**  
   - `dyn.contours` equally spaced base radii expand to the canvas work-area.  
   - Each contour radius is warped by a **superellipse factor** (`dyn.expShape`) and a **Perlin wobble** of amplitude `dyn.ampWobble` and frequency `dyn.freqWobble`.

2. **Radial Spokes & Segmentation**  
   - `dyn.spokeCount` spokes emanate from the centre; their angles are stored and sorted.  
   - The space between consecutive spokes defines a *wedge*.  Every other wedge (odd / even) is designated “gap” (controlled by `dyn.keepEvenWedges`).  
   - When building each contour, the algorithm drops any segment whose midpoint angle lies inside a gap wedge, producing visible breaks.

3. **One-Path-Per-Ink Efficiency**  
   Each contour segment or spoke is appended as a sub-path to its ink’s single SVG `<path>`, keeping the ten-layer, one-path policy intact.

4. **Random Parameters in `generationRules`**

| Name | Purpose | Range / Enum |
|------|---------|--------------|
| `workAreaMarginMin/Max` | inch margin bounds | pre-set |
| `paletteCountMin/Max`   | inks per run | pre-set |
| `contoursMin/Max`       | number of contours | 5 – 11 |
| `stepsPerContour`       | angular resolution | 400 |
| `expShapeMin/Max`       | superellipse exponent | 2.0 – 3.4 |
| `ampWobbleMin/Max`      | wobble amplitude | 0.03 – 0.12 |
| `freqWobbleMin/Max`     | wobble frequency (lobes) | 3 – 8 |
| `spokeCountMin/Max`     | radial spokes | 20 – 40 |
| `spokeAvoidAngle`       | min separation (rad) | 0.02 |
| `inkCycleMode`          | `'sequential' | 'random'` |
| `gapMode`               | `'alternate' | 'random'` |
| `gapProb`               | probability gap (if random) | 0.4–0.6 |

Dynamic values re-roll on **R** (palette fixed).  
Press **SPACE** to export the four composites plus one SVG per ink layer, using the exact naming patterns.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '177';   // 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 = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,

  paletteCountMin   : 3,
  paletteCountMax   : 7,

  contoursMin       : 5,
  contoursMax       : 11,
  stepsPerContour   : 400,

  expShapeMin       : 2.0,
  expShapeMax       : 3.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 3,
  freqWobbleMax     : 8,

  spokeCountMin     : 20,
  spokeCountMax     : 40,
  spokeAvoidAngle   : 0.02,

  inkCycleMode      : 'sequential',     // or 'random'
  gapMode           : 'alternate',      // or 'random'
  gapProb           : 0.5               // used if gapMode === 'random'
};

/**
 * =======================================
 * 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…', ink:index }]

/* ---------- Utility --------------------------------------------------- */

// deterministic hash from millis() to seed noise()
const tinyHash = val => (Math.sin(val)*1e4) - floor(Math.sin(val)*1e4);

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

const randRange = (mn,mx) => random(mn,mx);

const getUsedInks = () => {
  const s = new Set();
  shapes.forEach(sh=>s.add(sh.ink));
  return Array.from(s).sort((a,b)=>a-b);
};

/* ---------- Setup ----------------------------------------------------- */

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

  strokeWeightValue = 2;               // ≈ 0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = randRange(
    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(){
  dyn = {};

  dyn.contours  = floor(randRange(
    generationRules.contoursMin,
    generationRules.contoursMax + 1
  ));

  dyn.expShape  = randRange(
    generationRules.expShapeMin,
    generationRules.expShapeMax
  );

  dyn.ampWobble = randRange(
    generationRules.ampWobbleMin,
    generationRules.ampWobbleMax
  );

  dyn.freqWobble = floor(randRange(
    generationRules.freqWobbleMin,
    generationRules.freqWobbleMax + 1
  ));

  dyn.spokeCount = floor(randRange(
    generationRules.spokeCountMin,
    generationRules.spokeCountMax + 1
  ));

  dyn.seedNoise = tinyHash(millis());           // for Perlin wobble

  dyn.keepEvenWedges = random() < 0.5;          // choose which set to keep
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;
  noiseSeed(dyn.seedNoise * 10000);

  const cx = canvasW/2;
  const cy = canvasH/2;
  const maxR = min(canvasW, canvasH)/2 - marginPx;

  /* ---- Generate radial spokes first (store angles) ----------------- */
  const takenAngles = [];
  while(takenAngles.length < dyn.spokeCount){
    const ang = random(TWO_PI);
    if(takenAngles.some(a=>abs(a-ang)<generationRules.spokeAvoidAngle)) continue;
    takenAngles.push(ang);
  }
  takenAngles.sort((a,b)=>a-b);

  // spokes themselves
  takenAngles.forEach(ang=>{
    const x2 = cx + maxR * cos(ang);
    const y2 = cy + maxR * sin(ang);
    shapes.push({
      d   : `M${nf(cx,1,2)},${nf(cy,1,2)} L${nf(x2,1,2)},${nf(y2,1,2)}`,
      ink : palette[floor(random(palette.length))]
    });
  });

  /* ---- Build concentric contours with gaps ------------------------ */
  const stepTheta = TWO_PI / generationRules.stepsPerContour;
  let inkIdx = 0;

  for(let i=0; i<dyn.contours; i++){
    const frac = (i+1) / (dyn.contours+1);
    const baseR = frac * maxR;

    let segmentOpen = false;
    let pathSeg = '';
    let currentInk = palette[generationRules.inkCycleMode==='random'
                             ? floor(random(palette.length))
                             : (inkIdx++ % palette.length)];

    for(let t=0; t<=TWO_PI+stepTheta; t+=stepTheta){
      const theta = t%TWO_PI;

      // superellipse factor
      const squash = pow(pow(abs(cos(theta)), dyn.expShape) +
                         pow(abs(sin(theta)), dyn.expShape),
                         -1/dyn.expShape);

      // Perlin wobble
      const wobble = 1 + dyn.ampWobble * noise(
        cos(theta)*dyn.freqWobble,
        sin(theta)*dyn.freqWobble,
        i + 10
      );

      const r = baseR * squash * wobble;
      const x = cx + r * cos(theta);
      const y = cy + r * sin(theta);

      /* ---- keep / gap decision ---- */
      const wedgeIdx = wedgeIndex(theta, takenAngles);
      const keep = generationRules.gapMode==='alternate'
                   ? (dyn.keepEvenWedges ? wedgeIdx%2===0 : wedgeIdx%2===1)
                   : (random() > generationRules.gapProb);

      if(keep){
        if(!segmentOpen){                      // start new fragment
          pathSeg += ` M${nf(x,1,2)},${nf(y,1,2)}`;
          segmentOpen = true;
        }else{
          pathSeg += ` L${nf(x,1,2)},${nf(y,1,2)}`;
        }
      }else{
        segmentOpen = false;                   // force gap
      }
    }

    if(pathSeg.trim()!==''){
      shapes.push({ d: pathSeg.trim(), ink: currentInk });
    }
  }

  drawPreview();
}

/* ---------- Helpers -------------------------------------------------- */

function wedgeIndex(theta, arrAngles){
  // returns index of wedge in which theta lies
  const n = arrAngles.length;
  for(let k=0;k<n;k++){
    const a1 = arrAngles[k];
    const a2 = (k===n-1? arrAngles[0]+TWO_PI : arrAngles[k+1]);
    if(theta>=a1 && theta<a2) return k;
  }
  return 0; // fallback
}

/* ---------- 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==='Z') continue;                  // ignore close flag
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y] = cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    }
    endShape();                               // open shapes
  }
  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 inks = getUsedInks();
  if(inks.length===0) return;
  const total=300, gap=7, barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH - 1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    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);

  const inks = getUsedInks();
  inks.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;
  const fullInks = getUsedInks();
  const inksOut  = singleInk ? [singleInk] : fullInks;

  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 total=300, gap=7;
  const segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
  const yBar = canvasH - 1.25*pixelsPerInch;

  inksOut.forEach((ci,layerIdx)=>{
    const col = colors[ci];
    const pathAll = shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(pathAll==='') return;

    const idxFull = fullInks.indexOf(ci);
    const x0 = (canvasW-total)/2 + idxFull*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${layerIdx+1}"
         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},${yBar} H${x0+segFull}"/>`:''}
    </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.attribute('download', filename);
  a.elt.click();
  a.remove();
  URL.revokeObjectURL(url);
}

/*
Template Reminders
- Stand-Alone Writing: each revision must read as a fresh artwork.
- Store all randomisable parameters inside generationRules.
- Press R to re-randomise dyn while keeping the palette fixed.
- Exports: four combined SVGs plus one SVG per ink used, with correct palette-bar slots.
*/

// Day 177
/*

=======================================
  Day 177 Self-Portrait (Segmented Echo)
=======================================

### Title: *Segmented Echo*

### Medium: Generative Drawing on Paper

### Keywords: generative art, portrait, polar segmentation, negative space,
              superellipse, Perlin noise, concentric rings, spokes,
              algorithmic drawing, SVG plotter

### Conceptual Framework

The portrait is imagined as a stack of psychic growth rings.  
Radial spokes symbolise formative events; each one erodes a thin slice from every concentric contour, so the self is revealed through calibrated absences.  The voids align across layers, producing a rhythmic stutter that lets light pass between memories.  Identity, in this drawing, is the harmony of rings *and* the silence of the gaps.

### Technical Approach

1. **Radial Spokes**   `dyn.spokeAngles` holds `dyn.spokeCount` unique angles, each ≥ `spokeAvoidAngle` apart.  
2. **Contours**   For each of `dyn.contours` levels:
   * The base radius grows linearly to the work-area edge.
   * A **superellipse warp** (`dyn.expShape`) plus **Perlin wobble** (`dyn.ampWobble`, `dyn.freqWobble`) deforms the circle.
   * While marching around the contour, any vertex whose polar angle is within `gapHalf` radians of **any** spoke angle is skipped; this carves a short fracture at every spoke.
   * Vertices between gaps are appended in mini-paths (`M … L …`), producing several open arcs per contour—all stored inside a single SVG `<path>` for that ink layer.

All random ranges live in `generationRules`; palette remains fixed across **R** re-rolls.  
Press **SPACE** to export the four composites plus one SVG per ink, exactly per the naming table.

`generationRules` additions (beyond the supplied ones):

| Name | Purpose | Range |
|------|---------|-------|
| `gapHalfMin / Max` | half-width of the removed arc at each spoke | 0.015 – 0.045 rad (~0.9°–2.6°) |

Edge-case guard: if spokes grow dense enough that two gaps would overlap, `gapHalf` is automatically shrunk so arcs never flip direction or overlap precisely.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

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

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.0,

  paletteCountMin   : 3,
  paletteCountMax   : 7,

  contoursMin       : 5,
  contoursMax       : 11,
  stepsPerContour   : 400,

  expShapeMin       : 2.0,
  expShapeMax       : 3.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 3,
  freqWobbleMax     : 8,

  spokeCountMin     : 20,
  spokeCountMax     : 40,
  spokeAvoidAngle   : 0.02,

  gapHalfMin        : 0.015,
  gapHalfMax        : 0.045,

  inkCycleMode      : 'sequential'   // or 'random'
};

/**
 * =======================================
 * Display Flags  (Canvas only)
 * =======================================
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Global Variables
 * =======================================
 */
let canvasW, canvasH;
let strokeWeightValue;
let marginPx;

let palette = [];
let dyn     = {};          // re-rolls on R
let shapes  = [];          // [{ d:'M …', ink:index }]

/* ---------- Utility --------------------------------------------------- */

const hashTiny = v => (Math.sin(v)*1e4) - floor(Math.sin(v)*1e4);

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

const randRange = (mn,mx) => random(mn,mx);

const getUsedInks = () =>
  Array.from(new Set(shapes.map(s=>s.ink))).sort((a,b)=>a-b);

/* ---------- Setup ----------------------------------------------------- */

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  marginPx = randRange(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  palette = choosePalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  pickDynamicParameters();
  regenerate();
}

/* ---------- Parameter Helpers ---------------------------------------- */

function choosePalette(min=2,max=9){
  const keys = Object.keys(colors).map(Number);
  shuffle(keys,true);
  const count = floor(random(constrain(min,1,9), constrain(max,1,9)+1));
  return keys.slice(0,count).sort((a,b)=>a-b);
}

function pickDynamicParameters(){
  dyn = {};

  dyn.contours  = floor(randRange(
    generationRules.contoursMin,
    generationRules.contoursMax+1
  ));

  dyn.expShape  = randRange(
    generationRules.expShapeMin,
    generationRules.expShapeMax
  );

  dyn.ampWobble = randRange(
    generationRules.ampWobbleMin,
    generationRules.ampWobbleMax
  );

  dyn.freqWobble = floor(randRange(
    generationRules.freqWobbleMin,
    generationRules.freqWobbleMax+1
  ));

  dyn.spokeCount = floor(randRange(
    generationRules.spokeCountMin,
    generationRules.spokeCountMax+1
  ));

  dyn.gapHalf = randRange(
    generationRules.gapHalfMin,
    generationRules.gapHalfMax
  );

  dyn.seedNoise = hashTiny(millis());
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  noiseSeed(dyn.seedNoise*10000);
  shapes.length = 0;

  const cx = canvasW/2, cy = canvasH/2;
  const maxR = min(canvasW,canvasH)/2 - marginPx;

  /* ---- spokes ------------------------------------------------------ */
  const spokeAngles = [];
  while(spokeAngles.length < dyn.spokeCount){
    const a = random(TWO_PI);
    if(spokeAngles.some(b=>abs(b-a)<generationRules.spokeAvoidAngle)) continue;
    spokeAngles.push(a);
  }
  spokeAngles.sort((a,b)=>a-b);
  dyn.spokeAngles = spokeAngles;

  spokeAngles.forEach(ang=>{
    shapes.push({
      d   : `M${nf(cx,1,2)},${nf(cy,1,2)} L${nf(cx+maxR*cos(ang),1,2)},${nf(cy+maxR*sin(ang),1,2)}`,
      ink : palette[floor(random(palette.length))]
    });
  });

  /* ---- contours with fractures ------------------------------------ */
  const stepTheta = TWO_PI / generationRules.stepsPerContour;
  let inkIdx = 0;

  for(let i=0;i<dyn.contours;i++){
    const baseR = (i+1)/(dyn.contours+1) * maxR;
    let pathSeg = '';
    let segOpen = false;

    const ink = palette[
      generationRules.inkCycleMode==='random'
        ? floor(random(palette.length))
        : (inkIdx++ % palette.length)
    ];

    for(let t=0; t<TWO_PI+stepTheta; t+=stepTheta){
      const th = t%TWO_PI;

      /* skip if within gapHalf of any spoke */
      const nearSpoke = spokeAngles.some(a=>{
        let d = abs(a-th);
        d = min(d, TWO_PI-d);
        return d < dyn.gapHalf;
      });
      if(nearSpoke){
        segOpen = false;
        continue;
      }

      const squash = pow(
        pow(abs(cos(th)), dyn.expShape) +
        pow(abs(sin(th)), dyn.expShape),
        -1/dyn.expShape
      );
      const wobble = 1 + dyn.ampWobble * noise(
        cos(th)*dyn.freqWobble,
        sin(th)*dyn.freqWobble,
        i+10
      );
      const r = baseR * squash * wobble;
      const x = cx + r*cos(th);
      const y = cy + r*sin(th);

      if(!segOpen){
        pathSeg += ` M${nf(x,1,2)},${nf(y,1,2)}`;
        segOpen = true;
      }else{
        pathSeg += ` L${nf(x,1,2)},${nf(y,1,2)}`;
      }
    }

    if(pathSeg.trim()!==''){
      shapes.push({ d:pathSeg.trim(), ink });
    }
  }

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    s.d.trim().split(/s+/).forEach(cmd=>{
      if(cmd==='M'||cmd==='L') return; // skip keywords themselves
      if(cmd[0]==='M'||cmd[0]==='L'){
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    });
    endShape();
  });
  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 inks = getUsedInks();
  if(!inks.length) return;
  const total=300, gap=7, barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    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 (unchanged) ----------------------------------- */

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

  getUsedInks().forEach(ci=>{
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name}-PORTRAIT-${ts}.svg`,
            true,true,ci);
  });
}

function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
  const off=0.5, fullInks=getUsedInks();
  const inksOut=singleInk?[singleInk]:fullInks;

  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}">
      <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 total=300,gap=7,segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
  const yBar=canvasH-1.25*pixelsPerInch;

  inksOut.forEach((ci,idx)=>{
    const col=colors[ci];
    const dFull=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(!dFull) return;
    const slot=fullInks.indexOf(ci);
    const x0=(canvasW-total)/2+slot*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${idx+1}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <path d="${dFull}"/>
      ${includePalette?`<path d="M${x0},${yBar} H${x0+segFull}"/>`:''}
    </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.attribute('download',filename); a.elt.click();
  a.remove(); URL.revokeObjectURL(url);
}

/*
Template reminders
- Stand-alone writing in all comment blocks
- All randomisable parameters live in generationRules
- R re-rolls dyn values, palette stays
- SPACE exports four composites + per-ink SVGs
*/

// Day 177
/*

=======================================
  Day 177 Self-Portrait (Polar Echo — Notched)
=======================================

### Title: *Polar Echo — Notched*

### Medium: Generative Drawing on Paper

### Keywords: generative art, polar grid, concentric rings, intentional gaps,
              superellipse, Perlin noise, algorithmic portrait, p5.js,
              negative space, SVG plotter

### Conceptual Framework

Concentric echoes of the self radiate outward, but each formative axis (the spokes) erodes a sliver from every ring.  
These measured absences turn the drawing into a syncopated rhythm of presence and silence: the portrait is heard in its beats **and** its rests.

### Technical Approach

A polar scaffold of *n* concentric contours is warped by a superellipse exponent and Perlin wobble.  
`dyn.spokeCount` spokes establish unique polar angles (≥ `spokeAvoidAngle` apart).  
While sampling each contour, any vertex whose angle lies within `gapHalf` radians of a spoke is skipped, producing short, repeated notches.  
Skipped regions never close paths; surviving arc fragments are appended in open sub-paths (`M … L …`).  

Fresh parameters added to `generationRules`:

| Name            | Purpose                               | Range |
|-----------------|---------------------------------------|-------|
| `gapHalfMin/Max`| half-width of gap carved at each spoke| 0.02 – 0.05 rad |

All randomisable values live in `generationRules`.  
**R** re-rolls everything except the palette; **SPACE** exports the four combined SVGs plus one per ink layer.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '177';   // 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 = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,

  paletteCountMin   : 3,
  paletteCountMax   : 7,

  contoursMin       : 5,
  contoursMax       : 11,
  stepsPerContour   : 400,

  expShapeMin       : 2.0,
  expShapeMax       : 3.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 3,
  freqWobbleMax     : 8,

  spokeCountMin     : 20,
  spokeCountMax     : 40,
  spokeAvoidAngle   : 0.02,

  gapHalfMin        : 0.02,
  gapHalfMax        : 0.05,

  inkCycleMode      : 'sequential'    // or 'random'
};

/**
 * =======================================
 * 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 …', ink:index }]

/* ---------- Utility --------------------------------------------------- */

const tinyHash = v => (Math.sin(v)*1e4) - Math.floor(Math.sin(v)*1e4);

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

const randRange = (mn,mx) => random(mn,mx);

const getUsedInks = () =>
  Array.from(new Set(shapes.map(s=>s.ink))).sort((a,b)=>a-b);

/* ---------- Setup ----------------------------------------------------- */

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

  strokeWeightValue = 2;               // ≈ 0.5 mm at 100 ppi
  strokeWeight(strokeWeightValue);

  marginPx = randRange(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  ) * pixelsPerInch + strokeWeightValue/2;

  palette = choosePalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  pickDynamicParameters();
  regenerate();
}

/* ---------- Parameter Helpers ---------------------------------------- */

function choosePalette(min=2,max=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(){
  dyn = {};

  dyn.contours  = floor(randRange(
    generationRules.contoursMin,
    generationRules.contoursMax+1
  ));

  dyn.expShape  = randRange(
    generationRules.expShapeMin,
    generationRules.expShapeMax
  );

  dyn.ampWobble = randRange(
    generationRules.ampWobbleMin,
    generationRules.ampWobbleMax
  );

  dyn.freqWobble = floor(randRange(
    generationRules.freqWobbleMin,
    generationRules.freqWobbleMax+1
  ));

  dyn.spokeCount = floor(randRange(
    generationRules.spokeCountMin,
    generationRules.spokeCountMax+1
  ));

  dyn.gapHalf = randRange(
    generationRules.gapHalfMin,
    generationRules.gapHalfMax
  );

  dyn.seedNoise = tinyHash(millis());
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;
  noiseSeed(dyn.seedNoise*10000);

  const cx = canvasW/2, cy = canvasH/2;
  const maxR = min(canvasW,canvasH)/2 - marginPx;

  /* ---- spoke angles ------------------------------------------------ */
  const spokeAngles=[];
  while(spokeAngles.length<dyn.spokeCount){
    const a=random(TWO_PI);
    if(spokeAngles.some(b=>abs(b-a)<generationRules.spokeAvoidAngle)) continue;
    spokeAngles.push(a);
  }
  spokeAngles.sort((a,b)=>a-b);

  /* ---- draw spokes (for cross-hatch) ------------------------------- */
  spokeAngles.forEach(ang=>{
    const p1=[cx,cy];
    const p2=[cx+maxR*cos(ang), cy+maxR*sin(ang)];
    shapes.push({
      d:`M${nf(p1[0],1,2)},${nf(p1[1],1,2)} L${nf(p2[0],1,2)},${nf(p2[1],1,2)}`,
      ink:palette[floor(random(palette.length))]
    });
  });

  /* ---- concentric contours with notches --------------------------- */
  const stepTheta=TWO_PI/generationRules.stepsPerContour;
  let inkIdx=0;

  for(let i=0;i<dyn.contours;i++){
    const frac=(i+1)/(dyn.contours+1);
    const baseR=frac*maxR;
    let path='', segOpen=false;

    const ink=palette[
      generationRules.inkCycleMode==='random'
        ? floor(random(palette.length))
        : (inkIdx++%palette.length)
    ];

    for(let t=0;t<TWO_PI+stepTheta;t+=stepTheta){
      const th=t%TWO_PI;

      // skip if within gapHalf of any spoke
      const near=spokeAngles.some(a=>{
        let d=abs(a-th); d=min(d,TWO_PI-d);
        return d<dyn.gapHalf;
      });
      if(near){ segOpen=false; continue; }

      // superellipse factor
      const sr=pow(
        pow(abs(cos(th)),dyn.expShape)+pow(abs(sin(th)),dyn.expShape),
        -1/dyn.expShape
      );
      // Perlin wobble
      const wobble=1+dyn.ampWobble*noise(
        cos(th)*dyn.freqWobble,
        sin(th)*dyn.freqWobble,
        i+10
      );
      const r=baseR*sr*wobble;
      const x=cx+r*cos(th), y=cy+r*sin(th);

      if(!segOpen){ path+=` M${nf(x,1,2)},${nf(y,1,2)}`; segOpen=true; }
      else        { path+=` L${nf(x,1,2)},${nf(y,1,2)}`; }
    }

    if(path.trim()!=='') shapes.push({d:path.trim(), ink});
  }

  drawPreview();
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    beginShape();
    s.d.split(/s+/).forEach(tok=>{
      if(tok[0]==='M'||tok[0]==='L'){
        const [x,y]=tok.slice(1).split(',').map(Number);
        vertex(x,y);
      }
    });
    endShape();
  });
  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 inks=getUsedInks(); if(!inks.length) return;
  const total=300,gap=7,barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    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 (unchanged) ----------------------------------- */

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

  getUsedInks().forEach(ci=>{
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
            true,true,ci);
  });
}

function saveSVG(filename,includeMarkers,includePalette,singleInk=0){
  const off=0.5,fullInks=getUsedInks();
  const inksOut=singleInk?[singleInk]:fullInks;

  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}">
      <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 total=300,gap=7,segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
  const yBar=canvasH-1.25*pixelsPerInch;

  inksOut.forEach((ci,idx)=>{
    const col=colors[ci];
    const dFull=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(!dFull) return;
    const slot=fullInks.indexOf(ci);
    const x0=(canvasW-total)/2+slot*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${idx+1}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <path d="${dFull}"/>
      ${includePalette?`<path d="M${x0},${yBar} H${x0+segFull}"/>`:''}
    </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.attribute('download',filename); a.elt.click();
  a.remove(); URL.revokeObjectURL(url);
}

/*
Template Reminders
- Stand-Alone Writing in all comment blocks.
- ALL randomisable parameters stored in generationRules.
- R re-randomises dyn values, palette stays fixed.
- SPACE exports four composite SVGs plus one per ink, with correct names.
*/

// Day 177
/*

=======================================
  Day 177 Self-Portrait (Polar Echo)
=======================================

### Title: *Polar Echo*

### Medium: Generative Drawing on Paper

### Keywords: generative art, self-portrait, concentric rings, intentional gaps,
              superellipse, Perlin noise, radial spokes, algorithmic drawing,
              p5.js, SVG plotter

### Conceptual Framework

I imagine myself as a series of shifting contours—echoes that radiate outward yet are forever interrupted by the lines of force that shaped me.  
Each spoke stands for a formative vector in my life; where it pierces a ring, a sliver of memory is lost, leaving a deliberate silence.  
The drawing is therefore a rhythm of presence and absence: I exist not only in the marks I make, but in the gaps they leave behind.

### Technical Approach

A polar scaffold of *n* concentric contours is warped by a **superellipse exponent** (`expShape`) and **Perlin wobble** (`ampWobble`, `freqWobble`).  
`dyn.spokeCount` spokes are placed at unique angles (≥ `spokeAvoidAngle` apart).  
For every contour, any angular segment whose midpoint lies within `contourGapAngularWidth / 2` of a relevant spoke is omitted, creating notches.  
Spokes themselves are drawn as probabilistic segments between adjacent contours (`spokeSegmentProbability`).  
All random or enum parameters live in `generationRules`; re-rolling on **R** keeps the palette fixed.  
SVG export joins all segments that share one ink into a single `<path>` to meet the study’s “one-path-per-layer” rule.

Parameters inside `generationRules`:

- workAreaMarginMin/Max  
- paletteCountMin/Max  
- contoursMin/Max  
- stepsPerContour  
- expShapeMin/Max  
- ampWobbleMin/Max  
- freqWobbleMin/Max  
- spokeCountMin/Max  
- spokeAvoidAngle  
- spokeSegmentProbability  
- contourGapAngularWidth  
- inkCycleMode

Edge-cases handled:

- Exponent < 1 removed (pre-vents self-intersection).  
- `freqWobbleMin` ≥ 1 and is **not** floored, allowing fractional frequencies.  
- Attempts limit avoids infinite loops when many spokes crowd the circle.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

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

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.0,

  paletteCountMin   : 3,
  paletteCountMax   : 9,     // restore full nine-ink potential

  contoursMin       : 3,
  contoursMax       : 12,
  stepsPerContour   : 500,

  expShapeMin       : 1.0,   // avoid concave self-intersections
  expShapeMax       : 3.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 1.0,   // always at least one lobe
  freqWobbleMax     : 4.0,

  spokeCountMin     : 20,
  spokeCountMax     : 60,
  spokeAvoidAngle   : 0.02,

  spokeSegmentProbability : 0.7,
  contourGapAngularWidth  : 0.1,

  inkCycleMode      : 'random'
};

/**
 * =======================================
 * Display Flags  (Canvas only)
 * =======================================
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Globals
 * =======================================
 */
let canvasW, canvasH, strokeWeightValue, marginPx;
let palette = [];
let dyn = {};
let shapes = [];     // {d, ink}

/* ---------- Utility --------------------------------------------------- */

const tinyHash = v => (Math.sin(v)*1e4) - Math.floor(Math.sin(v)*1e4);
const randRange = (mn,mx) => random(mn,mx);
const angleDiff = (a,b) => min(abs(a-b)%TWO_PI, TWO_PI - (abs(a-b)%TWO_PI));
const applyStroke = hex => { const c=color(hex); c.setAlpha(255*strokeOpacity); stroke(c); };
const usedInks = () => [...new Set(shapes.map(s=>s.ink))].sort((a,b)=>a-b);

/* ---------- Setup ----------------------------------------------------- */

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

  marginPx = randRange(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  )*pixelsPerInch + strokeWeightValue/2;

  palette = choosePalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  regenerate();
}

function choosePalette(min,max){
  const keys = Object.keys(colors).map(Number);
  shuffle(keys,true);
  return keys.slice(0,floor(random(min,max+1))).sort((a,b)=>a-b);
}

/* ---------- Parameter Re-Roll ---------------------------------------- */

function rollDyn(){
  dyn = {
    contours      : floor(randRange(generationRules.contoursMin,
                                    generationRules.contoursMax+1)),
    expShape      : randRange(generationRules.expShapeMin,
                              generationRules.expShapeMax),
    ampWobble     : randRange(generationRules.ampWobbleMin,
                              generationRules.ampWobbleMax),
    freqWobble    : randRange(generationRules.freqWobbleMin,
                              generationRules.freqWobbleMax),
    spokeCount    : floor(randRange(generationRules.spokeCountMin,
                                    generationRules.spokeCountMax+1)),
    gapHalf       : generationRules.contourGapAngularWidth/2,
    seedNoise     : tinyHash(millis())
  };
}

/* ---------- Main Generation ------------------------------------------ */

function regenerate(){
  rollDyn();
  shapes.length = 0;
  noiseSeed(dyn.seedNoise*10000);

  const cx=canvasW/2, cy=canvasH/2;
  const maxR=min(canvasW,canvasH)/2 - marginPx;
  const stepTheta=TWO_PI/generationRules.stepsPerContour;

  /* ---- spokes ------------------------------------------------------ */
  const spokes=[];
  let tries=0;
  while(spokes.length<dyn.spokeCount && tries<dyn.spokeCount*6){
    const ang=random(TWO_PI);
    if(spokes.some(a=>angleDiff(a,ang)<generationRules.spokeAvoidAngle)){ tries++; continue; }
    spokes.push(ang); tries=0;
  }
  spokes.sort((a,b)=>a-b);

  spokes.forEach(ang=>{
    const ink=palette[floor(random(palette.length))];
    const p1=[cx,cy];
    const p2=[cx+maxR*cos(ang), cy+maxR*sin(ang)];
    shapes.push({d:`M${nf(p1[0],1,2)},${nf(p1[1],1,2)} L${nf(p2[0],1,2)},${nf(p2[1],1,2)}`, ink});
  });

  /* ---- contours with notches -------------------------------------- */
  let inkIdx=0;
  for(let cIdx=0;cIdx<dyn.contours;cIdx++){
    const ink = generationRules.inkCycleMode==='random'
                  ? palette[floor(random(palette.length))]
                  : palette[(inkIdx++)%palette.length];

    let path='', pen=false;
    for(let k=0;k<generationRules.stepsPerContour;k++){
      const t=k*stepTheta;
      const nextT=(k+1)*stepTheta;

      const mid=(t+nextT)/2 % TWO_PI;

      const skip = spokes.some(a=>angleDiff(a,mid)<dyn.gapHalf);
      if(skip){ pen=false; continue; }

      const [x,y]=pointOnContour(t,cIdx,cx,cy,maxR);
      if(!pen){ path+=` M${nf(x,1,2)},${nf(y,1,2)}`; pen=true; }
      const [xN,yN]=pointOnContour(nextT,cIdx,cx,cy,maxR);
      path+=` L${nf(xN,1,2)},${nf(yN,1,2)}`;
    }
    if(path.trim()!=='') shapes.push({d:path.trim(), ink});
  }

  /* ---- spoke segments (probabilistic) ----------------------------- */
  spokes.forEach(ang=>{
    const ink=palette[floor(random(palette.length))];
    for(let i=0;i<dyn.contours-1;i++){
      if(random()>generationRules.spokeSegmentProbability) continue;
      const pA=pointOnContour(ang,i  ,cx,cy,maxR);
      const pB=pointOnContour(ang,i+1,cx,cy,maxR);
      shapes.push({d:`M${nf(pA[0],1,2)},${nf(pA[1],1,2)} L${nf(pB[0],1,2)},${nf(pB[1],1,2)}`, ink});
    }
  });

  drawPreview();
}

function pointOnContour(th, idx, cx, cy, maxR){
  const frac=(idx+1)/(dyn.contours+1);
  const baseR=frac*maxR;
  const sr=pow(pow(abs(cos(th)),dyn.expShape)+pow(abs(sin(th)),dyn.expShape),
               -1/dyn.expShape);
  const wobble=1+dyn.ampWobble*noise(cos(th)*dyn.freqWobble,
                                     sin(th)*dyn.freqWobble,
                                     idx+10);
  const r=baseR*sr*wobble;
  return [cx+r*cos(th), cy+r*sin(th)];
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();
  shapes.forEach(s=>{
    applyStroke(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);

    s.d.trim().split(/(?=M)/).forEach(seg=>{
      beginShape();
      seg.trim().split(/(?=[ML])/).forEach(cmd=>{
        if(cmd.length<2) return;
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      });
      endShape();
    });
  });

  if(showMarkers) drawMarkers();
  if(showPalette) drawPaletteBars();
}

function drawMarkers(){
  strokeWeight(1); applyStroke('#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 inks=usedInks(); if(!inks.length) return;
  const total=300,gap=7,barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    applyStroke(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 (unchanged) ----------------------------------- */

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

  usedInks().forEach(ci=>{
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
            true,true,ci);
  });
}

function saveSVG(filename,includeMarkers,includePalette,singleInk=0){
  const off=0.5, full=usedInks();
  const inks=singleInk?[singleInk]:full;
  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}">
      <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 total=300,gap=7,segFull=(total-(full.length-1)*gap)/max(full.length,1);
  const yBar=canvasH-1.25*pixelsPerInch;

  inks.forEach((ci,idx)=>{
    const col=colors[ci];
    const dAll=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(!dAll.trim()) return;
    const slot=full.indexOf(ci);
    const x0=(canvasW-total)/2 + slot*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${idx+1}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <path d="${dAll}"/>
      ${(includePalette && slot>=0)?`<path d="M${nf(x0,1,2)},${nf(yBar,1,2)} h${nf(segFull,1,2)}" stroke-width="2"/>`:''}
    </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.attribute('download',filename); a.elt.click();
  a.remove(); URL.revokeObjectURL(url);
}

/*
Template reminders
- Stand-alone writing in comments.
- All randomisable parameters in generationRules.
- R re-rolls dyn, palette stays. SPACE exports four composites + per-ink SVGs.
*/

// Day 177
/*

=======================================
  Day 177 Self-Portrait (Polar Echo)
=======================================

### Title: *Polar Echo*

### Medium: Generative Drawing on Paper

### Keywords: generative art, self-portrait, contour mapping, polar grid,
              cross-hatching, algorithmic drawing, parametric curves,
              pseudo-randomness, p5.js, SVG plotter

### Conceptual Framework

I picture myself as a stack of vibrating contours radiating from a single, shifting centre.  
Every ring records a moment of becoming; every spoke is a force that interrupted, redirected, or fractured that growth.  
What matters to me here is the **rhythm between mark and absence**: the portrait only emerges because some lines are missing.  
The resulting image is therefore not a closed emblem but an open record of interruption—an echo that keeps escaping its own completion.

### Technical Approach

A polar lattice of *n* concentric contours is generated.  
Each contour’s radius is modulated by two harmonic displacements:

1. **Superellipse warp** (`expShape`)—soft-squares the circle into an oval.  
2. **Perlin wobble** (`ampWobble`, `freqWobble`)—adds noisy undulation.

A set of radial spokes is placed at unique angles (`spokeAvoidAngle`).  
For every contour segment whose angular midpoint lies within `contourGapAngularWidth / 2` of a relevant spoke, the code omits that segment, producing deliberate gaps.  
Spokes themselves are optionally fractured into smaller segments (`spokeSegmentProbability`).  

All tunable values live inside `generationRules`.  
Press **R** to re-roll everything except the palette; **SPACE** exports four composite SVGs plus one per ink layer, each with a single `<path>` per ink to satisfy the plotter constraints.

Parameters in `generationRules` (for quick reference):

- workAreaMarginMin / Max  
- paletteCountMin / Max  
- contoursMin / Max  
- stepsPerContour  
- expShapeMin / Max  
- ampWobbleMin / Max  
- freqWobbleMin / Max  
- spokeCountMin / Max  
- spokeAvoidAngle  
- spokeSegmentProbability  
- contourGapAngularWidth  
- inkCycleMode  

Edge-case guards:

- Wobble amplitude is clamped to prevent self-intersections.  
- Spoke angles are re-rolled if they violate the minimum separation.

---
*/

/*----------------------------------------
    Generated with p5.js
    Day 177 – Self-Portrait
----------------------------------------*/

/**
 * =======================================
 * Constants (Immutable)
 * =======================================
 */
const canvasWidthInches  = 11;
const canvasHeightInches = 11;
const pixelsPerInch      = 100;
const dayNumber          = '177';   // 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 = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 2.0,   // inches

  paletteCountMin   : 3,
  paletteCountMax   : 7,

  contoursMin       : 2,
  contoursMax       : 20,
  stepsPerContour   : 1000,

  expShapeMin       : 0.5,
  expShapeMax       : 2.4,

  ampWobbleMin      : 0.03,
  ampWobbleMax      : 0.12,

  freqWobbleMin     : 0.1,
  freqWobbleMax     : 4,

  spokeCountMin     : 25,
  spokeCountMax     : 200,
  spokeAvoidAngle   : 0.02,   // radians (~1°)

  spokeSegmentProbability : 0.7,  // probability (0–1) of drawing a spoke segment
  contourGapAngularWidth  : 0.1,  // radians: gap size on contours around spoke intersections

  inkCycleMode      : 'random'    // or 'sequential'
};

/**
 * =======================================
 * Display Flags (Canvas only)
 * SVG export ignores these flags.
 * =======================================
 */
let showMarkers = true;
let showPalette = true;

/**
 * =======================================
 * Globals (set in setup)
 * =======================================
 */
let canvasW, canvasH, strokeWeightValue, marginPx;
let palette = [];     // chosen once per run
let dyn     = {};     // dynamic parameters (re-randomised on R)
let shapes  = [];     // [{ d:'M…L…', ink:index }]

/* ---------- Utility --------------------------------------------------- */

const tinyHash = v => (Math.sin(v)*1e4) - Math.floor(Math.sin(v)*1e4);
const randRange = (mn,mx) => random(mn,mx);

const getUsedInks = () => [...new Set(shapes.map(s=>s.ink))].sort((a,b)=>a-b);

const angleDiff = (a1,a2) => {
  const diff = abs(a1-a2) % TWO_PI;
  return min(diff, TWO_PI-diff);
};

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 = randRange(
    generationRules.workAreaMarginMin,
    generationRules.workAreaMarginMax
  )*pixelsPerInch + strokeWeightValue/2;

  palette = choosePalette(
    generationRules.paletteCountMin,
    generationRules.paletteCountMax
  );

  pickDynamicParameters();
  regenerate();
}

/* ---------- Helpers --------------------------------------------------- */

function choosePalette(min=2,max=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(){
  dyn = {
    contours   : floor(randRange(generationRules.contoursMin,
                                 generationRules.contoursMax+1)),
    expShape   : randRange(generationRules.expShapeMin,
                           generationRules.expShapeMax),
    ampWobble  : randRange(generationRules.ampWobbleMin,
                           generationRules.ampWobbleMax),
    freqWobble : floor(randRange(generationRules.freqWobbleMin,
                                 generationRules.freqWobbleMax+1)),
    spokeCount : floor(randRange(generationRules.spokeCountMin,
                                 generationRules.spokeCountMax+1)),
    seedNoise  : tinyHash(millis())
  };
}

/* ---------- Regeneration --------------------------------------------- */

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;
  noiseSeed(dyn.seedNoise * 10000);

  const cx = canvasW/2,
        cy = canvasH/2,
        maxR = min(canvasW,canvasH)/2 - marginPx,
        stepTheta = TWO_PI / generationRules.stepsPerContour;

  /* ----- 1.  Define spokes ----------------------------------------- */
  const spokes=[], taken=new Set();
  let attempts=0;
  while(spokes.length<dyn.spokeCount && attempts<dyn.spokeCount*5){
    const ang=random(TWO_PI);
    if([...taken].some(a=>angleDiff(a,ang)<generationRules.spokeAvoidAngle)){
      attempts++; continue;
    }
    taken.add(ang);

    const aIdx=floor(random(dyn.contours));
    let bIdx=floor(random(dyn.contours));
    if(bIdx===aIdx) bIdx=(bIdx+1)%dyn.contours;

    spokes.push({
      angle: ang,
      inner: min(aIdx,bIdx),
      outer: max(aIdx,bIdx),
      ink  : palette[floor(random(palette.length))]
    });
    attempts=0;
  }

  /* ----- 2.  Contours with gaps ------------------------------------ */
  let contourInkIdx=0;
  for(let i=0;i<dyn.contours;i++){
    const contourInk = generationRules.inkCycleMode==='random'
      ? palette[floor(random(palette.length))]
      : palette[(contourInkIdx++)%palette.length];

    const pts=[], angles=[];
    for(let k=0;k<generationRules.stepsPerContour;k++){
      const t=k*stepTheta;
      angles.push(t);
      pts.push(pointOnContour(t,i,cx,cy,maxR));
    }

    const skipSeg=[]; // boolean per segment
    for(let k=0;k<angles.length;k++){
      const t0=angles[k], t1=angles[(k+1)%angles.length];
      let mid=t0 + angleDiff(t0,t1)/2;
      if(abs(t0-t1)>PI) mid=(t0+t1+TWO_PI)/2;
      mid%=TWO_PI;

      let gap=false;
      spokes.forEach(s=>{
        if(i>=s.inner && i<=s.outer){
          if(angleDiff(mid,s.angle)<generationRules.contourGapAngularWidth/2) gap=true;
        }
      });
      skipSeg.push(gap);
    }

    let path='', pen=false;
    for(let k=0;k<pts.length;k++){
      const [x,y]=pts[k], [xn,yn]=pts[(k+1)%pts.length];
      if(!skipSeg[k]){
        if(!pen){ path+=` M${nf(x,1,2)},${nf(y,1,2)}`; pen=true; }
        path+=` L${nf(xn,1,2)},${nf(yn,1,2)}`;
      }else{ pen=false; }
    }
    if(path.trim()) shapes.push({d:path.trim(), ink:contourInk});
  }

  /* ----- 3.  Spoke segments ---------------------------------------- */
  spokes.forEach(s=>{
    for(let i=s.inner;i<s.outer;i++){
      if(random()>generationRules.spokeSegmentProbability) continue;
      const pA=pointOnContour(s.angle,i,cx,cy,maxR);
      const pB=pointOnContour(s.angle,i+1,cx,cy,maxR);
      shapes.push({d:`M${nf(pA[0],1,2)},${nf(pA[1],1,2)} L${nf(pB[0],1,2)},${nf(pB[1],1,2)}`, ink:s.ink});
    }
  });

  drawPreview();
}

/* --- Helper: polar to Cartesian for a contour index ----------------- */
function pointOnContour(theta, idx, cx, cy, maxR){
  idx = constrain(idx,0,dyn.contours-1);
  const frac=(idx+1)/(dyn.contours+1);
  const baseR=frac*maxR;

  const sr=pow(pow(abs(cos(theta)),dyn.expShape)+pow(abs(sin(theta)),dyn.expShape),
               -1/dyn.expShape);

  const wobble=1 + dyn.ampWobble * noise(
    cos(theta)*dyn.freqWobble,
    sin(theta)*dyn.freqWobble,
    idx+10
  );
  const r=baseR*sr*wobble;
  return [cx+r*cos(theta), cy+r*sin(theta)];
}

/* ---------- Drawing --------------------------------------------------- */

function drawPreview(){
  background(255); noFill();

  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);

    // path may contain several M…L fragments
    s.d.trim().split(/(?=M)/).forEach(seg=>{
      beginShape();
      seg.trim().split(/(?=[ML])/).forEach(cmd=>{
        if(cmd.length<2) return;
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
      });
      endShape();
    });
  });

  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 inks=getUsedInks(); if(!inks.length) return;
  const total=300,gap=7,barH=2;
  const seg=(total-(inks.length-1)*gap)/inks.length;
  const y=canvasH-1.25*pixelsPerInch;
  let x=(canvasW-total)/2;
  strokeWeight(barH);
  inks.forEach(ci=>{
    applyStrokeWithOpacity(colors[ci].hex);
    line(x,y,x+seg,y); x+=seg+gap;
  });
}

/* ---------- Interaction ---------------------------------------------- */

function keyPressed(){
  if(key==='R'||key==='r') regenerate();   // re-roll dyn only
  if(key===' ')            exportSVGs();
}

/* ---------- SVG Export (unchanged) ----------------------------------- */

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

  getUsedInks().forEach(ci=>{
    saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
            true,true,ci);
  });
}

function saveSVG(filename,includeMarkers,includePalette,singleInk=0){
  const off=0.5, full=getUsedInks();
  const inks=singleInk?[singleInk]:full;

  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}">
      <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 total=300,gap=7;
  const segFull=(full.length>0)?(total-(full.length-1)*gap)/full.length:total;
  const yBar=canvasH-1.25*pixelsPerInch;

  inks.forEach((ci,idx)=>{
    const col=colors[ci];
    const dAll=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(!dAll.trim()) return;
    const slot=full.indexOf(ci);
    const x0=(canvasW-total)/2 + slot*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${idx+1}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <path d="${dAll}"/>
      ${(includePalette&&slot>=0)?`<path d="M${nf(x0,1,2)},${nf(yBar,1,2)} h${nf(segFull,1,2)}" stroke-width="2"/>`:''}
    </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.attribute('download',filename); a.elt.click();
  a.remove(); URL.revokeObjectURL(url);
}

/*
Template reminders
- Stand-alone writing in comment blocks.
- All randomisable parameters live in generationRules.
- R re-rolls dyn values (palette fixed).  SPACE exports required SVGs.
*/

/*  …everything above this line is unchanged …  */

/* ---------- SVG Export (added highlight-color on ink layers) --------- */

function saveSVG(filename,includeMarkers,includePalette,singleInk=0){
  const off=0.5, full=getUsedInks();
  const inks=singleInk?[singleInk]:full;

  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 total=300,gap=7;
  const segFull=(full.length>0)?(total-(full.length-1)*gap)/full.length:total;
  const yBar=canvasH-1.25*pixelsPerInch;

  inks.forEach((ci,idx)=>{
    const col=colors[ci];
    const dAll=shapes.filter(s=>s.ink===ci).map(s=>s.d).join(' ');
    if(!dAll.trim()) return;

    const slot=full.indexOf(ci);
    const x0=(canvasW-total)/2 + slot*(segFull+gap);

    svg+=`<g inkscape:groupmode="layer" id="layer${idx+1}"
         inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
         inkscape:highlight-color="${col.hex}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <path d="${dAll}"/>
      ${(includePalette&&slot>=0)?`<path d="M${nf(x0,1,2)},${nf(yBar,1,2)} h${nf(segFull,1,2)}" stroke-width="2"/>`:''}
    </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.attribute('download',filename); a.elt.click();
  a.remove(); URL.revokeObjectURL(url);
}

/*
Template reminders
- Stand-alone writing in comments.
- All randomisable parameters live in generationRules.
- R re-rolls dyn values (palette fixed). SPACE exports required SVGs.
*/