// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Shearwave Strata)
=======================================

### Title: *Shearwave Strata*

### Medium: Generative Drawing on Paper

### Keywords: generative art, identity, shear transformation, geological strata,
              line‑only drawing, algorithmic displacement, oscillatory offset,
              lattice disruption, strata weaving, fluid structure

### Conceptual Framework

I imagine my inner landscape as a stack of compressed layers—strata of memory and logic—
that slowly shear past one another under hidden forces.  Each layer preserves its
essential alignment, yet gentle tremors displace individual threads, creating a
sliding lattice of interdependence.  The resulting portrait reveals identity as a
dynamic field of stability and slippage: ordered bands that drift, buckle, and
re‑align in response to subtle pressures beneath the surface.

### Technical Approach

The work area is divided into a random number of horizontal strata.  
Within every stratum, a grid of vertical carrier lines is generated at regular
intervals.  Each line is then displaced horizontally by a sinusoidal shear
function whose amplitude, frequency, and phase are unique to that stratum.
Because adjacent strata receive alternating shear directions, the visual
impression is one of layered plates sliding in opposing motions.

For SVG parity, every vertex of every polyline is recorded in `shapes[]` as an
absolute `M/L` instruction, one path per ink layer.  Overlap is avoided by
capping the maximum horizontal offset to 90 % of the carrier spacing.  

All randomisable values live in `generationRules`:

- `strataCountMin`, `strataCountMax` – inclusive band count  
- `lineSpacingMin`, `lineSpacingMax` – distance between carrier lines  
- `ampMin`, `ampMax` – shear amplitude as a fraction of spacing  
- `freqMin`, `freqMax` – cycles of sine across a single stratum height  
- `phaseWrap` – full 2 π domain  
- `invertEvery` – alternate shear direction every *n* strata  

Edge handling trims any vertex that would leave the work area, ensuring complete
paths remain within margins.  Export logic is unchanged: *SPACE* outputs the four
combined SVG variants plus one per ink layer, preserving palette‑bar alignment.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  strataCountMin    : 4,
  strataCountMax    : 10,
  lineSpacingMin    : 0.25,   // inches
  lineSpacingMax    : 0.6,    // inches
  ampMin            : 0.2,    // as fraction of spacing
  ampMax            : 0.9,
  freqMin           : 0.5,    // cycles per stratum
  freqMax           : 3,
  invertEvery       : 1,      // alternate every stratum
  phaseWrap         : TWO_PI
};

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

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

let palette = [];
let dyn     = {};
let shapes  = [];

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

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;
  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 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.strataCount = floor(randRange(
    generationRules.strataCountMin,
    generationRules.strataCountMax+1
  ));
  dyn.lineSpacing = randRange(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  ) * pixelsPerInch;
  dyn.strata = [];
  for(let i=0;i<dyn.strataCount;i++){
    dyn.strata.push({
      amp      : randRange(generationRules.ampMin, generationRules.ampMax)
                 * dyn.lineSpacing,
      freq     : randRange(generationRules.freqMin, generationRules.freqMax),
      phase    : randRange(0, generationRules.phaseWrap),
      ink      : random(palette),
      invert   : (i % (generationRules.invertEvery*2)) >= generationRules.invertEvery
    });
  }
}

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

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;

  const wL = marginPx;
  const wR = canvasW - marginPx;
  const wT = marginPx;
  const wB = canvasH - marginPx;
  const workH = wB - wT;
  const bandH = workH / dyn.strataCount;

  // precompute carrier x positions
  const xStart = wL + dyn.lineSpacing/2;
  const xEnd   = wR - dyn.lineSpacing/2;
  let carriers = [];
  for(let x=xStart; x<=xEnd+0.1; x+=dyn.lineSpacing){
    carriers.push(x);
  }

  carriers.forEach((x0, idx)=>{
    let pathChunks = {};
    for(let s=0; s<dyn.strataCount; s++){
      const bandTop = wT + s*bandH;
      const bandBot = bandTop + bandH;
      const prop    = dyn.strata[s];
      const dir     = prop.invert ? -1 : 1;
      const pts = [];
      for(let y=bandTop; y<=bandBot+0.1; y+=bandH/40){
        const normY = (y - bandTop) / bandH;
        const offset = dir * prop.amp * sin(normY * TWO_PI * prop.freq + prop.phase);
        const x = x0 + offset;
        pts.push([constrain(x,wL,wR), y]);
      }
      // build path d string
      let d = `M${pts[0][0]},${pts[0][1]}`;
      for(let k=1;k<pts.length;k++){
        d += ` L${pts[k][0]},${pts[k][1]}`;
      }
      if(!pathChunks[prop.ink]) pathChunks[prop.ink]='';
      pathChunks[prop.ink] += ` ${d}`;
    }
    // push per‑ink paths
    Object.entries(pathChunks).forEach(([ink,d])=>{
      shapes.push({ d:d.trim(), ink:Number(ink) });
    });
  });

  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();
  }
  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();
  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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate dynamic parameters (palette fixed).
- Press SPACE to export combined and per‑ink SVGs with correct layers.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Shearwave Strata)
=======================================

### Title: *Shearwave Strata*

### Medium: Generative Drawing on Paper

### Keywords: generative art, identity, shear transformation, geological strata,
              line‑only drawing, algorithmic displacement, oscillatory offset,
              lattice disruption, strata weaving, fluid structure

### Conceptual Framework

I imagine my inner landscape as a stack of compressed layers—strata of memory and logic—
that slowly shear past one another under hidden forces.  Each layer preserves its
essential alignment, yet gentle tremors displace individual threads, creating a
sliding lattice of interdependence.  The resulting portrait reveals identity as a
dynamic field of stability and slippage: ordered bands that drift, buckle, and
re‑align in response to subtle pressures beneath the surface.

### Technical Approach

The work area is divided into a random number of horizontal strata.  
Within every stratum, a grid of vertical carrier lines is generated at regular
intervals.  Each line is then displaced horizontally by a sinusoidal shear
function whose amplitude, frequency, and phase are unique to that stratum.
Because adjacent strata receive alternating shear directions, the visual
impression is one of layered plates sliding in opposing motions.

Randomisable parameters stored in `generationRules`  

| Name | Meaning | Range |
|------|---------|-------|
| `strataCountMin/Max` | number of horizontal bands | 4 – 10 |
| `lineSpacingMin/Max` | carrier‑line spacing (in inches) | 0.25 – 0.6 |
| `ampMin/Max` | shear amplitude as fraction of spacing | 0.2 – 0.9 |
| `freqMin/Max` | sine cycles per band height | 0.5 – 3 |
| `invertEvery` | alternate shear direction every *n* bands | 1 |

SVG parity is guaranteed by recording every vertex in `shapes[]`; preview now
draws each sub‑path separately, preventing the former diagonal stitches.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  strataCountMin    : 4,
  strataCountMax    : 10,
  lineSpacingMin    : 0.25,   // inches
  lineSpacingMax    : 0.6,    // inches
  ampMin            : 0.2,
  ampMax            : 0.9,
  freqMin           : 0.5,
  freqMax           : 3,
  invertEvery       : 1,
  phaseWrap         : TWO_PI
};

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

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

let palette = [];
let dyn     = {};
let shapes  = [];

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

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

