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 initializePattern Create a temporary canvas const tempCanvas document createElement canvas const tempCtx tempCanvas getContext 2d tempCanvas width width tempCanvas height height Draw the word cat onto the temporary canvas tempCtx fillStyle white tempCtx fillRect 0 0 tempCanvas width tempCanvas height tempCtx fillStyle black tempCtx font bold 30px Arial tempCtx textAlign center tempCtx textBaseline middle tempCtx fillText xbdev tempCanvas width 2 tempCanvas height 2 Get the pixel data from the temporary canvas const imageData tempCtx getImageData 0 0 tempCanvas width tempCanvas height const data imageData data Initialize the density field based on the pixel data for let j 0 j height j for let i 0 i width i const index j width i 4 const brightness data index Assuming the text is black on white density IX i j 255 brightness 255 100 Scale density velocityX index 0 01 Math random 0 5 velocityY index 0 01 Math random 0 5 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 initializePattern update script body html
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 initializePattern Create a temporary canvas const tempCanvas document createElement canvas const tempCtx tempCanvas getContext 2d tempCanvas width width tempCanvas height height Draw the word cat onto the temporary canvas tempCtx fillStyle white tempCtx fillRect 0 0 tempCanvas width tempCanvas height tempCtx fillStyle black tempCtx font bold 30px Arial tempCtx textAlign center tempCtx textBaseline middle tempCtx fillText xbdev tempCanvas width 2 tempCanvas height 2 Get the pixel data from the temporary canvas const imageData tempCtx getImageData 0 0 tempCanvas width tempCanvas height const data imageData data Initialize the density field based on the pixel data for let j 0 j height j for let i 0 i width i const index j width i 4 const brightness data index Assuming the text is black on white density IX i j 255 brightness 255 100 Scale density velocityX index 0 01 Math random 0 5 velocityY index 0 01 Math random 0 5 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 initializePattern update script body html