Paint with a fluid simulation, then make your own

Your own fluid simulation, built in stages

This is the hardest project on the site, built in five stages, and you still won't write any code. The method is famous, so AI assistants know it well. You describe, paste, test and paste back any errors.

• A fluid simulation that opens in any modern web browser and works offline
• Glowing colour you push around with your mouse or finger, with several fingers at once on a phone
• Real-looking swirls and curls, with a slight 3D sheen on the fluid
• Colour themes: rainbow, neon, fire, ocean and candy
• Sliders for how much it swirls and how quickly the colour fades
• A "Splash!" button, a paint-without-clicking mode, picture saving and full screen

Good for: anyone who wants to see how far building with AI can go, people who love satisfying visuals, and students curious how games make water, smoke and fire.

What you need

The trick to bigger builds

Big projects go wrong when you ask for everything at once. So this guide builds the simulation in stages. After each stage, check it works and save a copy (fluid-v1.html, fluid-v2.html and so on). If a change goes badly, open the last good copy, paste it back into the chat and say "Let's go back to this version."

Don't worry about understanding the physics. The AI will use a method called Stable Fluids, published by Jos Stam in 1999 and used in games ever since. The most famous browser version is Pavel Dobryakov's free WebGL Fluid Simulation, which is worth a look for inspiration.

Build it in five steps

1. Ask for the simulation

   Copy this promptCopy

   I don't know how to code. Please make me a fluid simulation I can paint with, running in a web browser.
   
   Requirements:
   - Everything in ONE single HTML file (HTML, CSS and JavaScript together), so I can save it and double-click it.
   - No external libraries and no internet connection. Use WebGL (try WebGL 2 first, then WebGL 1) and run the simulation on the graphics card with fragment shaders.
   - Use the Stable Fluids method: textures for velocity, dye colour, divergence and pressure, with these passes every frame: advection, divergence, about 20 pressure iterations (Jacobi), and subtracting the pressure gradient.
   - Use half-float textures, and check the browser can render to them.
   - When I drag the mouse (or a finger) across the canvas, push the fluid in that direction and add bright colour at that spot.
   - The canvas fills its box, stays sharp on high-resolution screens and copes with the window being resized.
   - A dark background so the colours glow.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Save it as fluid.html and double-click it. Drag across the window. You should see colour flowing where you drag.

   Just a black screen? Press F12 (or Cmd+Option+I on a Mac), click the Console tab, copy any red text and paste it into the chat. Shader errors are common in a first version and the AI fixes them quickly once it can see the message.

2. Add the swirls

   Copy this promptCopy

   That works, thank you! Please add vorticity confinement so the fluid curls into beautiful swirls: compute the curl of the velocity each frame and push the fluid along it. Add a "Swirl" slider from 0 to 50 to control how strong it is.
   
   Also make the colour fade away slowly over time (dissipation) and add a "Fade" slider with five settings from fast to very slow.
   
   Send me the whole updated file, not just the changed parts.

   Always ask for the whole file. Then you replace everything, save, and refresh the browser tab (F5, or Cmd+R on a Mac).

3. Make it glow

   Copy this promptCopy

   Please make it look even better:
   - Change the colour every half second while I'm dragging, so long strokes become rainbows.
   - In the final display shader, add a little shading so the fluid looks slightly 3D, using the difference in brightness between neighbouring pixels as a surface normal.
   - Use soft tone mapping (1 − e^(−colour)) so bright areas glow instead of turning flat white.
   - When the page first opens, fire a few random splashes of colour so it looks alive straight away.
   
   Send me the complete updated file.

4. Colour themes and controls

   Copy this promptCopy

   Please add a row of controls under the canvas:
   - Colour theme buttons: Rainbow, Neon (pink, cyan, yellow and purple), Fire (reds and oranges), Ocean (blues and teals) and Candy (pastel pinks and purples). Each theme also tints the background slightly.
   - A "Splash!" button that fires 6 to 12 random bursts of colour.
   - A Pause button that freezes the fluid.
   - A "Paint without clicking" button: when it's on, just moving the mouse paints.
   - Touch: let several fingers paint at once on a phone or tablet.
   
   Send me the complete updated file.

5. Save pictures and go full screen

   Copy this promptCopy

   Please add:
   - A "Save picture" button that downloads what's on screen as my-fluid-art.png.
   - A full screen button.
   - If nobody has touched it for 5 seconds, add a small random splash every couple of seconds so it never looks dead.
   - Stop running when the canvas is scrolled out of view, to save the battery.
   - Use a lower resolution on phones so it stays smooth.
   - If the browser can't run WebGL, show a friendly message instead of a black box.
   
   Send me the complete updated file.

Quick fixes

The simulation is slow on my laptop. Please lower the simulation resolution to 96, reduce the pressure iterations to 15, cap the device pixel ratio at 1.5, and pause the animation when the tab is hidden. Send me the complete fixed file.

Twist it into something else

Once the fluid engine works, there's no end of things to do with it:

Made something beautiful? Save a picture and tag us. We feature reader projects.

If you can build this, you can build almost anything

This is the kind of thing that used to take a graphics programmer days. Asking for it one stage at a time, testing as you go and pasting errors back in, you can build it in an afternoon. If you can get an AI to build this, you can get it to build almost anything you can describe.

What to build next