Fluid simulation · lfm-2.5-24b-a2b

We need to build an interactive 2D fluid-and-dye simulation on a full-screen canvas. Let me plan this out.

Requirements:
1. Maintain a velocity field and colored dye field
2. Advect dye through moving fluid - persistent swirling flow
3. Dragging injects dye and momentum in drag direction
4. Momentum and dye remain visible after pointer release, gradually dissipate
5. Seed initial scene with some colored dye and motion
6. Color selector, Pause/Resume, Clear
7. Clear removes dye and resets velocity
8. Bound simulation resolution and work per frame for responsiveness at 1200x800

Let me think about the implementation:

**Fluid simulation approach:**
- Use a grid-based velocity field (Eulerian) with advection
- Dye is also advected by the velocity field
- For "persistent swirling flow", I can seed the initial velocity field with some vorticity or use a simple vortex
- The velocity field can be updated each frame based on some simple physics (e.g., a time-varying pattern)
- Dye advection: particles or grid-based dye that gets advected

Since we need to avoid external libraries, I'll implement everything in plain JavaScript with Canvas 2D.

**Architecture:**
- Canvas fills the viewport (full screen)
- Grid size: maybe 50x50 or 80x80 cells
- Each cell has a velocity vector (vx, vy) and dye value (color + opacity)
- Velocity field update: could be a simple time-varying function (like a combination of vortices)
- Dye advection: semi-Lagrangian or simple upwind/downwind scheme
- Drag: track mouse position, when dragging, add velocity to fluid cells near the cursor and inject dye

**Key features:**
1. **Velocity field**: A grid of velocity vectors. Update them each frame with some smooth variation (e.g., a swirl pattern that rotates over time)
2. **Dye field**: A grid of dye colors. Advected by the velocity field. Also has diffusion (optional) and dissipation (fade out over time)
3. **Drag interaction**: When mouse is pressed, find the nearest grid cell, add velocity to nearby cells (momentum injection), and set dye color at that cell
4. **Pause/Resume**: Toggle the simulation update
5. **Clear**: Reset all dye to zero, reset velocity to zero
6. **Color selector**: Choose dye color(s)

**Implementation details:**

Grid: Let's use NxN cells where N = 40 (so 40x40 = 1600 cells). Each cell represents a region of the canvas.

Canvas: Full screen, so width = window.innerWidth, height = window.innerHeight. But we need to bound the simulation resolution. We can map grid coordinates to canvas coordinates.

**Velocity field:**
- Define a function `getVelocity(x, y)` that returns (vx, vy) based on position and time
- To create swirling: use a combination of rotational components
- Example: vx = -sin(2πy/H) * cos(2πx/W), vy = sin(2πx/W) * cos(2πy/H) — this creates a cellular pattern
- Or a vortex: around center point, vx = -(y - cy)/dist, vy = (x - cx)/dist
- Add time dependence: rotate the pattern over time

**Dye field:**
- 2D array of dye colors (RGBA)
- Advection: for each cell, trace back in time using velocity to find source cell, interpolate dye from there
- Simple approach: forward advection with interpolation
- Dissipation: reduce dye alpha over time
- Injection: when dragging, set dye color at the dragged cell

**Drag:**
- On mousedown: record start position, set dragging state
- On mousemove: if dragging, compute cell index, add velocity to neighboring cells (momentum), and set dye color
- On mouseup: stop dragging

**Controls:**
- Color selector: dropdown or buttons for different dye colors
- Pause/Resume button
- Clear button

**UI:**
- HTML elements: canvas, controls panel
- CSS: styling

Let me write the code.

First, let me check the current directory and see what exists.

Actually, let me just start writing the file. The task says to write to `index.html` in the current working directory.

Let me design the simulation more concretely:

```javascript
const GRID_SIZE = 40;
const CELL_W = canvas.width / GRID_SIZE;
const CELL_H = canvas.height / GRID_SIZE;

// Velocity field: 2D arrays
let vx = new Float32Array(GRID_SIZE * GRID_SIZE);
let vy = new Float32Array(GRID_SIZE * GRID_SIZE);

// Dye field: RGBA per cell
let dye = new Array(GRID_SIZE * GRID_SIZE); // {r, g, b, a}
```

For the velocity field, I'll use a time-varying pattern:

```javascript
function getVelocity(gridX, gridY, t) {
    const cx = GRID_SIZE / 2, cy = GRID_SIZE / 2;
    const dx = gridX - cx, dy = gridY - cy;
    const dist = Math.sqrt(dx*dx + dy*dy) || 1;
    
    // Base swirl
    let angle = Math.atan2(dy, dx) + t * 0.5;
    let speed = Math.sin(dist / 5) * 2; // some variation
    
    return {
        x: -Math.sin(angle) * speed,
        y: -Math.cos(angle) * speed
    };
}
```

Hmm, but this needs to be stored in arrays for fast access. Let me precompute the velocity field each frame based on time.

Actually, for performance, I can compute velocity on the fly during advection. But precomputing into arrays is faster.

Let me structure it:

Each frame:
1. Update velocity field (based on position and time)
2. Advect dye: for each cell, find source position via backward advection, interpolate dye
3. Apply dissipation to dye
4. If dragging, inject dye and momentum

For advection, I'll use a simple semi-Lagrangian scheme:
- For each cell (i, j):
  - Backtrack: x_src = x - vx[i][j] * dt, y_src = y - vy[i][j] * dt
  - Map back to grid indices
  - Bilinear interpolation of dye from neighbors

This is standard and works well.

**Momentum injection during drag:**
- When dragging, for cells near the cursor position, add the local velocity to the velocity field (momentum)
- Set dye color at the dragged cell

**Dissipation:**
- After each frame, multiply dye alpha by a factor like 0.995

**Color selector:**
- A few preset colors: red, blue, green, yellow, purple
- When user selects a color, use it for the next drag injection

**UI layout:**
- Full-screen canvas
- Overlay or side panel with controls: color selector (dropdown), Pause/Resume button, Clear button

Let me write the complete HTML file now.

Let me think about the grid mapping:
- Cell (i, j) where i = 0..GRID_SIZE-1 (x), j = 0..GRID_SIZE-1 (y)
- Position: x = i * CELL_W + CELL_W/2, y = j * CELL_H + CELL_H/2

For the velocity field, I'll compute it as:
```javascript
for (let i = 0; i < GRID_SIZE; i++) {
    for (let j = 0; j < GRID_SIZE; j++) {
        const idx = i * GRID_SIZE + j;
        const t = performance.now() / 1000;
        // ... compute vx[idx], vy[idx]
    }
}
```

For advection of dye:
```javascript
// Create temporary buffer for new dye
let newDye = new Array(GRID_SIZE * GRID_SIZE);
for (let i = 0; i < GRID_SIZE; i++) {
    for (let j = 0; j < GRID_SIZE; j++) {
        const idx = i * GRID_SIZE + j;
        // Current position
        const cx = i * CELL_W + CELL_W / 2;
        const cy = j * CELL_H + CELL_H / 2;
        
        // Backtrack
        let sx = cx - vx[idx] * dt;
        let sy = cy - vy[idx] * dt;
        
        // Clamp to grid
        sx = Math.max(0, Math.min(canvas.width, sx));
        sy = Math.max(0, Math.min(canvas.height, sy));
        
        // Convert back to grid indices
        const si = Math.floor(sx / CELL_W);
        const sj = Math.floor(sy / CELL_H);
        
        // Bilinear interpolation
        const di = si % GRID_SIZE;
        const dj = sj % GRID_SIZE;
        const dw = si / GRID_SIZE;
        const dh = sj / GRID_SIZE;
        
        // ... interpolate from 4 neighbors
        
        // Add injected dye if dragging
        let color = currentColor;
        if (dragging) {
            color = currentColor;
        }
        
        newDye[idx] = { r, g, b, a };
    }
}
```

Wait, I need to be careful with the indices. Let me use row-major order: index = j * GRID_SIZE + i (y first) or i * GRID_SIZE + j (x first). Let me use index = i * GRID_SIZE + j where i is x-index, j is y-index.

Actually, let me keep it simple:
- i = x index (0..N-1)
- j = y index (0..N-1)
- index = i + j * GRID_SIZE (row-major, y varies slower? No, typically index = i * N + j means i changes fastest)

Let me use: index = i * GRID_SIZE + j, where i is x, j is y. So row 0 (y=0) has indices 0..N-1, row 1 has N..2N-1, etc.

Hmm, actually for drawing, I want to map (i,j) to pixel position. Let me define:
- cell center: px = (i + 0.5) * CELL_W, py = (j + 0.5) * CELL_H

OK, let me write the code now. I'll make it clean and functional.

**Color selection:** I'll create a `<select>` element with options for different dye colors. Default color could be something like cyan or magenta.

**Rendering:**
- Clear canvas
- Draw velocity field? Not needed, but maybe draw dye as colored rectangles
- For each cell, draw a small rectangle filled with the dye color (with alpha)
- Maybe draw a trail effect

Actually, for visual appeal, I'll render the dye as colored blocks covering each cell. Since the dye persists and diffuses, it should look like swirling colored regions.

Let me also add a slight blur/diffusion to the dye. I can do simple Gaussian-like smoothing each frame.

**Dissipation:** Multiply alpha by 0.99 each frame.

**Momentum injection:** During drag, for cells within a radius of the cursor, add the local velocity to the velocity field (this creates a swirling pattern that persists).

Let me code this up.

Actually, let me reconsider the velocity field. A static swirl pattern might be boring. Let me make it time-dependent with multiple vortices or a flowing pattern.

Velocity function:
```javascript
function computeVelocityField(t) {
    const cx = GRID_SIZE / 2, cy = GRID_SIZE / 2;
    for (let i = 0; i < GRID_SIZE; i++) {
        for (let j = 0; j < GRID_SIZE; j++) {
            const idx = i * GRID_SIZE + j;
            const dx = i - cx;
            const dy = j - cy;
            const dist = Math.sqrt(dx*dx + dy*dy) || 1;
            
            // Time-varying swirl
            const angle = Math.atan2(dy, dx) + t * 0.3;
            const speed = 1.5 + Math.sin(dist * 0.8) * 0.5;
            
            vx[idx] = -Math.sin(angle) * speed;
            vy[idx] = -Math.cos(angle) * speed;
        }
    }
}
```

