Skip to content

Fluid simulation controls

Every control on Fluidsimulation.net maps to something you can see on the canvas within a frame or two. Presets change several values together. Advanced sliders shape pressure, swirl, and fade one at a time.

The list below maps each dock control to the motion on screen. The solver steps behind those sliders are covered in how WebGL fluid simulation works.

Presets change several values at once

A preset sets pressure, swirl, fade speed, flow fade, brush force, and the display effects together, so one tap changes the whole feel instead of five separate sliders. Each mode page below opens the same solver already tuned to that preset.

  • Classic: balanced defaults with bloom and sunrays on, a good starting point
  • Water: slower dye fade and gentler swirl for a wet, lasting flow
  • Fire: fast dye fade, strong swirl, and brighter bloom for restless, hot motion
  • Ink: very slow dye fade so colorful strokes linger and stay readable
  • Calm: low swirl and stronger velocity fade for soft, quiet motion

Core controls up front

These sit outside the Advanced panel because most people touch them first.

  • Quality: sets dye texture resolution. Auto steps it down if your frame rate drops, so painting stays smooth on slower phones
  • Brush size: sets the splat radius. A wider brush pushes a broader area of the field with each stroke
  • Color: picks the tint for your next stroke when Colorful mode is off, or nudges the palette when it is on
  • Colorful: cycles hue automatically as you paint, so a long stroke shifts color on its own

Advanced sliders for finer control

Open Advanced when you want to shape the physics feel described in how WebGL fluid simulation works rather than just the preset look.

  • Pressure: shapes how strongly the solver pushes the field toward an incompressible look. Lower values let the fluid feel softer and more compressible, higher values resist being squeezed
  • Swirl, which maps to vorticity in the solver: adds curling force from local spin. Low swirl gives smooth, lazy motion. High swirl adds tight, busy eddies
  • Fade speed, which maps to density dissipation: controls how fast dye fades from the canvas. Low values make dye linger, high values clear it quickly
  • Flow fade, which maps to velocity dissipation: controls how fast motion itself slows down. Low values keep the field moving longer after you stop painting

Display effects change the look, not the physics

These toggles change how the same dye field gets rendered to the screen. Turning them off does not change the underlying flow, only how it is drawn.

  • Bloom: adds a soft glow around bright, dense dye for a punchier look
  • Sunrays: adds light shaft style streaks for a more dramatic scene
  • Shading: adds simple lighting across the dye surface so it reads with more depth instead of flat color
  • Colorful: covered above, since it also changes the visual output each frame

Actions below the sliders

Buttons below the sliders change state rather than tune a value.

  • Pause: freezes the step loop so the current frame holds still. Resume picks the loop back up from the same state
  • Clear: removes all dye and velocity so you start from an empty field
  • Random: drops several splats at once across the canvas for an instant burst of motion
  • Screenshot: renders the current frame to a PNG and downloads it to your device
  • Record: captures the canvas to a video file until you stop, with a safety time limit
  • Music: picks a local audio file. Sync with audio lets the fluid react to beats in that track; audio stays in your tab
  • Live sound: hold to paint with hums, claps, or soft blows into the mic. Mic access is requested only while you hold, and listening stops when you release
  • Copy link: stores the current preset and quality level in the URL so you can share the exact same starting point
  • Immersive: hides page chrome so the canvas fills more of the screen
  • Explain field: shades the display to emphasize field structure so advection and swirl become easier to see while you paint

Mouse and touch input

You do not need a tutorial to paint on the live WebGL fluid simulation. Drag with a mouse on a computer, or slide a finger on a phone or tablet. Speed and stroke length both add force, so a fast flick pushes harder than a slow drag. Lifting your finger or releasing the mouse button simply stops adding new force, it does not clear existing motion.

Quick tips

A few habits that help.

  • Start with a preset, then open Advanced only to nudge one or two values
  • Raise Quality if your device holds a steady frame rate, lower it if strokes feel laggy
  • Lower Swirl and raise Fade speed together for calmer, cleaner looking strokes
  • Use Random to break the ice on an empty canvas before you paint by hand
  • Use Copy link right after you find a look you like, settings are easy to lose once you keep sliding

Questions

Presets. They are the fastest way to change the feel without learning every slider, and every mode page opens with one already applied.

If Quality is set to Auto and your frame rate stays low, the dye resolution steps down automatically so painting stays responsive instead of stuttering.

Pressure controls how strongly the fluid resists being compressed, which affects overall stability. Swirl controls how much curling motion the field adds back after each step, which affects how busy the motion looks.

No. Use Copy link to store your current preset and quality in the URL instead, then bookmark or share that link.

Yes. Pick the Classic preset to return to balanced default values, or Clear to empty the canvas without changing your slider settings.