Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.

We need single-page web app, write it ALL into one self-contained file named index.html in current directory. CSS in style tag, JS in script tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests.

We need to create index.html present.

We need real-time fluid simulation. Probably use Navier-Stokes solver, or simplified. Could use a simple particle system with dye? Swirling colored dye through fluid. Could do a 2D grid fluid simulation like Jos Stam stable fluids. That's doable in JS with canvas. Could be heavy but for full-screen maybe reduce resolution. Use offscreen canvases.

We need mouse drag pushes swirling colored dye.

We can implement a simplified fluid simulation with velocity field u,v and density for dye (multiple colors). Could use 2D grid with size like 256x256 or 128x128 for performance.

Implementation approach:

Create canvas full screen, with high DPI.

Use two canvases? Actually we can use ImageData manipulation.

Simplify: Use fluid simulation with 4 steps: add force, diffuse, advect, project.

Need divergence free.

Alternative: Use simple particle advection with velocity field from mouse? That may not be real-time fluid.

Better to implement classic Jos Stam "Stable Fluids" using JS.

We need colored dye. Could have multiple dye channels RGB.

We could do velocity field as 2 floats per cell. And dye as 3 channels.

Steps:

Initialize grid size N = 256? For full-screen 1920x1080, scaling factor.

Use arrays: Float32Array for u, v, u_prev, v_prev, dye_r,g,b, dye_r_prev...

Operations: add source, diffuse, advect, project.

Add mouse force: when dragging, inject velocity and dye.

Use bilinear interpolation for advect.

Implementation details:

grid size N = 200? Let's pick 256.

Scale: canvas width/height mapped to N.

For performance, N=160 maybe.

Let's pick 256 for 256x256 grid ~ 65k cells. Operations per frame ~ few million, okay in JS? Might be heavy. Could use 128x128.

Let's use 160.

Implementation steps in JS:

let N = 160;
let size = N+2;

Allocate arrays: new Float32Array(size*size)

Index: (x + y*size)

Functions:

lin_solve(b, x, x0, a, c)
diffuse()
advect()
project()
dens_step()

But for velocity we need both u and v.

Dye step similar to density.

Mouse interaction: map mouse position to grid coords. Add force to velocity field: u[idx] += dx * strength; v[idx] += dy * strength;

Add dye: dye_r[idx] += color etc.

Also swirling: maybe add tangential force around mouse.

Simpler: add velocity impulse radial outward? Could create vortex.

We can implement mouse drag: for each cell within radius, apply tangential velocity proportional to distance.

Or simply set velocity at mouse position.

Better effect: when dragging, add velocity in direction of movement, and add dye at that point with random hue.

We can also add small curl noise for swirl.

Maybe create dye as particles: store particles with positions and velocities, advected by velocity field, leave trails. Could be easier? But spec says fluid simulation pushes swirling colored dye through fluid. Particles advected by fluid is okay.

Alternative simpler: use WebGL? No external resources.

Perhaps we can do a hybrid: use canvas 2D for rendering. Use grid for velocity, and use particles for dye (colored). Particles are advected by velocity field, velocity field diffuses and projects. That reduces cost of dye advection.

But we need swirling colored dye through fluid. Particles colored could look good.

Implement stable fluids for velocity, and advect dye particles.

Simplify: Use one density field per color? Might be okay.

Given time constraints, maybe implement a simplified fluid using a grid with semi-Lagrangian advection only, no projection, just damping. That might still look okay.

Probably acceptable to use basic fluid with velocity diffusion and advection, and add dye via advection of RGB density fields.

Implementation steps:

Initialize arrays:
let u = new Float32Array(size*size);
... etc

Functions:

function IX(x,y){ return x + y*size; }

function add_source(x, s, dt){ for i... x[i] += dt*s[i]; }

diffuse:
for iter in 0..19: lin_solve(b, x, x0, a, c)

But a = dt * diff * (N-2)*(N-2)
c = 1 + 4*a

lin_solve uses Gauss-Seidel.

Advect:
for y... for x... d = (x-0.5*dt*u[IX(x,y)], etc ) clamp...

Interpolate using bilinear.

Project: compute divergence, solve poisson, subtract gradient.

Implementation details known from examples.

Let's produce code.

Because we need one file.

We must ensure no external resources. Use only canvas.

Potential performance: JavaScript loops with 160^2=25600 cells. For each step with 20 iterations => ~500k operations per field, okay.