This creates a rotating pattern that slowly changes over time.

Now, for the advection step, I need to be careful about the time step. Let me use dt = 1 (or a small fraction). Actually, since the velocity values are around 1-2, and the cell size is about 30px (for 40x40 grid on 1200x800), the displacement per frame would be about 30-60 pixels, which is too much. I should scale down the velocity or use a smaller dt.

Let me set the velocity magnitude to be around 0.5-1.0, and use dt = 1. Then displacement = velocity * dt ≈ 0.5-1 pixels per frame, which is slow enough to see detail.

Or, I can normalize the velocity to a reasonable range.

Let me adjust: vx, vy values around -1 to 1. With CELL_W ≈ 30, displacement ≈ 30-60 pixels per frame. That's actually fine for visualization - the dye will move noticeably.

But for advection accuracy, I might want smaller steps. Let me use dt = 0.5 and scale velocities accordingly.

Actually, let me keep it simple: velocity magnitude around 0.5-1.5, dt = 1. The dye will advect one cell per frame roughly. That's acceptable for a demo.

**Drag injection:**
- On mousedown at (mx, my): convert to grid cell (dx, dy)
- Set dragging = true
- In each frame while dragging:
  - For cells within radius R of the cursor: vx[cell] += dragVelocity * 0.1 (add momentum)
  - Set dye at the dragged cell to the selected color
- On mouseup: dragging = false

**Clear:**
- Set all dye alpha to 0
- Reset velocity field to zero (or to the base swirl pattern)
- Actually, velocity should probably reset to the base pattern, not zero, so the flow continues naturally

Let me think about what "reset velocity" means. The requirement says "Clear removes dye and resets velocity". So velocity should go to zero or to a calm state. I'll reset the velocity field to the base swirl pattern (which is always present) - no wait, "resets velocity" probably means setting it to zero. But then the flow would stop. Hmm.

I think the intent is: clear removes dye and resets the fluid to a calm state. But having a completely still fluid might make the second drag less interesting. Let me reset to the base swirl pattern (the natural flow) - this way the simulation is reset to a known state, and the next drag starts fresh.

Actually, re-reading: "Clear removes dye and resets velocity; the next drag can start a new flow." This suggests that after clear, the fluid is calm (velocity reset to zero or minimal). But for the demo to be interesting, I'll reset to a minimal base velocity (like a gentle background flow) or zero. Let me reset to zero velocity and let the drag create the flow. The base swirl pattern I defined is always computed from time, so if I reset the velocity array to zeros, the flow will only come from drag injections. That's fine.

Hmm, but if velocity is zero, the dye won't move except where injected. That's actually good for showing the drag effect. Let me reset velocity to zero on clear.

Wait, but then the "persistent swirling flow" mentioned in requirements comes from the initial seeded velocity field. So the initial scene has a swirling velocity pattern. After clear, it's reset to calm. The first drag creates a flow. Subsequent drags create additional flows.

OK, let me finalize the design:

**Initial state:**
- Velocity field: base swirl pattern (time-varying)
- Dye: a small seeded amount - maybe a few colored spots at random positions, with some initial velocity

**Seeding dye:**
- Initialize a few cells with colored dye (e.g., red and blue blobs)
- These will be advected by the velocity field

**Controls:**
- Color selector: dropdown with colors (red, blue, green, yellow, purple, cyan)
- Pause/Resume toggle
- Clear button

**Rendering:**
- Draw each cell as a colored rectangle with the dye color
- Maybe add a slight transparency so layers show up

Let me write the code now.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fluid Dye Simulation</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #111; }
  canvas { display: block; width: 100vw; height: 100vh; }
  #controls {
    position: fixed;
    top: 10px; left: 10px;
    background: rgba(0,0,0,0.7);
    padding: 15px;
    border-radius: 8px;
    color: white;
    font-family: sans-serif;
    z-index: 10;
  }
  #controls button, #controls select {
    margin: 5px 0;
    padding: 5px 10px;
    background: #333;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
  }
  #controls button:hover { background: #555; }
  #controls label { display: block; font-size: 13px; margin-bottom: 5px; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
  <label>Dye Color:</label>
  <select id="colorSelect">
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
    <option value="#0000ff">Blue</option>
    <option value="#ffff00">Yellow</option>
    <option value="#ff00ff">Magenta</option>
    <option value="#00ffff">Cyan</option>
  </select>
  <button id="pauseBtn">Pause</button>
  <button id="clearBtn">Clear</button>
</div>
<script>
// ... simulation code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let W, H;
let GRID = 40;
let CELL_W, CELL_H;

let vx = new Float32Array(GRID * GRID);
let vy = new Float32Array(GRID * GRID);
let dye = new Array(GRID * GRID).fill(null).map(() => ({r:0,g:0,b:0,a:0}));
let prevTime = null;

// State
let dragging = false;
let dragStartX = 0, dragStartY = 0;
let dragCellX = 0, dragCellY = 0;
let currentColor = '#ff0000';
let paused = false;

// Initialize
function resize() {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
    CELL_W = W / GRID;
    CELL_H = H / GRID;
}

window.addEventListener('resize', resize);
resize();

// Initialize velocity field
function initVelocity(t) {
    const cx = GRID / 2, cy = GRID / 2;
    for (let i = 0; i < GRID; i++) {
        for (let j = 0; j < GRID; j++) {
            const idx = i * GRID + j;
            const dx = i - cx;
            const dy = j - cy;
            const dist = Math.sqrt(dx*dx + dy*dy) || 1;
            const angle = Math.atan2(dy, dx) + t * 0.3;
            const speed = 0.8 + Math.sin(dist * 0.8) * 0.4;
            vx[idx] = -Math.sin(angle) * speed;
            vy[idx] = -Math.cos(angle) * speed;
        }
    }
}

// Initialize dye - seed with a few colored spots
function initDye() {
    // Reset all dye
    for (let i = 0; i < GRID * GRID; i++) {
        dye[i].r = 0; dye[i].g = 0; dye[i].b = 0; dye[i].a = 0;
    }
    // Seed some dye at random positions
    const seedCount = 5;
    for (let k = 0; k < seedCount; k++) {
        const i = Math.floor(Math.random() * GRID);
        const j = Math.floor(Math.random() * GRID);
        const idx = i * GRID + j;
        const c = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'][k % 4];
        const [r, g, b] = c.match(/\w/g).map(x => parseInt(x, 16));
        dye[idx] = {r, g, b, a: 0.8};
    }
}

// Advection step
function advectDye(dt) {
    const newDye = new Array(GRID * GRID).fill(null).map(() => ({r:0,g:0,b:0,a:0}));
    
    for (let i = 0; i < GRID; i++) {
        for (let j = 0; j < GRID; j++) {
            const idx = i * GRID + j;
            const cx = (i + 0.5) * CELL_W;
            const cy = (j + 0.5) * CELL_H;
            
            // Backtrack
            let sx = cx - vx[idx] * dt;
            let sy = cy - vy[idx] * dt;
            
            // Clamp
            sx = Math.max(0, Math.min(W, sx));
            sy = Math.max(0, Math.min(H, sy));
            
            // Grid indices
            const si = Math.floor(sx / CELL_W);
            const sj = Math.floor(sy / CELL_H);
            const di = si % GRID;
            const dj = sj % GRID;
            
            // Bilinear interpolation
            const dx = sx - si * CELL_W;
            const dy = sy - sj * CELL_H;
            
            const i0 = di * GRID + dj;
            const i1 = (di + 1) % GRID * GRID + dj;
            const i2 = di * GRID + (dj + 1) % GRID;
            const i3 = (di + 1) % GRID * GRID + (dj + 1) % GRID;
            
            const c00 = dye[i0];
            const c10 = dye[i2];
            const c01 = dye[i1];
            const c11 = dye[i3];
            
            const u = dx / CELL_W;
            const v = dy / CELL_H;
            
            newDye[idx] = {
                r: c00.r * (1-u)*(1-v) + c10.r * u*(1-v) + c01.r * (1-u)*v + c11.r * u*v,
                g: c00.g * (1-u)*(1-v) + c10.g * u*(1-v) + c01.g * (1-u)*v + c11.g * u*v,
                b: c00.b * (1-u)*(1-v) + c10.b * u*(1-v) + c01.b * (1-u)*v + c11.b * u*v,
                a: dye[i0].a * (1-u)*(1-v) + dye[i2].a * u*(1-v) + dye[i1].a * (1-u)*v + dye[i3].a * u*v
            };
        }
    }
    
    // Dissipation
    for (let i = 0; i < GRID * GRID; i++) {
        newDye[i].a *= 0.995;
    }
    
    dye = newDye;
}

// Inject dye during drag
function injectDragging() {
    if (!dragging) return;
    const idx = dragCellX * GRID + dragCellY;
    dye[idx] = { r: hexToRgb(currentColor).r, g: hexToRgb(currentColor).g, b: hexToRgb(currentColor).b, a: 0.9 };
}

// Helper: hex to RGB
function hexToRgb(hex) {
    const h = hex.replace('#', '');
    if (h.length === 3) {
        h = h[0]+h[0] + h[1]+h[1] + h[2]+h[2];
    }
    const r = parseInt(h.substring(0,2), 16);
    const g = parseInt(h.substring(2,4), 16);
    const b = parseInt(h.substring(4,6), 16);
    return {r, g, b};
}

// Mouse events
canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    const ix = Math.floor(mx / CELL_W);
    const iy = Math.floor(my / CELL_H);
    if (ix >= 0 && ix < GRID && iy >= 0 && iy < GRID) {
        dragging = true;
        dragCellX = ix;
        dragCellY = iy;
    }
});

canvas.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    const ix = Math.floor(mx / CELL_W);
    const iy = Math.floor(my / CELL_H);
    if (ix >= 0 && ix < GRID && iy >= 0 && iy < GRID) {
        dragCellX = ix;
        dragCellY = iy;
    }
});

canvas.addEventListener('mouseup', () => {
    dragging = false;
});