// guard against undefined max
const randRange = (mn,mx) => {
  if(mx===undefined){ return random(mn); }
  return 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;
  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 minC = constrain(min, 1, 9);
  const maxC = constrain(max, 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.strataCount = floor(randRange(
    generationRules.strataCountMin,
    generationRules.strataCountMax + 1
  ));
  dyn.lineSpacing = randRange(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  ) * pixelsPerInch;
  dyn.strata = [];
  for(let i=0;i<dyn.strataCount;i++){
    dyn.strata.push({
      amp   : randRange(generationRules.ampMin,  generationRules.ampMax)
              * dyn.lineSpacing,
      freq  : randRange(generationRules.freqMin, generationRules.freqMax),
      phase : randRange(0, generationRules.phaseWrap),
      ink   : random(palette),
      invert: (i % (generationRules.invertEvery*2)) >= generationRules.invertEvery
    });
  }
}

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

function regenerate(){
  pickDynamicParameters();
  shapes.length = 0;

  const wL = marginPx;
  const wR = canvasW - marginPx;
  const wT = marginPx;
  const wB = canvasH - marginPx;
  const workH = wB - wT;
  const bandH = workH / dyn.strataCount;

  // carrier x‑positions
  const xStart = wL + dyn.lineSpacing/2;
  const xEnd   = wR - dyn.lineSpacing/2;
  let carriers = [];
  for(let x=xStart; x<=xEnd+0.1; x+=dyn.lineSpacing){
    carriers.push(x);
  }

  carriers.forEach(x0=>{
    let pathChunks = {};
    for(let s=0; s<dyn.strataCount; s++){
      const bandTop = wT + s*bandH;
      const bandBot = bandTop + bandH;
      const prop    = dyn.strata[s];
      const dir     = prop.invert ? -1 : 1;

      let pts = [];
      for(let y=bandTop; y<=bandBot+0.1; y+=bandH/40){
        const norm = (y - bandTop)/bandH;
        const off  = dir * prop.amp *
                     sin(norm * TWO_PI * prop.freq + prop.phase);
        const x = constrain(x0 + off, wL, wR);
        pts.push([x,y]);
      }

      let d = `M${pts[0][0]},${pts[0][1]}`;
      for(let k=1;k<pts.length;k++){
        d += ` L${pts[k][0]},${pts[k][1]}`;
      }

      if(!pathChunks[prop.ink]) pathChunks[prop.ink] = '';
      pathChunks[prop.ink] += ` ${d}`;
    }
    Object.entries(pathChunks).forEach(([ink,d])=>{
      shapes.push({ d:d.trim(), ink:Number(ink) });
    });
  });

  drawPreview();
}

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

function drawPreview(){
  background(255); noFill();
  for(const s of shapes){
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);

    const cmds = s.d.trim().split(/s+/);
    let first = true;
    beginShape();
    cmds.forEach(cmd=>{
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(cmd[0]==='M'){
        if(!first){
          endShape();
          beginShape();
        }
      }
      vertex(x,y);
      first = false;
    });
    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===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();
  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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate dynamic parameters (palette fixed).
- Press SPACE to export combined and per‑ink SVGs with correct layers.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient colour dither,
              identity flow, sine integration, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought that bend
and sway while shifting hue almost imperceptibly.  Each vertical fibre
embodies steadiness, yet the hidden forces acting upon it evolve gradually,
allowing one rhythm to flow into the next without rupture.  By letting colour
change in tiny steps rather than abrupt stripes, the portrait becomes a slow
drift of vibration and tint, suggesting that transformation is most often a
matter of subtle accumulation, not sudden breaks.

### Technical Approach

**Continuous wave model**  
Amplitude *A(y)* and frequency *f(y)* both vary linearly from top to bottom.
The instantaneous phase is integrated so the sine offset remains perfectly
continuous:

Because the ink can change mid‑column, paths are **automatically split** whenever
the ink index changes; each sub‑path is stored in `shapes[]` under its ink key
so the canvas and SVG stay one‑to‑one.

All tunable values live in `generationRules`:

| Parameter | Meaning | Typical Range |
|-----------|---------|---------------|
| `lineSpacingMin/Max` | column spacing (in inches) | 0.25 – 0.6 |
| `ampTop / ampBot`    | amplitude at top / bottom (fraction of spacing) | 0.2 – 0.9 |
| `freqTop / freqBot`  | frequency (cycles over full height) | 0.5 – 3 |
| `phaseWrap`          | full‑turn constant | `Math.PI*2` |

SVG export and file naming follow the original template (combined variants +
one per ink).  Preview now renders each sub‑path separately, so what you see
on screen is exactly what hits the plotter.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 0.25,   // inches
  lineSpacingMax    : 0.6,    // inches

  ampTop            : 0.25,   // fraction of spacing
  ampBot            : 0.85,
  freqTop           : 0.6,    // cycles across full height
  freqBot           : 2.5,
  phaseWrap         : Math.PI * 2
};

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

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

let palette = [];
let shapes  = [];   // [{ ink:int, d:'M… L…' }]

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

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

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

const lerpVal = (a,b,t)=>a+(b-a)*t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

function choosePalette(min=2, max=9){
  const minC = constrain(min, 1, 9);
  const maxC = constrain(max, 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);
}

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

function regenerate(){
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  ) * pixelsPerInch;

  // carrier positions
  const xStart = left + spacing/2;
  const xEnd   = right - spacing/2;
  let carriers = [];
  for(let x=xStart; x<=xEnd+0.1; x+=spacing) carriers.push(x);

  carriers.forEach((x0, colIdx)=>{
    let phase = random(0, generationRules.phaseWrap);

    let currentInk = null;
    let pathStrings = {};   // ink → partial d

    const yStep = 5;  // px
    for(let y=top; y<=bottom+0.1; y+=yStep){
      const t = (y - top) / workH;             // 0 → 1
      const amp  = lerpVal(
        generationRules.ampTop,
        generationRules.ampBot, t
      ) * spacing;
      const freq = lerpVal(
        generationRules.freqTop,
        generationRules.freqBot, t
      );

      const off  = amp * sin(phase);
      const x    = constrain(x0 + off, left, right);

      // colour dithering (gradual)
      const shift = colIdx / carriers.length;
      const p     = (t + shift) * palette.length;
      const ink   = palette[ floor(p) % palette.length ];

      // start new sub‑path if ink changes
      if(currentInk !== ink){
        if(!pathStrings[ink]) pathStrings[ink]='';
        pathStrings[ink] += ` M${x.toFixed(2)},${y.toFixed(2)}`;
        currentInk = ink;
      }else{
        pathStrings[ink] += ` L${x.toFixed(2)},${y.toFixed(2)}`;
      }

      // integrate phase
      phase += TWO_PI * freq * (yStep / workH);
    }

    // push each ink’s path
    Object.entries(pathStrings).forEach(([ink,d])=>{
      shapes.push({ ink:Number(ink), d:d.trim() });
    });
  });

  drawPreview();
}

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      if(cmd[0]==='M'){
        if(drawing){ endShape(); beginShape(); }
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
        drawing=true;
      }else if(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===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();
  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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate (palette fixed); SPACE exports full SVG set.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient colour dither,
              identity flow, sine integration, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought that bend
and sway while shifting hue almost imperceptibly.  Each vertical fibre
embodies steadiness, yet the hidden forces acting upon it evolve gradually,
allowing one rhythm to flow into the next without rupture.  By letting colour
change in tiny steps rather than abrupt stripes, the portrait becomes a slow
drift of vibration and tint, suggesting that transformation is most often a
matter of subtle accumulation, not sudden breaks.

### Technical Approach

**Continuous wave model**  
Amplitude *A(y)* and frequency *f(y)* both vary linearly from top to bottom.
The instantaneous phase is integrated so the sine offset remains perfectly
continuous:

Paths split automatically whenever the ink index changes; this ensures
perfect SVG ↔ canvas parity.

All tunable values live in `generationRules`:

| Parameter          | Meaning                                  | Units     |
|--------------------|------------------------------------------|-----------|
| `lineSpacingMin`   | carrier‑line spacing (min)               | pixels    |
| `lineSpacingMax`   | carrier‑line spacing (max)               | pixels    |
| `ampTop` / `ampBot`| amplitude at top / bottom (fraction)     | of spacing |
| `freqTop` / `freqBot` | frequency at top / bottom (cycles)   | per height |
| `phaseWrap`        | full‑turn constant                       | radians   |

SVG export and file naming follow the original template (combined variants +
one per ink).  

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  // NOW in PIXELS, not inches:
  lineSpacingMin    : 30,    // px
  lineSpacingMax    : 80,    // px

  ampTop            : 0.25,  // fraction of spacing
  ampBot            : 0.85,
  freqTop           : 0.6,   // cycles over full height
  freqBot           : 2.5,
  phaseWrap         : Math.PI * 2
};

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

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