We'll have velocity u,v and dye R,G,B. That's 5 fields.

Each frame: velocity step: add source, diffuse, project, advect, project.

Dye step: add source, diffuse, advect.

Add mouse interaction: On mousemove with button down, compute grid coords, inject velocity based on delta mouse position, and add dye.

Dye color: cycle hue based on time or random.

Implementation plan:

HTML structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fluid Simulation</title>
<style> html,body{margin:0;height:100%;overflow:hidden;background:#000} canvas{display:block;width:100%;height:100%} #info{position:absolute;top:10px;left:10px;color:#fff;font-family:sans-serif;font-size:14px;background:rgba(0,0,0,0.4);padding:6px 10px;border-radius:6px} </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="info">Drag to swirl dye</div>
<script> ... </script>
</body>
</html>

Script:

const canvas = ...
const ctx = ...

Resize handler: set canvas width/height to innerWidth/innerHeight * devicePixelRatio? Could use CSS size and set canvas.width = innerWidth, height... For simplicity use actual pixels, scale.

Grid size: choose N = 180? Might be okay.

Let's define SIM_RES = 180.

But canvas size varies. Mapping: scaleX = canvas.width / N, scaleY = canvas.height / N.

When rendering, we need to draw grid cells as rectangles? That's slow for 180*180 = 32400 rectangles per frame -> maybe okay.

Better: render to image data directly.

Create imageData = ctx.createImageData(canvas.width, canvas.height). Then for each cell, fill rect region.

Simplify: Use putImageData with scaled up? Could map grid to canvas via scaling: draw imageData of size N x N then scale via ctx.drawImage? That would be blurry.

Alternative: Use pixel manipulation: for each pixel in canvas, compute corresponding grid cell via interpolation. That's O(canvas pixels) ~ 2MP -> too heavy.

Better render grid cells as small squares via fillRect loops: 32400 fillRect per frame maybe okay (~60 fps? 32400*60=1.9M draws, maybe okay in Chrome? Might be borderline).

Alternative: render to offscreen canvas of size N x N, then scale to full screen with ctx.drawImage(offscreen,0,0,canvas.width,canvas.height). That's efficient.

We can create offscreen canvas for simulation rendering: simCanvas = document.createElement('canvas'); simCanvas.width = N; simCanvas.height = N; simCtx = simCanvas.getContext('2d'); Then each frame, fill simCtx image data from density arrays, then draw simCanvas scaled to main canvas.

That uses putImageData on small canvas.

Implementation:

simCtx.putImageData(imgData,0,0) where imgData width N height N.

Create Uint8ClampedArray of size N*N*4.

For each cell i, r,g,b = dye arrays * 255? Dye values accumulate. We'll need to clamp.

Better store dye as float and accumulate. For rendering, we can convert to 0-255 with gamma.

Simplify: dye fields store values 0..1. After advection, they diffuse, etc. Rendering just map.

We need dye arrays for r,g,b.

Also we could have one dye field with color hue per cell, but multiple colors mixing.

Implementation details of stable fluids from https://github.com/paperjs/paper.js/... Actually common implementation:

var dt = 0.016;
var diff = 0.0001;
var visc = 0.0001;

But for interactive, need larger diff.

Simplify parameters:
diff = 0.0002
visc = 0.00002

iterations = 4

Let's design code.

Pseudo:

const N = 160;
const size = N+2;
const iter = 4;

let u = new Float32Array(size*size);
let v = new Float32Array(size*size);
let u0 = new Float32Array(size*size);
let v0 = new Float32Array(size*size);
let densR = new Float32Array(size*size);
let densG = new Float32Array(size*size);
let densB = new Float32Array(size*size);
let densR0 = new Float32Array(size*size);
let densG0 = new Float32Array(size*size);
let densB0 = new Float32Array(size*size);

Functions:

function IX(x,y){ return x + y*size; }

function addSource(x,s,dt){ for i... x[i]+=dt*s[i]; }

function linSolve(b,x,x0,a,c){
  const cRecip = 1/c;
  for(k=0;k<iter;k++){
    for(y=1;y<=N;y++){
      for(x=1;x<=N;x++){
        x[IX(x,y)] = (x0[IX(x,y)] + a*( x[IX(x-1,y)] + x[IX(x+1,y)] + x[IX(x,y-1)] + x[IX(x,y+1)] ))*cRecip;
      }
    }
    set_bnd(b,x);
  }
}

function set_bnd(b,x){
  for(i=1;i<=N;i++){
    x[IX(0,i)] = b===1 ? -x[IX(1,i)] : x[IX(1,i)];
    x[IX(N+1,i)] = b===1 ? -x[IX(N,i)] : x[IX(N,i)];
    x[IX(i,0)] = b===2 ? -x[IX(i,1)] : x[IX(i,1)];
    x[IX(i,N+1)] = b===2 ? -x[IX(i,N)] : x[IX(i,N)];
  }
  x[IX(0,0)] = 0.5*(x[IX(1,0)]+x[IX(0,1)]);
  x[IX(0,N+1)] = 0.5*(x[IX(1,N+1)]+x[IX(0,N)]);
  x[IX(N+1,0)] = 0.5*(x[IX(N,0)]+x[IX(N+1,1)]);
  x[IX(N+1,N+1)] = 0.5*(x[IX(N,N+1)]+x[IX(N+1,N)]);
}

diffuse:
function diffuse(b,x,x0,diff,dt){
  const a = dt*diff*(N-2)*(N-2);
  linSolve(b,x,x0,a,1+4*a);
}

advect(b,d,d0,u,v,dt){
  const dtx = dt*(N-2);
  const dty = dt*(N-2);
  for y... for x...
    let x0 = x - dtx*u[IX(x,y)];
    let y0 = y - dty*v[IX(x,y)];
    x0 = Math.max(0.5, Math.min(N+0.5, x0));
    y0 = Math.max(0.5, Math.min(N+0.5, y0));
    const i0 = Math.floor(x0), i1=i0+1;
    const j0 = Math.floor(y0), j1=j0+1;
    const s1 = x0-i0, s0=1-s1;
    const t1 = y0-j0, t0=1-t1;
    d[IX(x,y)] = s0*(t0*d0[IX(i0,j0)] + t1*d0[IX(i0,j1)]) + s1*(t0*d0[IX(i1,j0)] + t1*d0[IX(i1,j1)]);
  set_bnd(b,d);
}

project:
function project(u,v,p,div){
  for y...
    div[IX(x,y)] = -0.5*(u[IX(x+1,y)]-u[IX(x-1,y)] + v[IX(x,y+1)]-v[IX(x,y-1)])/N;
    p[IX(x,y)]=0;
  set_bnd(0,div); set_bnd(0,p);
  linSolve(0,p,div,1,4);
  for y...
    u[IX(x,y)] -= 0.5*(p[IX(x+1,y)]-p[IX(x-1,y)])*N;
    v[IX(x,y)] -= 0.5*(p[IX(x,y+1)]-p[IX(x,y-1)])*N;
  set_bnd(1,u); set_bnd(2,v);
}

Velocity step:
function velocityStep(){
  addSource(u,u0,dt);
  addSource(v,v0,dt);
  u0.set(u); v0.set(v);
  diffuse(1,u,u0,visc,dt);
  diffuse(2,v,v0,visc,dt);
  project(u,v,p,div);
  u0.set(u); v0.set(v);
  advect(1,u,u0,u0,v0,dt);
  advect(2,v,v0,u0,v0,dt);
  project(u,v,p,div);
}

Dye step for each channel:
function densityStep(dens,dens0){
  addSource(dens,dens0,dt);
  dens0.set(dens);
  diffuse(0,dens,dens0,diff,dt);
  dens0.set(dens);
  advect(0,dens,dens0,u,v,dt);
}

But we need separate source arrays for adding dye.

Simplify: we have source arrays for velocity and dye; we clear them each frame.

Implement mouse interaction:
let mouseDown = false;
let lastX, lastY;
canvas addEventListener('pointerdown'...)

On pointermove if down:
gridX = floor( (e.clientX / canvas.width) * N ) +1
gridY...
dx = gridX - lastGridX etc.

We inject velocity:
u[IX(gridX,gridY)] += dx * force
v[IX(gridX,gridY)] += dy * force

Also add dye:
densR[IX(gridX,gridY)] += amount
densG...
densB...

Maybe inject in radius.

Simpler: for radius r=3, loop around and add.

Also add swirl: we can add tangential component: For each cell in radius, compute dx, dy relative to center, add velocity perpendicular.

Let's implement simple injection: at mouse position, set velocity to movement delta * 5, and add dye color based on hue cycling.

Color: hue = (performance.now()*0.0001) %1 ; convert HSL to RGB.

Simpler: random RGB each injection: r = Math.random(); etc.

Also add dye spread.

Implementation details for set_bnd: for b=0 scalar, b=1 u, b=2 v.

Ok.

Rendering:
Each frame:
velocityStep();
densityStep(densR,densR0);
densityStep(densG,densG0);
densityStep(densB,densB0);

Then render:
simImageData = simCtx.createImageData(N,N);
for i=0... N*N:
 idx = i*4
 gridIdx = IX( i%N+1, Math.floor(i/N)+1 )
 r = Math.min(255, densR[gridIdx]*255)
 ... etc
 SimData[idx]=r...
SimData[idx+3]=255

Put image data.

Then draw simCanvas scaled.

Also need damping to prevent buildup.

Add decay: multiply densities by 0.999 each frame.

Ok.

Potential issues: performance of loops in JS for N=160 => size ~162*162=26244. Loops nested: for y=1..N for x=1..N ~ 25600 iterations per function. Each function called several times per frame: velocity step: diffuse u, diffuse v (2*iter loops) ~ 2*4*25600=200k; advect ~ 50k; project ~... maybe okay ~1M iterations per frame, might be okay.

JS loops with 1M iterations at 60fps = 60M ops, maybe okay in Chrome.

We can optimize with typed arrays and for loops.

Alternative use smaller N=128.

Let's pick N=128 for safety.

N=128 -> size 130 => 16900 cells. Good.

Use iter=4.

Implementation details for addSource: we need source arrays cleared each frame.

Let's have uSrc, vSrc, densRSrc etc as zero arrays, then on mouse add to them, then addSource.

Simpler: directly modify u and v arrays for injection then velocityStep will diffuse etc. AddSource with zero source is fine.

Instead we can directly set u[IX] += ...

But addSource expects source array s, we can just add to u directly before step.

Okay.

Let's implement:

function step(){
  // velocity
  // ...
  // density
}

Mouse handling:
canvas.addEventListener('pointerdown', e=>{ mouseDown=true; ... })
pointermove: if mouseDown -> inject.

We need to map client coordinates to canvas coordinates considering CSS size. Use getBoundingClientRect.

Also handle touch.

Add resize handler: on resize, canvas.width = innerWidth * devicePixelRatio? Might cause scaling issues. Simpler: canvas.width = innerWidth; canvas.height = innerHeight; ctx.setTransform(1,0,0,1,0,0);

When drawing simCanvas scaled, ctx.drawImage(simCanvas,0,0,canvas.width,canvas.height);

Ok.

Implement code.

Potential bug: linSolve needs cRecip.

Implementation details precise.

Let's craft final code.

We must write file index.html.

Let's produce write call.

Check for errors: set_bnd uses IX.

Implementation of set_bnd for boundaries:

function set_bnd(b,x){
 for(let i=1;i<=N;i++){
   x[IX(0,i)] = b===1 ? -x[IX(1,i)] : x[IX(1,i)];
   x[IX(N+1,i)] = b===1 ? -x[IX(N,i)] : x[IX(N,i)];
   x[IX(i,0)] = b===2 ? -x[IX(i,1)] : x[IX(i,1)];
   x[IX(i,N+1)] = b===2 ? -x[IX(i,N)] : x[IX(i,N)];
 }
 x[IX(0,0)] = 0.5*(x[IX(1,0)]+x[IX(0,1)]);
 x[IX(0,N+1)] = 0.5*(x[IX(1,N+1)]+x[IX(0,N)]);
 x[IX(N+1,0)] = 0.5*(x[IX(N,0)]+x[IX(N+1,1)]);
 x[IX(N+1,N+1)] = 0.5*(x[IX(N,N+1)]+x[IX(N+1,N)]);
}

Ok.

Project:
function project(u,v,p,div){
 for(let i=1;i<=N;i++){
   for(let j=1;j<=N;j++){
     div[IX(i,j)] = -0.5*( u[IX(i+1,j)]-u[IX(i-1,j)] + v[IX(i,j+1)]-v[IX(i,j-1)] )/N;
     p[IX(i,j)] = 0;
   }
 }
 set_bnd(0,div);
 set_bnd(0,p);
 linSolve(0,p,div,1,4);
 for(let i=1;i<=N;i++){
   for(let j=1;j<=N;j++){
     u[IX(i,j)] -= 0.5*(p[IX(i+1,j)]-p[IX(i-1,j)])*N;
     v[IX(i,j)] -= 0.5*(p[IX(i,j+1)]-p[IX(i,j-1)])*N;
   }
 }
 set_bnd(1,u);
 set_bnd(2,v);
}

Advect:
function advect(b,d,d0,u,v,dt){
 const dtx = dt*(N-2);
 const dty = dt*(N-2);
 for(let j=1;j<=N;j++){
   for(let i=1;i<=N;i++){
     let x = i - dtx*u[IX(i,j)];
     let y = j - dty*v[IX(i,j)];
     if(x<0.5) x=0.5;
     if(x> N+0.5) x=N+0.5;
     if(y<0.5) y=0.5;
     if(y> N+0.5) y=N+0.5;
     const i0 = Math.floor(x);
     const i1 = i0+1;
     const j0 = Math.floor(y);
     const j1 = j0+1;
     const s1 = x-i0;
     const s0 = 1-s1;
     const t1 = y-j0;
     const t0 = 1-t1;
     d[IX(i,j)] = s0*(t0*d0[IX(i0,j0)] + t1*d0[IX(i0,j1)]) +
                  s1*(t0*d0[IX(i1,j0)] + t1*d0[IX(i1,j1)]);
   }
 }
 set_bnd(b,d);
}

linSolve:
function linSolve(b,x,x0,a,c){
 const cRecip = 1.0/c;
 for(let k=0;k<iter;k++){
   for(let j=1;j<=N;j++){
     for(let i=1;i<=N;i++){
       x[IX(i,j)] = (x0[IX(i,j)] + a*(x[IX(i-1,j)] + x[IX(i+1,j)] + x[IX(i,j-1)] + x[IX(i,j+1)]))*cRecip;
     }
   }
   set_bnd(b,x);
 }
}

diffuse:
function diffuse(b,x,x0,diff,dt){
 const a = dt*diff*(N-2)*(N-2);
 linSolve(b,x,x0,a,1+4*a);
}

Add source:
function addSource(x,s,dt){
 for(let i=0;i<size*size;i++) x[i]+=dt*s[i];
}

But we might skip source arrays for velocity injection.

Simpler: directly inject into u/v before step.

Ok.

Implementation steps in animation loop:

function animate(){
 requestAnimationFrame(animate);
 // step
 velocityStep();
 densityStep(densR,densR0);
 densityStep(densG,densG0);
 densityStep(densB,densB0);
 // fade
 // render
 render();
}

Make dt constant 0.016.

Now injection: on pointermove, compute grid coords. Let's compute:

const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const gx = Math.floor( x / canvas.width * N ) +1;
const gy = Math.floor( y / canvas.height * N ) +1;

If mouse down, we want velocity based on delta.

We can store last gx, gy.

velocity injection strength = 5? Let's test.

Set u[IX(gx,gy)] += (gx - lastGx)*force
v[IX(gx,gy)] += (gy - lastGy)*force

Add dye: for radius r=2..4 loop.

Maybe add dye at current position with color.

Add dye amount 100.

densR[IX(gx,gy)] += 50 etc.

Ok.

Also to create swirling, we can add tangential velocity around point: for dx, dy in radius, add v proportional to -dy, u proportional to dx.

Could do both: direct drag + swirl.

Let's implement simple swirl injection: for i from -r to r, for j from -r to r, distance squared < r^2, compute dx = i, dy=j, dist = sqrt(dx^2+dy^2). If dist>0, add velocity perpendicular: u += -dy/dist * strength, v += dx/dist * strength. And add dye.

That creates swirl.

Ok.

Implement pointermove handler:

if mouseDown:
   const gx...
   const gy...
   // swirl
   const radius=3;
   const strength=5;
   for dy=-radius..radius
    for dx...
      ...

Set dye color based on time hue.

Let's pick hue cycle: hue = (performance.now()*0.00005) %1
Convert HSL to RGB.

Implement hslToRgb(h,s,l):
...
Return r,g,b normalized 0-1.

Use s=1, l=0.5.

Add dye amount = 100 * 0.01? We'll just add 50.

Actually densities can grow large; we need to clamp rendering.

Let's add decay: after density step, multiply arrays by 0.998.

Simplify: in densityStep after advect, we could multiply.

Maybe just rely on diffusion and no source.

Ok.

Potential issues: size*size indexing for arrays: allocate size*size.

Ensure IX within bounds.

Now code.

Let's produce final index.html.

We'll write file.

Successfully wrote. We should confirm file exists.