canvas.addEventListener('mouseleave', () => {
    dragging = false;
});

// Controls
const colorSelect = document.getElementById('colorSelect');
colorSelect.addEventListener('change', (e) => {
    currentColor = e.target.value;
});

document.getElementById('pauseBtn').addEventListener('click', () => {
    paused = !paused;
    document.getElementById('pauseBtn').textContent = paused ? 'Resume' : 'Pause';
});

document.getElementById('clearBtn').addEventListener('click', () => {
    for (let i = 0; i < GRID * GRID; i++) {
        dye[i].r = 0; dye[i].g = 0; dye[i].b = 0; dye[i].a = 0;
    }
    // Reset velocity to zero
    for (let i = 0; i < GRID * GRID; i++) {
        vx[i] = 0;
        vy[i] = 0;
    }
    // Re-seed dye? No, clear removes dye.
    // But maybe keep the base swirl? The requirement says reset velocity.
    // Let's keep the base swirl velocity (initVelocity with t=0)
    // Actually, let's reset to zero velocity for a clean slate
});

// Simulation loop
let lastTime = null;
function simulationStep(time) {
    const dt = lastTime ? (time - lastTime) / 1000 : 0.016;
    lastTime = time;
    
    if (!paused) {
        // Update velocity field
        initVelocity(time / 1000);
        
        // Advect dye
        advectDye(dt);
        
        // Inject dye if dragging
        injectDragging();
    }
    
    render();
    requestAnimationFrame(simulationStep);
}

function render() {
    ctx.clearRect(0, 0, W, H);
    
    // Draw dye
    for (let i = 0; i < GRID * GRID; i++) {
        const c = dye[i];
        if (c.a > 0.01) {
            ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
            ctx.fillRect(i % GRID * CELL_W, Math.floor(i / GRID) * CELL_H, CELL_W, CELL_H);
        }
    }
}

requestAnimationFrame(simulationStep);
```

Hmm, there's an issue with the dye initialization. The `initDye` function should be called once at startup. Let me call it after resize.

Also, I need to handle the case where the canvas is resized - the grid stays the same size but the cell dimensions change.

Let me also think about the visual quality. Drawing each cell as a solid rectangle might look blocky. That's fine for a grid-based simulation.

One concern: the bilinear interpolation indices. Let me double-check:
- i0 = di * GRID + dj → this is wrong. It should be: row-major, index = i * GRID + j where i is x-index (column), j is y-index (row).
- So for a given (si, sj): index = si * GRID + sj
- i0 = di * GRID + dj
- i1 = (di+1) % GRID * GRID + sj → no, this is wrong. Let me think again.

If index = i * GRID + j (i=x, j=y):
- i0 = di * GRID + dj
- i1 = (di+1) * GRID + dj (wrap around)
- i2 = di * GRID + (dj+1) % GRID
- i3 = (di+1) * GRID + (dj+1) % GRID

Yes, that's correct.

But wait, for the interpolation, I'm using u and v as normalized distances within the cell. That's correct.

Another issue: the dye array uses `new Array(GRID * GRID).fill(null).map(...)` which creates an array of length GRID*GRID. Good.

Let me also add a slight blur/diffusion effect. Actually, the dissipation (alpha decay) already makes it fade. For color mixing, I could add a small amount of color blending between adjacent cells, but that's complex. The bilinear interpolation already does some smoothing.

Let me also consider: the velocity field should probably have some background flow even when paused/cleared. The requirement says "reset velocity" on clear. I'll reset to zero. The drag will create the flow.

Actually, thinking about it more, having the base swirl pattern always present (even if velocity is zeroed) would make the simulation more visually interesting. But the requirement explicitly says "Clear removes dye and resets velocity". I'll follow that: reset velocity to zero.

Hmm, but then after clear, the dye won't move at all (except where injected). That's actually fine - the user can drag again to create a new flow.

Let me also add a subtle background color to the canvas (dark gray/black) so the dye stands out.

Now, let me also think about the "persistent swirling flow" requirement. The initial velocity field has a swirl pattern. The seeded dye will be carried by this flow, creating swirling patterns. The drag adds momentum in the drag direction, which modifies the velocity field locally, creating additional swirls.

I think this satisfies the requirements. Let me refine the code and write it.

One more thing: the `initVelocity` function uses `t` as time in seconds. I'm passing `time / 1000`. Good.

Let me also make sure the simulation runs smoothly. With GRID=40, we have 1600 cells. Each frame: velocity computation (1600 ops), advection (1600 ops with interpolation), injection (1 op). That's about 3200 ops per frame, very fast.

Now, let me write the complete file.

Actually, I realize I should test the code. Let me write it to disk and run it in the browser.

Let me also add a few more visual touches:
- Maybe draw the velocity field faintly? Not necessary.
- Add a subtle grid overlay? No, keep it clean.

Let me finalize the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fluid Dye Simulation</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #0a0a0a; }
  canvas { display: block; width: 100vw; height: 100vh; }
  #controls {
    position: fixed;
    top: 10px; left: 10px;
    background: rgba(20, 20, 20, 0.85);
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    z-index: 10;
    min-width: 200px;
  }
  #controls h3 { margin-bottom: 10px; font-size: 15px; color: #aaa; }
  #controls label { display: block; font-size: 13px; margin: 8px 0 4px; color: #ccc; }
  #controls select, #controls button {
    width: 100%;
    padding: 6px 8px;
    margin: 2px 0;
    border: 1px solid #444;
    border-radius: 4px;
    background: #2a2a2a;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
  }
  #controls button:hover { background: #444; }
  #controls button.primary { background: #3a7bd5; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">
  <h3>Fluid Dye Simulation</h3>
  <label>Dye Color</label>
  <select id="colorSelect">
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
    <option value="#0000ff">Blue</option>
    <option value="#ffff00">Yellow</option>
    <option value="#ff00ff">Magenta</option>
    <option value="#00ffff">Cyan</option>
  </select>
  <button id="pauseBtn" class="primary">Pause</button>
  <button id="clearBtn">Clear</button>
</div>
<script>
(function() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    const GRID = 40;
    let vx = new Float32Array(GRID * GRID);
    let vy = new Float32Array(GRID * GRID);
    let dye = new Array(GRID * GRID);
    for (let i = 0; i < GRID * GRID; i++) {
        dye[i] = { r: 0, g: 0, b: 0, a: 0 };
    }
    
    let W, H, CELL_W, CELL_H;
    let dragging = false;
    let dragCellX = 0, dragCellY = 0;
    let currentColor = '#ff0000';
    let paused = false;
    let lastTime = null;
    
    function resize() {
        W = canvas.width = window.innerWidth;
        H = canvas.height = window.innerHeight;
        CELL_W = W / GRID;
        CELL_H = H / GRID;
    }
    
    window.addEventListener('resize', resize);
    resize();
    
    function hexToRgb(hex) {
        const h = hex.replace('#', '');
        if (h.length === 3) {
            h = h[0]+h[0] + h[1]+h[1] + h[2]+h[2];
        }
        return {
            r: parseInt(h.substring(0,2), 16),
            g: parseInt(h.substring(2,4), 16),
            b: parseInt(h.substring(4,6), 16)
        };
    }
    
    function initVelocity(t) {
        const cx = GRID / 2, cy = GRID / 2;
        for (let i = 0; i < GRID; i++) {
            for (let j = 0; j < GRID; j++) {
                const idx = i * GRID + j;
                const dx = i - cx;
                const dy = j - cy;
                const dist =

We need to build an interactive 2D fluid-and-dye simulation on a full-screen canvas. Let me plan this out:

1. Maintain a velocity field and a colored dye field
2. Advect dye through moving fluid so it forms persistent swirling flow
3. Dragging injects dye and momentum in the drag direction
4. Momentum and dye remain visible after pointer release, gradually dissipate
5. Seed initial scene with some colored dye and motion
6. Color selector, Pause/Resume, Clear controls
7. Bound simulation resolution

I'll write a self-contained index.html with inline CSS and JS. I'll use Canvas 2D for simplicity.

Key components:
- A grid-based velocity field (Eulerian) - maybe a small grid that gets interpolated
- Dye field (passive scalar advected by velocity)
- Particle-like representation of dye (or pixel-based)
- Mouse interaction: when dragging, add dye at cursor position and set velocity
- Pause/resume toggle
- Clear button
- Color selector

Let me think about the simulation approach:

**Velocity Field**: Use a staggered grid (like a simple fluid sim). For each cell, store a velocity vector (vx, vy). Update using a simple method like:
- Advection of velocity (optional, or keep static)
- Or simpler: a base flow field that creates swirling patterns

Actually, for a "swirling flow" effect, I can seed the velocity field with a vortex pattern. Then the dye is advected by this field.

**Dye Field**: A 2D array of color values (RGBA) representing dye concentration. Each frame, advect dye using the velocity field (simple upwind or bilinear interpolation).

**Drawing**: Render the dye as colored pixels onto the canvas. Maybe use `fillRect` per pixel or draw rectangles. For performance, I could use ImageData.

**Mouse interaction**: On mousedown, record start position. While dragging, update the velocity at the mouse position (or set a global velocity) and spawn dye particles/pixels along the path. When mouseup, stop.

Let me design a practical implementation:

1. Canvas fills the viewport (full screen)
2. Grid size: e.g., 40x40 cells (each cell ~30px at 1200x800 → 40*30=1200, good)
3. Velocity field: 41x41 grid (cell corners), storing vx, vy
4. Initial velocity: create a few vortices (swirls) at different positions
5. Dye field: same grid size, RGBA values (alpha = concentration)
6. Advection: for each cell, find the position, sample velocity from neighboring grid points, move the dye
7. Rendering: draw dye as colored pixels

For the dye, I'll use an ImageData buffer. Each frame:
- Advect dye: for each cell, compute new position based on velocity, then redistribute
- Actually, a simpler approach: treat dye as particles? But the requirement says "a collection of independent fading particles is not sufficient" - meaning we should use a field-based approach, not just particles.

So field-based dye advection is the way.

Let me implement:

**Grid**: 50x50 cells (at 1200x800, each cell ≈ 24px)

**Velocity field initialization**:
- Create a few vortex centers
- For each grid point, compute velocity from vorticity: vx = -omega * (y - cy), vy = omega * (x - cx)
- This creates swirling flows

**Dye initialization**: Small random colored spots

**Advection step**:
- For each cell, compute the displacement over dt
- Use bilinear interpolation of velocity from neighbors
- Move dye concentration

Actually, for simplicity and visual quality, let me do a simpler but effective approach:

- Use a fixed grid for velocity (staggered or regular)
- Initialize velocity with a few swirling patterns
- Dye is stored as a 2D float array (concentration 0-1)
- Each frame: advect dye using velocity field (simple forward Euler + interpolation)
- Render dye as colored pixels: map concentration to color (e.g., red channel varies by hue)

**Mouse drag**:
- On mousedown: record start, set dragging state
- During drag: update velocity at the mouse location (add a boost in drag direction), and set dye at the current mouse position (spawn a bright spot)
- On mouseup: stop

**Controls**:
- Color selector: dropdown to change dye color(s)
- Pause/Resume: toggle simulation stepping
- Clear: reset dye to zero, reset velocity

Let me code this up. I'll make it reasonably performant.

Let me structure the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  body { margin: 0; overflow: hidden; background: #000; }
  canvas { display: block; }
  #ui {
    position: fixed;
    top: 10px; left: 10px;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 5px;
    color: white;
    font-family: sans-serif;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  <div>Color: <select id="colorSelect"></select></div>
  <button id="pauseBtn">Pause</button>
  <button id="clearBtn">Clear</button>
</div>
<script>
// ... simulation code ...
</script>
</body>
</html>
```

