Navier Stokes Fluid Simulation - Approximate

A nostalgic Vite/JavaScript reconstruction of an Object Pascal fluid experiment written more than twenty years ago.

The original application used Delphi, Graphics32, and GLScene. This version keeps its interactive 2D smoke field, its red velocity vectors, its 30 × 30 pixel smiley “Transmit” feature, and its 3D height-field idea—then rebuilds them as a portable browser app using Canvas 2D, Three.js, and a Windows 98 interface.

Online Demo: https://ivansivak.com/projects/tiger-fluid

What the original project was

The Pascal source implements a recognizable two-dimensional Stable Fluids-style solver:

• semi-Lagrangian advection with bilinear interpolation;
• implicit diffusion through iterative relaxation;
• pressure projection for approximate incompressibility;
• ghost-cell wall boundaries;
• vorticity confinement;
• a simple density-based buoyancy force;
• smoke-density rendering and pointer interaction.

It is related to the incompressible Navier–Stokes equations, but it is a real-time graphics approximation rather than a precision CFD solver. The original OpenGL panel was also not a 3D fluid volume: it was a height field generated from the same 2D density grid.

Features

• Faithful 60 × 60 default grid and monochrome smoke view.
• Canvas 2D renderer with optional red velocity vectors.
• Three.js/WebGL density height field with orbit camera and wireframe mode.
• Paint smoke, paint force, or combine both gestures.
• Original pixel-smiley density stamp.
• Corrected and legacy numerical profiles.
• Runtime controls for resolution, time step, diffusion, viscosity, vorticity, retention, brush, exposure, and height.
• PNG export.
• Responsive Windows 98 UI using 98.css.
• ?embed=1 layout for an iframe on ivansivak.com.
• Node-based numerical smoke tests.
• Cleaned and translated Delphi source under legacy/delphi-cleaned/.

Run locally

Requirements: a Node.js version supported by Vite 8.

npm install
npm run dev

Then open the local URL printed by Vite.

Test the numerical core

npm test

The tests verify that fields stay finite during interaction, projection reduces a deliberately divergent velocity field, and density stamping works.

Build

npm run build
npm run preview

The static output is written to dist/.

vite.config.js uses base: './', so the same build can live at a domain root or inside a subdirectory.

For a public deployment, the parent page should choose a height appropriate for its responsive layout. At narrow widths, the two visualizations stack vertically.

Credits

• Original Delphi project and JavaScript reconstruction concept: Ivan Sivák.
• Numerical method: inspired by Jos Stam, Stable Fluids, SIGGRAPH 1999, and the later simplified real-time presentation.
• Windows 98 design system: 98.css, MIT license.
• 3D rendering: Three.js, MIT license.

License

MIT. See LICENSE.