Upload index.html

index.html

@@ -92,12 +92,31 @@ function setWaxFromX(px){
 }
 function overSlider(p){return Math.abs(p.x-SL.x)<SL.w/2+16&&Math.abs(p.y-SL.y)<18;}
 function canvasXY(e){const r=canvas.getBoundingClientRect();return{x:(e.clientX-r.left)*W/r.width,y:(e.clientY-r.top)*H/r.height};}
-canvas.addEventListener('pointerdown',e=>{const p=canvasXY(e);if(overSlider(p)){slDrag=true;try{canvas.setPointerCapture(e.pointerId);}catch(_){}setWaxFromX(p.x);e.preventDefault();}});
-canvas.addEventListener('pointermove',e=>{const p=canvasXY(e);slHover=overSlider(p);if(slDrag)setWaxFromX(p.x);});
+canvas.addEventListener('pointerdown',e=>{const p=canvasXY(e);if(overLED(p)){RGB_MODE=!RGB_MODE;e.preventDefault();return;}if(overSlider(p)){slDrag=true;try{canvas.setPointerCapture(e.pointerId);}catch(_){}setWaxFromX(p.x);e.preventDefault();}});
+canvas.addEventListener('pointermove',e=>{const p=canvasXY(e);ledHover=overLED(p);slHover=overSlider(p)&&!ledHover;if(slDrag)setWaxFromX(p.x);});
 const endSlDrag=e=>{if(slDrag){slDrag=false;try{canvas.releasePointerCapture(e.pointerId);}catch(_){}}};
 canvas.addEventListener('pointerup',endSlDrag);
 canvas.addEventListener('pointercancel',endSlDrag);
 
+// ---- clickable LED: toggles a slow RGB colour cycle on the whole lamp ----
+let RGB_MODE=false,rgbMix=0,hue=140;        // mix eases 0(default) <-> 1(full RGB)
+const HUE_SPEED=360/16;                     // one full colour cycle every ~16 s
+const DEF_L={r:255,g:90,b:45};              // the lamp's original warm colour
+const LED_POS={x:CX,y:H-52};
+let ledHover=false;
+function overLED(p){return Math.hypot(p.x-LED_POS.x,p.y-LED_POS.y)<20;}
+function hueRGB(h){                         // pleasant saturated RGB from a hue (deg)
+  h=((h%360)+360)%360;const s=0.84,v=1,c=v*s,x=c*(1-Math.abs((h/60)%2-1)),m=v-c;
+  let r,g,b;
+  if(h<60){r=c;g=x;b=0;}else if(h<120){r=x;g=c;b=0;}
+  else if(h<180){r=0;g=c;b=x;}else if(h<240){r=0;g=x;b=c;}
+  else if(h<300){r=x;g=0;b=c;}else{r=c;g=0;b=x;}
+  return{r:Math.round((r+m)*255),g:Math.round((g+m)*255),b:Math.round((b+m)*255)};
+}
+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});
+let LIGHT={...DEF_L},LUM_L=1;               // effective lamp colour, updated each frame
+
 // ---- physics (px units) ----
 let time=0,last=performance.now();
 const SIM_SPEED=0.55;                  // slow, heavy wax (scales all motion + transitions)
