const SQRT2 = Math.sqrt(2.0), SQRT2_2 = Math.sqrt(0.5), gridSize = 80, // px w = innerWidth, h = innerHeight, gridW = Math.ceil(w/gridSize), gridH = Math.ceil(h/gridSize) var cvs, ctx, velocities, drops, fps, currTime, lastTime, dt onload = function() { cvs = document.querySelector("canvas") cvs.width = w, cvs.height = h ctx = cvs.getContext("2d") fps = document.querySelector("span") init() loop() } function init() { velocities = new Array(gridW * gridH) drops = new Array(1600) let i for(let y = 0; y < gridH; y++) for(let x = 0; x < gridW; x++) { i = y*gridW + x velocities[i] = { ix: x, iy: y, vx: 2*Math.random()-1, vy: 2*Math.random()-1, div: 0 } } for(i = 0; i < drops.length; i++) { drops[i] = { x: Math.random()*w, y: Math.random()*h } } lastTime = Date.now() dt = 1.0/60.0 } function at(ix, iy) { if(0 <= ix && ix < gridW && 0 <= iy && iy < gridH) return velocities[iy*gridW + ix] else return {vx: 0, vy: 0} } function loop() { velocities.forEach(vel => { const ix = vel.ix, iy = vel.iy /* 00 10 20 01 11 21 02 12 22 */ const v00 = at(ix-1, iy-1) const v10 = at(ix , iy-1) const v20 = at(ix+1, iy-1) const v01 = at(ix-1, iy ) const v11 = vel const v21 = at(ix+1, iy ) const v02 = at(ix-1, iy+1) const v12 = at(ix , iy+1) const v22 = at(ix+1, iy+1) /* f'[x,y] = f[x,y] + ( dot(f[x-1,y-1] + f[x+1,y+1], {1,1}) * {1,1} + dot(f[x-1,y+1] + f[x+1,y-1], {1,-1}) * {1,-1} + (f[x-1,y]+f[x+1,y]-f[x,y-1]-f[x,y+1])*{2,-2} + f[x,y] * -4 ) * 1/8 */ vel.vx += ( (v00.vx+v22.vx + v00.vy+v22.vy)*1 + (v02.vx+v20.vx - v02.vy-v20.vy)*1 + (v01.vx+v21.vx-v10.vx-v12.vx)*2 + v11.vx * (-4) ) * 1/8 vel.vy += ( (v00.vx+v22.vx + v00.vy+v22.vy)*1 + (v02.vx+v20.vx - v02.vy-v20.vy)*(-1) + (v01.vy+v21.vy-v10.vy-v12.vy)*(-2) + v11.vy * (-4) ) * 1/8 }) // draw velocity field /* velocities.forEach((vel, i) => { const x = vel.ix, y = vel.iy const len = Math.hypot(vel.vx, vel.vy) + 1e-6 const dx = 0.9 * vel.vx//len const dy = 0.9 * vel.vy//len const hue = vel.div >= 0 ? 120 * 1/(1+vel.div*vel.div) : 240 - 120 * 1/(1+vel.div*vel.div) ctx.beginPath(); ctx.moveTo(gridSize*x, gridSize*y) ctx.lineTo(gridSize*(x+dx), gridSize*(y+dy)) ctx.strokeStyle = 'hsl('+hue+'deg, 50%, 50%)' ctx.stroke() }) */ // draw drops ctx.fillStyle = "rgba(0,0,0,0.02)" ctx.fillRect(0, 0, w, h) drops.forEach(drop => { const ix = Math.floor(drop.x/gridSize) const iy = Math.floor(drop.y/gridSize) if(0 <= ix && ix+1 < gridW && 0 <= iy && iy+1 < gridH) { const v0 = velocities[iy*gridW + ix] const v1 = velocities[iy*gridW + ix+1] const v2 = velocities[(iy+1)*gridW + ix] const v3 = velocities[(iy+1)*gridW + ix+1] const dx = drop.x/gridSize - ix const dy = drop.y/gridSize - iy const vx = (v0.vx + v1.vx*dx) + (v2.vx + v3.vx*dx)*dy const vy = (v0.vy + v1.vy*dx) + (v2.vy + v3.vy*dx)*dy drop.x += vx/6 drop.y += vy/6 } ctx.fillStyle = 'white' ctx.fillRect(drop.x, drop.y, 1, 1) }) for(let i = 0; i < 20; i++) { const d = drops.shift() d.x = w*Math.random() d.y = h*Math.random() drops.push(d) } // update fps span currTime = Date.now() dt = currTime - lastTime fps.innerText = Math.round(1000.0/dt) + " FPS" lastTime = currTime requestAnimationFrame(loop) }

Fluid Flow Simulation v0.1