Skip to content

p-sun/typescript-fluid-simulator

Repository files navigation

Latte Art Fluid Simulator

I made a latte art simulator where the process of making latte art using it feels like real life. To get good at drawing latte art here, you need to pay attention to the same concepts as you would in real life -- experimenting with speed of your pour, the shape you're drawing, the timing, keeping it symetrical, and making quick micro adjustments as the milk flow slows down while you fill up the cup.

Mobile Link: https://typescript-lzex4b.stackblitz.io

"Milk" tool + left drag pours milk. Right drag, or "Pen" tool + left drag pushes milk around.

_BEST33.Screen.Recording.2023-04-19.at.4.42.59.PM.mov
Fluid.Sim.Screen.Recording.2023-04-15.at.7.47.46.AM.1.mov

Want to Learn Fluid Simulation?

This repo is build on top of off the Eulerian fluid simulator from Ten Minute Physics that I ported to TypeScript and significantly refactored for better encapsultation, bug fixes, and to separate html layout logic from the physics.

If you're learning fluid simulation for the first time, I'd recommend watching his video, and then looking at my no_latte_art branch.

no_latte_art branch is also here: https://stackblitz.com/edit/typescript-niznck?file=index.ts

Eulerian Fluid Simulator

My Notes

Fluid Simulation 10 min physics HQ.pdf

Page1 3

Page2 3

Page3 3

Page4 3

Page5

Page6

Page7

Page8