**Exploring Fluid Dynamics Canvas**

I'm currently focused on integrating real-time fluid dynamics simulation onto a full-screen canvas. My next steps involve implementing user interaction, specifically mouse dragging for manipulating the fluid flow.

**Refining Interactive Flow**

I'm actively working on the core simulation logic, aiming for smooth, responsive fluid manipulation via mouse input. My focus is on optimizing the grid updates to ensure real-time performance as I layer in the interactive dye injection.

**Simulating Swirling Dye**

I'm currently focused on building out the core simulation loop. My aim is to implement a grid-based system for visualizing both velocity and color, ensuring the dye effectively swirls and responds to mouse input.

**Developing Grid Mechanics**

I am currently focused on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Developing Grid Mechanics**

I am currently focused on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Developing Grid Mechanics**

I am currently focused on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations.

**Developing Grid Mechanics**

I am currently focused on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations.

**Developing Grid Mechanics**

I am currently focused on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Developing Grid Mechanics**

I am actively working on establishing the foundational grid structure for the simulation. This involves setting up the 2D arrays to hold density and velocity data for each cell, preparing for the fluid dynamics calculations that will drive the visual output.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity fields, ensuring they interact realistically and maintain stability within the grid.

**Updating Simulation Core**

I am refining the simulation's core update loop, focusing on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop, focusing on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Simulating Dye Movement**

I'm focusing on the core simulation loop, specifically advection. My current task is to ensure the density field accurately moves with the velocity field, incorporating interpolated sampling to maintain smoothness as I prepare for the pressure projection step.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Injecting Forces and Colors**

I'm currently focused on integrating user interaction, mapping mouse movements to precise velocity and color injections within the simulation grid, aiming for responsive and intuitive control over the fluid's behavior.

**Simulating Momentum Transfer**

I am actively refining the simulation's update loop. My current focus involves the meticulous application of velocity diffusion and advection. I am implementing a robust pressure projection step to ensure fluid incompressibility, aiming for realistic flow dynamics before proceeding to density updates.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Simulating Momentum and Color**

I'm currently focused on the simulation's core update loop. My next steps involve refining the advection and diffusion processes for both velocity and density, ensuring they interact realistically before I fully integrate the pressure projection for incompressibility.

**Injecting Momentum and Color**

I'm currently focused on translating mouse movements into physical forces within the simulation grid. This involves precisely mapping cursor drag to both velocity injection and the introduction of new colored particles.

**Refining Pressure Projection**

I'm currently focused on stabilizing the simulation by refining the pressure projection step. My goal is to ensure fluid incompressibility and prevent simulation artifacts, particularly as the flow becomes more complex with user interactions.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Simulating Swirling Dye**

I'm currently focused on refining the simulation's core update loop. My goal is to implement and optimize the advection and diffusion steps for density and velocity, ensuring realistic interaction and stability within the grid before integrating the pressure projection.

**Refining Fluid Interaction**

I'm currently focusing on stabilizing the velocity field after advection and projection. My goal is to ensure the fluid remains incompressible and the interactive forces from the mouse input translate smoothly into realistic flow before updating the density.

**Refining Velocity Update**

My current focus is on the velocity component of the simulation. I'm meticulously implementing the diffusion and advection steps for velocity fields and integrating the pressure projection to ensure incompressibility before updating density.

**Refining Pressure and Flow**

I'm currently focused on refining the pressure projection step to ensure fluid incompressibility. My work involves optimizing the iterative solver and verifying that the velocity field accurately reflects the projected forces before advecting the density.

**Refining Pressure and Flow**

I'm currently focused on stabilizing the simulation by refining the pressure projection step. My work involves optimizing the iterative solver and verifying that the velocity field accurately reflects the projected forces before advecting the density.

**Updating Simulation Core**

I am currently refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Updating Simulation Core**

I am refining the simulation's core update loop. My focus is on implementing and optimizing the advection and diffusion steps for density and velocity. My goal is to ensure realistic interaction and stability within the grid as I integrate the pressure projection.

**Refining Pressure Calculation**

I'm currently focused on optimizing the pressure projection step to improve simulation stability. My aim is to ensure the velocity field accurately reflects incompressible flow dynamics before proceeding to the advection of density.

**Implementing Fluid Dynamics Simulation**

I am actively working on the core simulation loop. My current focus is on refining the velocity diffusion, advection, and projection steps. I'm also optimizing density diffusion and advection to ensure realistic fluid behavior and responsive dye interactions.

