// Navier-Stokes WebGL fluid simulation const CFG = { SIM_RES: 128, DYE_RES: 512, DENSITY_DISS: 0.97, VEL_DISS: 0.5, PRESSURE: 0.85, PRESSURE_ITER: 20, CURL: 8, SPLAT_RADIUS: 0.04, SPLAT_FORCE: 1500, DYE_RADIUS: 0.006, SHADING: true }; const RAINBOW_IDLE_DELAY_MS = 120000; // Fixed violet smoke color (#9C41F7) const SMOKE_COL = { r: 156/255, g: 65/255, b: 247/255 }; const DARK_SMOKE = { r: 0.01, g: 0.01, b: 0.01 }; function hslToRgb(h, s, l) { const c = (1 - Math.abs(2 * l - 1)) * s; const hp = h / 60; const x = c * (1 - Math.abs((hp % 2) - 1)); let r1 = 0, g1 = 0, b1 = 0; if (hp >= 0 && hp < 1) [r1, g1, b1] = [c, x, 0]; else if (hp < 2) [r1, g1, b1] = [x, c, 0]; else if (hp < 3) [r1, g1, b1] = [0, c, x]; else if (hp < 4) [r1, g1, b1] = [0, x, c]; else if (hp < 5) [r1, g1, b1] = [x, 0, c]; else [r1, g1, b1] = [c, 0, x]; const m = l - c / 2; return { r: r1 + m, g: g1 + m, b: b1 + m }; } function getRainbowColor(timeMs) { const hue = (timeMs * 0.05) % 360; return hslToRgb(hue, 0.84, 0.56); } window.addEventListener('load', function () { const canvas = document.getElementById('c'); const controls = document.getElementById('controls'); const controlsToggle = document.getElementById('controls_toggle'); const isThumbnailPreview = Boolean(window.__LAB_THUMBNAIL_PREVIEW__); let rainbowModeEnabled = false; let rainbowIdleTimer = null; function setRainbowMode(enabled) { if (isThumbnailPreview) { rainbowModeEnabled = false; return; } rainbowModeEnabled = enabled; } function restartRainbowIdleTimer() { if (isThumbnailPreview) return; if (rainbowIdleTimer) window.clearTimeout(rainbowIdleTimer); setRainbowMode(false); rainbowIdleTimer = window.setTimeout(() => { setRainbowMode(true); }, RAINBOW_IDLE_DELAY_MS); } if (controls && !isThumbnailPreview) { ['pointerdown', 'input', 'change', 'click', 'touchstart', 'keydown', 'focusin', 'wheel'].forEach((eventName) => { controls.addEventListener(eventName, restartRainbowIdleTimer, { passive: true }); }); } if (controls && controlsToggle) { const setControlsCollapsed = (collapsed) => { controls.classList.toggle('is-collapsed', collapsed); controlsToggle.setAttribute('aria-expanded', String(!collapsed)); }; setControlsCollapsed(true); controlsToggle.addEventListener('click', () => { setControlsCollapsed(!controls.classList.contains('is-collapsed')); }); } // Any click/touch interaction resets inactivity timer; mousemove alone does not. if (!isThumbnailPreview) { ['pointerdown', 'touchstart'].forEach((eventName) => { window.addEventListener(eventName, restartRainbowIdleTimer, { passive: true }); }); restartRainbowIdleTimer(); } // Debug controls const bindControl = (id, valId, key, isFloat = false) => { const el = document.getElementById(id); const valEl = document.getElementById(valId); if(el && valEl) { el.addEventListener('input', (e) => { const v = isFloat ? parseFloat(e.target.value) : parseInt(e.target.value); CFG[key] = v; valEl.innerText = isFloat ? v.toFixed(id==='dye_rad'?4:2) : v; }); } }; bindControl('curl', 'v-curl', 'CURL'); bindControl('vel_diss', 'v-vel', 'VEL_DISS', true); bindControl('dye_diss', 'v-dye', 'DENSITY_DISS', true); bindControl('force', 'v-force', 'SPLAT_FORCE'); bindControl('dye_rad', 'v-dyerad', 'DYE_RADIUS', true); // Color picker logic function hexToRgb(hex) { let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); // Multiply by 0.35 to ensure the picked color acts as a thick smoke // instead of an instantly blinding light source when it accumulates. return result ? { r: (parseInt(result[1], 16) / 255) * 0.35, g: (parseInt(result[2], 16) / 255) * 0.35, b: (parseInt(result[3], 16) / 255) * 0.35 } : { r: (153/255)*0.35, g: 0.0, b: (255/255)*0.35 }; // #9900ff scaled } let currentDyeColor = hexToRgb('#9900ff'); const dyeColorInput = document.getElementById('dye_color'); if (dyeColorInput) { // Force the HTML color input to match our new default if it doesn't already dyeColorInput.value = '#9900ff'; currentDyeColor = hexToRgb(dyeColorInput.value); dyeColorInput.addEventListener('input', (e) => { currentDyeColor = hexToRgb(e.target.value); }); } const btnSplat = document.getElementById('btn_splat'); if (btnSplat) { btnSplat.addEventListener('click', () => { // Triangle formation coordinates: spaced out and all aiming towards the center (0.5, 0.5) const pts = [ { x: 0.50, y: 0.70, dx: 0.0, dy: -2.0 }, // Top vertex (pointing down) { x: 0.30, y: 0.30, dx: 1.5, dy: 1.5 }, // Bottom left (pointing up-right) { x: 0.70, y: 0.30, dx: -1.5, dy: 1.5 } // Bottom right (pointing up-left) ]; // Since a click only injects dye for one frame (unlike dragging the mouse), // we boost the color intensity locally so the splats are clearly visible and vibrant. const sourceColor = rainbowModeEnabled ? getRainbowColor(performance.now()) : currentDyeColor; const intenseColor = { r: sourceColor.r * 2.5, g: sourceColor.g * 2.5, b: sourceColor.b * 2.5 }; pts.forEach(p => { // Wide dark smoke for envelope splat(p.x, p.y, p.dx, p.dy, DARK_SMOKE, 0.004, 0.004); // Tight colored smoke for core, slightly larger dye radius for a fuller impact splat(p.x, p.y, p.dx, p.dy, intenseColor, 0.0005, CFG.DYE_RADIUS * 2.0); }); }); } function resizeCanvas() { canvas.width = canvas.clientWidth || window.innerWidth; canvas.height = canvas.clientHeight || window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const params = { alpha: false, depth: false, stencil: false, antialias: false }; let gl = canvas.getContext('webgl2', params); const isGL2 = !!gl; if (!gl) gl = canvas.getContext('webgl', params); if (!gl) return; let halfFloat, linFilt; if (isGL2) { gl.getExtension('EXT_color_buffer_float'); linFilt = gl.getExtension('OES_texture_float_linear'); } else { halfFloat = gl.getExtension('OES_texture_half_float'); linFilt = gl.getExtension('OES_texture_half_float_linear'); } const HFT = isGL2 ? gl.HALF_FLOAT : halfFloat?.HALF_FLOAT_OES; const MANUAL = !linFilt; function supportFmt(iF, f) { if (!isGL2) return true; const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); const tx = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tx); gl.texImage2D(gl.TEXTURE_2D,0,iF,4,4,0,f,HFT,null); gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tx,0); return gl.checkFramebufferStatus(gl.FRAMEBUFFER)===gl.FRAMEBUFFER_COMPLETE; } function best(a,fa,b,fb){ return supportFmt(a,fa)?{internalFormat:a,format:fa}:supportFmt(b,fb)?{internalFormat:b,format:fb}:{internalFormat:gl.RGBA,format:gl.RGBA}; } const rgba = isGL2 ? best(gl.RGBA16F,gl.RGBA,gl.RGBA16F,gl.RGBA) : {internalFormat:gl.RGBA,format:gl.RGBA}; const rg = isGL2 ? best(gl.RG16F,gl.RG,gl.RG16F,gl.RG) : rgba; const r = isGL2 ? best(gl.R16F,gl.RED,gl.RG16F,gl.RG) : rgba; const BV=`precision highp float;attribute vec2 aP;varying vec2 vUv,vL,vR,vT,vB;uniform vec2 ts;void main(){vUv=aP*.5+.5;vL=vUv-vec2(ts.x,0.);vR=vUv+vec2(ts.x,0.);vT=vUv+vec2(0.,ts.y);vB=vUv-vec2(0.,ts.y);gl_Position=vec4(aP,0.,1.);}`; const COPY =`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv;uniform sampler2D u;void main(){gl_FragColor=texture2D(u,vUv);}`; const CLEAR=`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv;uniform sampler2D u;uniform float v;void main(){gl_FragColor=v*texture2D(u,vUv);}`; const DISP =(CFG.SHADING?'#define SHADING\n':'')+`precision highp float;precision highp sampler2D;varying vec2 vUv,vL,vR,vT,vB;uniform sampler2D u;uniform vec2 ts;void main(){vec3 c=texture2D(u,vUv).rgb; #ifdef SHADING float dx=length(texture2D(u,vR).rgb)-length(texture2D(u,vL).rgb);float dy=length(texture2D(u,vT).rgb)-length(texture2D(u,vB).rgb);vec3 n=normalize(vec3(dx,dy,length(ts)));float d=clamp(dot(n,vec3(0.,0.,1.))+.4,0.,1.);c*=d; #endif // Tonemapping to prevent additive white flashes c = 1.0 - exp(-c); gl_FragColor=vec4(c,1.);}`; const SPLAT=`precision highp float;precision highp sampler2D;varying vec2 vUv;uniform sampler2D uT;uniform float ar;uniform vec3 color;uniform vec2 pt;uniform float rad;void main(){vec2 p=vUv-pt;p.x*=ar;vec3 s=exp(-dot(p,p)/rad)*color;gl_FragColor=vec4(texture2D(uT,vUv).xyz+s,1.);}`; const ADV =(MANUAL?'#define MANUAL_FILTERING\n':'')+`precision highp float;precision highp sampler2D;varying vec2 vUv;uniform sampler2D uVel,uSrc;uniform vec2 ts,dts;uniform float dt,diss;vec4 bl(sampler2D s,vec2 uv,vec2 t){vec2 st=uv/t-.5;vec2 i=floor(st);vec2 f=fract(st);vec4 a=texture2D(s,(i+vec2(.5,.5))*t),b=texture2D(s,(i+vec2(1.5,.5))*t),c=texture2D(s,(i+vec2(.5,1.5))*t),d=texture2D(s,(i+vec2(1.5,1.5))*t);return mix(mix(a,b,f.x),mix(c,d,f.x),f.y);}void main(){ #ifdef MANUAL_FILTERING vec2 co=vUv-dt*bl(uVel,vUv,ts).xy*ts;vec4 res=bl(uSrc,co,dts); #else vec2 co=vUv-dt*texture2D(uVel,vUv).xy*ts;vec4 res=texture2D(uSrc,co); #endif gl_FragColor=res/(1.+diss*dt);}`; const DIV =`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv,vL,vR,vT,vB;uniform sampler2D u;void main(){float L=texture2D(u,vL).x,R=texture2D(u,vR).x,T=texture2D(u,vT).y,B=texture2D(u,vB).y;vec2 C=texture2D(u,vUv).xy;if(vL.x<0.)L=-C.x;if(vR.x>1.)R=-C.x;if(vT.y>1.)T=-C.y;if(vB.y<0.)B=-C.y;gl_FragColor=vec4(.5*(R-L+T-B),0.,0.,1.);}`; const CURL =`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv,vL,vR,vT,vB;uniform sampler2D u;void main(){float v=texture2D(u,vR).y-texture2D(u,vL).y-texture2D(u,vT).x+texture2D(u,vB).x;gl_FragColor=vec4(.5*v,0.,0.,1.);}`; const VORT =`precision highp float;precision highp sampler2D;varying vec2 vUv,vL,vR,vT,vB;uniform sampler2D uVel,uCurl;uniform float curl,dt;void main(){float L=texture2D(uCurl,vL).x,R=texture2D(uCurl,vR).x,T=texture2D(uCurl,vT).x,B=texture2D(uCurl,vB).x,C=texture2D(uCurl,vUv).x;vec2 f=.5*vec2(abs(T)-abs(B),abs(R)-abs(L));f=f/(length(f)+.0001)*curl*C;f.y*=-1.;vec2 vel=texture2D(uVel,vUv).xy+f*dt;gl_FragColor=vec4(clamp(vel,-1e4,1e4),0.,1.);}`; const PRES =`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv,vL,vR,vT,vB;uniform sampler2D uP,uD;void main(){float L=texture2D(uP,vL).x,R=texture2D(uP,vR).x,T=texture2D(uP,vT).x,B=texture2D(uP,vB).x,d=texture2D(uD,vUv).x;gl_FragColor=vec4((L+R+B+T-d)*.25,0.,0.,1.);}`; const GSUB =`precision mediump float;precision mediump sampler2D;varying highp vec2 vUv,vL,vR,vT,vB;uniform sampler2D uP,uVel;void main(){float L=texture2D(uP,vL).x,R=texture2D(uP,vR).x,T=texture2D(uP,vT).x,B=texture2D(uP,vB).x;vec2 vel=texture2D(uVel,vUv).xy-vec2(R-L,T-B);gl_FragColor=vec4(vel,0.,1.);}`; function mkS(src,type){const s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);return s;} function mkP(vs,fs){ const p=gl.createProgram();gl.attachShader(p,mkS(vs,gl.VERTEX_SHADER));gl.attachShader(p,mkS(fs,gl.FRAGMENT_SHADER));gl.linkProgram(p); const locs={};const n=gl.getProgramParameter(p,gl.ACTIVE_UNIFORMS); for(let i=0;i{ [lmx,lmy]=[mx,my]; [mx,my]=toUV(e.clientX,e.clientY); if(lmx<0){lmx=mx;lmy=my;return;} const dx=mx-lmx, dy=my-lmy; if(Math.abs(dx)<1e-4&&Math.abs(dy)<1e-4)return; interact(mx, my, dx*4, dy*4); }); canvas.addEventListener('touchstart',e=>{e.preventDefault();const t=e.touches[0];[mx,my]=toUV(t.clientX,t.clientY);lmx=mx;lmy=my;},{passive:false}); canvas.addEventListener('touchmove',e=>{ e.preventDefault(); const t=e.touches[0]; [lmx,lmy]=[mx,my]; [mx,my]=toUV(t.clientX,t.clientY); interact(mx, my, (mx-lmx)*4, (my-lmy)*4); },{passive:false}); let last=performance.now(); function tick(now){ const dt=Math.min((now-last)/1000,.016);last=now; gl.disable(gl.BLEND); pCurl.use();bq(pCurl);pCurl.s2f('ts',1/sw,1/sh);pCurl.s1i('u',vel.r.attach(0));draw(curl); pVort.use();bq(pVort);pVort.s2f('ts',1/sw,1/sh);pVort.s1i('uVel',vel.r.attach(0));pVort.s1i('uCurl',curl.attach(1));pVort.s1f('curl',CFG.CURL);pVort.s1f('dt',dt);draw(vel.w);vel.swap(); pDiv.use();bq(pDiv);pDiv.s2f('ts',1/sw,1/sh);pDiv.s1i('u',vel.r.attach(0));draw(div); pClear.use();bq(pClear);pClear.s1i('u',pres.r.attach(0));pClear.s1f('v',CFG.PRESSURE);draw(pres.w);pres.swap(); pPres.use();bq(pPres);pPres.s2f('ts',1/sw,1/sh); for(let i=0;i