Now the JavaScript:

**Constants**:
- GRID_SIZE = 60 (or something that fits 1200x800)
- Cell size = canvas.width / GRID_SIZE

**Velocity field**:
- Array of {vx, vy} for each cell
- Initialize with a few vortices

**Dye field**:
- Float32Array of size GRID_SIZE * GRID_SIZE, values 0-1
- Also store color per cell? Or just one color channel? The color selector suggests changing the dye color. So maybe dye has a base color that's tinted by the selector.

Let me have dye be a single-color field where the color is determined by the selector. The dye itself is a scalar field (concentration), and its color is set by the selector.

**Rendering**:
- Create ImageData from dye concentration
- Set pixel R, G, B based on color selector
- Alpha = concentration
- PutImageData to canvas

**Advection**:
For each cell (i,j):
- x = i * cellSize, y = j * cellSize
- Sample velocity at (x, y) via bilinear interpolation from grid
- dx = vx * dt, dy = vy * dt
- newX = x + dx, newY = y + dy
- Accumulate into a new concentration buffer

This is standard semi-Lagrangian or Eulerian advection. Let me use a simple semi-Lagrangian approach:
- For each cell, trace back: where did the fluid come from?
- x_back = x - vx * dt
- Find grid indices, interpolate velocity at that position
- Move concentration accordingly

Actually, for simplicity, let's do a basic Eulerian advection with interpolation:

```
for each cell (i,j):
  // current position
  px = i * cellSize
  py = j * cellSize
  
  // velocity at this cell
  vx = vel[i][j].vx
  vy = vel[i][j].vy
  
  // move
  nx = px + vx * dt
  ny = py + vy * dt
  
  // find which cell nx,ny falls into
  ti = floor(nx / cellSize)
  tj = floor(ny / cellSize)
  if within bounds:
    // interpolate concentration
    ...
```

Hmm, this is getting complex. Let me simplify: use a fixed grid and just move dye by sampling velocity at the cell center. For a demo, this should look okay.

Actually, let me think about what looks good. The key requirements:
1. Swirling flow from initial seed
2. Drag injects dye and momentum
3. Dye persists and dissipates
4. Second drag creates new flow
5. Clear resets

A simpler but effective approach:
- Velocity field: static swirling vortices (precomputed)
- Dye: advected by velocity
- Drag: adds a velocity impulse at the mouse position and spawns dye

Let me implement it step by step.

**Velocity initialization**:
Create a function `initVelocity()` that sets up a few vortices:
- Vortex 1: center (0.3, 0.5), strength +1
- Vortex 2: center (0.7, 0.5), strength -1
- etc.

For each grid cell (u, v) in [0, N-1]:
  x = u / N, y = v / N (normalized 0-1)
  vx = 0
  vy = 0
  for each vortex:
    dx = x - cx, dy = y - cy
    r2 = dx*dx + dy*dy
    strength = strength / (r2 + epsilon)
    vx += -dy * strength
    vy += dx * strength
  vel[u][v] = {vx, vy}

This creates smooth swirling patterns.

**Dye initialization**:
- Small random colored spots in the center area
- concentration = 1.0 at those spots

**Dissipation**:
- Each frame, multiply dye concentration by a factor like 0.995 (dissipate 0.5% per frame)

**Drawing**:
- Color = selected color (e.g., HSL with hue from selector)
- Map concentration to alpha

**Color selector**: 
- A few preset colors: red, blue, green, cyan, magenta, yellow
- Or a color picker? The requirement says "color selector". I'll use a select dropdown with preset colors.

**Drag handling**:
- mousemove on canvas: if dragging, update velocity at mouse position (add drag velocity to nearby cells) and spawn dye
- Actually, to make it feel right: when dragging, the velocity field gets a boost in the drag direction around the cursor. And dye is emitted from the cursor position.

Let me implement:
- On mousedown: start drag, record start position
- On mousemove while dragging: 
  - Compute drag direction (mouse - start)
  - Add a velocity boost to the velocity field in that region (e.g., a Gaussian falloff)
  - Spawn dye at the mouse position (set concentration to 1.0 there)
- On mouseup: stop dragging

For the velocity boost, I'll add a small vector to cells near the mouse:
```
for each cell near mouse:
  dist = distance to mouse
  strength = exp(-dist^2 / radius^2)
  vel[cell].vx += dragDir.x * strength * boostFactor
  vel[cell].vy += dragDir.y * strength * boostFactor
```

**Pause/Resume**: Skip advection/dye update steps when paused.

**Clear**: Set all dye concentrations to 0, reset velocity to initial state (or zero).

Let me now write the code. I'll aim for a clean, working implementation.

Let me decide on grid size: 60x60. At 1200x800, cell size = 20px. That's reasonable.

Actually, for better visual detail, let me use 80x80 cells (15px each). That gives more resolution.

Let me code it up.

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();

