About a month ago I was involved in a pitching a water filter company. As part of this project I read a lot about water quality and its health effects. We are lucky that the Boston area has some of the safest drinking water, but there are large portions of this country where that is not the case. Annually each water supplier is required to post a CCR or consumer confidence report with results of tests measuring chemicals found in the water supply.

Parsing this data off of a consumer group database that collects those CCR reports I designed and built a demo web app using Backbone.js that allows users to look up the quality of their local water supply.

For the pitch, our team also modified the client’s filtering water pitchers to measure how much water was being consumed. To demo this our team put out a series of pitchers for the pitch meeting and I build a water meter display for each pitcher that would update in real time as people filled their glasses. This was built in Flash as a standalone executable that pulled water usage in real time from data posted by each pitcher. I chose Flash specifically for this project because of it’s recent performance enhancements – specifically multi-threading ability and graphics card access. All the rendering was done directly on the GPU using the Starling framework. The physics simulation was done on a separate worker thread using the NAPE physics engine. The effect of water pouring into the teardrop shape was accomplished by creating thousands of small dynamic circular bodies released in static polygonal container crudely approximating a teardrop shape. I then pieced together a custom fragment shader that blurred and threshold-ed the image to render something that looks and feels liquid even though it is a bit more viscous than I would have liked.