**Refining Pressure Projection**

I'm currently focused on stabilizing the simulation by refining the pressure projection step. My goal is to ensure fluid incompressibility and prevent simulation artifacts, particularly as the flow becomes more complex with user interactions.

**Refining Velocity and Density Flow**

I am currently focusing on the core simulation loop. My recent efforts involve ensuring that velocity diffusion and advection are correctly implemented and that the pressure projection step effectively enforces incompressibility before I proceed to density diffusion and advection.

Here is the code for your real-time fluid simulation. It's a single HTML file containing all the necessary HTML, CSS, and JavaScript. ```html <!DOCTYPE html> <html> <head> <title>Fluid Simulation</title> <style> body { margin: 0; overflow: hidden; background-color: black; } canvas { display: block; } </style> </head> <body> <canvas id="simCanvas"></canvas> <script> const canvas = document.getElementById('simCanvas'); const ctx = canvas.getContext('2d'); let width, height; let prevMouseX = -1, prevMouseY = -1; let mouseIsDown = false; // Simulation parameters const GRID_SIZE = 128; // Number of cells in one dimension (e.g., 128x128 grid) const DT = 0.05; // Time step for simulation updates const DIFFUSION_RATE = 0.00005; // How fast density spreads (lower = slower diffusion) const VISCOSITY = 0.000005; // How fast velocity dissipates (lower = slower dissipation) // Grid data structures (using 1D Float32Array for performance) // Each cell stores: density, vx (velocity x), vy (velocity y) let density; let vx, vy; let density_next, vx_next, vy_next; // Buffers for next state calculation let p_field, div_field; // Buffers for pressure projection // Helper function to map 2D grid coordinates (x, y) and component index (comp) to a 1D array index // comp: 0 for density, 1 for vx, 2 for vy function getCompIndex(x, y, comp) { return (x + y * GRID_SIZE) * 3 + comp; } // Helper function for bilinear interpolation // Samples a value from a component field at a given (target_x, target_y) grid coordinate function sample_component(comp_field_array, target_x, target_y) { // Clamp coordinates to grid boundaries to prevent sampling outside target_x = Math.max(0, Math.min(GRID_SIZE - 0.001, target_x)); target_y = Math.max(0, Math.min(GRID_SIZE - 0.001, target_y)); const ix = Math.floor(target_x); const iy = Math.floor(target_y); const fx = target_x - ix; // Fractional part of x const fy = target_y - iy; // Fractional part of y // Get indices for the four surrounding grid cells const i00 = getCompIndex(ix, iy, 0); // Base index, component is implicitly handled by array const i10 = getCompIndex(ix + 1, iy, 0); const i01 = getCompIndex(ix, iy + 1, 0); const i11 = getCompIndex(ix + 1, iy + 1, 0); // Sample the specific component's value from the comp_field_array let v00 = comp_field_array[i00]; let v10 = comp_field_array[i10]; let v01 = comp_field_array[i01]; let v11 = comp_field_array[i11]; // Bilinear interpolation: interpolate along x, then along y let interpolated_val = (v00 * (1 - fx) + v10 * fx) * (1 - fy) + (v01 * (1 - fx) + v11 * fx) * fy; return interpolated_val; } // Diffuse a specific component (density, vx, or vy) using iterative relaxation (Gauss-Seidel) // field_in: The source field. After the function, it will hold the diffused values. // field_out: A temporary buffer used for calculations. // comp_idx: The component index (0, 1, or 2). // rate: Diffusion rate. // dt: Time step. function diffuse_component(field_in, field_out, comp_idx, rate, dt) { const iterations = 10; // Number of relaxation steps for diffusion convergence const alpha = dt * rate; const beta = 1 / (1 + 4 * alpha); // Factor for solving the linear system for (let k = 0; k < iterations; k++) { for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { // Calculate index for the current cell's component const i = getCompIndex(x, y, comp_idx); // Sum of neighboring values from the *output* buffer (field_out) let sum_neighbors = 0; if (x > 0) sum_neighbors += field_out[getCompIndex(x - 1, y, comp_idx)]; if (x < GRID_SIZE - 1) sum_neighbors += field_out[getCompIndex(x + 1, y, comp_idx)]; if (y > 0) sum_neighbors += field_out[getCompIndex(x, y - 1, comp_idx)]; if (y < GRID_SIZE - 1) sum_neighbors += field_out[getCompIndex(x, y + 1, comp_idx)]; // Update the output buffer (field_out) using the input buffer (field_in) and neighbors field_out[i] = (field_in[i] + alpha * sum_neighbors) * beta; } } // Copy the computed diffused values from field_out back to field_in for the next iteration. // This is the Gauss-Seidel approach where current results are used for neighbors in the same iteration. for (let i = 0; i < field_in.length; i++) { field_in[i] = field_out[i]; } } } // Advect a field (density, vx, or vy) using velocities from vx_field, vy_field // field_in_density: Input density field (if advecting velocity, this can be dummy). // field_in_vx: Input vx velocity field (used as tracers). // field_in_vy: Input vy velocity field (used as tracers). // field_out_density: Output density field. // field_out_vx: Output vx field. // field_out_vy: Output vy field. // dt: Time step. function advect(field_in_density, field_in_vx, field_in_vy, field_out_density, field_out_vx, field_out_vy, dt) { const dt0 = dt * GRID_SIZE; // Scale dt by grid resolution for particle tracing for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { // Trace particle backwards in time using the input velocity field const vx_val = field_in_vx[getCompIndex(x, y, 1)]; // Get vx from input velocity const vy_val = field_in_vy[getCompIndex(x, y, 2)]; // Get vy from input velocity let prev_x = x - vx_val * dt0; let prev_y = y - vy_val * dt0; // Sample the input density field at the previous position and assign to output density if (field_out_density) { // Check if density output buffer is provided field_out_density[getCompIndex(x, y, 0)] = sample_component(field_in_density, prev_x, prev_y); } // Sample the input vx field at the previous position and assign to output vx if (field_out_vx) { // Check if vx output buffer is provided field_out_vx[getCompIndex(x, y, 1)] = sample_component(field_in_vx, prev_x, prev_y); } // Sample the input vy field at the previous position and assign to output vy if (field_out_vy) { // Check if vy output buffer is provided field_out_vy[getCompIndex(x, y, 2)] = sample_component(field_in_vy, prev_x, prev_y); } } } } // Enforce incompressibility (divergence-free velocity field) using pressure projection // vx, vy: Velocity fields to be projected (will be modified in-place). // p_field: Pressure field buffer. // div_field: Divergence field buffer. function project(vx, vy, p_field, div_field) { const iterations = 20; // Iterations for pressure solver convergence const h = 1.0 / GRID_SIZE; // Grid cell size // 1. Calculate divergence of the velocity field for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { const i = getCompIndex(x, y, 1); // Index for vx const j = getCompIndex(x, y, 2); // Index for vy let divergence = 0; // Divergence = d(vx)/dx + d(vy)/dy if (x < GRID_SIZE - 1) divergence += vx[getCompIndex(x + 1, y, 1)]; if (x > 0) divergence -= vx[getCompIndex(x - 1, y, 1)]; if (y < GRID_SIZE - 1) divergence += vy[getCompIndex(x, y + 1, 2)]; if (y > 0) divergence -= vy[getCompIndex(x, y - 1, 2)]; div_field[i] = divergence * 0.5 * h; // Store scaled divergence } } // 2. Solve Poisson equation for pressure using iterative method (Gauss-Seidel) // Pressure is computed such that its gradient cancels out the divergence. p_field.fill(0); // Initialize pressure field to zero for (let k = 0; k < iterations; k++) { for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { const i = getCompIndex(x, y, 1); // Index for vx let pressure = div_field[i]; // Start with divergence term // Sum of pressures from neighbors (p_field is being updated in-place) if (x > 0) pressure += p_field[getCompIndex(x - 1, y, 1)]; if (x < GRID_SIZE - 1) pressure += p_field[getCompIndex(x + 1, y, 1)]; if (y > 0) pressure += p_field[getCompIndex(x, y - 1, 2)]; if (y < GRID_SIZE - 1) pressure += p_field[getCompIndex(x, y + 1, 2)]; p_field[i] = pressure * 0.25; // Average with neighbors } } } // 3. Update velocities based on pressure gradient // Subtract the pressure gradient from the velocity field to make it divergence-free. for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { const i = getCompIndex(x, y, 1); // Index for vx const j = getCompIndex(x, y, 2); // Index for vy // Subtract gradient of pressure: vx -= dp/dx * h if (x < GRID_SIZE - 1) vx[i] -= p_field[getCompIndex(x + 1, y, 1)] * h; if (x > 0) vx[i] += p_field[getCompIndex(x - 1, y, 1)] * h; // Subtract gradient of pressure: vy -= dp/dy * h if (y < GRID_SIZE - 1) vy[j] -= p_field[getCompIndex(x, y + 1, 2)] * h; if (y > 0) vy[j] += p_field[getCompIndex(x, y - 1, 2)] * h; } } } // --- Initialization --- function init() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; const num_cells_total = GRID_SIZE * GRID_SIZE; const num_values_total = num_cells_total * 3; // density, vx, vy per cell density = new Float32Array(num_values_total); vx = new Float32Array(num_values_total); vy = new Float32Array(num_values_total); // Initialize buffers density_next = new Float32Array(num_values_total); vx_next = new Float32Array(num_values_total); vy_next = new Float32Array(num_values_total); p_field = new Float32Array(num_values_total); div_field = new Float32Array(num_values_total); // Initial state: all fields set to zero density.fill(0); vx.fill(0); vy.fill(0); } // --- Event Handlers --- function resizeCanvas() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; // No need to re-initialize grid arrays, as they are fixed size and canvas scales } function mouseMove(e) { const rect = canvas.getBoundingClientRect(); // Get mouse position relative to canvas, normalized to 0-1 range const mouseX = (e.clientX - rect.left) / width; const mouseY = (e.clientY - rect.top) / height; // Convert normalized coordinates to grid cell indices const gx = Math.floor(mouseX * GRID_SIZE); const gy = Math.floor(mouseY * GRID_SIZE); if (mouseIsDown) { const dx = (e.clientX - prevMouseX) || 0; // Mouse movement delta in pixels const dy = (e.clientY - prevMouseY) || 0; // Add velocity to the grid based on mouse movement const force_strength = 0.008; // Multiplier for velocity strength const velocity_x = dx / width * GRID_SIZE; // Convert pixel delta to grid units const velocity_y = dy / height * GRID_SIZE; // Add velocity to cells around the mouse cursor const velocity_radius = 3; // Radius around cursor to apply velocity for (let y_offset = -velocity_radius; y_offset <= velocity_radius; y_offset++) { for (let x_offset = -velocity_radius; x_offset <= velocity_radius; x_offset++) { const cur_gx = gx + x_offset; const cur_gy = gy + y_offset; if (cur_gx >= 0 && cur_gx < GRID_SIZE && cur_gy >= 0 && cur_gy < GRID_SIZE) { const dist_sq = x_offset*x_offset + y_offset*y_offset; if (dist_sq <= velocity_radius*velocity_radius) { const idx = getCompIndex(cur_gx, cur_gy, 1); // Index for vx vx[idx] += velocity_x * force_strength; vy[idx + 1] += velocity_y * force_strength; // Index for vy is idx + 1 } } } } // Add density (dye) to the grid const dye_strength = 1.0; // How much density to add const dye_radius = 6; // Radius of dye blob for (let y_offset = -dye_radius; y_offset <= dye_radius; y_offset++) { for (let x_offset = -dye_radius; x_offset <= dye_radius; x_offset++) { const cur_gx = gx + x_offset; const cur_gy = gy + y_offset; if (cur_gx >= 0 && cur_gx < GRID_SIZE && cur_gy >= 0 && cur_gy < GRID_SIZE) { const dist_sq = x_offset*x_offset + y_offset*y_offset; if (dist_sq <= dye_radius*dye_radius) { const density_idx = getCompIndex(cur_gx, cur_gy, 0); // Index for density // Add density with a falloff based on distance from center density[density_idx] += dye_strength * Math.max(0, 1 - dist_sq / (dye_radius*dye_radius)); } } } } // Store current mouse position for next frame's delta calculation prevMouseX = e.clientX; prevMouseY = e.clientY; } } function mouseDown(e) { mouseIsDown = true; prevMouseX = e.clientX; prevMouseY = e.clientY; } function mouseUp(e) { mouseIsDown = false; prevMouseX = -1; prevMouseY = -1; } // HSV to RGB conversion helper for coloring function hsvToRgb(h, s, v) { let r, g, b; const i = Math.floor(h / 60); const f = h / 60 - i; const p = v * (1 - s); const q = v * (1 - f * s); const t = v * (1 - (1 - f) * s); switch (i) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3: r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; default: r = v; g = p; b = q; break; // case 5 or 6 } return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; } // --- Rendering --- function render() { // Clear canvas and set background ctx.clearRect(0, 0, width, height); ctx.fillStyle = 'black'; ctx.fillRect(0, 0, width, height); const imageData = ctx.createImageData(width, height); const data = imageData.data; // Scale the density grid to the canvas pixel grid for drawing const grid_cell_width = width / GRID_SIZE; const grid_cell_height = height / GRID_SIZE; for (let y_grid = 0; y_grid < GRID_SIZE; y_grid++) { for (let x_grid = 0; x_grid < GRID_SIZE; x_grid++) { // Get density value for the current grid cell const density_val = density[getCompIndex(x_grid, y_grid, 0)]; // Map density to color: Blue (low density) to Red (high density) // Hue ranges from 180 (blue) to 0 (red) let hue = 180 - (density_val * 180); hue = Math.max(0, Math.min(360, hue)); // Clamp hue to 0-360 // Convert HSV color to RGB const [r, g, b] = hsvToRgb(hue, 1, 1); // Full saturation, full brightness // Fill the corresponding pixels on the canvas with the calculated color for (let y_pixel = 0; y_pixel < grid_cell_height; y_pixel++) { for (let x_pixel = 0; x_pixel < grid_cell_width; x_pixel++) { const canvas_x = x_grid * grid_cell_width + x_pixel; const canvas_y = y_grid * grid_cell_height + y_pixel; const pixel_index = (canvas_x + canvas_y * width) * 4; // Index for RGBA data[pixel_index + 0] = r; // Red data[pixel_index + 1] = g; // Green data[pixel_index + 2] = b; // Blue data[pixel_index + 3] = 255; // Alpha (fully opaque) } } } } // Draw the computed pixel data onto the canvas ctx.putImageData(imageData, 0, 0); } // --- Main Simulation Loop --- function update() { // --- 1. Add forces to vx, vy (handled in mousemove event) --- // --- 2. Velocity Diffusion --- // Diffuse vx, using vx_next as temporary buffer. After call, vx holds diffused velocity. diffuse_component(vx, vx_next, 1, VISCOSITY, DT); // Diffuse vy, using vy_next as temporary buffer. After call, vy holds diffused velocity. diffuse_component(vy, vy_next, 2, VISCOSITY, DT); // --- 3. Velocity Advection --- // Advect the *diffused* velocities (now in vx, vy) using themselves as tracers. // Output is stored in vx_next, vy_next. // We pass density fields as dummy arguments because they are not used for velocity advection. let dummy_density_in = new Float32Array(density.length); let dummy_density_out = new Float32Array(density.length); advect(dummy_density_in, vx, vy, dummy_density_out, vx_next, vy_next, DT); // --- 4. Velocity Projection --- // Enforce incompressibility on the advected velocities (now in vx_next, vy_next). // This modifies vx_next and vy_next in-place. project(vx_next, vy_next, p_field, div_field); // --- 5. Density Diffusion --- // Diffuse density, using density_next as temporary buffer. After call, density holds diffused density. diffuse_component(density, density_next, 0, DIFFUSION_RATE, DT); // --- 6. Density Advection --- // Advect the *diffused* density (now in density) using the final incompressible velocity field (vx_next, vy_next). // Output is stored in density_next. // We pass velocity fields as dummy arguments because they are not used for density advection's output. let dummy_vx_out = new Float32Array(vx.length); let dummy_vy_out = new Float32Array(vy.length); advect(density, vx_next, vy_next, density_next, dummy_vx_out, dummy_vy_out, DT); // --- Update main state --- // Copy the final advected density from density_next to density. density.set(density_next); // Copy the final incompressible and advected velocity from vx_next/vy_next to vx/vy. vx.set(vx_next); vy.set(vy_next); // Render the current state of the simulation render(); // Request the next animation frame requestAnimationFrame(update); } // --- Event Listeners Setup --- window.addEventListener('resize', resizeCanvas); // Handle window resizing canvas.addEventListener('mousemove', mouseMove); canvas.addEventListener('mousedown', mouseDown); canvas.addEventListener('mouseup', mouseUp); // Touch events for mobile compatibility canvas.addEventListener('touchstart', function(e) { e.preventDefault(); // Prevent default scrolling behavior const touch = e.touches[0]; mouseDown({ clientX: touch.clientX, clientY: touch.clientY }); mouseMove({ clientX: touch.clientX, clientY: touch.clientY }); }); canvas.addEventListener('touchmove', function(e) { e.preventDefault(); // Prevent default scrolling behavior const touch = e.touches[0]; mouseMove({ clientX: touch.clientX, clientY: touch.clientY }); }); canvas.addEventListener('touchend', function(e) { mouseUp({}); }); // --- Start the simulation --- init(); // Initialize simulation state and canvas update(); // Start the animation loop </script> </body> </html> ```