let palette = [];
let shapes  = [];   // [{ ink:int, d:'M… L…' }]

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

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

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

const lerpVal = (a,b,t)=>a + (b - a)*t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

function choosePalette(min=2, max=9){
  const minC = constrain(min, 1, 9);
  const maxC = constrain(max, 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);
}

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

function regenerate(){
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  // spacing now directly in px:
  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  // carrier positions
  const xStart = left + spacing/2;
  const xEnd   = right - spacing/2;
  let carriers = [];
  for(let x=xStart; x<=xEnd+0.1; x+=spacing) carriers.push(x);

  carriers.forEach((x0, colIdx)=>{
    let phase = random(0, generationRules.phaseWrap);
    let currentInk = null;
    let pathStrings = {};

    const yStep = 5;  // px
    for(let y=top; y<=bottom+0.1; y+=yStep){
      const t = (y - top) / workH;             // 0→1
      const amp  = lerpVal(
        generationRules.ampTop,
        generationRules.ampBot, t
      ) * spacing;
      const freq = lerpVal(
        generationRules.freqTop,
        generationRules.freqBot, t
      );

      // no longer clamped:
      const x = x0 + amp * sin(phase);

      // colour‑dither gradient
      const shift = colIdx / carriers.length;
      const p     = (t + shift) * palette.length;
      const ink   = palette[ floor(p) % palette.length ];

      if(currentInk !== ink){
        if(!pathStrings[ink]) pathStrings[ink]='';
        pathStrings[ink] += ` M${x.toFixed(2)},${y.toFixed(2)}`;
        currentInk = ink;
      } else {
        pathStrings[ink] += ` L${x.toFixed(2)},${y.toFixed(2)}`;
      }

      // integrate phase
      phase += generationRules.phaseWrap * freq * (yStep / workH);
    }

    Object.entries(pathStrings).forEach(([ink,d])=>{
      shapes.push({ ink:Number(ink), d:d.trim() });
    });
  });

  drawPreview();
}

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

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      if(cmd[0]==='M'){
        if(drawing){ endShape(); beginShape(); }
        const [x,y]=cmd.slice(1).split(',').map(Number);
        vertex(x,y);
        drawing=true;
      } else if(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 ------------------------------------------------ */

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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate (palette fixed); SPACE exports full SVG set.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient colour dither,
              identity flow, sine integration, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought that bend
and sway while shifting hue almost imperceptibly. Each vertical fibre
embodies steadiness, yet the hidden forces acting upon it evolve gradually,
allowing one rhythm to flow into the next without rupture. By letting colour
change in tiny steps rather than abrupt stripes, the portrait becomes a slow
drift of vibration and tint, suggesting that transformation is most often a
matter of subtle accumulation, not sudden breaks.

### Technical Approach

Continuous wave model:
 phase₀ = random(0, 2π)
 phase₁ = phase₀ + 2π·f(y₀)·Δy / workHeight
 offset = A(y₀) · sin(phase₀)

Amplitude A(y) and frequency f(y) both vary linearly from top to bottom.
We integrate the phase on each y‑step so the sine wave is perfectly continuous
from top to bottom.

Carrier lines are equally spaced vertical spines filling the work area.
Ink is chosen per vertex via a tiny offset in t + columnIndex/carrierCount,
so the colour shifts in small, plotter‑friendly steps.

Paths split automatically whenever the ink index changes; this ensures
exact 1:1 parity between canvas preview and SVG output.

Tunables in generationRules:
- lineSpacingMin/Max: pixel spacing between spines
- ampTop / ampBot: amplitude fraction at top/bottom
- freqTop / freqBot: frequency (cycles) at top/bottom
- phaseWrap: full‑turn constant

SVG export and file naming follow the established template.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  // now pixels, for more fine‑grain complexity:
  lineSpacingMin    : 20,     // px
  lineSpacingMax    : 100,    // px

  ampTop            : 0.1,    // fraction of spacing
  ampBot            : 1.2,

  freqTop           : 0.5,    // cycles over full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2
};

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

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

let palette = [];
let shapes  = [];   // [{ ink:int, d:'M… L…' }]

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

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

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

const lerpVal = (a, b, t) => a + (b - a) * t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

function choosePalette(min = 2, max = 9) {
  const minC = constrain(min, 1, 9);
  const maxC = constrain(max, 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);
}

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

