Upload index.html

index.html

@@ -81,6 +81,8 @@ for(let i=0;i<6;i++){
 
 // ---- bubbles (tiny, for life) ----
 const bubbles=[];for(let i=0;i<14;i++)bubbles.push({x:Math.random(),y:Math.random(),s:0.5+Math.random(),r:0.8+Math.random()*1.6,ph:Math.random()*7});
+// carbonation: air bubbles shed from the blobs' surfaces (purely cosmetic)
+const blobBubs=[];
 
 // ---- wax amount (unlabeled slider on the base, just under the LED) ----
 // volume multiplier 0.25x..4x; middle = as-is. Radius scales as cbrt(volume).
@@ -123,6 +125,8 @@ function hueRGB(h){                         // pleasant saturated RGB from a hue
 }
 const rgba=(c,a)=>`rgba(${c.r|0},${c.g|0},${c.b|0},${a})`;
 const mixWhite=(c,t)=>({r:c.r+(255-c.r)*t,g:c.g+(255-c.g)*t,b:c.b+(255-c.b)*t});
+// Blend a fixed colour toward the lamp light's hue as RGB mode fades in (rgbMix 0->1)
+const tint=(orig)=>{const t=0.25*rgbMix;return{r:orig.r*(1-t)+LIGHT.r*t,g:orig.g*(1-t)+LIGHT.g*t,b:orig.b*(1-t)+LIGHT.b*t};};
 let LIGHT={...DEF_L},LUM_L=1;               // effective lamp colour, updated each frame
 
 // ---- physics (px units) ----
@@ -263,6 +267,38 @@ function step(dt){
   }
 
   for(const b of bubbles){b.y-=dt*(0.03+0.02*b.s);if(b.y<0){b.y=1;b.x=Math.random();}}
+
+  // blobs fizz: hotter wax sheds tiny air bubbles off its surface, like
+  // carbonation coming out of solution (no interaction with the blobs)
+  for(const b of blobs){
+    if(Math.random()<dt*(0.08+b.temp*0.3)){
+      const rr=b.r*WAXR;
+      const ang=Math.random()*Math.PI*2;
+      let x=b.x+Math.cos(ang)*rr*(1.02+Math.random()*0.1);
+      const y=b.y+Math.sin(ang)*rr*(1.02+Math.random()*0.1);
+      const hw=halfWidth(y)-4;                    // keep inside the glass
+      if(Math.abs(x-CX)>hw)x=CX+(x>CX?hw:-hw);
+      // spawn a small group of bubbles (like an air pocket bursting)
+      const count=2+Math.floor(Math.random()*4);  // 2-5 bubbles
+      for(let i=0;i<count;i++){
+        blobBubs.push({
+          x:x+(Math.random()-0.5)*3,
+          y:y+(Math.random()-0.5)*3,
+          vy:-(16+Math.random()*14),
+          r:0.7+Math.random()*1.5,
+          ph:Math.random()*7,
+          wob:2+Math.random()*2
+        });
+      }
+    }
+  }
+  for(let i=blobBubs.length-1;i>=0;i--){
+    const q=blobBubs[i];
+    q.vy-=dt*6;                                   // accelerate upward as it rises
+    q.y+=q.vy*dt;
+    q.x+=Math.sin(time*3+q.ph)*q.wob*dt;          // gentle sideways wiggle
+    if(q.y<LIQ_TOP+4||blobBubs.length>120)blobBubs.splice(i,1);
+  }
 }
 
 // ---- metaball rendering (gooey, temperature-tinted glow) ----
@@ -313,10 +349,11 @@ function renderBlobs(){
       const k=(f-0.3)/0.22;
       r=255;g=60*k;bl=40*k;a=110*k*k;
     }
-    if(rgbMix>0&&a>0){                                       // re-light the wax by the current lamp colour
+    if(rgbMix>0&&a>0){                                       // re-light the wax by the current lamp colour (50% blend)
       const lum=0.299*r+0.587*g+0.114*bl;
       if(lum>1){const s=Math.min(1.45,lum/LUM_L);
-        r+=(LIGHT.r*s-r)*rgbMix;g+=(LIGHT.g*s-g)*rgbMix;bl+=(LIGHT.b*s-bl)*rgbMix;}
+        const waxBlend=0.25*rgbMix; // only blend 25% toward RGB (halved)
+        r+=(LIGHT.r*s-r)*waxBlend;g+=(LIGHT.g*s-g)*waxBlend;bl+=(LIGHT.b*s-bl)*waxBlend;}
     }
     // soft tone map to prevent overexposure blips (like a camera sensor flattening)
     const tone=v=>v<=230?v:230+25*(1-Math.exp(-(v-230)/8));
