<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Growth Systems — Glyph Engine 🎼</title>

<style>
body{margin:0;background:black;color:white;font-family:sans-serif;text-align:center;}
#ui{background:#111;padding:10px;}
label{margin:5px;display:inline-block;}
canvas{border:1px solid #444;margin-top:10px;}
button{margin:5px;}
</style>
</head>
<body>

<h3>🌊 Growth Systems — Glyph Engine 🎼</h3>

<div id="ui">
<label>Ek <input type="range" id="Ek" min="0.1" max="3" step="0.01" value="1"></label>
<label>Ec <input type="range" id="Ec" min="0.1" max="3" step="0.01" value="1"></label>
<label>En <input type="range" id="En" min="0" max="2" step="0.01" value="0.2"></label>
<label><input type="checkbox" id="conserve"> Conserve</label>
<label>Zoom <input type="range" id="zoom" min="20" max="120" value="80"></label>
</div>

<button onclick="toggleAudio()">Play / Stop</button>
<button onclick="reset()">Reset</button>

<canvas id="c" width="900" height="500"></canvas>

<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");

let particles=[], zeros=[], traversals=[];
let audioCtx=null, playing=false, voices=[];
let spread=20, traversalCount=4;

// ---------- INIT ----------
function init(){

  particles=[];
  for(let i=0;i<100;i++){
    particles.push({
      x:(Math.random()-0.5)*spread,
      y:(Math.random()-0.5)*spread*0.6,
      vx:0, vy:0
    });
  }

  zeros=[];
  for(let i=0;i<5;i++){
    zeros.push({
      x:(Math.random()-0.5)*spread,
      y:(Math.random()-0.5)*spread*0.6,
      vx:0, vy:0,
      activity:0,
      pitch:220 + i*110
    });
  }

  initTraversals();
}

function initTraversals(){
  traversals=[];
  for(let i=0;i<traversalCount;i++){
    traversals.push({
      current: Math.floor(Math.random()*zeros.length),
      next: Math.floor(Math.random()*zeros.length),
      t: Math.random(),
      speed: 0.3 + Math.random()*0.7,
      history: [],
      glyph: [],
      phrase: [],
      phraseMemory: []
    });
  }
}

init();

// ---------- AUDIO ----------
function toggleAudio(){
  if(!playing){
    audioCtx = new (window.AudioContext||window.webkitAudioContext)();
    voices = zeros.map(z=>{
      let o = audioCtx.createOscillator();
      let g = audioCtx.createGain();
      o.connect(g); g.connect(audioCtx.destination);
      o.start();
      return {o,g};
    });
    playing=true;
  } else {
    audioCtx.close();
    playing=false;
  }
}

// ---------- COHERENCE ----------
function coherence(){
  let mx=0,my=0;
  particles.forEach(p=>{mx+=p.vx; my+=p.vy});
  mx/=particles.length; my/=particles.length;

  let varr=0;
  particles.forEach(p=>{
    let dx=p.vx-mx;
    let dy=p.vy-my;
    varr+=dx*dx+dy*dy;
  });

  return 1/(1+varr/particles.length);
}

// ---------- NODE PICK ----------
function pickNextNode(i,tr){

  let best=i, bestScore=-Infinity;

  zeros.forEach((z,j)=>{
    if(j===i) return;

    let dx=z.x-zeros[i].x;
    let dy=z.y-zeros[i].y;
    let dist=Math.sqrt(dx*dx+dy*dy)+0.01;

    let score=z.activity/dist;

    // glyph bias + mutation
    if(tr.glyph.length){
      let idx=tr.history.length % tr.glyph.length;
      let expected=tr.glyph[idx];

      if(j===expected) score+=2;

      if(Math.random()<0.2){
        let dz=zeros[expected];
        let dx=z.x-dz.x, dy=z.y-dz.y;
        let prox=1/(1+Math.sqrt(dx*dx+dy*dy));
        score+=prox*1.2;
      }
    }

    // phrase bias
    if(tr.phraseMemory.length){
      let idx=tr.history.length % tr.phraseMemory.length;
      let expected=tr.phraseMemory[idx];
      if(j===expected) score+=3;
    }

    if(score>bestScore){
      bestScore=score;
      best=j;
    }
  });

  return best;
}

// ---------- GLYPH ----------
function detectGlyph(tr){
  let h=tr.history;
  if(h.length<6) return;

  let a=h.slice(-3).join(",");
  let b=h.slice(-6,-3).join(",");

  if(a===b) tr.glyph=h.slice(-3);
}

function detectPhrase(tr){
  let p=tr.phrase;
  if(p.length<8) return;

  let a=p.slice(-4).join(",");
  let b=p.slice(-8,-4).join(",");

  if(a===b) tr.phraseMemory=p.slice(-4);
}

// ---------- STEP ----------
function step(dt){

  let Ek=+EkSlider.value;
  let Ec=+EcSlider.value;
  let En=+EnSlider.value;
  let conserve=conserveBox.checked;

  let C=coherence();

  // zeros
  zeros.forEach((z,i)=>{
    zeros.forEach((o,j)=>{
      if(i!==j){
        z.vx+=(o.x-z.x)*0.0001;
        z.vy+=(o.y-z.y)*0.0001;
      }
    });

    z.x+=z.vx*dt;
    z.y+=z.vy*dt;
    z.vx*=0.98; z.vy*=0.98;
    z.activity*=0.095;
  });

  // particles
  particles.forEach(p=>{
    let fx=0, fy=0;

    zeros.forEach(z=>{
      let dx=z.x-p.x;
      let dy=z.y-p.y;
      let d=Math.sqrt(dx*dx+dy*dy)+0.01;

      fx+=dx/(d*d);
      fy+=dy/(d*d);

      if(d<1.5) z.activity+=0.05*Ek;
    });

    let entropy=Math.abs(p.vx)+Math.abs(p.vy)+0.01;
    let G=Ec*(C/entropy);

    fx+=G*p.vx+(Math.random()-0.5)*En;
    fy+=G*p.vy+(Math.random()-0.5)*En;

    p.vx+=fx*dt*Ek;
    p.vy+=fy*dt*Ek;

    if(conserve){
      let s=Math.sqrt(p.vx*p.vx+p.vy*p.vy)+0.0001;
      p.vx*=Ek/s; p.vy*=Ek/s;
    }

    p.vx*=0.99; p.vy*=0.99;
    p.x+=p.vx*dt; p.y+=p.vy*dt;
  });

  // traversals
  traversals.forEach(tr=>{
    tr.t+=dt*tr.speed;

    if(tr.t>=1){
      tr.current=tr.next;
      tr.next=pickNextNode(tr.current,tr);
      tr.t=0;

      tr.history.push(tr.current);
      if(tr.history.length>6) tr.history.shift();

      tr.phrase.push(tr.current);
      if(tr.phrase.length>12) tr.phrase.shift();

      detectGlyph(tr);
      detectPhrase(tr);
    }
  });

  // audio
  if(playing){
    let total=Ek+Ec+En;

    zeros.forEach((z,i)=>{
      let influence=0;

      traversals.forEach(tr=>{
        if(tr.current===i) influence++;
      });

      voices[i].o.frequency.value=z.pitch*(1+Ec*C*0.2);
      voices[i].g.gain.value=z.activity*0.04*total*(1+influence);
    });
  }

  return C;
}

// ---------- DRAW ----------
function draw(C){

  let scale=+zoomSlider.value;
  let cx=canvas.width/2, cy=canvas.height/2;

  ctx.fillStyle="rgba(0,0,0,0.1)";
  ctx.fillRect(0,0,canvas.width,canvas.height);

  // particles
  particles.forEach(p=>{
    ctx.fillStyle=`hsl(${200+100*C},100%,60%)`;
    ctx.fillRect(cx+p.x*scale,cy+p.y*scale,2,2);
  });

  // edges
  for(let i=0;i<zeros.length;i++){
    for(let j=i+1;j<zeros.length;j++){

      let active=false;
      traversals.forEach(tr=>{
        if((i===tr.current&&j===tr.next)||(j===tr.current&&i===tr.next)){
          active=true;
        }
      });

      ctx.strokeStyle=active?"cyan":"rgba(150,200,255,0.2)";
      ctx.beginPath();
      ctx.moveTo(cx+zeros[i].x*scale,cy+zeros[i].y*scale);
      ctx.lineTo(cx+zeros[j].x*scale,cy+zeros[j].y*scale);
      ctx.stroke();
    }
  }

  // zeros
  zeros.forEach(z=>{
    ctx.shadowBlur=20*z.activity;
    ctx.shadowColor="white";

    ctx.beginPath();
    ctx.arc(cx+z.x*scale,cy+z.y*scale,4+z.activity*6,0,Math.PI*2);
    ctx.fillStyle="white";
    ctx.fill();
  });

  ctx.shadowBlur=0;

  // traversals
  traversals.forEach((tr,i)=>{
    let a=zeros[tr.current], b=zeros[tr.next];

    let x=a.x+(b.x-a.x)*tr.t;
    let y=a.y+(b.y-a.y)*tr.t;

    ctx.fillStyle=`hsl(${i*80},100%,60%)`;
    ctx.beginPath();
    ctx.arc(cx+x*scale,cy+y*scale,4,0,Math.PI*2);
    ctx.fill();

    // glyph
    if(tr.glyph.length){
      ctx.strokeStyle="yellow";
      ctx.beginPath();
      tr.glyph.forEach((n,k)=>{
        let z=zeros[n];
        let px=cx+z.x*scale, py=cy+z.y*scale;
        k?ctx.lineTo(px,py):ctx.moveTo(px,py);
      });
      ctx.stroke();
    }

    // phrase
    if(tr.phraseMemory.length){
      ctx.strokeStyle="magenta";
      ctx.beginPath();
      tr.phraseMemory.forEach((n,k)=>{
        let z=zeros[n];
        let px=cx+z.x*scale, py=cy+z.y*scale;
        k?ctx.lineTo(px,py):ctx.moveTo(px,py);
      });
      ctx.stroke();
    }

  });

}

// ---------- LOOP ----------
let last=performance.now();
function loop(now){
  let dt=(now-last)/1000;
  last=now;

  let C=step(dt);
  draw(C);

  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

// ---------- RESET ----------
function reset(){ init(); }

// ---------- UI ----------
const EkSlider=document.getElementById("Ek");
const EcSlider=document.getElementById("Ec");
const EnSlider=document.getElementById("En");
const conserveBox=document.getElementById("conserve");
const zoomSlider=document.getElementById("zoom");

</script>

</body>
</html>