Liquid Fill Physics — Realistic Fluid Dynamics with Source Code
The Liquid Fill interaction is a professional-grade fluid simulation where liquid fills a container based on user input. It features surface tension, wave physics, and floating bubbles for a laboratory-like atmosphere.
How It Works
This animation is based on wave equations implemented in vanilla JavaScript using the HTML5 Canvas API. The liquid’s surface consists of multiple points connected by virtual springs. When the user interacts with the flask, it displaces these points, creating a natural wave motion that ripples across the surface and gradually dampens.
Key Features
- Surface Tension Physics: Realistic wave propagation and dampening.
- Dynamic Filling & Draining: Allows users to increase or decrease the liquid level in real-time.
- Reactive Bubbles: Custom-rendered particle bubbles that float to the surface and pop.
- Aesthetic Gloss Layer: A glass flask overlay that provides reflections and depth to the fluid.
Frequently Asked Questions
Can I change the liquid color?
Yes! Look for the ctx.createLinearGradient(...) in the JavaScript section and update the color stops to create different fluids like lava, acidic green, or dark ink.
How do I change the wave intensity?
Searching for p.vy += diff * 0.05 in the JavaScript logic will reveal the spring strength. Increasing this value will make the waves more aggressive.
Is this responsive?
The canvas is designed to fill its container, so you can easily resize the .flask element to fit your design.
