title: How can I build an HTML5 liquid mixing animation?
body: <p>A few years ago I built a small OpenGL project where I simulated an animation of mixing liquids; a similar project can be seen <a href="http://www.youtube.com/watch?v=Jx2blmfmAgo" rel="nofollow">here</a> or <a href="http://www.youtube.com/watch?v=FwgujC3LkMs&amp;feature=related" rel="nofollow">here</a> (these are 2 youtube videos showing some liquid animations).</p>
  
  <p>My main purpose is to simulate these animations using webGL, JS, CSS or HTML5 in order to use them with Phonegap.</p>
  
  <p>In my project I have set 2 main liquids with different density and different colors in order to test the mixture process. My main goal is to animate the flowing of the 2 liquids and start mixing when the user starts shaking his smartphone (or when the user clicks a button, if we are in a web based application).</p>
  
  <p>During my research, I have collected several physics papers explaining the process. Also I have seen several libraries like <a href="http://raphaeljs.com/" rel="nofollow">Raphael.js</a> or <a href="http://processingjs.org/" rel="nofollow">Processing.js</a>, but I am not quite sure which one is better, or where to start, and which one is compatible with Phonegap. Any suggestions, links or references will be great.</p>