Fluid simulation · grok-4.3

The task is: "Build a single-page web app and write it ALL into one self-contained file named index.html in the current directory: CSS in a <style> tag, JS in a <script> tag, inline — do not create se...First, the task is to create index.html with CSS in <style>, JS in <script>, inline. Self-contained, no externals.

The app: full-screen canvas, real-time fluid sim where mouse drag pushes swirling colored dye.

I need to implement a fluid simulation.

A simple way: use a 2 2D arrays for velocity and density, update with advection, diffusion, etc., like Jos Stam's paper "Stable Fluids".

That's standard for such demos.

I'll recall the basics:

- Grid size N x N

- Velocity field: two grids ux, uy

- Density: one grid for color, or RGB but 1 for simplicity, or use HSV.

For color, use one density field with color.

Mouse: on drag, add velocity and color at position.

Then loop: diffuse, advect, add forces.

For projection to make divergence free, need Poisson solver, which is iterative, possible but code heavy.

Many web demos use approximate without projection for speed.

For real-time, use simple Eulerian without projection.

Let's go with a particle-based fluid sim for simplicity.

The task is to build a single-page web app in one self-contained file named index.html. It must include CSS in a <style> tag, JS in a <script> tag, inline. No external resources, CDNs, or network requ...The task is to create a single-page web app in one self-contained file named index.html with CSS in <style> and JS in <script>, no external resources. It should run fully sandboxed. The app needs a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the 2D fluid.

I need to implement a fluid simulation. Since it's a single file and real-time, it should be efficient. A grid-based Eulerian fluid simulation using velocity and density fields is common for this.

A basic implementation uses two 2D arrays for velocity (x and y components) and density. Each frame, we apply viscosity (diffusion), add forces from mouse, advect, and project to ensure divergence-free velocity.

For colors, we can have density for each color channel or use a single density and color it based on position or add color when mouse drags.

A popular simple implementation is by Pavel Dobryakov or similar, but I'll write a compact version.

Let's plan the code:

- Full screen canvas: canvas.width = innerWidth, height = innerHeight, on resize.

- Use Uint8ClampedArray for fields to save memory.

- Grid size: say N=256, cell size = canvas.width/N

- 3 fields: velocity_x, velocity_y, density (for simplicity, one density, color by hue or rgb separate but simple one color)

For colored, use density as color intensity, but to swirl colored, perhaps add color field.

For simplicity, use one density field, and when mouse drags, add color to density 255 at mouse.

But to have color, use HSV or draw with gradient.

Better: use density for black/white, but add color particles separate.

To make it simple yet good, use particles for dye with color, and a velocity grid for advection.

But that might be complex.

The file is written and ready. No further actions necessary.

The file exists, is self-contained, and contains everything. No other files were created. The task is complete.