AI Drinks Water
AI Drinks Water is an interactive web-based data visualization built with p5.js. Users can paste an AI conversation to see an estimated representation of the water associated with processing it, based on token count and published environmental estimates. The project makes the often-invisible physical cost of AI more tangible through responsive visuals. All text is processed locally in the browser and is not stored.
The Problems
During the development ofAI Drinks Water, the primary issue I encountered was that when users pasted large amounts of conversational text, the interface initially showed almost no visual response. As a result, the intended connection between input length/water consumption and visual feedback failed to establish.
Additionally, early iterations suffered from overlapping and cluttered rendering layers, performance drops (the page lagged as visual elements multiplied), and layout issues, such as a constrained visualization area and overlapping icons and numerical data, all of which negatively impacted usability and clarity.
How I Solved Them
I began by recalibrating the mapping scale between text length and visual intensity, ensuring that longer texts directly drive key visual parameters such as particle density, color shifts, and noise intensity. This guaranteed a stronger visual reaction as input volume increased.
Next, I optimized the overall system architecture by separating different visual elements into distinct rendering layers and placing a threshold on total particle counts based on real-time calculations. This prevented screen clutter and performance drops caused by overload, allowing the system to run smoothly regardless of input scale.
Finally, I refined the web layout and visual hierarchy by expanding the primary visualization area, eliminating overlapping text and icons, and emphasizing key instructions. These adjustments made the relationship between input, water consumption, and feedback immediately intuitive without requiring viewers to read lengthy guides.
Future Development
Future development will focus on improving the token calculation method. The current approach relies on rough character and word estimation and can be inaccurate, so the next version will adopt tokenizer-based logic closer to real model tokenization and support model-specific parameters to make the water-use estimate more reliable. Privacy protections will also be strengthened by avoiding storage of pasted conversations, enabling local processing where possible, and providing clearing and anonymization options to reduce the risk of data exposure.