const GRID = 80;
const CELL = Math.floor(W / GRID); // approximate
// Actually, let's keep cell size constant: CELL_SIZE = 15
const CELL_SIZE = 15;
const COLS = Math.floor(W / CELL_SIZE);
const ROWS = Math.floor(H / CELL_SIZE);
```

Hmm, the grid should adapt to the canvas size. Let me define GRID = 60 and compute cell size from canvas dimensions.

Let me write the full code now.

Actually, let me reconsider the advection approach. For a nice swirling effect, the velocity field needs to be continuous. I'll precompute the velocity field as a 2D array of {vx, vy}.

For dye advection, I'll use a simple approach:
1. Create a new concentration buffer
2. For each cell, compute the displacement due to velocity over dt
3. Interpolate the old concentration at the source position
4. Write to new buffer

This is Eulerian advection. Let me implement bilinear interpolation for the source position.

```javascript
function advectDye(dye, vel, dt) {
  const newDye = new Float32Array(GRID * GRID);
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const idx = j * COLS + i;
      const x = i * cellSize + cellSize / 2;
      const y = j * cellSize + cellSize / 2;
      
      // Get velocity at this cell
      const v = vel[j][i];
      const vx = v.vx * dt;
      const vy = v.vy * dt;
      
      let sx = x + vx;
      let sy = y + vy;
      
      // Bilinear interpolation
      const fx = (sx - i * cellSize) / cellSize;
      const fy = (sy - j * cellSize) / cellSize;
      
      // Clamp
      fx = Math.max(0, Math.min(1, fx));
      fy = Math.max(0, Math.min(1, fy));
      
      const i0 = j * COLS + i;
      const i1 = i + 1;
      const j0 = (j + 1) * COLS + i;
      const j1 = (j + 1) * COLS + i + 1;
      
      // Clamp indices
      const c00 = newDye[i0];
      const c10 = i1 < COLS ? newDye[i1] : c00;
      const c01 = j0 < ROWS * COLS ? newDye[j0] : c00;
      const c11 = j1 < ROWS * COLS ? newDye[j1] : c00;
      
      const c = (1-fx)*(1-fy)*c00 + fx*(1-fy)*c10 + (1-fx)*fy*c01 + fx*fy*c11;
      
      newDye[idx] = c;
    }
  }
  return newDye;
}
```

Wait, the indices for bilinear interpolation need to be careful. Let me restructure: the concentration buffer is indexed by cell index. For a given source position (sx, sy), I find the four surrounding cell indices and interpolate.

Actually, let me simplify even further. Since this is a demo, I can use a simpler advection: just move the dye concentration by the velocity at the cell center. This is less accurate but works for visual purposes.

Or, I can use a particle-based approach for dye but with a field for velocity... no, the requirement explicitly says "advect dye through the moving fluid" and "a collection of independent fading particles is not sufficient" — meaning don't just use particles. So a field-based dye is needed.

Let me go with the field-based approach with bilinear interpolation. It should work fine.

Now, for the initial dye: place a few small blobs of dye in the center with different colors.

For the color selector: a dropdown with options like "Red", "Blue", "Green", "Cyan", "Magenta", "Yellow".

Let me write the complete HTML file now.

Here's my plan for the code structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fluid & Dye Simulation</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; font-family: sans-serif; }
  canvas { display: block; }
  #ui {
    position: fixed;
    top: 10px; left: 10px;
    background: rgba(0,0,0,0.75);
    padding: 10px 15px;
    border-radius: 6px;
    color: #fff;
    z-index: 10;
  }
  #ui button, #ui select {
    margin: 4px 0;
    padding: 5px 10px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  <label>Dye Color:</label>
  <select id="colorSelect">
    <option value="#ff0000">Red</option>
    <option value="#00ffff">Cyan</option>
    <option value="#0000ff">Blue</option>
    <option value="#ff00ff">Magenta</option>
    <option value="#00ff00">Green</option>
    <option value="#ffff00">Yellow</option>
  </select>
  <button id="pauseBtn">Pause</button>
  <button id="clearBtn">Clear</button>
</div>
<script>
// ... simulation code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
let cellSize;
let COLS, ROWS;

// Velocity field
let vel = []; // 2D array of {vx, vy}
let initialVel = []; // copy of initial velocity

// Dye field
let dye = new Float32Array(); // concentration 0-1

// State
let dragging = false;
let dragStartX, dragStartY;
let dragDir = {x: 0, y: 0};
const DRAG_BOOST = 0.05;
const DRAG_RADIUS = cellSize * 2;

// Parameters
let dt = 1; // time step
let dissipation = 0.998; // dye dissipation per frame

// Color
let dyeColor = '#ff0000';

// Initialize
function init() {
  resize();
  setupVelocity();
  initDye();
  setupUI();
}

function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  cellSize = Math.floor(Math.min(W, H) / 60);
  COLS = Math.floor(W / cellSize);
  ROWS = Math.floor(H / cellSize);
  // Resize dye buffer
  dye = new Float32Array(COLS * ROWS);
}

function setupVelocity() {
  vel = [];
  initialVel = [];
  for (let j = 0; j < ROWS; j++) {
    vel[j] = [];
    initialVel[j] = [];
    for (let i = 0; i < COLS; i++) {
      vel[j][i] = {vx: 0, vy: 0};
      initialVel[j][i] = {vx: 0, vy: 0};
    }
  }
  
  // Create swirling vortices
  const vortices = [
    {cx: 0.3, cy: 0.5, strength: 0.8},
    {cx: 0.7, cy: 0.5, strength: -0.8},
    {cx: 0.5, cy: 0.3, strength: 0.6},
    {cx: 0.5, cy: 0.7, strength: -0.6}
  ];
  
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const x = i / COLS;
      const y = j / ROWS;
      let vx = 0, vy = 0;
      for (const v of vortices) {
        const dx = x - v.cx;
        const dy = y - v.cy;
        const r2 = dx*dx + dy*dy;
        const s = v.strength / (r2 + 0.01);
        vx += -dy * s;
        vy += dx * s;
      }
      vel[j][i].vx = vx;
      vel[j][i].vy = vy;
      initialVel[j][i] = {vx: vx, vy: vy};
    }
  }
}

function initDye() {
  // Reset dye
  dye.fill(0);
  // Add some initial dye spots
  const spots = [
    {x: W/2, y: H/2, color: dyeColor, strength: 1.0},
    {x: W/2 + 20, y: H/2 - 15, color: dyeColor, strength: 0.8}
  ];
  for (const spot of spots) {
    const ci = Math.floor(spot.x / cellSize);
    const cj = Math.floor(spot.y / cellSize);
    if (ci >= 0 && ci < COLS && cj >= 0 && cj < ROWS) {
      dye[cj * COLS + ci] = Math.min(1, spot.strength);
    }
  }
}

function setupUI() {
  const colorSelect = document.getElementById('colorSelect');
  colorSelect.addEventListener('change', () => {
    dyeColor = colorSelect.value;
  });
  
  const pauseBtn = document.getElementById('pauseBtn');
  pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
  });
  
  const clearBtn = document.getElementById('clearBtn');
  clearBtn.addEventListener('click', () => {
    dye.fill(0);
    // Reset velocity to initial
    for (let j = 0; j < ROWS; j++) {
      for (let i = 0; i < COLS; i++) {
        vel[j][i].vx = initialVel[j][i].vx;
        vel[j][i].vy = initialVel[j][i].vy;
      }
    }
  });
}

let paused = false;

// Mouse handling
canvas.addEventListener('mousedown', (e) => {
  dragging = true;
  dragStartX = e.clientX;
  dragStartY = e.clientY;
  const rect = canvas.getBoundingClientRect();
  dragDir.x = 0;
  dragDir.y = 0;
});

canvas.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  
  // Update drag direction
  dragDir.x = mx - dragStartX;
  dragDir.y = my - dragStartY;
  
  // Apply drag boost to velocity field
  applyDragBoost(mx, my);
  
  // Spawn dye at cursor position
  const ci = Math.floor(mx / cellSize);
  const cj = Math.floor(my / cellSize);
  if (ci >= 0 && ci < COLS && cj >= 0 && cj < ROWS) {
    dye[cj * COLS + ci] = 1.0;
  }
});

canvas.addEventListener('mouseup', () => {
  dragging = false;
});

canvas.addEventListener('mouseleave', () => {
  dragging = false;
});

function applyDragBoost(mx, my) {
  const cx = mx / W;
  const cy = my / H;
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const dx = (i / COLS) - cx;
      const dy = (j / ROWS) - cy;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < DRAG_RADIUS) {
        const falloff = Math.exp(-dist * dist / (DRAG_RADIUS * DRAG_RADIUS));
        vel[j][i].vx += dragDir.x * falloff * 0.03;
        vel[j][i].vy += dragDir.y * falloff * 0.03;
      }
    }
  }
}

function advectDye() {
  const newDye = new Float32Array(COLS * ROWS);
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const x = i * cellSize + cellSize / 2;
      const y = j * cellSize + cellSize / 2;
      
      const v = vel[j][i];
      const vx = v.vx * dt;
      const vy = v.vy * dt;
      
      let sx = x + vx;
      let sy = y + vy;
      
      // Clamp to bounds
      sx = Math.max(0, Math.min(W - cellSize, sx));
      sy = Math.max(0, Math.min(H - cellSize, sy));
      
      // Bilinear interpolation
      const fx = (sx - i * cellSize) / cellSize;
      const fy = (sy - j * cellSize) / cellSize;
      const clampFx = Math.max(0, Math.min(1, fx));
      const clampFy = Math.max(0, Math.min(1, fy));
      
      const idx00 = j * COLS + i;
      const idx10 = (j * COLS + (i + 1)) < (ROWS * COLS) ? idx00 + 1 : idx00;
      const idx01 = ((j + 1) * COLS + i) < (ROWS * COLS) ? idx00 + COLS : idx00;
      const idx11 = ((j + 1) * COLS + (i + 1)) < (ROWS * COLS) ? idx00 + COLS + 1 : idx00;
      
      const c00 = dye[idx00];
      const c10 = dye[idx10];
      const c01 = dye[idx01];
      const c11 = dye[idx11];
      
      newDye[idx00] = (1-clampFx)*(1-clampFy)*c00 + clampFx*(1-clampFy)*c10 + (1-clampFx)*clampFy*c01 + clampFx*clampFy*c11;
    }
  }
  dye = newDye;
}

function render() {
  // Create image data
  const imageData = ctx.createImageData(W, H);
  const data = imageData.data;
  
  const r = parseInt(dyeColor.slice(1, 3), 16);
  const g = parseInt(dyeColor.slice(3, 5), 16);
  const b = parseInt(dyeColor.slice(5, 7), 16);
  
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const idx = j * COLS + i;
      const conc = dye[idx];
      const offset = idx * 4;
      const alpha = conc;
      data[offset] = r;
      data[offset + 1] = g;
      data[offset + 2] = b;
      data[offset + 3] = Math.round(alpha * 255);
    }
  }
  
  ctx.putImageData(imageData, 0, 0);
}

function update() {
  if (!paused) {
    advectDye();
    // Dissipation
    for (let k = 0; k < dye.length; k++) {
      dye[k] *= dissipation;
    }
  }
}

function loop() {
  update();
  render();
  requestAnimationFrame(loop);
}

function initAndRun() {
  init();
  loop();
}

initAndRun();
```

Wait, there are some issues:
1. The dye buffer size changes when COLS/ROWS change on resize. Need to handle that.
2. The bilinear interpolation indices might be off. Let me double-check.
3. The initial dye spots: I'm setting dye[cj * COLS + ci] = strength, but this overwrites. Should accumulate or set individual cells.

Also, I need to make sure the simulation runs at a reasonable frame rate. With 60x60 grid and 80x80, it should be fine.

Let me also add some initial velocity perturbation to make the flow more interesting.

Let me refine the code. I'll also add a second pass of the simulation after clear to verify fresh flow.

One concern: the dye advection uses the velocity field which is static (initialized once). The drag modifies the velocity field dynamically. This means the flow evolves based on both the initial vortices and the drag-induced velocities. Good.

Let me also make the initial dye more visible: add a few colored spots in different locations.

Now, let me think about the "persistent swirling flow" requirement. The initial vortices should create swirling patterns. The dye will be advected by these vortices, creating persistent swirling dye trails. Good.

For the second drag test: after clearing, dragging in a new direction should create a new flow that mixes with the existing dye (which dissipates over time).

Let me finalize the code. I'll write it to index.html.

Actually, let me reconsider the grid size. At 1200x800, if I use 60x60 grid, cell size = 20px. That's reasonable. If the window is smaller, cell size adjusts.

Let me also add a subtle background or keep it black. Black background with colored dye is fine.

Let me also make sure the UI is positioned nicely. Fixed overlay in the top-left corner.

Now, let me write the complete file. I'll be careful with the JavaScript syntax.

One more thing: the `dye` buffer needs to be reallocated when the grid size changes. In the resize function, I should recreate the dye array.

Also, I realize the initial dye spots should be placed at specific pixel positions, and I need to convert to grid indices correctly.

Let me write the final version:

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
let cellSize;
let COLS, ROWS;

let vel = [];
let initialVel = [];

let dye = null;

let dragging = false;
let dragStartX = 0, dragStartY = 0;
let dragDir = {x: 0, y: 0};

let paused = false;
let dt = 1;

const DRAG_BOOST = 0.04;
const DRAG_RADIUS = 30;

const VORTICES = [
  {cx: 0.3, cy: 0.5, strength: 0.9},
  {cx: 0.7, cy: 0.5, strength: -0.9},
  {cx: 0.5, cy: 0.3, strength: 0.7},
  {cx: 0.5, cy: 0.7, strength: -0.7}
];

