A Thinking Sam @ITP

economz: visualizing your carbon foodprint

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:

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.
Creating the physical installation required quite a bit of work with RFID tags. Originally, I wanted the user to just put items DIRECTLY on the plate (without having to scan them across a grocery-store-style checkout system). The idea was that the RFID reader would just detect all the tafs in range at any given time and communicate that to the Processing visual display. However, it turns out that RFID readers are not really designed to read MULTIPLE tags at the same time (they tend to read just the 1-2 closest ones to the reader). Thus, it would not be possible for the reader to detect multiple items on the plate at the same time. Instead, I changed the user interaction and introduced the checkout-style system where each item is scanned individually (and communicated to Processing one by one). This actually ended up working really well because people are used to scanning items in this way (so it was a really intuitive action). That said, there are some interesting strategies to look at for solving the RFID reader / multiple tags issue (some people have tried to deal with it by writing “anti-collision” methods in code, but there is no go-to solution yet). I plan to explore this more in future projects.
Displaying the physical installation at the ITP show was quite a bit of fun (and the project was very well-received!). Here are some lessons learned and future plans based on that experience (with hundreds of users testing it out!):
  • 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).

Conclusion

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.

Sam In Living Color

In our final week of the most-fun visual design class, we played around with a composition and its color attributes (by changing hue, saturation, and brightness).

I decided to work on a mathematically/3d-modelled version of myself. See my work here.

And here is the final image with all 4 options (it’s very much like the typical photo because take on their Mac!):

ITP Logo + the Nike Swoosh

For visual design, we had the fun and challenging task of designing a new logo for ITP.

But first, we also were asked about an iconic  logo that we think is successful. My choice was simple: the Nike Swoosh.

I like it because it is so recognizable and iconic and conveys the dynamism of the brand (exciting, energetic, etc.). It also has a unique story. Nike was named after the Greek goddess of victory. The swoosh design was created by graphic designer Carolyn Davidson in 1971 (along with 35 other designers!). The swoosh is supposed to signify the “wings” of the Greek goddess. With a deadline looming, Phil Knight chose it saying “I don’t love it, but it will grow on me.” (ha.). Davidson charged just $35 at the time, but was later given a golden swoosh embedded inside a diamond ring, as well as an undisclosed amount of Nike stock.

Now on to my ITP logo.

My concept was simple, but difficult to execute: ITP as its own universe. I first put together a basic layout of an ITP logo (using Helvetica as the base font), and then I brought it into Processing to make it render as a universe. The Processing code renders the image in tiny dots, giving the appearance of a universe.

I especially like how ITP almost seems to have its own force of attraction within the universe (not a bad metaphor for ITP at all).

Here’s the universe coming together (the image rendering):

And here is the final logo (which likely needs a bit more time to render in Processing):

 

Typography and Descriptive Words

This week in visual design, we did a really fun project based around typography. The first part involved setting your name in 6 different typefaces that represent you in some way. See this PDF for the full project.

My favorite sans-serif was TradeGothic LT, a very readable and sophisticated modern font:

 

My favorite serif was Georgia, a classic font with great contrasts between thick and thin elements:

Here are the full 6 fonts:

The second part of the assignment was to create descriptive words. I went food-based with obesity, hunger, and fast food:

economz: your carbon foodprint

For my final projects in ICM, Pcomp and Web, I’m creating one big project around how food choices influence one’s carbon footprint.

The project is called economz (for now), and the website for it can be found here: http://economz.tumblr.com/

About economz

Everyday, multiple times a day, you make a key choice that will determine your personal carbon footprint. It’s not necessarily the car you drive or even the fuel you burn (although these are important sources as well) — rather, it is the food you choose to consume.

When it comes to your personal carbon footprint, your food choices matter – a lot. Some studies peg food choices as contributing as much as 30% of one’s overall carbon footprint.

economz is a visualization project that helps people make sense of their carbon foodprint. By creating meals using popular and standard food items, economz shows the associated carbon footprint using a gauge we’re all familiar with: car miles traveled.

There are two ways to use economz:

  1. On the Web — create meals, learn about your carbon foodprint, and share!
  2. Physical Installation — located at NYU’s Interactive Telecommunications Program, you can also create meals using our physical installation of mock food items