@@ -115,7 +134,7 @@ function step(dt){
     // heater at the bottom: strongest right on the base, so even big blobs
     // resting on their own floor get fully heated; cooler air up top
     if(b.y>botY-38) b.temp+=dt*0.5*(b.y-(botY-38))/38;
-    else            b.temp-=dt*(0.045+(t<0.3?0.10:0));
+    else            b.temp-=dt*(0.025+(t<0.3?0.06:0));
     b.temp=Math.max(0,Math.min(1,b.temp));
     // buoyancy: screen y grows downward, so negative ay = rising.
     // hot = light (rises), cold = heavy (sinks); bigger blobs weigh more
@@ -256,8 +275,8 @@ function renderBlobs(){
       g=(8+Math.pow(k,1.8)*150)*(0.55+t*0.6);
       bl=(34-Math.pow(k,2)*14+k*k*70)*(0.6+t*0.5);
       // white-hot core for very hot, deep wax (glowing from within)
-      if(f>1.4&&t>0.6){
-        const w=Math.min(1,(f-1.4)/0.8)*Math.min(1,(t-0.6)/0.35)*0.7;
+      if(f>1.4&&t>0.35){
+        const w=Math.min(1,(f-1.4)/0.8)*Math.min(1,(t-0.35)/0.5)*0.7;
         r+=(255-r)*w;g+=(225-g)*w;bl+=(190-bl)*w;
       }
       a=255*Math.min(1,(f-0.52)/0.35);
@@ -265,6 +284,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
+      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;}
+    }
     d[i*4]=Math.min(255,r);d[i*4+1]=Math.min(255,g);d[i*4+2]=Math.min(255,bl);d[i*4+3]=a;
   }
   bctx.putImageData(img,0,0);