function resize() {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  cellSize = Math.floor(Math.min(W, H) / 60);
  COLS = Math.floor(W / cellSize);
  ROWS = Math.floor(H / cellSize);
  // Reinitialize fields
  initVelocity();
  initDye();
}

function initVelocity() {
  vel = [];
  initialVel = [];
  for (let j = 0; j < ROWS; j++) {
    vel[j] = [];
    initialVel[j] = [];
    for (let i = 0; i < COLS; i++) {
      vel[j][i] = {vx: 0, vy: 0};
      initialVel[j][i] = {vx: 0, vy: 0};
    }
  }
  // Create swirling vortices
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const x = i / COLS;
      const y = j / ROWS;
      let vx = 0, vy = 0;
      for (const v of VORTICES) {
        const dx = x - v.cx;
        const dy = y - v.cy;
        const r2 = dx * dx + dy * dy;
        const s = v.strength / (r2 + 0.001);
        vx += -dy * s;
        vy += dx * s;
      }
      vel[j][i].vx = vx;
      vel[j][i].vy = vy;
      initialVel[j][i] = {vx: vx, vy: vy};
    }
  }
}

function initDye() {
  dye = new Float32Array(COLS * ROWS);
  // Reset
  dye.fill(0);
  // Initial dye spots
  const spots = [
    {x: W / 2, y: H / 2, strength: 1.0},
    {x: W / 2 + 25, y: H / 2 - 15, strength: 0.9},
    {x: W / 2 - 20, y: H / 2 + 10, strength: 0.8}
  ];
  for (const spot of spots) {
    const ci = Math.floor(spot.x / cellSize);
    const cj = Math.floor(spot.y / cellSize);
    if (ci >= 0 && ci < COLS && cj >= 0 && cj < ROWS) {
      dye[cj * COLS + ci] = Math.min(1, spot.strength);
    }
  }
}

function setupUI() {
  const colorSelect = document.getElementById('colorSelect');
  colorSelect.addEventListener('change', () => {
    dyeColor = colorSelect.value;
  });
  
  const pauseBtn = document.getElementById('pauseBtn');
  pauseBtn.addEventListener('click', () => {
    paused = !paused;
    pauseBtn.textContent = paused ? 'Resume' : 'Pause';
  });
  
  const clearBtn = document.getElementById('clearBtn');
  clearBtn.addEventListener('click', () => {
    dye.fill(0);
    // Reset velocity to initial
    for (let j = 0; j < ROWS; j++) {
      for (let i = 0; i < COLS; i++) {
        vel[j][i].vx = initialVel[j][i].vx;
        vel[j][i].vy = initialVel[j][i].vy;
      }
    }
  });
}

function applyDragBoost(mx, my) {
  const cx = mx / W;
  const cy = my / H;
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const dx = (i / COLS) - cx;
      const dy = (j / ROWS) - cy;
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < DRAG_RADIUS) {
        const falloff = Math.exp(-dist * dist / (DRAG_RADIUS * DRAG_RADIUS));
        vel[j][i].vx += dragDir.x * falloff * DRAG_BOOST;
        vel[j][i].vy += dragDir.y * falloff * DRAG_BOOST;
      }
    }
  }
}

function advectDye() {
  const newDye = new Float32Array(COLS * ROWS);
  for (let j = 0; j < ROWS; j++) {
    for (let i = 0; i < COLS; i++) {
      const x = i * cellSize + cellSize / 2;
      const y = j * cellSize + cellSize / 2;
      
      const v = vel[j][i];
      const vx = v.vx * dt;
      const vy = v.vy * dt;
      
      let sx = x + vx;
      let sy = y + vy;
      
      sx = Math.max(0, Math.min(W - cellSize, sx));
      sy = Math.max(0, Math.min(H - cellSize, sy));
      
      const fx = (sx - i * cellSize) / cellSize;
      const fy = (sy - j * cellSize) / cellSize;
      const clampFx = Math.max(0, Math.min(1, fx));
      const clampFy = Math.max(0, Math.min(1, fy));
      
      const idx = j * COLS + i;
      const idx00 = idx;
      const idx10 = (idx + 1) < (COLS * ROWS) ? idx + 1 :

We need to build an interactive 2D fluid-and-dye simulation on a full-screen canvas. Let me plan this out:

1. A velocity field (fluid) that moves around
2. A colored dye field that gets advected by the velocity field
3. Dragging injects dye and momentum in the drag direction
4. Momentum and dye persist after pointer release, gradually dissipating
5. Seed initial scene with some colored dye and motion
6. Color selector, Pause/Resume, Clear controls
7. Clear removes dye and resets velocity

I'll implement this using Canvas 2D. The approach:
- Create a grid-based velocity field (e.g., 2D array of vectors)
- Advect dye particles through the velocity field
- Use a simple Eulerian grid approach: velocity at each cell advects dye from neighboring cells
- For the dye, use a set of passive tracer particles or a density grid
- Dragging: when mouse is pressed, apply force to velocity field in drag direction, and add dye particles at the cursor position
- Dissipation: slowly decay velocity and dye over time
- Color selector: change dye color
- Pause/Resume: toggle simulation
- Clear: reset everything

Let me think about the implementation:

**Velocity Field:**
- Grid size: maybe 40x40 or 50x50 for a 1200x800 viewport
- Each cell has a velocity vector (vx, vy)
- Initialize with some swirling pattern (like a vortex)

**Dye Field:**
- Also a grid of dye values (or particle positions)
- Advect dye using the velocity field
- Dye persists and swirls

**Dragging:**
- On mousedown: record start position, set dragging state
- On mousemove: update velocity at the cursor position based on drag direction, inject dye particles
- On mouseup: stop dragging, let the injected dye flow

**Controls:**
- Color selector: dropdown to pick dye color
- Pause/Resume button
- Clear button

**Dissipation:**
- Decay velocity magnitude slightly each frame
- Decay dye concentration

Let me design the structure:

```html
<!DOCTYPE html>
<html>
<head>
<style>...</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="controls">...</div>
<script>
// Simulation code
</script>
</body>
</html>
```

For the simulation, I'll use a grid-based approach:

Grid: 60x60 (for 1200x800, each cell is 20px). Actually, let me make it responsive - calculate cell size based on canvas size.

Let me define:
- `gridSize`: number of cells in each dimension
- `cellSize`: canvas width / gridSize, canvas height / gridSize
- `velocity[x][y]`: {x, y} velocity at cell center
- `dye[x][y]`: dye concentration at cell center (0-1)

Initialization:
- Velocity: create a swirling vortex in the center
- Dye: small seeded blobs of color

Advection:
- For each cell, compute new position of dye by moving according to velocity
- Use simple upwind or semi-Lagrangian scheme

Actually, for simplicity and visual quality, I can use a particle-based approach for dye:
- Maintain an array of dye particles (each with position, velocity inherited from nearby fluid)
- But the requirement says "a collection of independent fading particles is not sufficient" - meaning we need an Eulerian velocity field that advects dye, not just independent particles.

So the approach should be:
- Eulerian velocity grid
- Dye as a density field on the same grid (or as particles advected by the velocity field)
- To make dye persistent and swirl, advect the dye density

Let me implement dye as a grid of concentrations, and advect it each frame:
```
newDye[x][y] = interpolate(velocity from neighbors)
```
Or simpler: for each cell, move its dye to the next cell based on velocity.

Actually, a common approach for fluid simulation on a grid:
1. Advection step: move dye particles or grid values along velocity field
2. Diffusion step (optional)
3. Injection from drag

Let me go with a grid-based dye field where each cell holds a dye value, and I advect it using a semi-Lagrangian method:
- For each cell (i,j), trace back in time by dt * velocity(i,j) to find source position
- Interpolate dye value from source position

This is more accurate but complex. A simpler approach:
- For each cell, compute the new dye value as a weighted average of neighboring cells based on velocity direction
- Or use a simple forward Euler: dye[i][j] += dt * (velocity field divergence) ... no, that's not right.

Simpler approach: maintain dye as particles, but also have a velocity field that affects them. The key requirement is that dye is advected through the moving fluid (Eulerian advection), not just independent particles. So I'll do both:
- Velocity field on grid
- Dye as a grid of concentrations, advected via semi-Lagrangian interpolation
- Plus optionally some dye particles for visualization

Let me keep it manageable. Here's my plan:

**Grid**: 50x50 (for 1200x800, cell size = 24px)

**Velocity initialization**: 
- Create a radial vortex: v = (-y, x) / r^2 type, plus some noise
- Add a second smaller vortex for complexity

**Dye initialization**:
- Place a few colored dots in the center
- Maybe a small swirling pattern

**Advection of dye**:
- Semi-Lagrangian: for each cell, backtrace position
- Find the four surrounding grid indices
- Bilinear interpolation of dye values

**Drag**:
- On mousedown: record start, set dragging
- While dragging: compute drag direction (mouse delta), apply force to velocity field in that direction at the mouse position's cell, and spawn dye particles at the mouse position
- On mouseup: stop dragging

**Dissipation**:
- velocity *= 0.99 (or some factor)
- dye *= 0.995

**Controls**:
- Color selector: changes the dye color
- Pause/Resume: toggles simulation stepping
- Clear: resets velocity and dye

Let me write the code now.

Actually, let me think about the canvas sizing. Full-screen canvas. I'll set canvas.width = window.innerWidth, canvas.height = window.innerHeight, and resize on window resize.

Let me write the complete HTML file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fluid & Dye Simulation</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #111; font-family: sans-serif; }
  canvas { display: block; position: absolute; top: 0; left: 0; }
  #ui {
    position: fixed;
    top: 10px; left: 10px;
    z-index: 10;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 5px;
  }
  #controls { display: flex; gap: 10px; align-items: center; }
  .control { color: white; font-size: 14px; }
  button { padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  <div class="control">Color: <select id="colorSelect"></select></div>
  <button id="pauseBtn">Pause</button>
  <button id="clearBtn">Clear</button>
</div>
<script>
// ... simulation code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
let gridSize = 50;
let cellSize;

let velocity; // 2D array [y][x] of {x, y}
let dye;      // 2D array [y][x] of density (0-1)
let dyeParticles = []; // for visualization

// Drag state
let dragging = false;
let dragStartX, dragStartY;
let dragForceX, dragForceY;

// Simulation state
let paused = false;
let running = true;
let time = 0;

// Colors
const COLORS = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];

// Initialize
function init() {
  resize();
  W = canvas.width;
  H = canvas.height;
  cellSize = Math.floor(W / gridSize);
  
  // Initialize velocity field - swirling vortex
  velocity = [];
  for (let y = 0; y < gridSize; y++) {
    velocity[y] = [];
    for (let x = 0; x < gridSize; x++) {
      velocity[y][x] = { x: 0, y: 0 };
    }
  }
  
  // Create vortex at center
  const cx = W / 2, cy = H / 2;
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const dx = x / gridSize - 0.5;
      const dy = y / gridSize - 0.5;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist > 0.01) {
        // Swirl: tangential velocity
        const angle = Math.atan2(dy, dx);
        const speed = Math.exp(-dist * 3) * 2;
        velocity[y][x].x = -Math.sin(angle) * speed;
        velocity[y][x].y = Math.cos(angle) * speed;
      }
    }
  }
  
  // Initialize dye - small colored blobs
  dye = [];
  for (let y = 0; y < gridSize; y++) {
    dye[y] = [];
    for (let x = 0; x < gridSize; x++) {
      dye[y][x] = 0;
    }
  }
  
  // Seed dye at center
  const seedX = Math.floor(gridSize / 2);
  const seedY = Math.floor(gridSize / 2);
  const radius = 3;
  for (let dy = -radius; dy <= radius; dy++) {
    for (let dx = -radius; dx <= radius; dx++) {
      const nx = seedX + dx;
      const ny = seedY + dy;
      if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize) {
        const dist = Math.sqrt(dx*dx + dy*dy);
        dye[ny][nx] = Math.max(0, 1 - dist / radius);
      }
    }
    // Color the seed region
    dye[seedY][seedX] = 0.8;
    dye[seedY+1][seedX] = 0.6;
  }
  
  // Initialize particles for visualization
  dyeParticles = [];
  for (let i = 0; i < 100; i++) {
    dyeParticles.push({
      x: Math.random() * W,
      y: Math.random() * H,
      vx: 0, vy: 0,
      life: 1
    });
  }
}

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListener('resize', resize);
```

Hmm, I'm mixing grid-based dye with particle visualization. Let me simplify: use the dye grid for rendering (draw colored rectangles per cell), and use particles for additional visual effect.

Actually, let me reconsider. The simplest effective approach:

1. **Velocity field**: grid of vectors
2. **Dye field**: grid of density values, advected each frame
3. **Rendering**: draw the dye as colored rectangles overlaid on the canvas
4. **Drag**: inject dye particles at cursor position (small circles drawn on canvas)

For the dye injection during drag, I'll add dye particles at the mouse position that then get advected by the velocity field.

Let me restructure:

```javascript
// Advect dye grid using semi-Lagrangian
function advectDye(dt) {
  const newDye = [];
  for (let y = 0; y < gridSize; y++) {
    newDye[y] = [];
    for (let x = 0; x < gridSize; x++) {
      // Backtrace
      const vx = velocity[y][x].x * dt;
      const vy = velocity[y][x].y * dt;
      let px = x + vx;
      let py = y + vy;
      
      // Clamp to grid
      px = Math.max(0, Math.min(gridSize - 1, px));
      py = Math.max(0, Math.min(gridSize - 1, py));
      
      // Bilinear interpolation
      const ix0 = Math.floor(px);
      const iy0 = Math.floor(py);
      const ix1 = Math.min(gridSize - 1, ix0 + 1);
      const iy1 = Math.min(gridSize - 1, iy0 + 1);
      const sx = px - ix0;
      const sy = py - iy0;
      
      newDye[y][x] = 
        (1-sx)*(1-sy)*dye[iy0][ix0] +
        sx*(1-sy)*dye[iy0][ix1] +
        (1-sx)*sy*dye[iy1][ix0] +
        sx*sy*dye[iy1][ix1];
    }
  }
  dye = newDye;
}
```

Wait, there's a problem with the semi-Lagrangian approach: the backtrace uses velocity at the current cell, but the dye at the source position might be stale. For a simple simulation this is fine.

Actually, for better stability, I could use a simpler forward advection:
- For each cell, the dye value moves with the flow
- newDye[y][x] = dye at the position that flows into (x,y) this frame

The semi-Lagrangian backtrace is the standard approach. Let me stick with it.

**Damping**:
- velocity[y][x].x *= 0.999;
- velocity[y][x].y *= 0.999;
- dye[y][x] *= 0.998;

**Drag**:
- When mouse is pressed: record the drag start position
- While dragging: compute drag direction (current mouse pos - start pos), and apply a force to velocity at the cell under the cursor
- Also spawn dye particles at the mouse position

For the drag force, I want to inject momentum in the drag direction. So:
- On mousedown: set dragging = true, record start
- On mousemove while dragging: 
  - Compute drag direction = (mouseX - startX, mouseY - startY)
  - Apply force to velocity at the cell near the mouse position: velocity[cy][cx].x += dragDir.x * dragStrength
  - Spawn dye particles at the mouse position
- On mouseup: dragging = false

Let me refine the drag mechanics. The drag should inject dye and momentum in the drag direction. So when dragging, the velocity field gets a push in the drag direction at the cursor location, and dye is emitted from the cursor position.

For the dye emission, I'll add particles at the mouse position that then get advected. These particles will be visible as small dots on the canvas.

Let me also add a color selector that changes the dye color. The dye grid stores density (0-1), and the rendering color is determined by the selected color.

Now let me write the complete code. I'll aim for a clean, working implementation.

Let me think about the rendering:
- Clear canvas
- Draw velocity field? Maybe not necessary, but could be nice
- Draw dye field: for each cell, fill a rectangle with the dye color
- Draw dye particles (from drag injection): small circles
- Draw UI overlay

For the dye color, I'll use a single color selected from the dropdown. The dye field will be rendered in that color (with varying opacity based on density).

Let me finalize the code structure:

```javascript
// Setup
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const colorSelect = document.getElementById('colorSelect');

