liquidity.js

A data visualization library for depicting quantities as animated liquid blobs.

For a demonstration of what the final product can look like, watch this video.

The animation can be rendered in real-time using circle sprites, or rendered for video output using Marching Cubes (metaballs), which is too computation-heavy to be animated in real-time.

The first in-progress prototype to use the technique is Philly Contracts, but a more stripped down project in planned to serve as a boiler plate. Philly Contracts is supported by the Kight Prototype Fund, and is being produced in collaboration with Amanda Levinson.

This project is in its early stage. Some items on the to-do list include:

• Provide better documentation and a better stripped down starter project.
• Optimize performance of the Marching Cubes / metaballs, which are currently highly inneficient.
• Improve behavior of liquid movement to have more natural characteristics (less isolated circles)
• Allow for multiple circle / drop size, and more precise quantities.

Getting started

To run the liquidity.js demo:

1. Ensure that you have Node & NPM installed by running npm -v - if not, install it.
2. git clone https://github.com/nhalloran/liquidity.js.git
3. cd liquidity.js
4. npm install
5. npm run dev
6. Open your browser and go to http://localhost:8080.