function regenerate() {
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  // now in pixels:
  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  // carrier x‑positions
  const xStart = left + spacing / 2;
  const xEnd   = right - spacing / 2;
  let carriers = [];
  for (let x = xStart; x <= xEnd + 0.1; x += spacing) {
    carriers.push(x);
  }

  carriers.forEach((x0, colIdx) => {
    let phase = random(0, generationRules.phaseWrap);
    let currentInk = null;
    let pathStrings = {};

    const yStep = 3; // finer resolution
    for (let y = top; y <= bottom + 0.1; y += yStep) {
      const t = (y - top) / workH;   // 0→1

      const amp  = lerpVal(
        generationRules.ampTop,
        generationRules.ampBot,
        t
      ) * spacing;

      const freq = lerpVal(
        generationRules.freqTop,
        generationRules.freqBot,
        t
      );

      // unclamped x:
      const x = x0 + amp * sin(phase);

      // dithered colour
      const shift = colIdx / carriers.length;
      const p     = (t + shift) * palette.length;
      const ink   = palette[floor(p) % palette.length];

      if (currentInk !== ink) {
        if (!pathStrings[ink]) pathStrings[ink] = '';
        pathStrings[ink] += ` M${x.toFixed(2)},${y.toFixed(2)}`;
        currentInk = ink;
      } else {
        pathStrings[ink] += ` L${x.toFixed(2)},${y.toFixed(2)}`;
      }

      phase += generationRules.phaseWrap * freq * (yStep / workH);
    }

    Object.entries(pathStrings).forEach(([ink, d]) => {
      shapes.push({ ink: Number(ink), d: d.trim() });
    });
  });

  drawPreview();
}

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

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing = false;
    cmds.forEach(cmd => {
      const type = cmd[0];
      const [x, y] = cmd.slice(1).split(',').map(Number);
      if (type === 'M') {
        if (drawing) endShape();
        beginShape();
        vertex(x, y);
        drawing = true;
      } else if (type === 'L') {
        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 ------------------------------------------------ */

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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate (palette fixed); SPACE exports full SVG set.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient colour dither,
              identity flow, sine integration, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought that bend
and sway while shifting hue almost imperceptibly. Each vertical fibre
embodies steadiness, yet the hidden forces acting upon it evolve gradually,
allowing one rhythm to flow into the next without rupture. By letting colour
change in tiny steps rather than abrupt stripes, the portrait becomes a slow
drift of vibration and tint, suggesting that transformation is most often a
matter of subtle accumulation, not sudden breaks.

### Technical Approach

Continuous wave model:
 phase0 = random(0, 2π)
 phase1 = phase0 + 2π·f(y0)·Δy / workHeight
 offset = A(y0) · sin(phase0)

Amplitude A(y) and frequency f(y) both vary linearly from top to bottom.
We integrate the phase at each y‑step so the sine wave is perfectly continuous
from top to bottom.

Carrier lines are equally spaced vertical spines filling the work area.
We offer two gradient modes:
 - solid: each line stays one colour per segment (as before)
 - dither: near each colour boundary, the line breaks into tiny dashes/dots
   that randomly mix the old and new pen inks over a small transition zone

Paths split automatically whenever the ink index changes or when dots are
placed; this ensures exact SVG ↔ canvas parity.

Tunables in generationRules:
- lineSpacingMin/Max: pixel spacing between spines
- ampTop / ampBot: amplitude fraction at top/bottom
- freqTop / freqBot: frequency (cycles) at top/bottom
- phaseWrap: full‑turn constant
- gradientMode: 'solid' or 'dither'
- ditherZone: fraction of each colour segment used for mixing

SVG export and file naming follow the established template.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  // pixel‑based spacing:
  lineSpacingMin    : 20,
  lineSpacingMax    : 100,

  ampTop            : 0.1,
  ampBot            : 1.2,

  freqTop           : 0.5,
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 0.1        // 10% of segment for mixing
};

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

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

let palette = [];
let shapes  = [];   // [{ ink:int, d:'M… L…' }]

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

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

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

const lerpVal = (a, b, t) => a + (b - a) * t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

function choosePalette(min = 2, max = 9) {
  const minC = constrain(min, 1, 9);
  const maxC = constrain(max, 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);
}

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

function regenerate() {
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  // compute carriers
  const xStart = left + spacing / 2;
  const xEnd   = right - spacing / 2;
  let carriers = [];
  for (let x = xStart; x <= xEnd + 0.1; x += spacing) {
    carriers.push(x);
  }

  carriers.forEach((x0, colIdx) => {
    let phase       = random(0, generationRules.phaseWrap);
    let currentInk  = null;
    let pathStrings = {};

    const yStep = 3;  // px resolution

    for (let y = top; y <= bottom + 0.1; y += yStep) {
      const t    = (y - top) / workH;   // 0→1
      const amp  = lerpVal(
        generationRules.ampTop,
        generationRules.ampBot,
        t
      ) * spacing;
      const freq = lerpVal(
        generationRules.freqTop,
        generationRules.freqBot,
        t
      );

      const x    = x0 + amp * sin(phase);

      // Base colour index
      const shift = colIdx / carriers.length;
      const p     = (t + shift) * palette.length;
      const idx   = floor(p) % palette.length;
      const frac  = p - floor(p);

      // Determine ink & dot vs solid
      let ink      = palette[idx];
      let isDot    = false;

      if (generationRules.gradientMode === 'dither' && frac > 1 - generationRules.ditherZone) {
        // transition zone at end of segment
        const zoneFrac = (frac - (1 - generationRules.ditherZone)) / generationRules.ditherZone;
        const nextInk  = palette[(idx + 1) % palette.length];
        // random mix
        ink = random() < zoneFrac ? nextInk : ink;
        isDot = true;
      }

      if (isDot) {
        // break any continuous run
        currentInk = null;
        // draw a tiny dash as a dot
        const dDot = `M${x.toFixed(2)},${y.toFixed(2)} L${(x+1).toFixed(2)},${y.toFixed(2)}`;
        shapes.push({ ink, d: dDot });
      } else {
        // solid run accumulation
        if (currentInk !== ink) {
          if (!pathStrings[ink]) pathStrings[ink] = '';
          pathStrings[ink] += ` M${x.toFixed(2)},${y.toFixed(2)}`;
          currentInk = ink;
        } else {
          pathStrings[ink] += ` L${x.toFixed(2)},${y.toFixed(2)}`;
        }
      }

      // integrate phase
      phase += generationRules.phaseWrap * freq * (yStep / workH);
    }

    // push continuous paths for this carrier
    Object.entries(pathStrings).forEach(([ink, d]) => {
      shapes.push({ ink: Number(ink), d: d.trim() });
    });
  });

  drawPreview();
}

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

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing = false;
    cmds.forEach(cmd => {
      const type = cmd[0];
      const [x, y] = cmd.slice(1).split(',').map(Number);
      if (type === 'M') {
        if (drawing) endShape();
        beginShape();
        vertex(x, y);
        drawing = true;
      } else if (type === 'L') {
        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 ------------------------------------------------ */

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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate (palette fixed); SPACE exports full SVG set.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient dither,
              identity flow, sine integration, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought bending and
swaying while shifting hue almost imperceptibly. Each fibre holds its form yet
responds to evolving forces, allowing one rhythm to flow into the next without
rupture. By blending colours in a tiny transition zone—through controlled
dithering—the portrait becomes a drift of vibration and tint, suggesting that
transformation is a matter of subtle accumulation rather than sudden breaks.

### Technical Approach

Continuous wave model: amplitude A(y) and frequency f(y) vary linearly from top
to bottom. Phase is integrated per step so the sine offset is seamless:

 phaseₙ₊₁ = phaseₙ + 2π·f(yₙ)·Δy / workHeight
 x       = x₀ + A(yₙ)·sin(phaseₙ)

We generate each vertical spine in segments of Δy pixels:

 - In solid mode, each segment inherits a single ink based on a dithered t+shift.
 - In dither mode, within a small fraction near each colour boundary, segments
   randomly mix old and next inks, creating a connected, stippled gradient zone.

Every segment is stored as its own path (`M…L…`) in shapes[], guaranteeing that
the canvas preview matches the SVG export exactly.

generationRules tunables:
- lineSpacingMin/Max: pixel spacing between spines
- ampTop / ampBot: amplitude fraction at top/bottom
- freqTop / freqBot: frequency (cycles) at top/bottom
- phaseWrap: full‑turn constant
- gradientMode: 'solid' or 'dither'
- ditherZone: fraction of segment for mixing

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 20,       // px
  lineSpacingMax    : 100,      // px

  ampTop            : 0.1,      // fraction of spacing
  ampBot            : 1.2,

  freqTop           : 0.5,      // cycles over full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 0.1       // 10% of each segment
};

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

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

let palette = [];
let shapes  = [];   // each: { ink:int, d:'M…L…' }

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

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

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

const lerpVal = (a,b,t)=>a + (b - a)*t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

function choosePalette(min=2, max=9){
  const minC = constrain(min,1,9);
  const maxC = constrain(max,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);
}

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

function regenerate(){
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  const xStart = left + spacing/2;
  const xEnd   = right - spacing/2;
  let carriers = [];
  for(let x=xStart; x<=xEnd+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0, colIdx)=>{
    let phase      = random(0, generationRules.phaseWrap);
    let prevX, prevY, prevT;

    const yStep = 3;

    for(let i=0; i<=ceil((bottom-top)/yStep); i++){
      const y = top + i*yStep;
      if(i===0){
        const t0   = 0;
        const amp0 = lerpVal(generationRules.ampTop, generationRules.ampBot, t0)*spacing;
        prevX = x0 + amp0 * sin(phase);
        prevY = y;
        prevT = t0;
        continue;
      }

      const t    = (y - top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);

      phase += generationRules.phaseWrap * freq * (yStep / workH);
      const x    = x0 + amp * sin(phase);

      // base and next ink
      const shift = colIdx / carriers.length;
      const p     = (prevT + shift)*palette.length;
      const base  = palette[floor(p) % palette.length];
      const next  = palette[(floor(p)+1) % palette.length];
      const frac  = p - floor(p);

      let ink = base;
      if(generationRules.gradientMode==='dither' && frac > 1 - generationRules.ditherZone){
        const zf = (frac - (1 - generationRules.ditherZone)) / generationRules.ditherZone;
        ink = random()<zf? next: base;
      }

      const d = `M${prevX.toFixed(2)},${prevY.toFixed(2)} L${x.toFixed(2)},${y.toFixed(2)}`;
      shapes.push({ ink, d });

      prevX = x;
      prevY = y;
      prevT = t;
    }
  });

  drawPreview();
}

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

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        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 ------------------------------------------------ */

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}-${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: complete in itself.
- All randomisable parameters in generationRules.
- Press R to regenerate; SPACE to export SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient dither,
              weaving pattern, identity flow, algorithmic drawing,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought bending,
swaying, and subtly changing hue while weaving through one another.
By narrowing the amplitude envelope toward the bottom, heightening the
gradient zone, and selectively “breaking” lines at crossings, the portrait
becomes a dynamic tapestry of continuous movement and colour interplay.

### Technical Approach

— **Continuous wave model** with linear A(y), f(y), integrated phase for
  seamless curves.  
— **Gradient modes**: solid (one ink per segment) or dither
  (small‑zone ink mixing).  
— **Weaving**: on even‑indexed columns, whenever a spine crosses its right
  neighbour, we lift the pen (break the path), simulating an over/under
  stitch.  

All segments are saved in `shapes[]`, guaranteeing perfect canvas ↔ SVG parity.

Tunables in `generationRules`:  
- `lineSpacingMin/Max` in px  
- `ampTop/ampBot` as fraction of spacing  
- `freqTop/freqBot` in cycles/height  
- `phaseWrap` in radians  
- `gradientMode` = `"solid"`/`"dither"`  
- `ditherZone` = fraction of each segment to mix  

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 20,       // px
  lineSpacingMax    : 60,       // px

  ampTop            : 0.2,      // as fraction of spacing
  ampBot            : 0.5,      // narrower bottom envelope

  freqTop           : 0.5,      // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 0.3        // 30% of each segment
};

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

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

let palette = [];
let shapes  = [];   // { ink:int, d:string }

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

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

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

const lerpVal = (a,b,t) => a + (b-a)*t;

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

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

function regenerate(){
  shapes.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  // build carriers
  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  // for each carrier, precompute X positions & inks
  carriers.forEach((x0,colIdx)=>{
    const phase0 = random(0, generationRules.phaseWrap);
    const steps  = ceil((bottom-top)/3);
    const ys     = Array.from({length:steps+1},(_,i)=>top + i*((bottom-top)/steps));
    const xs     = [];
    const inks   = [];
    let phase    = phase0;

    ys.forEach((y,i)=>{
      const t    = (y - top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);

      xs[i]      = x0 + amp * sin(phase);
      phase     += generationRules.phaseWrap * freq * (1/steps);

      // colour dithering
      const shift = colIdx / carriers.length;
      const p     = (t + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      const frac  = p - floor(p);
      inks[i]    = { base:palette[idx], next:palette[(idx+1)%palette.length], frac };
    });

    // build segments with weaving & gradient
    for(let i=0;i<steps;i++){
      const xA = xs[i],   yA = ys[i];
      const xB = xs[i+1], yB = ys[i+1];
      const {base,next,frac} = inks[i];
      // pick ink
      let ink = base;
      if(generationRules.gradientMode==='dither' && frac>1-generationRules.ditherZone){
        ink = random()<((frac-(1-generationRules.ditherZone))/generationRules.ditherZone) ? next : base;
      }
      // weaving break?
      let overUnderBreak = false;
      if(colIdx<carriers.length-1){
        const xNext = xs[i] + spacing; // approximate neighbor
        if(colIdx%2===0 && xA > xNext) overUnderBreak = true;
        if(colIdx%2===1 && xA < xNext) overUnderBreak = true;
      }
      // build path
      const d = (overUnderBreak
        ? `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`
        : ` M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`);
      shapes.push({ ink, d: d.trim() });
    }
  });

  drawPreview();
}

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

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

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

    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const [type, coords] = [cmd[0], cmd.slice(1)];
      const [x,y] = coords.split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        vertex(x,y);
      }
    });
    endShape();
  });

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

/* ---------- Markers & Palette ---------------------------------------- */

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

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=>{
    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}">
      <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}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient dither,
              weaving pattern, intersection avoidance, identity flow,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I sense my identity as an uninterrupted current—threads of thought bending,
swaying, subtly changing hue, and weaving through one another.  By avoiding
line crossings—pausing each stroke when it would intersect an existing one
and then resuming after a small gap—the portrait becomes a tapestry of
never‑touching strands, each carrying its own colour drift and rhythm.

### Technical Approach

— **Continuous waves**: A(y), f(y) vary linearly; phase integrated per step.  
— **Gradient modes**: solid or dither (tiny ink mix).  
— **Weaving**: even columns “break” at crossings (over/under).  
— **Intersection avoidance**: on any crossing, pause drawing for `intersectionGap` px.  

Every segment is saved in `shapes[]` and in `segmentRecords[]`,
ensuring perfect canvas ↔ SVG correspondence.

Tunables (`generationRules`):
- `lineSpacingMin/Max` (px)  
- `ampTop/ampBot` (fraction of spacing)  
- `freqTop/freqBot` (cycles per height)  
- `phaseWrap` (radians)  
- `gradientMode` = `"solid"` / `"dither"`  
- `ditherZone` (fraction of segment for mixing)  
- **`intersectionGap`** (px of gap when crossing)  

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 5,       // px
  lineSpacingMax    : 25,      // px

  ampTop            : 0.2,     // fraction of spacing
  ampBot            : 1.0,

  freqTop           : 0.5,     // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',// 'solid' or 'dither'
  ditherZone        : 1.0,     // 100% of segment for mixing

  intersectionGap   : 5        // px to skip on intersection
};

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

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

let palette = [];
let shapes  = [];           
let segmentRecords = [];   // {x1,y1,x2,y2}

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

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

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

// linear interpolation
const lerpVal = (a,b,t) => a + (b - a) * t;

// orientation/test for segment intersection
function segIntersect(a1,a2,a3,a4){
  const [x1,y1,x2,y2] = a1;
  const [x3,y3,x4,y4] = a2;
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1 = orient(x1,y1,x2,y2,x3,y3);
  const o2 = orient(x1,y1,x2,y2,x4,y4);
  const o3 = orient(x3,y3,x4,y4,x1,y1);
  const o4 = orient(x3,y3,x4,y4,x2,y2);
  return (o1*o2<0 && o3*o4<0);
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );

  // carrier x positions
  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    // compute Y steps
    const steps = ceil((bottom-top)/3);
    const ys = Array.from({length:steps+1},(_,i)=>top + i*((bottom-top)/steps));
    // compute X, phase, AMPL/FREQ per step
    let phase = random(0, generationRules.phaseWrap);
    const xs = [], ts = [];
    ys.forEach((y,i)=>{
      const t    = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t) * spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i]     = x0 + amp * sin(phase);
      ts[i]     = t;
      phase    += generationRules.phaseWrap * freq * (1/steps);
    });

    // draw segments with intersection avoidance + gradient
    let skipRemaining = 0;
    for(let i=0;i<steps;i++){
      const xA = xs[i], yA = ys[i];
      const xB = xs[i+1], yB = ys[i+1];
      const len = dist(xA,yA,xB,yB);

      if(skipRemaining>0){
        skipRemaining = max(0, skipRemaining - len);
        continue;
      }

      // detect intersection
      let doesIntersect = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          doesIntersect = true;
          break;
        }
      }
      if(doesIntersect){
        skipRemaining = generationRules.intersectionGap;
        continue;
      }

      // pick ink with optional dithering
      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      const base  = palette[idx];
      let ink     = base;

      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1)%palette.length];
          const zf   = (frac - (1-generationRules.ditherZone))/generationRules.ditherZone;
          ink = random()<zf? next: base;
        }
      }

      // record & push
      shapes.push({ ink, d:`M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}` });
      segmentRecords.push([xA,yA,xB,yB]);
    }
  });

  drawPreview();
}

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

function drawPreview(){
  background(255); noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing=true;
      } else {
        vertex(x,y);
      }
    });
    endShape();
  });
  if(showMarkers) drawMarkers();
  if(showPalette)  drawPaletteBars();
}

/* ---------- Markers & Palette ---------------------------------------- */

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

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=>{
    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}">
      <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}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, continuous wave, gradient dither,
              weaving pattern, intersection avoidance, identity flow,
              pen plotter, layered oscillation, evolving frequency,
              line‑only aesthetic

### Conceptual Framework

I imagine my identity as myriad threads weaving through one another—
undulating, shifting hue, and always flowing without ever colliding.
Each line drifts in a gentle gradient and parts at crossings, creating
a tapestry of never‑touching currents.  The result is a delicate dance
of separation and connection, where every strand retains its colour
and rhythm yet remains bound to the whole.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 5,    // px
  lineSpacingMax    : 25,   // px

  ampTop            : 0.2,  // fraction of spacing
  ampBot            : 1.0,

  freqTop           : 0.5,  // cycles over full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',   // 'solid' or 'dither'
  ditherZone        : 1.0,        // full segment mixing

  intersectionGap   : 10          // px to skip on intersection
};

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

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

let palette = [];
let shapes  = [];            // { ink:int, d:string }
let segmentRecords = [];     // [[x1,y1,x2,y2],...]

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

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

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

const lerpVal = (a,b,t) => a + (b - a)*t;

// Check strict segment intersection
function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1=orient(x1,y1,x2,y2,x3,y3),
        o2=orient(x1,y1,x2,y2,x4,y4),
        o3=orient(x3,y3,x4,y4,x1,y1),
        o4=orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx;
  const right  = canvasW - marginPx;
  const top    = marginPx;
  const bottom = canvasH - marginPx;
  const workH  = bottom - top;

  const spacing = random(
    generationRules.lineSpacingMin,
    generationRules.lineSpacingMax
  );
  const yStep = 3;                        // px per segment
  const skipSteps = ceil(generationRules.intersectionGap / yStep);

  // build carriers
  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    // precompute positions
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);
    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t) * spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq * (1/steps);
    }

    // draw segments
    let skipped = 0;
    for(let i=0;i<steps;i++){
      if(skipped>0){ skipped--; continue; }
      const xA = xs[i], yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1], yB = top + (i+1)*((bottom-top)/steps);

      // intersection check
      let crosses = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          crosses = true;
          break;
        }
      }
      if(crosses){
        skipped = skipSteps;
        continue;
      }

      // pick ink
      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      let ink     = palette[idx];
      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1)%palette.length];
          const zf   = (frac - (1-generationRules.ditherZone))/generationRules.ditherZone;
          if(random()<zf) ink = next;
        }
      }

      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB]);
    }
  });

  drawPreview();
}

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

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

  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing=true;
      } else {
        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 ------------------------------------------------ */

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=>{
    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}">
      <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}-${col.ink}-${col.width}"
         style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
         stroke-width="${strokeWeightValue}" fill="none">
      <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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, weaving currents, gradient dither,
              identity tapestry, algorithmic motion, pen plotter,
              layered oscillation, dynamic separation, subtle transitions

### Conceptual Framework

I envision myself as a weaving tapestry of luminous currents,
each strand flowing in harmony while maintaining its own hue.
Subtle shifts of colour ripple along sine‑like threads,
and whenever two currents near each other, they part gracefully—
preserving the integrity of each line. The result is a vibrant
field of interlaced motion, where unity and individuality coexist
in seamless drift.

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 5,    // px
  lineSpacingMax    : 25,   // px

  ampTop            : 0.2,  // fraction of spacing
  ampBot            : 1.0,

  freqTop           : 0.5,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 1.0,       // 100% of segment mixing

  intersectionGap   : 10         // px to skip on intersection
};

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

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

let palette       = [];
let shapes        = [];    // { ink, d }
let segmentRecords = [];   // [x1,y1,x2,y2]

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

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

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

const lerpVal = (a,b,t) => a + (b - a) * t;

// Strict segment intersection test
function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1=orient(x1,y1,x2,y2,x3,y3),
        o2=orient(x1,y1,x2,y2,x4,y4),
        o3=orient(x3,y3,x4,y4,x1,y1),
        o4=orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx,
        right  = canvasW - marginPx,
        top    = marginPx,
        bottom = canvasH - marginPx,
        workH  = bottom - top;

  const spacing   = random(generationRules.lineSpacingMin, generationRules.lineSpacingMax);
  const yStep     = 3;  // px per segment
  const skipDist  = generationRules.intersectionGap;

  // build carriers
  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    // precompute X & t at each step
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);

    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq*(1/steps);
    }

    // draw with gap logic
    let skipped = 0;
    let skipRemainingDist = 0;

    for(let i=0;i<steps;i++){
      const xA = xs[i],     yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1],   yB = top + (i+1)*((bottom-top)/steps);
      const segLen = dist(xA,yA,xB,yB);

      if(skipRemainingDist > 0){
        skipRemainingDist = max(0, skipRemainingDist - segLen);
        if(skipRemainingDist > 0) continue;
      }

      // intersection?
      let collision = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          collision = true;
          break;
        }
      }
      if(collision){
        skipRemainingDist = skipDist;
        continue;
      }

      // choose ink
      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p)%palette.length;
      let ink     = palette[idx];

      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1)%palette.length];
          const zf   = (frac - (1-generationRules.ditherZone))/generationRules.ditherZone;
          if(random()<zf) ink = next;
        }
      }

      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB]);
    }
  });

  drawPreview();
}

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

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

  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        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 ------------------------------------------------ */

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=>{
    const name = `${dayNumber}-0${ci}-${colors[ci].name.toLowerCase()}-${colors[ci].ink}-${colors[ci].width}-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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, weaving currents, gradient dither,
              identity tapestry, algorithmic motion, pen plotter,
              layered oscillation, dynamic separation, subtle transitions

### Conceptual Framework

I envision myself as a weaving tapestry of luminous currents,
each strand flowing in harmony while maintaining its own hue.
Subtle shifts of colour ripple along sine‑like threads,
and whenever two currents near each other, they part gracefully—
preserving the integrity of each line. The result is a vibrant
field of interlaced motion, where unity and individuality coexist
in seamless drift.

### Technical Approach

Continuous sine waves are generated per vertical spine, with amplitude and frequency
varying linearly from top to bottom. Colours come from a fixed palette and can be
mixed in a small “dither” zone at segment ends. To avoid crossings, each new segment
is tested against all existing segments—if it would intersect, it’s skipped for a
configurable gap distance. All drawn segments are recorded in `shapes[]`, and every
stroke in `segmentRecords[]` to guarantee the on‑canvas preview and SVG exports match
pixel‑perfectly.

`generationRules` stores every tunable parameter:
- `workAreaMarginMin` / `Max`
- `paletteCountMin` / `Max`
- `lineSpacingMin` / `Max`
- `ampTop` / `ampBot`
- `freqTop` / `freqBot`
- `phaseWrap`
- `gradientMode`
- `ditherZone`
- `intersectionGap`

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 5,    // px
  lineSpacingMax    : 25,   // px

  ampTop            : 0.2,  // fraction of spacing
  ampBot            : 1.0,

  freqTop           : 0.5,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 1.0,       // full segment mixing

  intersectionGap   : 10         // px to skip on intersection
};

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

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

let palette        = [];
let shapes         = [];  // { ink:int, d:string }
let segmentRecords = [];  // [[x1,y1,x2,y2],...]

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

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

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

const lerpVal = (a,b,t) => a + (b - a) * t;

function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1 = orient(x1,y1,x2,y2,x3,y3),
        o2 = orient(x1,y1,x2,y2,x4,y4),
        o3 = orient(x3,y3,x4,y4,x1,y1),
        o4 = orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx,
        right  = canvasW - marginPx,
        top    = marginPx,
        bottom = canvasH - marginPx,
        workH  = bottom - top;

  const spacing  = random(generationRules.lineSpacingMin, generationRules.lineSpacingMax);
  const yStep    = 3;
  const skipDist = generationRules.intersectionGap;

  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);

    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t) * spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq * (1/steps);
    }

    let skipRemaining = 0;
    for(let i=0;i<steps;i++){
      const xA = xs[i],   yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1], yB = top + (i+1)*((bottom-top)/steps);
      const segLen = dist(xA,yA,xB,yB);

      if(skipRemaining > 0){
        skipRemaining = max(0, skipRemaining - segLen);
        if(skipRemaining > 0) continue;
      }

      let intersects = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          intersects = true;
          break;
        }
      }
      if(intersects){
        skipRemaining = skipDist;
        continue;
      }

      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      let ink     = palette[idx];

      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1) % palette.length];
          const zf   = (frac - (1-generationRules.ditherZone))/generationRules.ditherZone;
          if(random() < zf) ink = next;
        }
      }

      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB]);
    }
  });

  drawPreview();
}

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

function drawPreview(){
  background(255);
  noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing = false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        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 ------------------------------------------------ */

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 col = colors[ci];
    const name = `${dayNumber}-0${ci}-${col.name.toUpperCase()}-${col.ink}-${col.width}-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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, weaving currents, gradient dither,
              identity tapestry, algorithmic motion, pen plotter,
              layered oscillation, dynamic separation, subtle transitions

### Conceptual Framework

I envision myself as a weaving tapestry of luminous currents,
each strand flowing in harmony while maintaining its own hue.
Subtle shifts of colour ripple along sine‑like threads,
and whenever two currents near each other, they part gracefully—
preserving the integrity of each line. The result is a vibrant
field of interlaced motion, where unity and individuality coexist
in seamless drift.

### Technical Approach

Continuous sine waves are generated per vertical spine, with amplitude and frequency
varying linearly from top to bottom. Colours come from a fixed palette and can be
mixed in a small “dither” zone at segment ends. To avoid crossings, each new segment
is tested against all existing segments—if it would intersect, half of the configured
gap distance is removed **before** the intersection (by popping recent segments) and
the other half is skipped **after**, creating a perfectly centered pause. All drawn
segments are recorded in `shapes[]`, and every stroke in `segmentRecords[]` (with
lengths) to guarantee the on‑canvas preview and SVG exports match pixel‑perfectly.

`generationRules` stores every tunable parameter:
- `workAreaMarginMin` / `Max`
- `paletteCountMin` / `Max`
- `lineSpacingMin` / `Max`
- `ampTop` / `ampBot`
- `freqTop` / `freqBot`
- `phaseWrap`
- `gradientMode`
- `ditherZone`
- **`intersectionGap`**

---
*/

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

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

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   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 5,    // px
  lineSpacingMax    : 25,   // px

  ampTop            : 0.2,  // fraction of spacing
  ampBot            : 1.0,

  freqTop           : 0.5,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',  // 'solid' or 'dither'
  ditherZone        : 1.0,       // full segment mixing

  intersectionGap   : 10         // px to remove before and after
};

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

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