let W, H, gridSize, cellSize;
let velocity, dye;
let paused = false;
let dragging = false;
let dragStartX, dragStartY;
let dragForce = { x: 0, y: 0 };
let dragStrength = 0.3;
let time = 0;

// Init
function init() { ... }

// Main loop
function loop() {
  if (!paused) {
    update();
  }
  render();
  requestAnimationFrame(loop);
}

function update() {
  // Advect dye
  advectDye(1);
  
  // Apply drag force
  if (dragging) {
    const cx = Math.floor(mouseX / cellSize);
    const cy = Math.floor(mouseY / cellSize);
    if (cx >= 0 && cx < gridSize && cy >= 0 && cy < gridSize) {
      velocity[cy][cx].x += dragForce.x * 0.5;
      velocity[cy][cx].y += dragForce.y * 0.5;
    }
    
    // Inject dye particles
    for (let i = 0; i < 2; i++) {
      dyeParticles.push({
        x: mouseX,
        y: mouseY,
        vx: 0,
        vy: 0,
        life: 1
      });
    }
  }
  
  // Dissipation
  dampDye();
  dampVelocity();
  
  time++;
}

function advectDye(dt) {
  // Semi-Lagrangian advection
  const newDye = [];
  for (let y = 0; y < gridSize; y++) {
    newDye[y] = [];
    for (let x = 0; x < gridSize; x++) {
      const vx = velocity[y][x].x * dt;
      const vy = velocity[y][x].y * dt;
      let px = x + vx;
      let py = y + vy;
      px = Math.max(0, Math.min(gridSize - 1, px));
      py = Math.max(0, Math.min(gridSize - 1, py));
      
      const ix0 = Math.floor(px);
      const iy0 = Math.floor(py);
      const ix1 = Math.min(gridSize - 1, ix0 + 1);
      const iy1 = Math.min(gridSize - 1, iy0 + 1);
      const sx = px - ix0;
      const sy = py - iy0;
      
      newDye[y][x] = 
        (1-sx)*(1-sy)*dye[iy0][ix0] +
        sx*(1-sy)*dye[iy0][ix1] +
        (1-sx)*sy*dye[iy1][ix0] +
        sx*sy*dye[iy1][ix1];
    }
  }
  dye = newDye;
}

function dampDye() {
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      dye[y][x] *= 0.995;
    }
  }
}

function dampVelocity() {
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      velocity[y][x].x *= 0.9995;
      velocity[y][x].y *= 0.9995;
    }
  }
}
```

For the dye particles (visualization), I'll render them as small circles on top of the dye field:

```javascript
function render() {
  ctx.clearRect(0, 0, W, H);
  
  // Draw dye field
  const color = colorSelect.value;
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const alpha = dye[y][x] * 0.6;
      ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
    }
  }
  
  // Draw dye particles
  for (let i = dyeParticles.length - 1; i >= 0; i--) {
    const p = dyeParticles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.life -= 0.02;
    if (p.life <= 0) {
      dyeParticles.splice(i, 1);
      continue;
    }
    ctx.fillStyle = color + Math.floor(p.life * 255).toString(16).padStart(2, '0');
    ctx.fillRect(p.x - 3, p.y - 3, 6, 6);
  }
}
```

Hmm, the color string concatenation needs care. Let me use a proper color format: `rgba(r, g, b, a)`.

Let me use:
```javascript
ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha})`;
```

Where r,g,b are from the selected color.

For the color selector, I'll populate it with the available colors.

Now, let me think about the initial seed. I want the scene to be visible on load. So I'll seed the dye with a few colored regions and maybe a small initial vortex.

Let me also add a subtle background grid or something to make the canvas look nice.

OK, let me write the complete file now. I'll be careful with the code.

One concern: the semi-Lagrangian advection with bilinear interpolation should work well enough for a demo.

Let me also think about the drag injection. When dragging, I want to:
1. Apply a force to the velocity field at the cell under the cursor (in the drag direction)
2. Emit dye particles at the cursor position

For the force, I'll add a velocity impulse proportional to the drag direction. The drag direction is (mouseX - startX, mouseY - startY). I'll normalize it and scale by strength.