@@ -279,7 +303,7 @@ function drawBackground(){
   // warm light pool from the lamp onto the room
   ctx.save();ctx.globalCompositeOperation='lighter';
   const lg=ctx.createRadialGradient(CX,H-40,20,CX,H-40,H*0.62);
-  lg.addColorStop(0,'rgba(255,70,35,0.16)');lg.addColorStop(0.5,'rgba(255,60,30,0.05)');lg.addColorStop(1,'rgba(255,60,30,0)');
+  lg.addColorStop(0,rgba(LIGHT,0.16));lg.addColorStop(0.5,rgba(LIGHT,0.05));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();
@@ -287,7 +311,7 @@ function drawBackground(){
 function drawLED(){
   ctx.save();ctx.globalCompositeOperation='lighter';
   const g=ctx.createRadialGradient(CX,H-58,4,CX,H-58,150);
-  g.addColorStop(0,'rgba(255,60,35,0.38)');g.addColorStop(1,'rgba(255,60,35,0)');
+  g.addColorStop(0,rgba(LIGHT,0.38));g.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=g;ctx.fillRect(CX-170,H-210,340,210);ctx.restore();
 }
 function drawCap(){
@@ -318,8 +342,11 @@ function drawBase(){
   rim.addColorStop(0,'#6a5590');rim.addColorStop(1,'#171026');
   ctx.fillStyle=rim;ctx.beginPath();ctx.roundRect(CX-MIN_HW-16,645,(MIN_HW+16)*2,16,8);ctx.fill();
   const pulse=0.75+0.25*Math.sin(time*2);
-  ctx.save();ctx.shadowColor='rgba(255,70,40,0.9)';ctx.shadowBlur=12*pulse;
-  ctx.fillStyle=`rgba(255,80,45,${0.85*pulse})`;ctx.beginPath();ctx.arc(CX,H-52,3.4,0,Math.PI*2);ctx.fill();ctx.restore();
+  const ledR=ledHover?4.3:3.4;
+  ctx.save();ctx.shadowColor=rgba(LIGHT,0.9);ctx.shadowBlur=12*pulse*(ledHover?1.6:1);
+  ctx.fillStyle=rgba(LIGHT,Math.min(1,0.85*pulse*(ledHover?1.3:1)));ctx.beginPath();ctx.arc(CX,H-52,ledR,0,Math.PI*2);ctx.fill();
+  ctx.fillStyle=rgba(mixWhite(LIGHT,0.6),0.9*pulse*(ledHover?1.15:1));ctx.beginPath();ctx.arc(CX,H-52,ledR*0.45,0,Math.PI*2);ctx.fill();
+  ctx.restore();
 }
 function drawSlider(){
   const kx=SL.x-SL.w/2+slF*SL.w;
@@ -331,12 +358,12 @@ function drawSlider(){
   ctx.beginPath();ctx.roundRect(SL.x-SL.w/2+0.5,SL.y-1.3,SL.w-1,2.6,1.3);ctx.stroke();
   // knob, echoing the LED above it
   const r=(slDrag||slHover)?5:4;
-  ctx.shadowColor='rgba(255,80,40,0.9)';
+  ctx.shadowColor=rgba(LIGHT,0.9);
   ctx.shadowBlur=slDrag?15:(slHover?11:7);
   const g=ctx.createRadialGradient(kx,SL.y,0.5,kx,SL.y,r+1.5);
-  g.addColorStop(0,'rgba(255,238,220,0.95)');
-  g.addColorStop(0.45,'rgba(255,130,70,0.85)');
-  g.addColorStop(1,'rgba(255,70,35,0)');
+  g.addColorStop(0,'rgba(255,240,225,0.95)');
+  g.addColorStop(0.45,rgba(LIGHT,0.85));
+  g.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=g;ctx.beginPath();ctx.arc(kx,SL.y,r+1.5,0,Math.PI*2);ctx.fill();
   ctx.restore();
 }
@@ -349,14 +376,14 @@ function drawLiquid(){
   // ---- bottom lamp glow: heat rising up the liquid column ----
   ctx.globalCompositeOperation='lighter';
   const hg=ctx.createLinearGradient(0,LIQ_BOT-190,0,LIQ_BOT+10);
-  hg.addColorStop(0,'rgba(255,80,45,0)');
-  hg.addColorStop(0.6,'rgba(255,70,40,0.10)');
-  hg.addColorStop(1,'rgba(255,110,60,0.38)');
+  hg.addColorStop(0,rgba(LIGHT,0));
+  hg.addColorStop(0.6,rgba(LIGHT,0.10));
+  hg.addColorStop(1,rgba(LIGHT,0.38));
   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(255,150,95,0.55)');
-  led.addColorStop(0.35,'rgba(255,85,50,0.24)');
-  led.addColorStop(1,'rgba(255,60,40,0)');
+  led.addColorStop(0,rgba(mixWhite(LIGHT,0.4),0.55));
+  led.addColorStop(0.35,rgba(LIGHT,0.24));
+  led.addColorStop(1,rgba(LIGHT,0));
   ctx.fillStyle=led;ctx.fillRect(CX-170,LIQ_BOT-150,340,170);
 
   // drifting shimmer
@@ -401,6 +428,15 @@ function frame(now){
   try{
     const dt=Math.max(0,Math.min(0.05,(now-last)/1000));last=now;time+=dt;
     step(dt*SIM_SPEED);
+    // ---- lamp colour: default warm, or slow RGB cycle when the LED is clicked ----
+    hue=(hue+dt*HUE_SPEED)%360;
+    const tm=RGB_MODE?1:0;
+    rgbMix+=(tm-rgbMix)*(1-Math.exp(-dt*2.8));
+    if(!RGB_MODE&&rgbMix<0.004)rgbMix=0;
+    if(RGB_MODE&&rgbMix>0.996)rgbMix=1;
+    const hc=hueRGB(hue);
+    LIGHT={r:DEF_L.r+(hc.r-DEF_L.r)*rgbMix,g:DEF_L.g+(hc.g-DEF_L.g)*rgbMix,b:DEF_L.b+(hc.b-DEF_L.b)*rgbMix};
+    LUM_L=Math.max(1,0.299*LIGHT.r+0.587*LIGHT.g+0.114*LIGHT.b);
     drawBackground();
     drawLED();
     drawCap();
@@ -408,7 +444,7 @@ function frame(now){
     drawGlass();
     drawBase();
     drawSlider();
-    canvas.style.cursor=slDrag||slHover?'ew-resize':'default';
+    canvas.style.cursor=(slDrag||slHover)?'ew-resize':(ledHover?'pointer':'default');
   }catch(err){
     const d=document.createElement('div');
     d.style.cssText='position:fixed;left:50%;top:8px;transform:translateX(-50%);color:#ffb3a7;background:rgba(20,5,10,.9);padding:8px 14px;border-radius:8px;font:13px monospace;z-index:9';