Liquid-Simulation - Stardance

Ship #1 Pending review

@Dasher280I on Liquid-Simulation · about 2 hours ago

This project is an interactive 2D fluid simulation built with HTML5 and vanilla JavaScript. Users can interact with the canvas by clicking, dragging, or touching to paint dynamic, swirling ink patterns while background particles react to the underlying velocity fields. It features a sleek, expandable settings menu styled with CSS frosted-glass effects, allowing users to customize stroke width, dissipation duration, brightness, and color themes—such as cyan, purple, green, orange, pink, or white—in real time. Programmatically, the simulation is driven by a grid-based Navier-Stokes physics engine that handles diffusion, advection, and pressure projection, rendering efficient pixel data via an offscreen canvas. Cross-platform usability is supported through pointer events paired with CSS rules that prevent unwanted mobile scrolling and block unintended drawing when interacting with the sidebar controls. A key technical challenge addressed during development was preventing the mathematical simulation from breaking or destabilizing under extremely fast inputs or overlapping forces, which was solved by implementing conditional logic that evaluates and updates maximum density increments rather than allowing runaway value accumulation.

4 devlogs
24h

Try project → See source code →

Open comments for this post

@Dasher280I on Liquid-Simulation · about 2 hours ago

6h 10m 35s logged

The latest update to the fluid simulation introduces a fully interactive settings menu to give users real-time control over the visual output. A new toggle button opens a sliding sidebar menu. Inside this sidebar, a series of range sliders allows users to dynamically adjust the fluid’s stroke width, the duration before it dissipates, and its overall brightness. Furthermore, a dropdown menu was integrated to let users switch the fluid color between cyan, purple, green, orange, pink, and white.

Open comments for this post

@Dasher280I on Liquid-Simulation · 2 days ago

5h 19m 15s logged

To eliminate the harsh pixelation caused by rendering low-resolution grid cells directly to the main display, the rendering pipeline was updated to use an offscreen canvas matching the exact simulation grid dimensions. Fluid density values are now written directly into an ImageData pixel buffer on this offscreen canvas. When drawing to the screen, the offscreen canvas is scaled up with high-quality bilinear interpolation enabled (imageSmoothingEnabled = true), seamlessly blending the pixel boundaries. This achieves a smooth, continuous fluid flow with soft gradients without impacting the performance of the underlying physics simulation.

Open comments for this post

@Dasher280I on Liquid-Simulation · 3 days ago

5h 53m 53s logged

Things are starting to get interesting! I spent the last few hours adding a velocity vector field to the grid. Now, instead of just bleeding outward uniformly, the dye actually gets carried by the current. I had to wrap my head around advection, which took some debugging, but mapping the mouse movement to generate directional forces totally changed the feel. When you drag the cursor, it pushes the fluid around, creating these cool, swirling patterns. It’s still just grid-based colors, but it finally behaves like a real liquid. Can’t wait to drop actual particles into this current!

Open comments for this post

@Dasher280I on Liquid-Simulation · 4 days ago

6h 22m 39s logged

Just kicked off my new fluid simulation project for Stardance! Today, I got the absolute basics running. I set up the HTML canvas and built a 2D grid array to handle the underlying math. It’s pretty barebones right now—just clicking and dragging the mouse to inject some neon color into the cells. I implemented a simple diffusion algorithm, so the colors spread out to neighboring cells and slowly fade away over time. It looks a bit blocky because of the low resolution, but it’s super satisfying to see the arrays updating correctly. Next up: adding actual fluid movement!