2
\$\begingroup\$

Brand new to games/graphics and I'm attempting to find a method to create a 2D liquid effect with JavaScript. Ideally I could adjust the viscosity and flow from a gas/fog effect to oil and between.

As an example, the effects in the PixelJunk Shooter trailer have stuck with me for years and I haven't ever seen another implementation with this style.

There is another question, as well, but no real implementation.

I also found a nice synopsis of ideas on gamedev so maybe that's the extent of my answer?

I'm currently using createjs but suspect I'd need another library so I'm not against using multiples.

I've looked at threejs and craftyjs but they don't seem to fit the criteria.
In order to keep with easeljs maybe I'll just check out a tutorial on how to create a particle system.

The heart of my question is really about a simple implementation rather than reading complicated mathematical presentations on the subject. While interesting it's pretty far above my head. Am I simply finding it's impossible to create a nice effect without some heavy lifting?

Thanks for any ideas on how this might be accomplished.

\$\endgroup\$
3
  • 1
    \$\begingroup\$ I don't know of any "quick and easy" solutions in this space, esp. for javascript. Fluid simulation is surprisingly complex. If you decide to go the route of heavy lifting, I've enjoyed this series: software.intel.com/en-us/articles/… \$\endgroup\$
    – Chris Mills-Price
    Commented Feb 15, 2016 at 5:20
  • 2
    \$\begingroup\$ Google's liquidfun may be useful. I've used the C++ version and it's easy enough to use. It has a javascript port and you can see a js sample here google.github.io/liquidfun \$\endgroup\$
    – KevLoughrey
    Commented Mar 15, 2016 at 12:55
  • \$\begingroup\$ I had done once this quick spring physic based simulation, check my S.O. answer : stackoverflow.com/questions/19787775/… \$\endgroup\$
    – GameAlchemist
    Commented Mar 15, 2016 at 13:10

2 Answers 2

Reset to default
3
\$\begingroup\$

I've found that fluid simulation in 2d games is usually visual trick involving simple physics bodies and a shader or other rendering treatment to make them appear liquid-like. There's a good example here built with JavaScript and Phaser: http://gamemechanicexplorer.com/#fluid-1

Another purely canvas implementation, similar idea, particles + 'metaball' style renderer: https://github.com/asadm/SPHjs/tree/master/js

There's other JS implementations out there for sure, these are just the ones I remembered seeing when I was looking for the same. Both have similar visual feel to the liquid effects in Pixeljunk Shooter you're after.

\$\endgroup\$
-2
\$\begingroup\$

Sorry, but modelling water really does require you to read a lot of mathematical papers. The libraries you mentioned either have no or just very small to do with physical simulation. ThreeJS? 3D graphics engine. EaselJS? 2D graphics library.

Try to search for a moree advanced physics library (I doubt there's one for javascript though).

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .