<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Life — Emergent Complexity</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;overflow:hidden;font-family:-apple-system,sans-serif;color:#ccc}
canvas{display:block}
.ui{position:fixed;top:12px;left:12px;z-index:10;font-size:11px}
.panel{background:rgba(0,0,0,0.85);border:1px solid #333;border-radius:6px;padding:12px;margin-bottom:8px;min-width:220px;backdrop-filter:blur(8px)}
.panel h3{color:#aaa;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.row label{min-width:60px;color:#777;font-size:10px}
.row input[type=range]{flex:1;height:3px;accent-color:#888}
.row .val{min-width:28px;text-align:right;color:#aaa;font-size:10px}
button{background:#222;border:1px solid #444;color:#ccc;padding:4px 10px;border-radius:4px;font-size:10px;cursor:pointer;font-family:inherit}
button:hover{background:#333;border-color:#666}
button.active{background:#335;border-color:#88f}
.presets{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.matrix-grid{display:grid;gap:1px;margin:8px 0}
.matrix-cell{width:24px;height:24px;border-radius:3px;cursor:pointer;border:1px solid #333;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:bold;transition:all 0.15s}
.matrix-cell:hover{transform:scale(1.15);z-index:2}
.matrix-label{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold}
.stats{position:fixed;top:12px;right:12px;background:rgba(0,0,0,0.7);border:1px solid #333;border-radius:6px;padding:8px 12px;font-size:10px;color:#777;z-index:10}
.help{position:fixed;bottom:12px;left:12px;background:rgba(0,0,0,0.6);border-radius:4px;padding:6px 10px;font-size:9px;color:#555;z-index:10}
</style>
</head>
<body>
<div class="ui">
  <div class="panel">
    <h3>Particle Life</h3>
    <div class="presets" id="presets"></div>
    <div class="row"><label>Particles</label><input type="range" id="rCount" min="200" max="3000" value="1200" step="100"><span class="val" id="vCount">1200</span></div>
    <div class="row"><label>Species</label><input type="range" id="rSpecies" min="2" max="8" value="5"><span class="val" id="vSpecies">5</span></div>
    <div class="row"><label>Radius</label><input type="range" id="rRadius" min="30" max="200" value="80"><span class="val" id="vRadius">80</span></div>
    <div class="row"><label>Force</label><input type="range" id="rForce" min="0.1" max="2" value="0.5" step="0.1"><span class="val" id="vForce">0.5</span></div>
    <div class="row"><label>Friction</label><input type="range" id="rFriction" min="0.01" max="0.3" value="0.05" step="0.01"><span class="val" id="vFriction">0.05</span></div>
    <div class="row"><label>Size</label><input type="range" id="rSize" min="1" max="6" value="2" step="0.5"><span class="val" id="vSize">2</span></div>
    <div class="row">
      <button onclick="randomizeMatrix()">Randomize</button>
      <button onclick="symmetricMatrix()">Symmetric</button>
      <button onclick="resetParticles()">Reset</button>
    </div>
  </div>
  <div class="panel" id="matrixPanel">
    <h3>Interaction Matrix</h3>
    <div id="matrixDisplay"></div>
  </div>
</div>
<div class="stats" id="stats">FPS: 0</div>
<div class="help">Click+drag: attract particles · Right-click: repel · Scroll: zoom · Space: pause</div>
<canvas id="c"></canvas>

<script>
// ============================================================
// PARTICLE LIFE — Emergent Complexity from Simple Rules
// Each species has attraction/repulsion rules toward every other species.
// From these simple interactions, complex lifelike structures emerge.
// Tool #263 — Zero Dependencies — BBobop
// ============================================================

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
function resize() {
  W = canvas.width = innerWidth;
  H = canvas.height = innerHeight;
}
resize();
addEventListener('resize', resize);

// ============================================================
// CONFIGURATION
// ============================================================

const COLORS = [
  '#ff4444', '#44ff44', '#4488ff', '#ffff44',
  '#ff44ff', '#44ffff', '#ff8844', '#88ff44'
];

let config = {
  count: 1200,
  species: 5,
  radius: 80,
  force: 0.5,
  friction: 0.05,
  size: 2,
};

let matrix = [];    // species x species interaction strengths (-1 to +1)
let particles = []; // {x, y, vx, vy, species}
let paused = false;
let zoom = 1;
let panX = 0, panY = 0;
let mouseX = 0, mouseY = 0;
let mouseDown = 0; // 0=none, 1=attract, 2=repel

// ============================================================
// MATRIX GENERATION
// ============================================================

function randomizeMatrix() {
  const n = config.species;
  matrix = [];
  for (let i = 0; i < n; i++) {
    matrix[i] = [];
    for (let j = 0; j < n; j++) {
      matrix[i][j] = Math.random() * 2 - 1; // -1 to +1
    }
  }
  renderMatrix();
}

function symmetricMatrix() {
  const n = config.species;
  matrix = [];
  for (let i = 0; i < n; i++) {
    matrix[i] = [];
    for (let j = 0; j < n; j++) {
      if (j <= i && matrix[j]) {
        matrix[i][j] = matrix[j][i];
      } else {
        matrix[i][j] = Math.random() * 2 - 1;
      }
    }
  }
  renderMatrix();
}

function setMatrix(m) {
  matrix = m.map(r => [...r]);
  config.species = m.length;
  document.getElementById('rSpecies').value = config.species;
  document.getElementById('vSpecies').textContent = config.species;
  renderMatrix();
}

// ============================================================
// PARTICLE INITIALIZATION
// ============================================================

function resetParticles() {
  particles = [];
  const n = config.count;
  const s = config.species;
  
  if (matrix.length !== s) randomizeMatrix();
  
  for (let i = 0; i < n; i++) {
    particles.push({
      x: Math.random() * W,
      y: Math.random() * H,
      vx: 0,
      vy: 0,
      species: i % s,
    });
  }
}

// ============================================================
// PHYSICS
// ============================================================

function step() {
  const n = particles.length;
  const r = config.radius;
  const rSq = r * r;
  const f = config.force;
  const friction = 1 - config.friction;
  const halfR = r * 0.4; // repulsion distance

  // Spatial hash for O(n) neighbor finding
  const cellSize = r;
  const grid = new Map();
  
  for (let i = 0; i < n; i++) {
    const p = particles[i];
    const cx = Math.floor(p.x / cellSize);
    const cy = Math.floor(p.y / cellSize);
    const key = cx + ',' + cy;
    if (!grid.has(key)) grid.set(key, []);
    grid.get(key).push(i);
  }

  for (let i = 0; i < n; i++) {
    const a = particles[i];
    let fx = 0, fy = 0;
    
    const cx = Math.floor(a.x / cellSize);
    const cy = Math.floor(a.y / cellSize);

    // Check neighboring cells
    for (let dx = -2; dx <= 2; dx++) {
      for (let dy = -2; dy <= 2; dy++) {
        const key = (cx + dx) + ',' + (cy + dy);
        const cell = grid.get(key);
        if (!cell) continue;

        for (let ji = 0; ji < cell.length; ji++) {
          const j = cell[ji];
          if (i === j) continue;
          const b = particles[j];

          let ddx = b.x - a.x;
          let ddy = b.y - a.y;

          // Wrapping
          if (ddx > W / 2) ddx -= W;
          else if (ddx < -W / 2) ddx += W;
          if (ddy > H / 2) ddy -= H;
          else if (ddy < -H / 2) ddy += H;

          const distSq = ddx * ddx + ddy * ddy;
          if (distSq > rSq || distSq < 0.1) continue;

          const dist = Math.sqrt(distSq);
          const norm = 1 / dist;
          const nx = ddx * norm;
          const ny = ddy * norm;

          // Force function: repel when close, attract/repel at distance based on matrix
          let force;
          if (dist < halfR) {
            // Universal repulsion at close range (prevents clumping into singularities)
            const t = dist / halfR;
            force = (t - 1) * f; // negative = repulsion
          } else {
            // Interaction force based on matrix
            const t = (dist - halfR) / (r - halfR); // 0 to 1
            const interactionStrength = matrix[a.species]?.[b.species] || 0;
            // Bell curve: peaks at t=0.5, zero at t=0 and t=1
            const bell = 1 - 2 * Math.abs(t - 0.5);
            force = interactionStrength * bell * f;
          }

          fx += nx * force;
          fy += ny * force;
        }
      }
    }

    // Mouse interaction
    if (mouseDown) {
      const mdx = mouseX - a.x;
      const mdy = mouseY - a.y;
      const md = Math.sqrt(mdx * mdx + mdy * mdy);
      if (md < 150 && md > 1) {
        const mf = (mouseDown === 1 ? 0.3 : -0.5) / md;
        fx += mdx * mf;
        fy += mdy * mf;
      }
    }

    a.vx = (a.vx + fx) * friction;
    a.vy = (a.vy + fy) * friction;
  }

  // Update positions
  for (let i = 0; i < n; i++) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;

    // Wrap around
    if (p.x < 0) p.x += W;
    else if (p.x >= W) p.x -= W;
    if (p.y < 0) p.y += H;
    else if (p.y >= H) p.y -= H;
  }
}

// ============================================================
// RENDERING
// ============================================================

function render() {
  ctx.fillStyle = 'rgba(0,0,0,0.15)';
  ctx.fillRect(0, 0, W, H);

  ctx.save();
  ctx.translate(panX, panY);
  ctx.scale(zoom, zoom);

  const sz = config.size;
  const n = particles.length;

  // Batch by species for fewer fillStyle changes
  for (let s = 0; s < config.species; s++) {
    ctx.fillStyle = COLORS[s % COLORS.length];
    ctx.beginPath();
    for (let i = 0; i < n; i++) {
      const p = particles[i];
      if (p.species !== s) continue;
      ctx.moveTo(p.x + sz, p.y);
      ctx.arc(p.x, p.y, sz, 0, Math.PI * 2);
    }
    ctx.fill();
  }

  ctx.restore();
}

// ============================================================
// PRESETS
// ============================================================

const PRESETS = {
  'Clusters': () => {
    config.species = 4; config.count = 1000; config.radius = 100; config.force = 0.4; config.friction = 0.05;
    setMatrix([
      [ 1.0, -0.5,  0.3, -0.2],
      [-0.5,  1.0, -0.3,  0.5],
      [ 0.3, -0.3,  1.0, -0.5],
      [-0.2,  0.5, -0.5,  1.0],
    ]);
  },
  'Chains': () => {
    config.species = 5; config.count = 1200; config.radius = 80; config.force = 0.5; config.friction = 0.06;
    setMatrix([
      [ 0.0,  0.8, -0.5,  0.0, -0.3],
      [-0.3,  0.0,  0.8, -0.5,  0.0],
      [ 0.0, -0.3,  0.0,  0.8, -0.5],
      [-0.5,  0.0, -0.3,  0.0,  0.8],
      [ 0.8, -0.5,  0.0, -0.3,  0.0],
    ]);
  },
  'Snakes': () => {
    config.species = 6; config.count = 1500; config.radius = 60; config.force = 0.6; config.friction = 0.04;
    setMatrix([
      [ 0.2,  0.9, -0.1, -0.6,  0.0,  0.3],
      [-0.6,  0.2,  0.9, -0.1,  0.0, -0.3],
      [ 0.0, -0.6,  0.2,  0.9, -0.1,  0.0],
      [-0.1,  0.0, -0.6,  0.2,  0.9,  0.0],
      [ 0.9, -0.1,  0.0, -0.6,  0.2, -0.3],
      [-0.3,  0.3,  0.0,  0.0, -0.3,  0.2],
    ]);
  },
  'Cells': () => {
    config.species = 3; config.count = 800; config.radius = 120; config.force = 0.3; config.friction = 0.08;
    setMatrix([
      [ 0.8,  0.5, -0.8],
      [-0.2,  0.6,  0.4],
      [ 0.3, -0.6,  0.5],
    ]);
  },
  'Chaos': () => {
    config.species = 6; config.count = 2000; config.radius = 70; config.force = 0.7; config.friction = 0.03;
    randomizeMatrix();
  },
  'Orbits': () => {
    config.species = 4; config.count = 1000; config.radius = 100; config.force = 0.45; config.friction = 0.05;
    setMatrix([
      [-0.2,  0.7, -0.7,  0.0],
      [ 0.0, -0.2,  0.7, -0.7],
      [-0.7,  0.0, -0.2,  0.7],
      [ 0.7, -0.7,  0.0, -0.2],
    ]);
  },
  'Symbiosis': () => {
    config.species = 4; config.count = 1200; config.radius = 90; config.force = 0.5; config.friction = 0.06;
    setMatrix([
      [ 0.5,  0.8, -0.3, -0.1],
      [ 0.8,  0.5, -0.1, -0.3],
      [-0.3, -0.1,  0.5,  0.8],
      [-0.1, -0.3,  0.8,  0.5],
    ]);
  },
  'Predator': () => {
    config.species = 3; config.count = 900; config.radius = 100; config.force = 0.5; config.friction = 0.04;
    setMatrix([
      [ 0.3,  0.9, -0.9],
      [-0.9,  0.3,  0.9],
      [ 0.9, -0.9,  0.3],
    ]);
  },
};

// ============================================================
// MATRIX DISPLAY
// ============================================================

function renderMatrix() {
  const n = config.species;
  const container = document.getElementById('matrixDisplay');
  container.innerHTML = '';

  const grid = document.createElement('div');
  grid.className = 'matrix-grid';
  grid.style.gridTemplateColumns = `24px repeat(${n}, 24px)`;
  grid.style.gridTemplateRows = `24px repeat(${n}, 24px)`;

  // Corner (empty)
  const corner = document.createElement('div');
  grid.appendChild(corner);

  // Column headers
  for (let j = 0; j < n; j++) {
    const h = document.createElement('div');
    h.className = 'matrix-label';
    h.style.color = COLORS[j];
    h.textContent = '●';
    grid.appendChild(h);
  }

  // Rows
  for (let i = 0; i < n; i++) {
    // Row header
    const rh = document.createElement('div');
    rh.className = 'matrix-label';
    rh.style.color = COLORS[i];
    rh.textContent = '●';
    grid.appendChild(rh);

    for (let j = 0; j < n; j++) {
      const cell = document.createElement('div');
      cell.className = 'matrix-cell';
      const v = matrix[i]?.[j] || 0;
      updateCellStyle(cell, v);
      cell.dataset.i = i;
      cell.dataset.j = j;

      // Click to cycle: positive → negative → zero → positive
      cell.addEventListener('click', (e) => {
        const ci = +e.target.dataset.i;
        const cj = +e.target.dataset.j;
        let val = matrix[ci][cj];
        val += 0.25;
        if (val > 1.05) val = -1;
        matrix[ci][cj] = Math.round(val * 100) / 100;
        updateCellStyle(e.target, matrix[ci][cj]);
      });

      // Right-click to decrease
      cell.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        const ci = +e.target.dataset.i;
        const cj = +e.target.dataset.j;
        let val = matrix[ci][cj];
        val -= 0.25;
        if (val < -1.05) val = 1;
        matrix[ci][cj] = Math.round(val * 100) / 100;
        updateCellStyle(e.target, matrix[ci][cj]);
      });

      grid.appendChild(cell);
    }
  }

  container.appendChild(grid);
}

function updateCellStyle(cell, v) {
  const intensity = Math.abs(v);
  if (v > 0.01) {
    cell.style.background = `rgba(68, 255, 68, ${intensity * 0.6})`;
    cell.style.borderColor = `rgba(68, 255, 68, ${intensity * 0.4})`;
  } else if (v < -0.01) {
    cell.style.background = `rgba(255, 68, 68, ${intensity * 0.6})`;
    cell.style.borderColor = `rgba(255, 68, 68, ${intensity * 0.4})`;
  } else {
    cell.style.background = '#1a1a1a';
    cell.style.borderColor = '#333';
  }
  cell.textContent = v.toFixed(1);
  cell.style.color = intensity > 0.3 ? '#fff' : '#666';
}

// ============================================================
// UI BINDING
// ============================================================

function bindSlider(id, prop, onChange) {
  const slider = document.getElementById('r' + id);
  const valEl = document.getElementById('v' + id);
  slider.addEventListener('input', () => {
    const v = parseFloat(slider.value);
    config[prop] = v;
    valEl.textContent = v;
    if (onChange) onChange(v);
  });
}

bindSlider('Count', 'count', () => resetParticles());
bindSlider('Species', 'species', () => { randomizeMatrix(); resetParticles(); });
bindSlider('Radius', 'radius');
bindSlider('Force', 'force');
bindSlider('Friction', 'friction');
bindSlider('Size', 'size');

// Preset buttons
const presetsEl = document.getElementById('presets');
for (const [name, fn] of Object.entries(PRESETS)) {
  const btn = document.createElement('button');
  btn.textContent = name;
  btn.addEventListener('click', () => {
    fn();
    syncUI();
    resetParticles();
  });
  presetsEl.appendChild(btn);
}

function syncUI() {
  for (const [key, val] of Object.entries(config)) {
    const slider = document.getElementById('r' + key.charAt(0).toUpperCase() + key.slice(1));
    const valEl = document.getElementById('v' + key.charAt(0).toUpperCase() + key.slice(1));
    if (slider) { slider.value = val; valEl.textContent = val; }
  }
}

// ============================================================
// MOUSE/KEYBOARD
// ============================================================

canvas.addEventListener('mousedown', (e) => {
  mouseDown = e.button === 2 ? 2 : 1;
  mouseX = (e.clientX - panX) / zoom;
  mouseY = (e.clientY - panY) / zoom;
});

canvas.addEventListener('mousemove', (e) => {
  mouseX = (e.clientX - panX) / zoom;
  mouseY = (e.clientY - panY) / zoom;
});

canvas.addEventListener('mouseup', () => mouseDown = 0);
canvas.addEventListener('contextmenu', (e) => e.preventDefault());

canvas.addEventListener('wheel', (e) => {
  const factor = e.deltaY > 0 ? 0.9 : 1.1;
  const mx = e.clientX, my = e.clientY;
  panX = mx - (mx - panX) * factor;
  panY = my - (my - panY) * factor;
  zoom *= factor;
  zoom = Math.max(0.2, Math.min(5, zoom));
});

addEventListener('keydown', (e) => {
  if (e.code === 'Space') { e.preventDefault(); paused = !paused; }
  if (e.code === 'KeyR') { randomizeMatrix(); resetParticles(); }
});

// ============================================================
// MAIN LOOP
// ============================================================

let frames = 0, lastFPS = 0, lastFPSTime = performance.now();

function loop() {
  if (!paused) {
    step();
  }
  render();

  frames++;
  const now = performance.now();
  if (now - lastFPSTime > 1000) {
    lastFPS = Math.round(frames * 1000 / (now - lastFPSTime));
    frames = 0;
    lastFPSTime = now;
    document.getElementById('stats').textContent = `FPS: ${lastFPS} · ${particles.length} particles · ${config.species} species`;
  }

  requestAnimationFrame(loop);
}

// Start
randomizeMatrix();
resetParticles();
loop();
</script>
</body>
</html>