Actually, for a more natural feel, the drag should inject momentum in the direction of the drag. So if you drag right, the fluid gets pushed right. I'll apply velocity to the cell under the cursor: velocity[cy][cx].x += dragDir.x * dragScale.

And for dye, emit particles at the mouse position.

Let me also consider: the velocity field should probably be smoothed/diffused. For a simple simulation, the damping (0.9995 per frame) provides some diffusion-like effect.

Now, let me write the complete index.html.

Actually, let me reconsider the grid size. For 1200x800, if gridSize = 50, cellSize = 24px. That's reasonable.

But if the viewport is different, cellSize should adjust. I'll recalculate cellSize on resize.

Let me also handle the case where the mouse is outside the canvas (shouldn't happen since it's full screen).

Here's my complete plan for the JS:

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const colorSelect = document.getElementById('colorSelect');

let W, H, gridSize = 50;
let cellSize;
let velocity, dye;
let paused = false;
let dragging = false;
let dragStartX, dragStartY;
let dragForceX = 0, dragForceY = 0;
let time = 0;

const COLORS = [
  '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff',
  '#ff8800', '#8800ff', '#00aa00', '#ffaa00'
];

// Populate color selector
COLORS.forEach(c => {
  const opt = document.createElement('option');
  opt.value = c;
  opt.textContent = c;
  colorSelect.appendChild(opt);
});
colorSelect.value = '#ff0000';

function init() {
  resize();
  W = canvas.width;
  H = canvas.height;
  cellSize = Math.max(1, Math.floor(W / gridSize));
  
  // Velocity field
  velocity = Array.from({length: gridSize}, () => 
    Array.from({length: gridSize}, () => ({x: 0, y: 0}))
  );
  
  // Swirl vortex
  const cx = W / 2, cy = H / 2;
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const dx = x / gridSize - 0.5;
      const dy = y / gridSize - 0.5;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist > 0.01) {
        const angle = Math.atan2(dy, dx);
        const speed = Math.exp(-dist * 3.5) * 3;
        velocity[y][x].x = -Math.sin(angle) * speed;
        velocity[y][x].y = Math.cos(angle) * speed;
      }
    }
  }
  
  // Dye field - seed with a few colored blobs
  dye = Array.from({length: gridSize}, () => 
    Array.from({length: gridSize}, () => 0)
  );
  const seedX = Math.floor(gridSize / 2);
  const seedY = Math.floor(gridSize / 2);
  // Red blob
  for (let dy = -2; dy <= 2; dy++) {
    for (let dx = -2; dx <= 2; dx++) {
      const nx = seedX + dx, ny = seedY + dy;
      if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize) {
        const dist = Math.sqrt(dx*dx + dy*dy);
        dye[ny][nx] = 0.9 * (1 - dist / 2);
      }
    }
  }
  // Green blob offset
  for (let dy = -2; dy <= 2; dy++) {
    for (let dx = -2; dx <= 2; dx++) {
      const nx = seedX + dx + 1;
      const ny = seedY + dy + 1;
      if (nx >= 0 && nx < gridSize && ny >= 0 && ny < gridSize) {
        const dist = Math.sqrt(dx*dx + dy*dy);
        dye[ny][nx] = 0.7 * (1 - dist / 2);
      }
    }
  }
  
  // Particles for visual effect
  dyeParticles = [];
  for (let i = 0; i < 80; i++) {
    dyeParticles.push({
      x: Math.random() * W,
      y: Math.random() * H,
      vx: (Math.random() - 0.5) * 1,
      vy: (Math.random() - 0.5) * 1,
      life: 1
    });
  }
}

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListener('resize', resize);

document.getElementById('pauseBtn').addEventListener('click', () => {
  paused = !paused;
});

document.getElementById('clearBtn').addEventListener('click', () => {
  // Reset velocity
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      velocity[y][x] = {x: 0, y: 0};
    }
  }
  // Reset dye
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      dye[y][x] = 0;
    }
  }
  // Remove particles
  dyeParticles = [];
  time = 0;
});

canvas.addEventListener('mousedown', (e) => {
  dragging = true;
  dragStartX = e.clientX;
  dragStartY = e.clientY;
  dragForceX = 0;
  dragForceY = 0;
});

canvas.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  const mx = e.clientX;
  const my = e.clientY;
  const cx = Math.floor(mx / cellSize);
  const cy = Math.floor(my / cellSize);
  if (cx >= 0 && cx < gridSize && cy >= 0 && cy < gridSize) {
    // Apply drag force to velocity
    const dx = mx - dragStartX;
    const dy = my - dragStartY;
    const len = Math.sqrt(dx*dx + dy*dy);
    if (len > 0.5) {
      const nx = dx / len;
      const ny = dy / len;
      dragForceX = nx * 0.5;
      dragForceY = ny * 0.5;
      velocity[cy][cx].x += dragForceX;
      velocity[cy][cx].y += dragForceY;
    }
  }
  // Emit dye particles
  for (let i = 0; i < 2; i++) {
    dyeParticles.push({
      x: mx,
      y: my,
      vx: 0,
      vy: 0,
      life: 1
    });
  }
});

canvas.addEventListener('mouseup', () => {
  dragging = false;
});

canvas.addEventListener('mouseleave', () => {
  dragging = false;
});

function advectDye(dt) {
  const newDye = Array.from({length: gridSize}, () => 
    Array.from({length: gridSize}, () => 0)
  );
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const vx = velocity[y][x].x * dt;
      const vy = velocity[y][x].y * dt;
      let px = x + vx;
      let py = y + vy;
      px = Math.max(0, Math.min(gridSize - 1, px));
      py = Math.max(0, Math.min(gridSize - 1, py));
      
      const ix0 = Math.floor(px);
      const iy0 = Math.floor(py);
      const ix1 = Math.min(gridSize - 1, ix0 + 1);
      const iy1 = Math.min(gridSize - 1, iy0 + 1);
      const sx = px - ix0;
      const sy = py - iy0;
      
      newDye[y][x] = 
        (1-sx)*(1-sy)*dye[iy0][ix0] +
        sx*(1-sy)*dye[iy0][ix1] +
        (1-sx)*sy*dye[iy1][ix0] +
        sx*sy*dye[iy1][ix1];
    }
  }
  dye = newDye;
}

function dampDye() {
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      dye[y][x] *= 0.997;
    }
  }
}

function dampVelocity() {
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      velocity[y][x].x *= 0.999;
      velocity[y][x].y *= 0.999;
    }
  }
}

function update() {
  if (!paused) {
    advectDye(1);
    dampDye();
    dampVelocity();
  }
  // Update particles
  for (let i = dyeParticles.length - 1; i >= 0; i--) {
    const p = dyeParticles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.life -= 0.015;
    if (p.life <= 0) {
      dyeParticles.splice(i, 1);
    }
  }
  time++;
}

function render() {
  ctx.clearRect(0, 0, W, H);
  
  // Draw dye field
  const color = colorSelect.value;
  // Parse hex to RGB
  const match = color.match(/^#?([0-9A-Fa-f]{6})$/);
  const r = parseInt(match ? match[1].slice(0,2) : 'FF', 16);
  const g = parseInt(match ? match[1].slice(2,4) : '00', 16);
  const b = parseInt(match ? match[1].slice(4,6) : '00', 16);
  
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      const alpha = dye[y][x] * 0.5;
      ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
    }
  }
  
  // Draw particles
  for (const p of dyeParticles) {
    ctx.fillStyle = `rgba(${r},${g},${b},${p.life})`;
    ctx.fillRect(p.x - 3, p.y - 3, 6, 6);
  }
  
  // Draw a subtle grid
  ctx.strokeStyle = 'rgba(255,255,255,0.05)';
  ctx.lineWidth = 1;
  for (let x = 0; x <= W; x += cellSize) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, H);
    ctx.stroke();
  }
  for (let y = 0; y <= H; y += cellSize) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(W, y);
    ctx.stroke();
  }
}

function loop() {
  update();
  render();
  requestAnimationFrame(loop);
}

init();
loop();
```

Wait, I need to double-check the semi-Lagrangian advection. The backtrace formula: for each grid point (x,y), I compute where the fluid came from: (x - vx*dt, y - vy*dt). Then I sample the dye at that source position. My code does px = x + vx, which is forward advection (where the dye goes). That's wrong for semi-Lagrangian.

Correct semi-Lagrangian:
```javascript
const px = x - vx * dt;
const py = y - vy * dt;
```

Then interpolate dye[floor(py)][floor(px)].

Let me fix this.

Also, I should make sure the velocity field is reasonable. The swirl speed should be moderate so that dye moves visibly.

Let me also add a slight random noise to the velocity field to make it more interesting.

Let me also think about the initial dye seed. I want visible colored dye on load. I'll place a few colored regions.

Now, let me write the final code. I'll be careful to make it work correctly.

One more thing: the canvas needs to be full-screen. I'll set canvas dimensions to window.innerWidth/innerHeight and use CSS to make it cover the viewport.

Let me also add a title or label. Not strictly required, but helpful.

Alright, let me write the complete index.html file.

Actually, I realize I should test the code mentally:

1. Page loads: init() sets up velocity (swirl), dye (colored seeds), particles
2. User clicks and drags: dragging becomes true, velocity at cursor cell gets pushed in drag direction, dye particles emitted
3. On release: dragging stops, dye continues flowing via velocity field
4. Pause button toggles simulation stepping
5. Clear resets everything
6. Color selector changes the dye color

The dye should form swirling patterns because the velocity field has a vortex. The drag injects momentum and dye, which then gets carried by the vortex.

Let me also make sure the velocity field doesn't blow up. The damping (0.999 per frame) should keep it stable.

One issue: the velocity values might become large due to the exponential speed formula. Let me check: at dist=0.5, speed = exp(-0.5*3.5)*3 ≈ exp(-1.75)*3 ≈ 0.174*3 ≈ 0.52. At the center dist≈0, speed→0. So velocities are in range [-1, 1] roughly. That's fine.

But wait, the velocity is applied per cell per frame. With dt=1, the dye moves by up to 1 cell