Fluids

by Santiago J

HTML

<canvas id="canvas"></canvas>
<p id="time-step"></p>

CSS

#canvas {
    border: 1px solid #000;
}
#time-step {
    font-size: xx-small;
}

JavaScript

"use strict";

const W = 10;
const H = 10;
const NDIM = 2;

var timeStepEl = document.querySelector("#time-step");
var ctx = document.querySelector("#canvas").getContext("2d");
ctx.canvas.width = 100;
ctx.canvas.height = 100;
ctx.transform(ctx.canvas.width/W,0,0,-ctx.canvas.height/H,0,ctx.canvas.height);
ctx.canvas.fillStyle = "#99b";
var lastT = 0;

function createNdimArray(ndim, len) {
    var arr = new Array(ndim);
    for (var i=0; i<ndim; i++) {
        arr[i] = new Float64Array(len);
    }
    return arr;
}

var O = new Float64Array(NDIM);
var L = new Float64Array([W, H]);
var N = new Float64Array([W, H]);

var D = new Float64Array(NDIM);
for (var i=0; i<NDIM; i++) {
    D[i] = L[i] / N[i];
}

const gridSize = [].reduce.call(N, function(m,x){return m*x});

var U0 = createNdimArray(NDIM, gridSize);
var U1 = createNdimArray(NDIM, gridSize);
var S0 = new Float64Array(gridSize);
var S1 = new Float64Array(gridSize);
var F = createNdimArray(NDIM, gridSize);
var Ssource = createNdimArray(NDIM, gridSize);

function xy2i(x, y) {
    return N[0]*y + x;
}

S1[xy2i(3,3)] = 1;
F[0][xy2i(3,4)] = 0.2;
F[1][xy2i(3,4)] = 0.2;

function addForce(w, F, dt) {
    for (var i=0; i<w.length; i++) {
        w[i] += F[i] * dt;
    }
}

function transport(S1, S0, U, dt) {
    
}

function diffuse(S0, S1, k, dt) {
    
}

function dissipate(S1, S0, a, dt) {
    
}

function project(U1, U0, dt) {
    
}

function stepV(U1, U0, visc, F, dt) {
    for (var i=0; i<NDIM; i++)
        addForce(U0[i], F[i], dt);
    for (var i=0; i<NDIM; i++)
        transport(U1[i], U0[i], U0, dt);
    for (var i=0; i<NDIM; i++)
        diffuse(U0[i], U1[i], visc, dt);
    project(U1, U0, dt);
}

function stepS(S1, S0, k, a, U, source, dt) {
    addForce(S0, source, dt);
    transport(S1, S0, U, dt);
    diffuse(S0, S1, k, dt);
    dissipate(S1, S0, a, dt);
}

function tick(t) {
    // time
    var dt = t - lastT;
    lastT = t;
    // swap
    var tmp = U0; U0 = U1; U1 = tmp;
    tmp = S0; S0 = S1; S1 =...