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:
- Ensure that you have Node & NPM installed by running
npm -v- if not, install it. git clone https://github.com/nhalloran/liquidity.js.gitcd liquidity.jsnpm installnpm run dev- Open your browser and go to http://localhost:8080.
49.9k Dec 31, 2022
2.4k Jan 2, 2023
6k Jan 3, 2023
1.6k Dec 29, 2022
740 Dec 31, 2022
45 Nov 2, 2022
8.4k Jan 2, 2023
11.5k Dec 30, 2022