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 2 0 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 Initialize density with a letter pattern const letter G Change the letter here ctx font bold 150px Arial ctx fillText X 50 150 Convert the letter on canvas to the density array const imageData ctx getImageData 0 0 canvas width canvas height for let i 0 i cols i for let j 0 j rows j if imageData data j 4 imageData width i 4 3 128 density i j 1 0 initial velcoity for let i 0 i cols i for let j 0 j rows j const x i resolution canvas width 2 const y j resolution canvas height 2 Introduce some randomness to the velocity initialization u i j Math cos 8 i cols Math sin 6 i cols 0 1 v i j Math sin 16 i cols Math sin 8 i cols 0 5 Function to update the simulation function update Apply diffusion let diff 0 01 diffuse diff u diffuse diff v applyBuoyancy density 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 diff 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 buoyancy force function applyBuoyancy density v const gravity 0 05 Strength of gravity const buoyancyAlpha 0 1 Buoyancy coefficient for density difference const buoyancyBeta 0 1 Buoyancy coefficient for vertical velocity const ambientTemperature 0 Ambient temperature for let i 0 i cols i for let j 0 j rows j const densityDifference density i j ambientTemperature const buoyancyForce buoyancyAlpha densityDifference buoyancyBeta v i j Apply buoyancy force to vertical velocity v i j buoyancyForce gravity Function to apply curl function curl const dt 0 1 Time step const curlCoefficient 1 0 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 curlCoefficient v i j curl dt curlCoefficient 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 b 0 b 7 b for let i 1 i cols 1 i for let j 1 j rows 1 j let x i u i j dt resolution let y j v i j dt resolution Add some diffusion like behavior x Math random 2 1 0 1 Introduce random noise in x direction y Math random 2 1 0 1 Introduce random noise in y direction Clamp advection position to canvas boundaries 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
0 1 Buoyancy coefficient for vertical velocity const ambientTemperature 0 Ambient temperature for let i 0 i cols i for let j 0 j rows j const densityDifference density i j ambientTemperature const buoyancyForce buoyancyAlpha densityDifference buoyancyBeta v i j Apply buoyancy force to vertical velocity v i j buoyancyForce gravity Function to apply curl function curl const dt 0 1 Time step const curlCoefficient 1 0 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 curlCoefficient v i j curl dt curlCoefficient 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 b 0 b 7 b for let i 1 i cols 1 i for let j 1 j rows 1 j let x i u i j dt resolution let y j v i j dt resolution Add some diffusion like behavior x Math random 2 1 0 1 Introduce random noise in x direction y Math random 2 1 0 1 Introduce random noise in y direction Clamp advection position to canvas boundaries 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