Simple Discrate Fluid/Gas Simulation Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluid and Gas Dynamics Simulation - XBDEV - Educational Tech Demo</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>
Terms/Abbreviations/Glossary

Resources and Links
