DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title Fluid Dynamics Simulation title style canvas border 1px solid black style head body canvas id canvas width 400 height 400 canvas script Get the canvas element and its context const canvas document getElementById canvas const ctx canvas getContext 2d Define the size of the grid const resolution 20 const cols canvas width resolution const rows canvas height resolution Create arrays to hold the density u velocity and v velocity let density new Array cols fill 0 map new Array rows fill 0 let u new Array cols fill 0 map new Array rows fill 0 let v new Array cols fill 0 map new Array rows fill 0 for let r 0 r rows r for let c 0 c cols c if Math abs r 10 5 0 Math abs c 10 5 0 density r c 1 u r c 3 v r c Math random 3 Function to update the simulation function update Apply diffusion diffuse 0 u diffuse 0 v Apply curl curl Advect density advect density u v Draw the updated fields render Request animation frame for continuous update requestAnimationFrame update Function to apply diffusion function diffuse diff field const dt 0 1 Time step const visc 0 0001 Viscosity const amount dt visc cols 2 rows 2 for let k 0 k 10 k Iterations for stability for let i 1 i cols 1 i for let j 1 j rows 1 j field i j field i j amount field i 1 j field i 1 j field i j 1 field i j 1 1 4 amount Function to apply curl function curl const dt 0 1 Time step for let i 1 i cols 1 i for let j 1 j rows 1 j const du_dy u i j 1 u i j 1 2 resolution const dv_dx v i 1 j v i 1 j 2 resolution const curl dv_dx du_dy u i j curl dt v i j curl dt Function to advect the density field function advect field u v const dt 0 1 Time step const temp new Array cols fill 0 map new Array rows fill 0 for let i 1 i cols 1 i for let j 1 j rows 1 j const x i u i j dt resolution const y j v i j dt resolution if x 0 5 x 0 5 if x cols 0 5 x cols 0 5 if y 0 5 y 0 5 if y rows 0 5 y rows 0 5 const i0 Math floor x const i1 i0 1 const j0 Math floor y const j1 j0 1 const s1 x i0 const s0 1 s1 const t1 y j0 const t0 1 t1 field i j s0 t0 field i0 j0 t1 field i0 j1 s1 t0 field i1 j0 t1 field i1 j1 Function to render the fields function render ctx clearRect 0 0 canvas width canvas height for let i 0 i cols i for let j 0 j rows j const x i resolution const y j resolution Draw density ctx fillStyle rgba 0 0 0 density i j ctx fillRect x y resolution resolution Draw velocity vectors ctx beginPath ctx moveTo x resolution 2 y resolution 2 ctx lineTo x resolution 2 u i j 10 y resolution 2 v i j 10 ctx strokeStyle blue ctx lineWidth 2 ctx stroke Start the simulation update script body html
for let j 1 j rows 1 j const du_dy u i j 1 u i j 1 2 resolution const dv_dx v i 1 j v i 1 j 2 resolution const curl dv_dx du_dy u i j curl dt v i j curl dt Function to advect the density field function advect field u v const dt 0 1 Time step const temp new Array cols fill 0 map new Array rows fill 0 for let i 1 i cols 1 i for let j 1 j rows 1 j const x i u i j dt resolution const y j v i j dt resolution if x 0 5 x 0 5 if x cols 0 5 x cols 0 5 if y 0 5 y 0 5 if y rows 0 5 y rows 0 5 const i0 Math floor x const i1 i0 1 const j0 Math floor y const j1 j0 1 const s1 x i0 const s0 1 s1 const t1 y j0 const t0 1 t1 field i j s0 t0 field i0 j0 t1 field i0 j1 s1 t0 field i1 j0 t1 field i1 j1 Function to render the fields function render ctx clearRect 0 0 canvas width canvas height for let i 0 i cols i for let j 0 j rows j const x i resolution const y j resolution Draw density ctx fillStyle rgba 0 0 0 density i j ctx fillRect x y resolution resolution Draw velocity vectors ctx beginPath ctx moveTo x resolution 2 y resolution 2 ctx lineTo x resolution 2 u i j 10 y resolution 2 v i j 10 ctx strokeStyle blue ctx lineWidth 2 ctx stroke Start the simulation update script body html