@@ -331,18 +368,20 @@ function drawBackground(){
   const g=ctx.createRadialGradient(CX,H*0.42,60,CX,H*0.42,H*0.75);
   g.addColorStop(0,'#181026');g.addColorStop(1,'#05030a');
   ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
-  // warm light pool from the lamp onto the room
+  // warm light pool from the lamp onto the room (scaled down in RGB mode)
+  const glowScale=1-rgbMix*0.85; // reduce additive glows by 85% in RGB mode (halved effect)
   ctx.save();ctx.globalCompositeOperation='lighter';
   const lg=ctx.createRadialGradient(CX,H-40,20,CX,H-40,H*0.62);
-  lg.addColorStop(0,rgba(LIGHT,0.16));lg.addColorStop(0.5,rgba(LIGHT,0.05));lg.addColorStop(1,rgba(LIGHT,0));
+  lg.addColorStop(0,rgba(LIGHT,0.16*glowScale));lg.addColorStop(0.5,rgba(LIGHT,0.05*glowScale));lg.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=lg;ctx.fillRect(0,0,W,H);ctx.restore();
   ctx.save();ctx.globalAlpha=0.55;ctx.fillStyle='#000';
   ctx.beginPath();ctx.ellipse(CX,H-24,190,26,0,0,Math.PI*2);ctx.fill();ctx.restore();
 }
 function drawLED(){
+  const glowScale=1-rgbMix*0.85; // reduce additive glows by 85% in RGB mode (halved effect)
   ctx.save();ctx.globalCompositeOperation='lighter';
   const g=ctx.createRadialGradient(CX,H-58,4,CX,H-58,150);
-  g.addColorStop(0,rgba(LIGHT,0.38));g.addColorStop(1,rgba(LIGHT,0));
+  g.addColorStop(0,rgba(LIGHT,0.38*glowScale));g.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=g;ctx.fillRect(CX-170,H-210,340,210);ctx.restore();
 }
 function drawCap(){
@@ -401,26 +440,31 @@ function drawSlider(){
 function drawLiquid(){
   ctx.save();ctx.clip(liquidClip);
   const g=ctx.createLinearGradient(0,LIQ_TOP,0,LIQ_BOT);
-  g.addColorStop(0,'#23094a');g.addColorStop(0.5,'#1b0640');g.addColorStop(1,'#12032c');
+  // base liquid follows the lamp light's hue in RGB mode; stays purple by default (almost transparent)
+  g.addColorStop(0,rgba(tint({r:35,g:9,b:74}),0.15));
+  g.addColorStop(0.5,rgba(tint({r:27,g:6,b:64}),0.15));
+  g.addColorStop(1,rgba(tint({r:18,g:3,b:44}),0.15));
   ctx.fillStyle=g;ctx.fillRect(CX-MAX_HW-8,LIQ_TOP-8,MAX_HW*2+16,LIQ_BOT-LIQ_TOP+16);
 
-  // ---- bottom lamp glow: heat rising up the liquid column ----
+  // ---- bottom lamp glow: heat rising up the liquid column (scaled for subtler RGB) ----
+  const glowScale=1-rgbMix*0.85; // reduce additive glows by 85% in RGB mode (halved effect)
   ctx.globalCompositeOperation='lighter';
   const hg=ctx.createLinearGradient(0,LIQ_BOT-190,0,LIQ_BOT+10);
   hg.addColorStop(0,rgba(LIGHT,0));
-  hg.addColorStop(0.6,rgba(LIGHT,0.10));
-  hg.addColorStop(1,rgba(LIGHT,0.38));
+  hg.addColorStop(0.6,rgba(LIGHT,0.05*glowScale));
+  hg.addColorStop(1,rgba(LIGHT,0.18*glowScale));
   ctx.fillStyle=hg;ctx.fillRect(CX-MAX_HW-8,LIQ_BOT-190,MAX_HW*2+16,200);
   const led=ctx.createRadialGradient(CX,LIQ_BOT+6,4,CX,LIQ_BOT+6,150);
-  led.addColorStop(0,rgba(mixWhite(LIGHT,0.4),0.55));
-  led.addColorStop(0.35,rgba(LIGHT,0.24));
+  led.addColorStop(0,rgba(mixWhite(LIGHT,0.4),0.28*glowScale));
+  led.addColorStop(0.35,rgba(LIGHT,0.12*glowScale));
   led.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=led;ctx.fillRect(CX-170,LIQ_BOT-150,340,170);
 
   // drifting shimmer
   const sx=CX+Math.sin(time*0.4)*60;
   const sh=ctx.createRadialGradient(sx,(LIQ_TOP+LIQ_BOT)/2,10,sx,(LIQ_TOP+LIQ_BOT)/2,220);
-  sh.addColorStop(0,'rgba(150,90,220,0.10)');sh.addColorStop(1,'rgba(150,90,220,0)');
+  const shim=tint({r:150,g:90,b:220});
+  sh.addColorStop(0,rgba(shim,0.10));sh.addColorStop(1,rgba(shim,0));
   ctx.fillStyle=sh;ctx.fillRect(CX-MAX_HW-8,LIQ_TOP-8,MAX_HW*2+16,LIQ_BOT-LIQ_TOP+16);
 
   // bubbles
@@ -432,6 +476,13 @@ function drawLiquid(){
     ctx.beginPath();ctx.arc(x,y,b.r,0,Math.PI*2);ctx.fill();
   }
 
+  // carbonation bubbles shed by the blobs (same look, fade so they "pop")
+  for(const q of blobBubs){
+    ctx.globalAlpha=Math.min(1,(q.y-LIQ_TOP)/30);
+    ctx.beginPath();ctx.arc(q.x,q.y,q.r,0,Math.PI*2);ctx.fill();
+  }
+  ctx.globalAlpha=1;
+
   // ---- the lava: diffuse halo + glowing body ----
   renderBlobs();
   const bx=CX-MAX_HW-pad,by=LIQ_TOP-pad;