---
layout: default
title: "Simulation #2: Ant Mill"
description: "An interactive agent-based experiment exploring ant trail-following, pheromone feedback, food sources and the emergence of circular movement."
categories: [TSAP Exhibition, Tito Dutta]
permalink: /tito/s2/
created: 2026-10-18
---

<p>This experiment models individual ants using local movement rules. Each ant senses nearby trail pheromone, deposits its own trail, responds to neighbours and searches for food. Under some conditions, positive feedback can reinforce a circular procession. The model is illustrative: it does not claim that every natural ant mill forms by exactly these mechanisms.</p>

<div id="antmill-app" class="antmill-app">
  <style>
    #antmill-app{--am-bg:#10151c;--am-panel:#19222d;--am-border:#39495a;--am-text:#f1f5f9;--am-muted:#c1ccd8;--am-blue:#83d7ff;--am-green:#75dfa0;--am-orange:#ffc477;color:var(--am-text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:1.5rem 0}
    #antmill-app *{box-sizing:border-box}
    #antmill-app .am-shell{background:var(--am-bg);border:1px solid var(--am-border);border-radius:10px;overflow:hidden}
    #antmill-app .am-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;background:#17212c;border-bottom:1px solid var(--am-border)}
    #antmill-app .am-head h2{font-size:1.1rem;line-height:1.35;margin:0;color:var(--am-text)}
    #antmill-app .am-head p{margin:.25rem 0 0;color:var(--am-muted);font-size:.88rem}
    #antmill-app .am-status{font-size:.78rem;font-weight:700;border:1px solid #52715e;border-radius:4px;padding:.35rem .5rem;color:#a8f0bd;white-space:nowrap}
    #antmill-app .am-stage{position:relative;background:#0b1117;min-height:360px}
    #antmill-app canvas{display:block;width:100%;height:clamp(360px,58vw,610px);touch-action:pan-y}
    #antmill-app .am-overlay{position:absolute;left:.75rem;top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem;max-width:calc(100% - 1.5rem);pointer-events:none}
    #antmill-app .am-chip{background:#111b25eF;border:1px solid #425366;border-radius:4px;padding:.35rem .5rem;font-size:.75rem;color:#f1f5f9}
    #antmill-app .am-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;padding:1rem;border-top:1px solid var(--am-border);background:#151e28}
    #antmill-app .am-control{min-width:0}
    #antmill-app label{display:block;font-size:.82rem;font-weight:650;color:var(--am-text);margin-bottom:.4rem}
    #antmill-app .am-value{float:right;color:var(--am-blue);font-variant-numeric:tabular-nums}
    #antmill-app input[type=range]{display:block;width:100%;accent-color:#83d7ff;min-height:24px}
    #antmill-app select,#antmill-app input[type=number]{width:100%;background:#0e151d;color:var(--am-text);border:1px solid #617286;border-radius:4px;padding:.5rem;font:inherit}
    #antmill-app .am-buttons{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem 1rem;background:#151e28}
    #antmill-app button{font:inherit;font-weight:700;cursor:pointer;border:1px solid #83d7ff;background:#174765;color:#fff;border-radius:5px;padding:.6rem .85rem}
    #antmill-app button:hover{background:#205d7d}
    #antmill-app button:focus-visible,#antmill-app input:focus-visible,#antmill-app select:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
    #antmill-app button.secondary{background:#222f3c;border-color:#73869a}
    #antmill-app button.secondary:hover{background:#314354}
    #antmill-app .am-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--am-border);border-top:1px solid var(--am-border)}
    #antmill-app .am-stat{background:#19232e;padding:.75rem}
    #antmill-app .am-stat span{display:block;color:var(--am-muted);font-size:.72rem}
    #antmill-app .am-stat strong{display:block;font-size:1.15rem;margin-top:.2rem;font-variant-numeric:tabular-nums}
    #antmill-app .am-note{padding:.85rem 1rem;background:#111a23;color:var(--am-muted);font-size:.85rem;line-height:1.55}
    #antmill-app .am-note strong{color:var(--am-text)}
    #antmill-app .am-experiments{padding:1rem;border-top:1px solid var(--am-border)}
    #antmill-app .am-experiments h3{margin:0 0 .65rem;font-size:1rem;color:var(--am-text)}
    #antmill-app .am-experiment-row{display:flex;flex-wrap:wrap;gap:.5rem}
    #antmill-app .am-help{font-size:.85rem;line-height:1.6;color:var(--am-muted);margin:.7rem 0 0}
    #antmill-app .am-legend{display:flex;flex-wrap:wrap;gap:.85rem;padding:.7rem 1rem;font-size:.78rem;color:var(--am-muted);border-top:1px solid var(--am-border)}
    #antmill-app .am-dot{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.3rem}
    @media(max-width:760px){#antmill-app .am-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}#antmill-app .am-stats{grid-template-columns:repeat(3,minmax(0,1fr))}#antmill-app .am-head{align-items:flex-start}#antmill-app .am-status{white-space:normal;text-align:center}#antmill-app canvas{height:460px}}
    @media(max-width:380px){#antmill-app .am-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#antmill-app .am-head{display:block}#antmill-app .am-status{display:inline-block;margin-top:.6rem}}
    @media(prefers-reduced-motion:reduce){#antmill-app *{scroll-behavior:auto}}
  </style>

  <div class="am-shell">
    <div class="am-head">
      <div><h2>Simulation #2: Ant Mill</h2><p>Agent-based model · local rules · collective outcomes</p></div>
      <div id="am-status" class="am-status" role="status" aria-live="polite">Initialising</div>
    </div>
    <div class="am-stage">
      <canvas id="am-canvas" aria-label="Animated top-down view of simulated ants, trails and food. Use the controls below to change the experiment."></canvas>
      <div class="am-overlay" aria-hidden="true">
        <span class="am-chip">Blue-white: trail field</span>
        <span class="am-chip">Green: food</span>
        <span class="am-chip">Amber: detected loop</span>
      </div>
    </div>
    <div class="am-stats" aria-live="polite">
      <div class="am-stat"><span>Living ants</span><strong id="am-pop">300</strong></div>
      <div class="am-stat"><span>Food collected</span><strong id="am-food-count">0</strong></div>
      <div class="am-stat"><span>Trail intensity</span><strong id="am-trail">0%</strong></div>
      <div class="am-stat"><span>Circularity</span><strong id="am-circularity">0%</strong></div>
      <div class="am-stat"><span>Loop status</span><strong id="am-loop">Not detected</strong></div>
    </div>
    <div class="am-controls">
      <div class="am-control"><label for="am-population">Population <span class="am-value" id="am-population-value">300</span></label><input id="am-population" type="range" min="50" max="700" step="25" value="300"></div>
      <div class="am-control"><label for="am-following">Trail following <span class="am-value" id="am-following-value">70%</span></label><input id="am-following" type="range" min="0" max="100" step="5" value="70"></div>
      <div class="am-control"><label for="am-randomness">Movement randomness <span class="am-value" id="am-randomness-value">30%</span></label><input id="am-randomness" type="range" min="0" max="100" step="5" value="30"></div>
      <div class="am-control"><label for="am-evaporation">Trail evaporation <span class="am-value" id="am-evaporation-value">35%</span></label><input id="am-evaporation" type="range" min="0" max="100" step="5" value="35"></div>
      <div class="am-control"><label for="am-environment">Environment</label><select id="am-environment"><option value="food" selected>Food sources + trails</option><option value="open">Open ground</option><option value="obstacles">Obstacles + barriers</option></select></div>
      <div class="am-control"><label for="am-speed">Simulation speed</label><select id="am-speed"><option value="1">1×</option><option value="2" selected>2×</option><option value="4">4×</option><option value="6">6×</option></select></div>
      <div class="am-control"><label for="am-seed">Random seed</label><input id="am-seed" type="number" value="22018" min="1" max="99999999"></div>
      <div class="am-control"><label for="am-visual">Visual layer</label><select id="am-visual"><option value="both">Ants + pheromone</option><option value="ants">Ants only</option><option value="trails">Pheromone field only</option><option value="paths">Movement paths</option></select></div>
    </div>
    <div class="am-buttons">
      <button id="am-pause" type="button">Pause</button>
      <button id="am-reset" type="button" class="secondary">Restart with seed</button>
      <button id="am-random-seed" type="button" class="secondary">New random world</button>
      <button id="am-seed-loop" type="button">Seed circular trail</button>
      <button id="am-clear" type="button" class="secondary">Clear trails</button>
    </div>
    <div class="am-experiments">
      <h3>Experiments</h3>
      <div class="am-experiment-row">
        <button id="am-exp-high-follow" type="button" class="secondary">High trail following</button>
        <button id="am-exp-high-noise" type="button" class="secondary">High randomness</button>
        <button id="am-exp-fast-evap" type="button" class="secondary">Fast evaporation</button>
        <button id="am-exp-disturb" type="button" class="secondary">Disturb the trail</button>
      </div>
      <p class="am-help">Try starting with dispersed ants, then use "Seed circular trail" as a comparison. A seeded circle is an experimental intervention, not spontaneous emergence. Compare circularity and loop duration across settings. In food mode, ants can follow a food-associated trail as well as other ants' deposited trail signal.</p>
    </div>
    <div class="am-legend">
      <span><i class="am-dot" style="background:#a8f0bd"></i>Food</span>
      <span><i class="am-dot" style="background:#f5d08a"></i>Ants carrying food</span>
      <span><i class="am-dot" style="background:#f5f7fa"></i>Searching ants</span>
      <span><i class="am-dot" style="background:#ffc477"></i>Detected circular flow</span>
    </div>
    <div class="am-note"><strong>Model note:</strong> Ants use local sensing, directional persistence, trail deposition, trail decay, food seeking and simple neighbour alignment. The loop detector looks for sustained group rotation around a shared centre; it is a heuristic indicator, not a biological diagnosis. Real army-ant mills are associated with trail-following feedback and can have additional ecological causes not represented here.</div>
  </div>

  <script>
  (function(){
    "use strict";
    const root=document.getElementById("antmill-app");
    if(!root || root.dataset.ready==="true") return;
    root.dataset.ready="true";
    const $=id=>document.getElementById(id);
    const canvas=$("am-canvas"),ctx=canvas.getContext("2d",{alpha:false});
    if(!ctx){$("am-status").textContent="Canvas unavailable";return;}
    const state={running:true,ants:[],foods:[],field:null,paths:[],width:800,height:500,cols:0,rows:0,foodCollected:0,tick:0,seed:22018,rng:null,loopFrames:0,loopDetected:false,center:{x:0,y:0},circularity:0,meanTrail:0,raf:0,obstacles:[]};
    const params=()=>({population:+$("am-population").value,following:+$("am-following").value/100,randomness:+$("am-randomness").value/100,evaporation:+$("am-evaporation").value/100,environment:$("am-environment").value,speed:+$("am-speed").value,visual:$("am-visual").value});
    function RNG(seed){this.s=(seed>>>0)||1;}
    RNG.prototype.next=function(){this.s=(Math.imul(this.s,1664525)+1013904223)>>>0;return this.s/4294967296;};
    const rand=(a,b)=>a+state.rng.next()*(b-a);
    const wrap=(v,max)=>(v%max+max)%max;
    const angleDiff=(a,b)=>Math.atan2(Math.sin(a-b),Math.cos(a-b));
    function resize(){
      const rect=canvas.getBoundingClientRect(),dpr=Math.min(window.devicePixelRatio||1,2);
      state.width=Math.max(320,rect.width);state.height=Math.max(360,rect.height);
      canvas.width=Math.round(state.width*dpr);canvas.height=Math.round(state.height*dpr);
      ctx.setTransform(dpr,0,0,dpr,0,0);
      state.cols=Math.max(24,Math.ceil(state.width/8));state.rows=Math.max(24,Math.ceil(state.height/8));
      state.field=new Float32Array(state.cols*state.rows);
      if(state.ants.length) state.ants.forEach(a=>{a.x=wrap(a.x,state.width);a.y=wrap(a.y,state.height);});
      buildObstacles();
    }
    function buildObstacles(){
      state.obstacles=[];
      if(params().environment==="obstacles"){
        state.obstacles=[
          {x:state.width*.34,y:state.height*.3,r:Math.min(34,state.width*.045)},
          {x:state.width*.66,y:state.height*.68,r:Math.min(42,state.width*.055)},
          {x:state.width*.51,y:state.height*.48,r:Math.min(23,state.width*.03)}
        ];
      }
    }
    function idx(x,y){return wrap(Math.floor(x/state.width*state.cols),state.cols)+wrap(Math.floor(y/state.height*state.rows),state.rows)*state.cols;}
    function sample(x,y){return state.field[idx(x,y)];}
    function deposit(x,y,amount){state.field[idx(x,y)]=Math.min(1,state.field[idx(x,y)]+amount);}
    function isBlocked(x,y){return state.obstacles.some(o=>{const dx=Math.min(Math.abs(x-o.x),state.width-Math.abs(x-o.x)),dy=Math.min(Math.abs(y-o.y),state.height-Math.abs(y-o.y));return dx*dx+dy*dy<o.r*o.r;});}
    function addFood(x,y,amount=100){state.foods.push({x:wrap(x,state.width),y:wrap(y,state.height),amount});}
    function reset(seed){
      state.seed=seed>>>0||1;state.rng=new RNG(state.seed);state.tick=0;state.foodCollected=0;state.loopFrames=0;state.loopDetected=false;state.circularity=0;state.meanTrail=0;state.ants=[];state.foods=[];state.paths=[];state.field.fill(0);buildObstacles();
      const p=params();
      for(let i=0;i<p.population;i++){
        const x=rand(state.width*.08,state.width*.92),y=rand(state.height*.08,state.height*.92);
        state.ants.push({x,y,angle:rand(0,Math.PI*2),speed:rand(0.65,1.35),energy:rand(60,100),carrying:false,turn:rand(-1,1),trail:[],lastAngle:0});
      }
      if(p.environment==="food"){
        addFood(state.width*.2,state.height*.25,200);
        addFood(state.width*.78,state.height*.28,200);
        addFood(state.width*.28,state.height*.76,200);
        addFood(state.width*.76,state.height*.72,200);
      }
      $("am-pop").textContent=state.ants.length;$("am-food-count").textContent="0";
      updateStatus("Running · seed "+state.seed);render();
    }
    function seedCircle(){
      const cx=state.width/2,cy=state.height/2,r=Math.min(state.width,state.height)*.22;
      state.field.fill(0);state.loopFrames=0;state.loopDetected=false;
      state.ants.forEach((a,i)=>{
        const t=(i/state.ants.length)*Math.PI*2;
        a.x=cx+Math.cos(t)*r+rand(-3,3);a.y=cy+Math.sin(t)*r+rand(-3,3);
        a.angle=t+Math.PI/2+rand(-.14,.14);a.energy=80;a.carrying=false;a.trail=[];
      });
      for(let t=0;t<Math.PI*2;t+=.025)deposit(cx+Math.cos(t)*r,cy+Math.sin(t)*r,.8);
      state.center={x:cx,y:cy};updateStatus("Circular trail seeded");render();
    }
    function updateStatus(message){$("am-status").textContent=message;}
    function updateControls(){
      $("am-population-value").textContent=$("am-population").value;
      $("am-following-value").textContent=$("am-following").value+"%";
      $("am-randomness-value").textContent=$("am-randomness").value+"%";
      $("am-evaporation-value").textContent=$("am-evaporation").value+"%";
    }
    function moveAnt(a,p){
      const senseDist=7,turnAngle=.62,follow=p.following;
      const left=sample(a.x+Math.cos(a.angle-turnAngle)*senseDist,a.y+Math.sin(a.angle-turnAngle)*senseDist);
      const ahead=sample(a.x+Math.cos(a.angle)*senseDist,a.y+Math.sin(a.angle)*senseDist);
      const right=sample(a.x+Math.cos(a.angle+turnAngle)*senseDist,a.y+Math.sin(a.angle+turnAngle)*senseDist);
      let steer=0;
      if(left>ahead&&left>right)steer=-turnAngle;
      else if(right>ahead&&right>left)steer=turnAngle;
      else if(Math.abs(left-right)<.012)steer=rand(-.16,.16);
      a.angle+=steer*follow;
      // Nearby ants provide a modest directional-alignment cue, not centralised control.
      let sx=0,sy=0,n=0;
      for(let j=0;j<state.ants.length;j+=3){
        const b=state.ants[j];if(b===a)continue;
        let dx=b.x-a.x,dy=b.y-a.y;
        if(Math.abs(dx)>state.width/2)dx-=Math.sign(dx)*state.width;
        if(Math.abs(dy)>state.height/2)dy-=Math.sign(dy)*state.height;
        if(dx*dx+dy*dy<20*20){sx+=Math.cos(b.angle);sy+=Math.sin(b.angle);n++;}
      }
      if(n>0&&state.rng.next()<.24*follow)a.angle+=angleDiff(Math.atan2(sy,sx),a.angle)*.12;
      // Food-seeking is stronger when not carrying food.
      if(p.environment==="food"&&!a.carrying){
        let target=null,best=Infinity;
        for(const f of state.foods){if(f.amount<=0)continue;let dx=f.x-a.x,dy=f.y-a.y;if(Math.abs(dx)>state.width/2)dx-=Math.sign(dx)*state.width;if(Math.abs(dy)>state.height/2)dy-=Math.sign(dy)*state.height;const d=dx*dx+dy*dy;if(d<best){best=d;target={x:dx,y:dy};}}
        if(target&&best<Math.min(state.width,state.height)*Math.min(state.width,state.height)*.16&&state.rng.next()<.65){
          const targetAngle=Math.atan2(target.y,target.x);a.angle+=angleDiff(targetAngle,a.angle)*.035;
        }
      }
      a.angle+=rand(-p.randomness*.72,p.randomness*.72);
      let nx=a.x+Math.cos(a.angle)*a.speed,ny=a.y+Math.sin(a.angle)*a.speed;
      if(isBlocked(nx,ny)){a.angle+=Math.PI*(.55+state.rng.next()*.9);nx=a.x+Math.cos(a.angle)*a.speed;ny=a.y+Math.sin(a.angle)*a.speed;}
      a.x=wrap(nx,state.width);a.y=wrap(ny,state.height);
      deposit(a.x,a.y,a.carrying?.055:.035);
      a.energy-=.012;
      if(p.environment==="food"){
        for(const f of state.foods){
          const dx=Math.min(Math.abs(f.x-a.x),state.width-Math.abs(f.x-a.x)),dy=Math.min(Math.abs(f.y-a.y),state.height-Math.abs(f.y-a.y));
          if(f.amount>0&&dx*dx+dy*dy<25){f.amount-=1;a.carrying=true;a.energy=Math.min(100,a.energy+2);state.foodCollected++;a.angle+=Math.PI+rand(-.35,.35);deposit(a.x,a.y,.35);break;}
        }
      }
      if(a.energy<=0){a.energy=100;a.x=rand(0,state.width);a.y=rand(0,state.height);a.angle=rand(0,Math.PI*2);a.carrying=false;}
      a.trail.push({x:a.x,y:a.y});if(a.trail.length>18)a.trail.shift();
    }
    function diffuse(p){
      const old=state.field,next=new Float32Array(old.length),decay=1-p.evaporation*.012;
      for(let y=0;y<state.rows;y++)for(let x=0;x<state.cols;x++){
        const i=x+y*state.cols,l=wrap(x-1,state.cols)+y*state.cols,r=wrap(x+1,state.cols)+y*state.cols,u=x+wrap(y-1,state.rows)*state.cols,d=x+wrap(y+1,state.rows)*state.cols;
        next[i]=(old[i]*.76+(old[l]+old[r]+old[u]+old[d])*.06)*decay;
      }
      state.field=next;
    }
    function detectLoop(){
      if(state.ants.length<8){state.circularity=0;state.loopFrames=0;state.loopDetected=false;return;}
      let mx=0,my=0;
      // Circular mean centre avoids false jumps at wrapped edges in most ordinary configurations.
      let cx=0,cy=0;
      for(const a of state.ants){cx+=Math.cos(a.x/state.width*Math.PI*2);cy+=Math.sin(a.x/state.width*Math.PI*2);mx+=Math.cos(a.y/state.height*Math.PI*2);my+=Math.sin(a.y/state.height*Math.PI*2);}
      const centre={x:(Math.atan2(cy,cx)/(Math.PI*2)+1)%1*state.width,y:(Math.atan2(my,mx)/(Math.PI*2)+1)%1*state.height};
      let tangential=0,radial=0,count=0;
      for(const a of state.ants){
        let dx=a.x-centre.x,dy=a.y-centre.y;if(Math.abs(dx)>state.width/2)dx-=Math.sign(dx)*state.width;if(Math.abs(dy)>state.height/2)dy-=Math.sign(dy)*state.height;
        const r=Math.hypot(dx,dy);if(r<12)continue;
        const radialVel=(Math.cos(a.angle)*dx+Math.sin(a.angle)*dy)/r;
        const tangentVel=(-Math.sin(a.angle)*dx+Math.cos(a.angle)*dy)/r;
        radial+=Math.abs(radialVel);tangential+=Math.abs(tangentVel);count++;
      }
      const consistency=count?Math.abs(tangential-radial)/(tangential+radial+1e-6):0;
      // High consistency alone is insufficient: require many ants, sustained rotation and a coherent annulus.
      const radii=state.ants.map(a=>{let dx=a.x-centre.x,dy=a.y-centre.y;if(Math.abs(dx)>state.width/2)dx-=Math.sign(dx)*state.width;if(Math.abs(dy)>state.height/2)dy-=Math.sign(dy)*state.height;return Math.hypot(dx,dy);}).sort((a,b)=>a-b);
      const spread=radii[Math.floor(radii.length*.8)]-radii[Math.floor(radii.length*.2)];
      const annulus=1-Math.min(1,spread/(Math.min(state.width,state.height)*.42));
      state.circularity=Math.max(0,Math.min(1,consistency*.55+annulus*.45));
      const qualifies=state.circularity>.68&&count>state.ants.length*.65;
      state.loopFrames=qualifies?state.loopFrames+1:Math.max(0,state.loopFrames-2);
      state.loopDetected=state.loopFrames>180;
      state.center=centre;
    }
    function step(){
      const p=params();
      if(state.field.length===0)return;
      for(let i=0;i<p.speed;i++){
        state.tick++;
        for(const a of state.ants)moveAnt(a,p);
        diffuse(p);
        if(state.tick%8===0)detectLoop();
        if(state.tick%6===0&&p.environment==="food"&&state.foods.length<12){
          state.foods=state.foods.filter(f=>f.amount>0);
          if(state.foods.length<8)addFood(rand(state.width*.08,state.width*.92),rand(state.height*.08,state.height*.92),100);
        }
      }
      state.meanTrail=state.field.reduce((s,v)=>s+v,0)/Math.max(1,state.field.length);
      $("am-pop").textContent=state.ants.length;
      $("am-food-count").textContent=state.foodCollected.toLocaleString("en-IN");
      $("am-trail").textContent=Math.round(Math.min(1,state.meanTrail*5)*100)+"%";
      $("am-circularity").textContent=Math.round(state.circularity*100)+"%";
      $("am-loop").textContent=state.loopDetected?"Detected":state.loopFrames>0?"Possible":"Not detected";
      if(state.loopDetected)updateStatus("Circular flow detected · heuristic");
      else if(state.running&&state.tick%90===0)updateStatus("Running · "+state.ants.length+" agents");
    }
    function render(){
      const w=state.width,h=state.height,p=params();
      ctx.fillStyle="#0b1117";ctx.fillRect(0,0,w,h);
      if(p.visual!=="ants"){
        for(let y=0;y<state.rows;y++)for(let x=0;x<state.cols;x++){
          const v=state.field[x+y*state.cols];if(v<.025)continue;
          ctx.fillStyle="rgba(110,202,255,"+Math.min(.48,v*.7)+")";ctx.fillRect(x*w/state.cols,y*h/state.rows,w/state.cols+1,h/state.rows+1);
        }
      }
      if(p.environment==="food"){
        for(const f of state.foods){if(f.amount<=0)continue;ctx.beginPath();ctx.fillStyle="#a8f0bd";ctx.arc(f.x,f.y,Math.min(4,2+f.amount/100),0,Math.PI*2);ctx.fill();}
      }
      if(p.environment==="obstacles"){
        for(const o of state.obstacles){ctx.beginPath();ctx.fillStyle="#53616d";ctx.strokeStyle="#8a9aa8";ctx.lineWidth=1;ctx.arc(o.x,o.y,o.r,0,Math.PI*2);ctx.fill();ctx.stroke();}
      }
      if(p.visual==="paths"){
        for(const a of state.ants){if(a.trail.length<2)continue;ctx.beginPath();ctx.strokeStyle=a.carrying?"rgba(245,208,138,.55)":"rgba(225,237,247,.2)";ctx.lineWidth=1;ctx.moveTo(a.trail[0].x,a.trail[0].y);for(let i=1;i<a.trail.length;i++)ctx.lineTo(a.trail[i].x,a.trail[i].y);ctx.stroke();}
      }
      if(p.visual!=="trails"){
        for(const a of state.ants){
          ctx.save();ctx.translate(a.x,a.y);ctx.rotate(a.angle);
          ctx.fillStyle=state.loopDetected?"#ffc477":a.carrying?"#f5d08a":"#f5f7fa";
          ctx.beginPath();ctx.moveTo(4.5,0);ctx.lineTo(-3,-2.1);ctx.lineTo(-2,0);ctx.lineTo(-3,2.1);ctx.closePath();ctx.fill();ctx.restore();
        }
      }
      if(state.loopDetected){
        ctx.beginPath();ctx.strokeStyle="rgba(255,196,119,.9)";ctx.lineWidth=1.5;ctx.setLineDash([5,5]);ctx.arc(state.center.x,state.center.y,Math.min(w,h)*.19,0,Math.PI*2);ctx.stroke();ctx.setLineDash([]);
      }
    }
    function frame(){
      if(!state.running)return;
      step();render();state.raf=requestAnimationFrame(frame);
    }
    function start(){if(!state.running){state.running=true;$("am-pause").textContent="Pause";frame();}}
    function stop(){state.running=false;$("am-pause").textContent="Resume";if(state.raf)cancelAnimationFrame(state.raf);}
    $("am-pause").addEventListener("click",()=>{if(state.running)stop();else start();});
    $("am-reset").addEventListener("click",()=>{stop();reset(+$("am-seed").value||1);start();});
    $("am-random-seed").addEventListener("click",()=>{$("am-seed").value=Math.floor(Math.random()*99999998)+1;stop();reset(+$("am-seed").value);start();});
    $("am-seed-loop").addEventListener("click",()=>{seedCircle();start();});
    $("am-clear").addEventListener("click",()=>{state.field.fill(0);state.loopFrames=0;state.loopDetected=false;state.circularity=0;updateStatus("Trail field cleared");render();});
    $("am-exp-high-follow").addEventListener("click",()=>{$("am-following").value=95;updateControls();});
    $("am-exp-high-noise").addEventListener("click",()=>{$("am-randomness").value=80;updateControls();});
    $("am-exp-fast-evap").addEventListener("click",()=>{$("am-evaporation").value=85;updateControls();});
    $("am-exp-disturb").addEventListener("click",()=>{const cx=state.center.x||state.width/2,cy=state.center.y||state.height/2,r=Math.min(state.width,state.height)*.2;for(let t=0;t<Math.PI*2;t+=.04){for(let d=-2;d<=2;d++)deposit(cx+Math.cos(t)*(r+d*5),cy+Math.sin(t)*(r+d*5),0);const x=cx+Math.cos(t)*r,y=cy+Math.sin(t)*r;state.field[idx(x,y)]*=.08;}state.ants.forEach(a=>{if(state.rng.next()<.35)a.angle+=rand(-1.8,1.8);});state.loopFrames=0;state.loopDetected=false;updateStatus("Trail disturbed");render();});
    ["am-population","am-following","am-randomness","am-evaporation"].forEach(id=>$(id).addEventListener("input",updateControls));
    $("am-environment").addEventListener("change",()=>{buildObstacles();if(params().environment==="food"&&state.foods.length===0){addFood(state.width*.2,state.height*.25);addFood(state.width*.78,state.height*.72);}updateStatus("Environment changed · restart recommended");});
    $("am-visual").addEventListener("change",render);
    $("am-speed").addEventListener("change",()=>updateStatus("Speed set to "+params().speed+"×"));
    let resizeTimer;
    if("ResizeObserver" in window){new ResizeObserver(()=>{clearTimeout(resizeTimer);resizeTimer=setTimeout(()=>{resize();render();},80);}).observe(canvas);}
    else window.addEventListener("resize",()=>{resize();render();});
    resize();updateControls();reset(22018);frame();
  })();
  </script>
</div>

## How to run an experiment

1. Start with the default population of 300 ants and the default settings.
2. Observe whether the trail field strengthens into a circular pattern without seeding one.
3. Select **Seed circular trail** to compare an imposed circle with spontaneous movement.
4. Increase randomness or evaporation, then use **Disturb the trail** to see whether the pattern persists.
5. Change the environment to obstacles and barriers to observe how the agents alter their routes.

The circularity score is a heuristic based on the distribution and direction of movement. A high score is not, by itself, proof of a biologically realistic ant mill.
{% include navbox-tito.html %}