The Facts

  • What you eat is much more important than where it came from. The distance that food travels is only around 11% of the average American household’s carbon foodprint.
  • Food production is what matters. More than 90 per cent of beef’s emissions, 69 per cent of pork’s and 72 per cent of farmed salmon’s emissions come in the production phase.
  • Certain foods are associated with much higher carbon emissions, due to the production systems it takes to produce these foods — from the pesticides and fertilizer used to grow animal feed all the way through the grazing, animal raising, processing, transportation, cooking and, finally, disposal of unused food.
  • Meat and cheese are the worst culprits: Lamb, beef, cheese, pork and farmed salmon generate the most greenhouse gases.
  • The typical American consumes around 127 pounds of meat per year – on average, that’s 40 percent more than other developed countries
  • If everyone in the US ate no meat or cheese just ONE day a week, that would be like not driving 91 billion miles, or taking 7.6 million cars off the road
  • The positive side: Changing food habits offers a very real way to change your personal carbon footprint! Changing transportation and electricity choices can be tough in the short term, but food consumption can be changed pretty much whenever you put your mind to it.

The Project

economz will be a Web-based visualization project with an accompanying physical installation.

The To-Dos

  • Visualization project in Processing
  • Physical installation (fabricate various food items and hook them up to sensors that can identify which food item is which and communicate that info to the Processing sketch; the food registers when it is placed on a physical plate).
  • Website in Ruby/Sinatra (1. embedded visualization; 2. ability to save and tweet your meal visualization; 3. browsable gallery of featured meals and their “score”; 4. video of physical installation)
  • Branding / Visual Design

The Questions

Processing

  • Show food items and drag over OR show menu and “click” on text items?
  • How many output options (if you ate this meal once a week for a year? if you ate this meal once a day for a year? more?)
  • I want people to be able to tweet their visualization, which people can then view at a specific URL. I need to save the frame, save to the database of my ruby app, and then post to twitter with that URL. “Food choices matter for the environment – a lot. See my carbon foodprint example at ~~uniqueURL~~ by @economz”

Pcomp

  • Best way to fabricate fake food? Laser cutter (but with what material?)? 3d printer? Hand-made (but with what material)? Real food??
  • Best sensor / identifiers?

The Outreach

  • Meatless Mondays
  • Eco and Environmental groups and publications
  • Eco and Environmental writers/bloggers

Signs, signs, and more signs

New York City lends to an interesting study of signs. There’s a sign for everything, pretty much everywhere. Some are boring. Some are great. Some are funny. Some are chic. And some are just perplexing. I’ll be covering the latter in this post.

The Goal: Hey you driver! There’s a new Stop sign. Take notice. You should stop at it. For real.

The Problem: It’s hard to imagine someone is going to notice the Stop sign ONLY because there is a small yellow “NEW” sign beneath it. Presumably, you’d see the much larger Stop sign before the smaller New sign below it. The logic is faulty here. Seems like an exercise in futility to me.

A Solution: One solution could be to change the color of the Stop sign itself. For example, new Stop signs could be an obnoxiously bright shade of orangish red. But I think a color change could be dangerous to something as important and fundamental as a Stop sign. Instead, I would advocate some bright flashing lights outlining the sign. If you really want people to see a sign, why not highlight its outline with something they HAVE to notice?

The Goal: You got legal problems? Well, we got legal services. All of them. Literally.

The Problem: Clutter. Color. Font face. Everything.

A Solution: Besides the obvious color issue (seriously Mr. Ciafone, Esq., let’s stick to 3 colors max — you get to choose red/yellow/black or American colors, but NOT both), this sign would be much clearer if it limited the information. Mr. Ciafone, we get that you will take on all cases; your sign could portray that information much more concisely. What would be nice is to have a stronger value add statement and an even stronger call to action.

The Goal: Hello there, subway traveler. Oh, you’re about to come down these stairs? Well, you’re in luck if it’s non rush hours. Otherwise, DON’T YOU FREAKING DARE.

The Problem: The sign doesn’t take into account how people actually behave. No one cares about what the sign says. If there are people coming up that side of the stairs, then people won’t come down. And vice versa.

A Solution: If you really want to direct people when they can and cannot go down these stairs, how about a simple light system: green checkmark when it’s OK, and red “do not enter” mark when it’s not OK. This stuff is easy. We learned how to make something like that in our first week of physical computing. COME ON MTA!

The Goal: (said in a deep Barry White style voice) Why hello again sexy subway rider. You know, nothing exciting ever happens by staying home. You should come out and do something exciting, presumably at our proprietorship.

The Problem: I HAVE NO IDEA WHAT SAID PROPRIETORSHIP IS!?! It’s just a weird logo with “CH” and some needle and thread icon (I think?). Sorry CH, you’re not on that level yet. But I will try to go out. Just probably not to your place.

A Solution: A real logo or name would be cool. Maybe even a website or something? I want to come out and create a great story of my own, but you gotta give me more info CH!

 

Visual Analysis of Airbnb

For our first week of 2D Visual Design, we analyzed a design of our choosing. I explored one of my favorite websites, Airbnb.

Pages