When coming to ITP, one of the general themes I knew I wanted to explore was data visualization and how it can actually affect people’s day-to-day decision-making and behaviors. There’s so much information out there in the world, but structuring this glut of information in forms that can actually be useful in guiding decision-making is something we’ve barely scratched the surface of.
This general theme inspired the main project of my first semester at ITP: economz, a visualization project that helps people make sense of their carbon FOODprint. By creating meals using popular food items, economz shows the associated carbon footprint of the meal using a gauge we’re all familiar with: car miles traveled. The goal of the project is to raise awareness about how food choices have a great impact on one’s carbon footprint, to suggest greener meal alternatives, and to hopefully plant the seed of change in people’s minds.
The Short Version
The economz website hosts more information about the project. Please see it here (it will be moved to economz.herokuapp.com soon; as well, the featured visualization will be updated to a newer version).
View the code:
- The Processing code of the digital visualization
- The Arduino/Processing code of the physical installation and accompanying digital visualization
- The Ruby/Sinatra code of the economz website
Now, onwards to each component of the project.
Creating the digital visualization in Processing (The Processing code)
A version of the visualization built with Processing and Processing.js is available here. From the very beginning, I knew I wanted the user to interact with the visualization by placing food items on a plate (creating a meal), and then seeing the associated carbon footprint of that meal in the form of a car travelling across the screen (because car travel is one of the main rubrics people think about for carbon emissions). One of the most fun parts of the project was creating the digital dashboard with menus, prompts and buttons. I wanted it to be a self-contained program that could live on the Web with splash screens, buttons, Tweet functionality and more. I am quite happy with how it turned out.
Future work (both planned and possible):
- Ability for user to save the meal visualization they have created (done. pending next version)
- Ability for user to tweet about the meal visualization they have created (done. pending next version)
- Ability for user to toggle different attributes of their meals; for example, how big is the portion? do they eat it once a day? once a week? is it organic? (this is possible, but not currently planned. there is something nice about the simple/straight-forward dashboard with limited options)
Creating the physical installation with Arduino, RFIDs, and Processing (The Arduino/Processing code)
The economz physical installation is powered by serial communication between Arduino and Processing. Physical “fake” food items (like this steak here!) are tagged with RFIDs and communicated to Processing via an NFC/RFID shield and Arduino. Processing is used for the digital visualization.
Here’s how it works:
- The user approaches the economz physical installation and encounters 23 different fake food items (various veggies, meats, dairy items, starches, and snacks).
- They select the food items they want to create a meal out of, and then scan each item across a grocery-store-style checkout system (and then place them on a plate). As the items go across the checkout counter, the RFID tag of that food item is detected by the RFID shield on the Arduino, and the screen in front of the user is updated to show the new food item on the plate. If they rescan the item, they can remove it from the plate.
- When they are done creating the meal, they scan a toy hummer SUV to run the car animation and to see the carbon footprint of that meal. At the end, a splash screen appears on the monitor to give them more information about the meal they just created, and to suggest actions for a healthier carbon FOODprint.
- Kids love it! Creating meals “on screen” by using the fake food was a big hit among the kids. However, they didn’t really get or care about the environmental commentary of this project. Because of that, it would be interesting to teach kids other things about meals using this setup (for example, “creating a balanced meal”). The interaction with the fake good is great for getting kids involved — now I just need to figure out what “learning activities” actually work for them.
- The physical installation works well and is fantastic for getting the environmental message across. I had several people in the business community express interest about this project being used in conjunction with eco-friendly brands and grocery stores (the idea being that these brands/stores could associate the installation with their product to raise awareness about the importance of eco-friendly food).
- More information/context would be good. One component I could improve is to better contextualize the information people are getting. What is the very best meal? What is the very worst? What is the average? I know this personally (because I worked with the data so much), and so I was able to explain it to people on the spot. However, in the future, I’d like to built it into the installation itself.
Creating the economz website with Ruby/Sinatra (The Ruby/Sinatra code)
The economz website is viewable here (soon to be moved to economz.herokuapp.com). It is built with Ruby/Sinatra, and houses the main Processing.js visualization, information about the project and the physical installation, and a gallery of food items with more information about each item’s carbon impact. The gallery of meals is particularly important to the website. It allows visitors to learn more about each food item’s carbon footprint and to view, submit, and exchange recipes for those that are “economz-friendly” items. The gallery also has a bit of slick JQuery interactions and a nice color-oriented visual display.
The main future work planned for the website is allow users to save the meal visualization they have created directly to the economz Web gallery of meals. Currently, the user can save the meal visualization locally (to their own computer), but saving it the economz server is a tricky task. Code needs to be written to generate an image from the Processing.js canvas, send it to the economz application server, and then read the image and save it to the database at the application. It turns out generating an image from the canvas and sending it to the application is easy (using html5 and JQuery/AJAX), but actually reading, encoding and saving the image on the application side is much trickier (code needs to be written so that the application can properly encode the image at its end).
economz was a really fun and important project to work on. Special thanks go to my wonderful ITP professors for their support and guidance: Daniel Shiffman (for ICM/Processing), Benedetta Piantella (for Physical Computing/Arduino/RFIDs), and Zevensuy Rodriguez (for Web/Ruby/Sinatra). Also a special thanks goes out to all my ITP colleagues who helped out: Esteban Cordova, Maria Paula Saba, Jess Jung, Caroline Sinders, Wajma Mohseni, and all the other classmates who gave great feedback.