DOCTYPE html html lang en head meta charset UTF 8 title Fluid Simulation title style body margin 0 overflow hidden min height 600px canvas display block style head body canvas id canvas width 200 height 200 canvas script const canvas document getElementById canvas const ctx canvas getContext 2d canvas width 128 window innerWidth canvas height 128 window innerHeight canvas style height 512px canvas style width 512px const resolution 1 Resolution of the simulation grid const width Math floor canvas width resolution const height Math floor canvas height resolution Simulation parameters const diffusion 0 0001 const viscosity 0 0001 const dt 0 01 Fluid state arrays let density new Float32Array width height let density0 new Float32Array width height let velocityX new Float32Array width height let velocityY new Float32Array width height let velocityX0 new Float32Array width height let velocityY0 new Float32Array width height Utility functions function IX x y return x y width function addSource source target for let i 0 i source length i target i dt source i function diffuse b x x0 diff let a dt diff width height linearSolve b x x0 a 1 4 a function linearSolve b x x0 a c for let k 0 k 20 k for let j 1 j height 1 j for let i 1 i width 1 i x IX i j x0 IX i j a x IX i 1 j x IX i 1 j x IX i j 1 x IX i j 1 c setBoundary b x function advect b d d0 u v let dt0 0 5 dt width for let j 1 j height 1 j for let i 1 i width 1 i let x i dt0 u IX i j let y j dt0 v IX i j if x 0 5 x 0 5 if x width 0 5 x width 0 5 let i0 Math floor x let i1 i0 1 if y 0 5 y 0 5 if y height 0 5 y height 0 5 let j0 Math floor y let j1 j0 1 let s1 x i0 let s0 1 s1 let t1 y j0 let t0 1 t1 d IX i j s0 t0 d0 IX i0 j0 t1 d0 IX i0 j1 s1 t0 d0 IX i1 j0 t1 d0 IX i1 j1 setBoundary b d function project u v p div for let j 1 j height 1 j for let i 1 i width 1 i div IX i j 0 5 u IX i 1 j u IX i 1 j v IX i j 1 v IX i j 1 width p IX i j 0 setBoundary 0 div setBoundary 0 p linearSolve 0 p div 1 4 for let j 1 j height 1 j for let i 1 i width 1 i u IX i j 0 5 width p IX i 1 j p IX i 1 j v IX i j 0 5 width p IX i j 1 p IX i j 1 setBoundary 1 u setBoundary 2 v function setBoundary b x for let i 1 i width 1 i x IX i 0 b 2 x IX i 1 x IX i 1 x IX i height 1 b 2 x IX i height 2 x IX i height 2 for let j 1 j height 1 j x IX 0 j b 1 x IX 1 j x IX 1 j x IX width 1 j b 1 x IX width 2 j x IX width 2 j x IX 0 0 0 5 x IX 1 0 x IX 0 1 x IX 0 height 1 0 5 x IX 1 height 1 x IX 0 height 2 x IX width 1 0 0 5 x IX width 2 0 x IX width 1 1 x IX width 1 height 1 0 5 x IX width 2 height 1 x IX width 1 height 2 function step addSource velocityX0 velocityX addSource velocityY0 velocityY velocityX0 velocityX velocityX velocityX0 velocityY0 velocityY velocityY velocityY0 diffuse 1 velocityX velocityX0 viscosity diffuse 2 velocityY velocityY0 viscosity project velocityX velocityY velocityX0 velocityY0 velocityX0 velocityX velocityX velocityX0 velocityY0 velocityY velocityY velocityY0 advect 1 velocityX velocityX0 velocityX0 velocityY0 advect 2 velocityY velocityY0 velocityX0 velocityY0 project velocityX velocityY velocityX0 velocityY0 addSource density0 density density0 density density density0 diffuse 0 density density0 diffusion advect 0 density density0 velocityX velocityY function render ctx clearRect 0 0 canvas width canvas height for let j 0 j height j for let i 0 i width i const d 1 0 density IX i j ctx fillStyle rgba d 255 d 255 d 255 1 ctx fillRect i resolution j resolution resolution resolution function update step render requestAnimationFrame update canvas addEventListener mousemove event update if event buttons 1 const x Math floor event clientX resolution const y Math floor event clientY resolution const x Math floor event clientX 512 128 resolution const y Math floor event clientY 512 128 resolution const index IX x y density index 100 velocityX index 10 Math random 0 5 velocityY index 10 Math random 0 5 update script body html
setBoundary 0 p linearSolve 0 p div 1 4 for let j 1 j height 1 j for let i 1 i width 1 i u IX i j 0 5 width p IX i 1 j p IX i 1 j v IX i j 0 5 width p IX i j 1 p IX i j 1 setBoundary 1 u setBoundary 2 v function setBoundary b x for let i 1 i width 1 i x IX i 0 b 2 x IX i 1 x IX i 1 x IX i height 1 b 2 x IX i height 2 x IX i height 2 for let j 1 j height 1 j x IX 0 j b 1 x IX 1 j x IX 1 j x IX width 1 j b 1 x IX width 2 j x IX width 2 j x IX 0 0 0 5 x IX 1 0 x IX 0 1 x IX 0 height 1 0 5 x IX 1 height 1 x IX 0 height 2 x IX width 1 0 0 5 x IX width 2 0 x IX width 1 1 x IX width 1 height 1 0 5 x IX width 2 height 1 x IX width 1 height 2 function step addSource velocityX0 velocityX addSource velocityY0 velocityY velocityX0 velocityX velocityX velocityX0 velocityY0 velocityY velocityY velocityY0 diffuse 1 velocityX velocityX0 viscosity diffuse 2 velocityY velocityY0 viscosity project velocityX velocityY velocityX0 velocityY0 velocityX0 velocityX velocityX velocityX0 velocityY0 velocityY velocityY velocityY0 advect 1 velocityX velocityX0 velocityX0 velocityY0 advect 2 velocityY velocityY0 velocityX0 velocityY0 project velocityX velocityY velocityX0 velocityY0 addSource density0 density density0 density density density0 diffuse 0 density density0 diffusion advect 0 density density0 velocityX velocityY function render ctx clearRect 0 0 canvas width canvas height for let j 0 j height j for let i 0 i width i const d 1 0 density IX i j ctx fillStyle rgba d 255 d 255 d 255 1 ctx fillRect i resolution j resolution resolution resolution function update step render requestAnimationFrame update canvas addEventListener mousemove event update if event buttons 1 const x Math floor event clientX resolution const y Math floor event clientY resolution const x Math floor event clientX 512 128 resolution const y Math floor event clientY 512 128 resolution const index IX x y density index 100 velocityX index 10 Math random 0 5 velocityY index 10 Math random 0 5 update script body html