let palette        = [];
let shapes         = [];  // { ink:int, d:string }
let segmentRecords = [];  // [x1,y1,x2,y2,length]

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

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

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

const lerpVal = (a,b,t) => a + (b - a) * t;

function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1 = orient(x1,y1,x2,y2,x3,y3),
        o2 = orient(x1,y1,x2,y2,x4,y4),
        o3 = orient(x3,y3,x4,y4,x1,y1),
        o4 = orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx,
        right  = canvasW - marginPx,
        top    = marginPx,
        bottom = canvasH - marginPx,
        workH  = bottom - top;

  const spacing  = random(generationRules.lineSpacingMin, generationRules.lineSpacingMax);
  const yStep    = 3;
  const halfGap  = generationRules.intersectionGap / 2;

  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);

    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq * (1/steps);
    }

    let skipRem = 0;
    for(let i=0;i<steps;i++){
      const xA = xs[i],   yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1], yB = top + (i+1)*((bottom-top)/steps);
      const segLen = dist(xA,yA,xB,yB);

      // skip after half-gap
      if(skipRem > 0){
        skipRem = max(0, skipRem - segLen);
        if(skipRem > 0) continue;
      }

      // test intersection
      let hits = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          hits = true;
          break;
        }
      }
      if(hits){
        // remove backwards until half-gap covered
        let backRem = halfGap;
        while(backRem > 0 && segmentRecords.length){
          const last = segmentRecords.pop();
          backRem -= last[4];
          shapes.pop();
        }
        skipRem = halfGap;  // skip forward half-gap
        continue;
      }

      // choose ink
      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      let ink     = palette[idx];
      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1)%palette.length];
          const zf   = (frac - (1-generationRules.ditherZone))/generationRules.ditherZone;
          if(random() < zf) ink = next;
        }
      }

      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB,segLen]);
    }
  });

  drawPreview();
}

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

function drawPreview(){
  background(255);
  noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing=false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        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 ------------------------------------------------ */

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 col = colors[ci];
    const name = `${dayNumber}-0${ci}-${col.name.toUpperCase()}-${col.ink}-${col.width}-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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

let generationRules = {
  workAreaMarginMin : 1.5,
  workAreaMarginMax : 3.0,
  paletteCountMin   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 8,     // px
  lineSpacingMax    : 20,    // px

  ampTop            : 0.2,   // fraction of spacing
  ampBot            : 1.0,   // moderate bottom swell

  freqTop           : 0.75,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',
  ditherZone        : 1.0,   // full segment mixing

  intersectionGap   : 12     // px to remove before & after
};

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, weaving currents, gradient dither,
              identity tapestry, algorithmic motion, pen plotter,
              layered oscillation, dynamic separation, subtle transitions

### Conceptual Framework

I envision myself as a weaving tapestry of luminous currents,
each strand flowing in harmony while maintaining its own hue.
Subtle shifts of colour ripple along sine‑like threads,
and whenever two currents near each other, they part gracefully—
preserving the integrity of each line. The result is a vibrant
field of interlaced motion, where unity and individuality coexist
in seamless drift.

### Technical Approach

Continuous sine waves are generated per vertical spine, with amplitude and frequency
varying linearly from top to bottom. Colours come from a fixed palette and can be
mixed in a small “dither” zone at segment ends. To avoid crossings, each new segment
is tested against all existing segments—if it would intersect, half of the configured
gap distance is removed **before** the intersection (by popping recent segments) and
the full gap **plus** that segment’s length is skipped **after**, creating a perfectly
centered pause. All drawn segments are recorded in `shapes[]`, and every stroke in
`segmentRecords[]` (with lengths) to guarantee the on‑canvas preview and SVG exports
match pixel‑perfectly.

`generationRules` stores every tunable parameter:
- `workAreaMarginMin` / `Max`
- `paletteCountMin` / `Max`
- `lineSpacingMin` / `Max`
- `ampTop` / `ampBot`
- `freqTop` / `freqBot`
- `phaseWrap`
- `gradientMode`
- `ditherZone`
- **`intersectionGap`**

---
*/

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

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

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.0,
  paletteCountMin   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 8,     // px
  lineSpacingMax    : 20,    // px

  ampTop            : 0.2,   // fraction of spacing
  ampBot            : 1.0,   // moderate bottom swell

  freqTop           : 0.75,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',
  ditherZone        : 1.0,   // full segment mixing

  intersectionGap   : 12     // px to remove before & after
};

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

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

let palette        = [];
let shapes         = [];  // { ink:int, d:string }
let segmentRecords = [];  // [x1,y1,x2,y2,length]

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

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

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

const lerpVal = (a,b,t) => a + (b - a) * t;

// Strict segment‐intersection test
function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1 = orient(x1,y1,x2,y2,x3,y3),
        o2 = orient(x1,y1,x2,y2,x4,y4),
        o3 = orient(x3,y3,x4,y4,x1,y1),
        o4 = orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx,
        right  = canvasW - marginPx,
        top    = marginPx,
        bottom = canvasH - marginPx,
        workH  = bottom - top;

  const spacing  = random(generationRules.lineSpacingMin, generationRules.lineSpacingMax);
  const yStep    = 3;
  const halfGap  = generationRules.intersectionGap / 2;

  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);

    // precompute X positions & t
    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq * (1/steps);
    }

    // draw with centered gap on intersection
    let skipRemaining = 0;
    for(let i=0;i<steps;i++){
      const xA = xs[i],   yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1], yB = top + (i+1)*((bottom-top)/steps);
      const segLen = dist(xA,yA,xB,yB);

      // still skipping forward?
      if(skipRemaining > 0){
        skipRemaining = max(0, skipRemaining - segLen);
        if(skipRemaining > 0) continue;
      }

      // test intersection
      let collides = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          collides = true;
          break;
        }
      }
      if(collides){
        // **remove** backwards until halfGap covered
        let backRem = halfGap;
        while(backRem > 0 && segmentRecords.length){
          const last = segmentRecords.pop();
          backRem -= last[4];
          shapes.pop();
        }
        // **skip** forward for (halfGap + this segment length)
        skipRemaining = halfGap + segLen;
        continue;
      }

      // choose ink and dither if needed
      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      let ink     = palette[idx];
      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1) % palette.length];
          const zf   = (frac - (1-generationRules.ditherZone)) / generationRules.ditherZone;
          if(random() < zf) ink = next;
        }
      }

      // record & draw
      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB,segLen]);
    }
  });

  drawPreview();
}

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

function drawPreview(){
  background(255);
  noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing = false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        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 ------------------------------------------------ */

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=>{
    const col = colors[ci];
    const name = `${dayNumber}-0${ci}-${col.name.toUpperCase()}-${col.ink}-${col.width}-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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/

lineSpacingMin    : 8,     // bring columns closer
lineSpacingMax    : 20,

ampBot            : 1.0,   // slightly smaller bulbs

freqTop           : 0.5,   // restore some upper motion

intersectionGap   : 12     // still a clear pause, but not huge

// Day 175
/*

=======================================
  Day 175 Self‑Portrait (Gradient Drift)
=======================================

### Title: *Gradient Drift*

### Medium: Generative Drawing on Paper

### Keywords: generative art, weaving currents, gradient dither,
              identity tapestry, algorithmic motion, pen plotter,
              layered oscillation, dynamic separation, subtle transitions

### Conceptual Framework

I envision myself as a weaving tapestry of luminous currents,
each strand flowing in harmony while maintaining its own hue.
Subtle shifts of colour ripple along sine‑like threads,
and whenever two currents near each other, they part gracefully—
preserving the integrity of each line. The result is a vibrant
field of interlaced motion, where unity and individuality coexist
in seamless drift.

### Technical Approach

Continuous sine waves are generated per vertical spine, with amplitude and frequency
varying linearly from top to bottom. Colours come from a fixed palette and can be
mixed in a small “dither” zone at segment ends. To avoid crossings, each new segment
is tested against all previously drawn segments—if it would intersect, half of the
configured gap distance is removed before the collision (by popping recent segments)
and then the full gap plus that segment’s length is skipped after, creating a
perfectly centered pause. All drawn segments are recorded in `shapes[]` and their
coordinates and lengths in `segmentRecords[]` so that the on‑canvas preview and
SVG exports remain pixel‑perfectly consistent.

generationRules:
- workAreaMarginMin / Max  
- paletteCountMin / Max  
- lineSpacingMin / Max  
- ampTop / ampBot  
- freqTop / freqBot  
- phaseWrap  
- gradientMode / ditherZone  
- intersectionGap  

---
*/

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

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

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.0,
  paletteCountMin   : 2,
  paletteCountMax   : 9,

  lineSpacingMin    : 8,    // px
  lineSpacingMax    : 20,   // px

  ampTop            : 0.2,  // fraction of spacing
  ampBot            : 1.0,  // moderate bottom swell

  freqTop           : 0.5,  // cycles per full height
  freqBot           : 6.0,

  phaseWrap         : Math.PI * 2,

  gradientMode      : 'dither',
  ditherZone        : 1.0,  // full segment mixing

  intersectionGap   : 12    // px to remove before & after
};

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

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

