Upload index.html

index.html

@@ -139,6 +139,7 @@ const ABS_DUR=1.6,BUD_DUR=2.6;                            // merge/split transit
 function step(dt){
   const midY=(LIQ_TOP+LIQ_BOT)/2;
   for(const b of blobs){
+    if(b.splitAge!==undefined)b.splitAge+=dt;
     if(b.childOf)continue;                                // absorbed child is driven below
     const t=(b.y-LIQ_TOP)/(LIQ_BOT-LIQ_TOP);
     const er=b.r*WAXR;                                    // world radius at current wax amount
@@ -203,6 +204,7 @@ function step(dt){
     u.child.r=u.r2*lerp(0.15,1,k);
     if(u.t>=1){                                            // free now - keep them from re-fusing mid-drift
       u.child.budding=false;u.child.partner=b;b.partner=u.child;b.bud=null;
+      u.child.splitAge=0; // start the grace period timer
     }
   }
 
@@ -210,6 +212,10 @@ function step(dt){
   for(let i=0;i<blobs.length;i++)for(let j=i+1;j<blobs.length;j++){
     const a=blobs[i],c=blobs[j];
     if(a.abs||a.childOf||c.abs||c.childOf||a.bud||c.bud||a.budding||c.budding)continue;
+    // protect newly split-off blobs from immediate absorption (3s grace period)
+    if((a.splitAge!==undefined&&a.splitAge<3)||(c.splitAge!==undefined&&c.splitAge<3))continue;
+    // don't absorb very small blobs (they're still establishing themselves)
+    if(a.r<12||c.r<12)continue;
     if((a.partner&&a.partner===c)||(c.partner&&c.partner===a))continue;
     const dx=c.x-a.x,dy=c.y-a.y,d=Math.hypot(dx,dy)||0.001,rs=a.r+c.r;
     if(d<rs*0.32){
@@ -256,6 +262,18 @@ function step(dt){
         const child={x:nx,y:ny,vx:b.vx+Math.cos(ang)*(10+Math.random()*8),vy:-5-Math.random()*6,r:r2*0.15,temp:Math.min(1,b.temp+0.05),seed:Math.random()*1000,budding:true};
         blobs.push(child);
         b.bud={child,t:0,dur:0.9,rFrom:b.r,rTo:Math.max(18,Math.cbrt(b.r**3-r2**3)),r2};
+        // burst of carbonated bubbles at the boil location
+        const count=4+Math.floor(Math.random()*5);  // 4-8 bubbles for a bigger burst
+        for(let i=0;i<count;i++){
+          blobBubs.push({
+            x:nx+(Math.random()-0.5)*6,
+            y:ny+(Math.random()-0.5)*6,
+            vy:-(20+Math.random()*18),
+            r:0.7+Math.random()*1.8,
+            ph:Math.random()*7,
+            wob:2+Math.random()*2
+          });
+        }
       }
     }
   }
@@ -437,6 +455,42 @@ function drawSlider(){
   ctx.fillStyle=g;ctx.beginPath();ctx.arc(kx,SL.y,r+1.5,0,Math.PI*2);ctx.fill();
   ctx.restore();
 }
+
+// film grain overlay - subtle animated noise for that analog feel (larger grains)
+function drawGrain(){
+  const cw=canvas.width,ch=canvas.height;
+  const imgData=ctx.getImageData(0,0,cw,ch);
+  const data=imgData.data;
+  const grainSize=3*DPR; // scale grain size with DPR
+  // precompute blob positions in canvas coordinates for wax detection
+  const ox=CX-MAX_HW-pad,oy=LIQ_TOP-pad;
+  const baseIntensity=2.25; // very subtle grain intensity (reduced 25% more)
+  const waxMultiplier=2.25;  // 125% stronger where wax is (another 50% on top)
+  for(let y=0;y<ch;y+=grainSize){
+    for(let x=0;x<cw;x+=grainSize){
+      // check if this grain cell overlaps any blob (wax mask)
+      let onWax=false;
+      const bufX=CX-MAX_HW-pad,bufY=LIQ_TOP-pad; // where wax buffer is drawn
+      const wx=(x/DPR)-bufX,wy=(y/DPR)-bufY;     // convert to world coords
+      for(const b of blobs){
+        const bx=b.x-ox,by=b.y-oy;
+        const rr=b.r*WAXR*1.12;
+        if(Math.hypot(wx-bx,wy-by)<rr){onWax=true;break;}
+      }
+      const intensity=onWax?baseIntensity*waxMultiplier:baseIntensity;
+      const n=(Math.random()-0.5)*intensity;
+      for(let gy=0;gy<grainSize&&y+gy<ch;gy++){
+        for(let gx=0;gx<grainSize&&x+gx<cw;gx++){
+          const idx=((Math.floor(y+gy)*cw+Math.floor(x+gx))*4);
+          data[idx]=Math.max(0,Math.min(255,data[idx]+n));       // R
+          data[idx+1]=Math.max(0,Math.min(255,data[idx+1]+n));   // G
+          data[idx+2]=Math.max(0,Math.min(255,data[idx+2]+n));   // B
+        }
+      }
+    }
+  }
+  ctx.putImageData(imgData,0,0);
+}
 function drawLiquid(){
   ctx.save();ctx.clip(liquidClip);
   const g=ctx.createLinearGradient(0,LIQ_TOP,0,LIQ_BOT);
@@ -552,6 +606,7 @@ function frame(now){
     drawGlass();
     drawBase();
     drawSlider();
+    drawGrain();
     canvas.style.cursor=(slDrag||slHover)?'ew-resize':(ledHover?'pointer':'default');
   }catch(err){
     const d=document.createElement('div');