How do I make animation of Water sort puzzle pouring?

I was messing around with a way to adjust the fluid levels so that the amount of fluid is the same no matter the test tube angle or even no matter the shape. For example, all four of these containers have the same amount of fluid.

The strategy is to define the container as a polygon, then you can clip the poly by the fluid level and then you can calculate the area of the clipped poly. I just adjusted the level in a trial-and-error loop till the area is at a certain area. Doubt I'll post a c3p at this point since it's a cluttered 14 events. It did satisfy my puzzle solving urge for the moment though.

I realize you may not be looking for technical solutions at this point. However, from a design perspective you may want to add a lot more to make it more fun than say the dozens of games like that.

I'd love to see your file and those technical details.

I was messing around with a way to adjust the fluid levels so that the amount of fluid is the same no matter the test tube angle or even no matter the shape. For example, all four of these containers have the same amount of fluid.

Pretty cool though I think the simplest approach would be a shader. You just need a sprite inside your flask with the shape of the flask. Then the shader could easily handle applying several colors at a defined percentage (e.g. 20% red, 20% green, 60% transparent) at a static angle to the sprite. A few simple calculations can handle the fill height and some tweens can empty a color out by tweening the shader.

I'm less concerned with a way to mask the fluids inside the container than I am to figure out how high the fluid should be to have a certain volume. It ends up simpler to calculate the area of a polygon than it is to calculate the amount of fluid pixels in an image.

If we are just talking masking, then what I ended up doing is using blend modes to mask out an area and draw within it. By controlling the draw order, you can do this multiple times on the same layer as long as you fill in the mask completely before moving to the next object. Destination-out to define the mask shape, and destination-atop to draw in the mask.

Masking with a shader or a clipped polygon have their own sets of quirks and shortcomings.

Anyways, if you want to check out how I made those images here is a modified project you could pick apart to get ideas.

dropbox.com/scl/fi/t1bjw1ybu5gaptqwnwj4s/testtube_fill2.c3p

The algorithm takes about 52 iterations to converge on a near perfect result, but it's good enough with a lot less. I could see it converging faster by interpolating the areas between y's but that would complicate it a bit. The loops could be eliminated altogether by making an approximate area vs y graph formula for multiple angles and interpolating between them.