let palette        = [];
let shapes         = [];  // { ink:int, d:string }
let segmentRecords = [];  // [x1,y1,x2,y2,length]

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

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

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

const lerpVal = (a,b,t) => a + (b - a) * t;

function segIntersect([x1,y1,x2,y2], [x3,y3,x4,y4]){
  function orient(x1,y1,x2,y2,x3,y3){
    return (x2-x1)*(y3-y1) - (y2-y1)*(x3-x1);
  }
  const o1 = orient(x1,y1,x2,y2,x3,y3),
        o2 = orient(x1,y1,x2,y2,x4,y4),
        o3 = orient(x3,y3,x4,y4,x1,y1),
        o4 = orient(x3,y3,x4,y4,x2,y2);
  return o1*o2<0 && o3*o4<0;
}

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

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

  strokeWeightValue = 2;
  strokeWeight(strokeWeightValue);

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

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

  regenerate();
}

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

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

function regenerate(){
  shapes.length = 0;
  segmentRecords.length = 0;

  const left   = marginPx,
        right  = canvasW - marginPx,
        top    = marginPx,
        bottom = canvasH - marginPx,
        workH  = bottom - top;

  const spacing  = random(generationRules.lineSpacingMin, generationRules.lineSpacingMax);
  const yStep    = 3;
  const halfGap  = generationRules.intersectionGap / 2;

  const carriers = [];
  for(let x=left+spacing/2; x<=right-spacing/2+0.1; x+=spacing){
    carriers.push(x);
  }

  carriers.forEach((x0,colIdx)=>{
    const steps = ceil((bottom-top)/yStep);
    let phase = random(0, generationRules.phaseWrap);

    // precompute X positions & t
    const xs = [], ts = [];
    for(let i=0;i<=steps;i++){
      const y = top + i*((bottom-top)/steps);
      const t = (y-top)/workH;
      const amp  = lerpVal(generationRules.ampTop, generationRules.ampBot, t)*spacing;
      const freq = lerpVal(generationRules.freqTop, generationRules.freqBot, t);
      xs[i] = x0 + amp * sin(phase);
      ts[i] = t;
      phase += generationRules.phaseWrap * freq * (1/steps);
    }

    // draw with centered gap on intersection
    let skipRemaining = 0;
    for(let i=0;i<steps;i++){
      const xA = xs[i],   yA = top + i*((bottom-top)/steps);
      const xB = xs[i+1], yB = top + (i+1)*((bottom-top)/steps);
      const segLen = dist(xA,yA,xB,yB);

      if(skipRemaining > 0){
        skipRemaining = max(0, skipRemaining - segLen);
        if(skipRemaining > 0) continue;
      }

      let collides = false;
      for(const rec of segmentRecords){
        if(segIntersect([xA,yA,xB,yB], rec)){
          collides = true;
          break;
        }
      }
      if(collides){
        // remove backwards until halfGap covered
        let backRem = halfGap;
        while(backRem > 0 && segmentRecords.length){
          const last = segmentRecords.pop();
          backRem -= last[4];
          shapes.pop();
        }
        // skip forward halfGap + this segment
        skipRemaining = halfGap + segLen;
        continue;
      }

      const shift = colIdx / carriers.length;
      const p     = (ts[i] + shift)*palette.length;
      const idx   = floor(p) % palette.length;
      let ink     = palette[idx];
      if(generationRules.gradientMode==='dither'){
        const frac = p - floor(p);
        if(frac > 1 - generationRules.ditherZone){
          const next = palette[(idx+1) % palette.length];
          const zf   = (frac - (1-generationRules.ditherZone)) / generationRules.ditherZone;
          if(random() < zf) ink = next;
        }
      }

      const d = `M${xA.toFixed(2)},${yA.toFixed(2)} L${xB.toFixed(2)},${yB.toFixed(2)}`;
      shapes.push({ ink, d });
      segmentRecords.push([xA,yA,xB,yB,segLen]);
    }
  });

  drawPreview();
}

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

function drawPreview(){
  background(255);
  noFill();
  shapes.forEach(s=>{
    applyStrokeWithOpacity(colors[s.ink].hex);
    strokeWeight(strokeWeightValue);
    const cmds = s.d.split(/s+/);
    beginShape();
    let drawing = false;
    cmds.forEach(cmd=>{
      const type = cmd[0];
      const [x,y] = cmd.slice(1).split(',').map(Number);
      if(type==='M'){
        if(drawing) endShape();
        beginShape();
        vertex(x,y);
        drawing = true;
      } else {
        vertex(x,y);
      }
    });
    endShape();
  });
  if(showMarkers) drawMarkers();
  if(showPalette)  drawPaletteBars();
}

/* ---------- Markers & Palette ---------------------------------------- */

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

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=>{
    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: this file is complete in itself.
- All randomisable parameters live in generationRules.
- Press R to regenerate; SPACE to export all SVGs.
*/