Relook . Recalculate .

Revise
make your lifestyle choice

A Diploma Project Documentation

Saakshita Prabhakar

1
 Thank you

Team Work
Mumma,Papa,Tarunima Prabhakar and Manohar Vanga

Panel Advice
Nupur Sista, Mr. Ravindra, Vasanthi Das

Support and Help

Mr.Vivek Gilani (co-founder of no2co2)
Aajwanthi Bhardwaj, Akshataa Vishwanath, Shakti
Das, Sharvari Shah,Tanvi Talwar,
Fellow batch-mates and faculty at Srishti
Relook . Recalculate . Revise
make your lifestyle choice

A Diploma Project Documentation

Saakshita Prabhakar

2010 Srishti School of Art, Design and Technology

This project is licensed under Attribution Share Like 3.0
unported. Feel free to share, remix and tweak. Permissions
beyond the scope of this license may be available at
saakshi.prabhakar@gmail.com.

I II
 Index

02 Project Proposal

02 Field of Enquiry

08 Inspiration

10 Key Elements

12 Stages

14 Content

28 Visualization

50 Product

60 Technical

62 Assumptions

64 References

III IV
 Content
Project Proposal
Project Title
An engaging interface that presents users with a
comparison of various lifestyle choices and their long
lasting effects on sustainability.
Background
Climate change is upon us and India being the sixth
largest developing economy faces its own set of problems.
India’s CO2 equivalent per person every year is around
1.18 metric tonnes. Even though it is small in comparison
to countries like the US and UK, the combined outcome can
be alarming, owing to the fact that we have the second
largest population in the world.
Climate change and its impact on India has become an
important topic in schools and colleges. Most students
are aware of big phrases like “global warming”, “green
house gas emissions”, but they are completely helpless
when they want to understand the real impact of everyday
choices on their lives and their environment. In today’s
mechanised world, it is important to bridge the gap
between development and environment exploitation. This
is where sustainability steps in. Sustainable living is a
lifestyle that attempts to reduce an individual’s or society’s
use of the Earth’s natural resource and his/her own
1 2
resources (source Wikipedia). Even though the topic has
been widely publicized by various media, there are very
few resources easily accessible by the public.
There are a lot of resources out there to help us see the
repercussions of our choices but these are difficult to
access, and generally boring to indulge in. Looking at
laborious statistics and data on a screen or paper is rather
dry and usually fails to have a lasting impact on people.
There is thus a need to allow people to see this information
in a more interactive and attractive way. This is where
data visualization and information design steps in.
Field of Enquiry
One thing that is clear is that the information permeating
to the general public relating to sustainability is not
enough. There is a need for the audience to understand
the impact some of the easy choices/decisions have.
Spreading awareness amongst people means dealing
with the concept of behavioural change. Design can play
a crucial role in behavioural change. There is an important
relationship between data visualization, information
design and behavioural change. This relation is shown in
the following diagram.
Project Proposal
 Data is the foundation upon which everything else builds
up. A good data visualization model that invites people
to interact with it and use multiple senses, is more
successful and has a longer lasting way of communicating
the information.
Wisdom Behaviour Change
Social

Knowledge Understanding Change

Equitable Bearable

Information Graphs of Usage Sustainable

Sustainable living at the most
fundamental level is about the
Economic Environment
application of sustainability to
Viable lifestyle choice and decisions.
Data Energy Data Sustainability itself is expressed
A visual hierarchy of how the mind works after it views as meeting present ecological,
information therefore Information Visualization plays an societal, and economical needs
important role in the process of transforming information without compromising these
into knowledge. Source: The role of (meter) design in factors for future generations.
behavioural change (Source: Wikipedia)

3 4
Project Proposal
Project Proposal
 Project Details
The project is an amalgamation of data visualization,
surface design, sustainability and new media.
Content
Lifestyle is a way of life or style of living that reflects the
attitudes and values of a person or group. There are a
small set of broad categories that constitute an average
person’s lifestyle.
Possible Choices
•Food Form • What does sustainability in the broad categories of
•Transport The final interface is expected to use the same technology lifestyle (eg. food, transport, materials etc.) mean?
•Utilities used in a Reactable. New media has a lot of power today. • Emotional design
•Water Some great works communicate well with the help of new
•Materials media. It excites the senses beyond reading. The form is Resources
•Waste/hygiene a highly sensory way of communicating information. This • NGO’s and other government organisations
interface would be accompanied by a small book or wheel • Online Reports and thesis
chart giving detailed information about each of these • Online facts and statistics
categories (the interface alone is insufficient in terms of • Magazine articles
details). The role of the interface is to excite audiences to a • Presentations
level where they automatically want to interact with such • Various websites on data visualization and information
data. Once the interest is created one can spend some design such as.“Good Transparency”, “Information is
quality time getting involved with the content. Beautiful”, “Smashing Magazine”
Factors that contribute • Various Books on data visualization and information

{ {
Target Audience design eg: Data Flow by Klanten et al.
Imported GHG emission A presentation like this one is open to all age groups. The • Research work done by other professionals in this field.
Local content is universally important for people of all ages,

FOOD
Meat Treating those in the food although young children are expected to benefit the most.
Organic chain better Children are more receptive and open to change. The
Inorganic intention is to make an impact on a students’ mind (make
Genetically Modified Expenditure it memorable)so that they can remember it while making
their future decisions

Economic Social Environment Research Questions

• What is behaviour change?
• What is the technology behind a Reactable and how
A choice of food made by us changes these factors accordingly. The idea is to collect India specific data on how each of these factors get would a similar interface work?
affected by any one particular choice. The interface would visualise and show the corresponding changes in these factors depending on • Tips for good visualization
the choices made by the audience. • What is sustainable lifestyle?

5 6
Project Proposal Project Proposal
 Learning Outcomes
• Distributing information to the audience in a way that
grabs their attention and keeps them interested.
• To try and push my design skills beyond 2D, to a level
that can evoke more multi-sensory emotions
• Finding a balance between making design tangible
(multi-sensory) and visual (unisensory)?
• Managing data and using only relevant data
As a design student I am interested in the topic of
information design and doing a project of this nature will
take me a step ahead in the field. It is important for me
because it gives me scope to grow as a designer, mix and
match mediums, explore new technology and push the
boundaries of design.
Art and design are potent tools that can complement all
the other myriad fields. It often serves as the final piece
that completes the picture. Design as a tool works at a
subconscious level and guides us to observe and pursue
aesthetic improvement in everything around us. Design
can greatly alter quality of communication. Good design
can provoke, pacify and prevail.
Inspiration
Gapminder
A software for animation of statistics that was initially
developed by Hans Rosling’s Gapminder Foundation
in Sweden and acquired by Google Inc. in March 2006.
This free software analyzes trends and visualises human
development. I viewed his talk at the TED conference a
few years back and found it highly inspiring. The idea of
visualizing pure data in order to bring out hidden trends
to the surface was first seen in his work. This was a major
inspiration for this project.
website-http://www.gapminder.org/
Reactable
An electronic musical instrument with a tabletop Tangible
User Interface that has been developed within the Music
Technology Group at the University Pompeu Fabra in
Barcelona, Spain by Sergi Jordà, Marcos Alonso, Martin
Kaltenbrunner and Günter Geiger. The table itself acts
as a large display using a hidden projector underneath..
As a tangible is placed on the table, various animated
symbols appear, such as waveforms, circles, circular grids,
or sweeping lines. The ability to touch and communicate
excited me and encouraged me to challenge myself.
website: http://www.reactable.com/

Design creates culture. Culture shapes

values. Values determine the future. Design
is therefore responsible for the world we
live in. –Robert L. Peters

7 8
Project Proposal Inspiration
 Climate Change Films
AN INCONVENIENT TRUTH: a 2006 documentary film
directed by Davis Guggenheim about former United States
Vice President Al Gore’s campaign to educate citizens
about global warming via a comprehensive slide show
that, by his own estimate, he has given more than a
thousand times. The film is an effort to educate the public
about the severity of the climate crisis. This was one of the
first films that exposed me to the ideas of global warming
and sustainability and climate change..
HOME: a 2009 documentary by Yann Arthus-Bertrand. The
film is almost entirely composed of aerial shots of various
places on Earth. It shows the diversity of life on Earth and
how humanity is threatening the ecological balance of
the planet. The film is so subtle yet direct that its almost
impossible to not believe the voice over. The shots are
aesthetic and scenic and put earth in a context that is
worth thinking about.
Previous Work
Climate change and sustainability has been a common
topic in my prior work. I am a strong believer of
sustainability and over the years this passion has grown.
There is a lot of scope and potential for us to grow in terms
of sustainability and I want to use my design skills and
learning to get a step closer to this goal
Key Elements
Data
I believe we belong in a world with continuous data
overload. Data by definition means groups of information
that represent the qualitative or quantitative attributes
of a variable or set of variables. Organising data not only
makes life simpler and clearer, it makes a basic framework
for recognising patterns and studying trends.
Visualization
The formation of mental visual images, the act or process
of interpreting in visual terms or of putting into visual
form. By visualising we present data in a form that allows
rapid understanding of relationships and findings that
are not readily evident from raw data. Visualization
technologies and methods deepen content knowledge
and make it more communicative. Converting data into
information is an unconscious process that has been
happening over years. The tools and form advance,
but the function essentially remains the same to make
understanding simpler.
Data(information) architecture and Data (information)
design are core elements that come under the broad
category of data(information) visualization. This may not
necessarily be mechanical and boring. Whether in the form
of print or 3D, making information more communicative,
interesting and audience friendly is a highly successful
way of dissipating knowledge
New Media
A broad term that emerged in the later part of the 20th
century to encompass the amalgamation of traditional
media such as film, images, music, spoken and written
word, with the interactive power of computer and
communications technology, computer-enabled consumer
devices and most importantly the Internet.

Data Visualization
As the name clearly suggests it is the study of the visual
representation of data. The idea is to perceive information
and acquire some knowledge. A good data visualization
communicates the hidden knowledge behind data.

9 10
Inspiration Key Elements
 Stages

Introduction
The magnitude of this project is such that the best PROJECT STAGES
way of explaining and understanding the project is by
distributing it into different departments. Each department
requires extremely different kind of work and attention.
When justice is done to all these areas, a complete and
successful project is achieved.

The nature of work is highly experimental. One thing leads Content

to the other and it is only through a continuous hit and
trial that a final working piece is produced. The technology Visualization
at this level has its own limitations which needs to/should
be considered before constructing the product. Product

This was a good platform to apply my visual Technical

communication knowledge and more. The project was an
area I had not explored yet. A new but challenging space
of design made me learn a lot and pushed my boundaries
to think out of the box

* These sections have been made on the

basis of the nature of work done during
the project. They are shown in the order of
which they were tackled

11 12
Structure
 Content
The content of this project was the first step to
determining what the project would talk about. With
the need to be highly informative and accurate,
this section of the project required a lot of research,
reading and writing. The general idea was to find
the social, economic and environment factors for
some of the choices made by us in our day to day
life. Later on these categories were narrowed down
to Food,Transport and Utility. There were some
difficulties in the initial stages but eventually content
generation gained momentum and it became much
easier a problem to tackle.
Visualization
This section was one of the harder sections to
deal with. This section exploited all my visual
communication/design skills and knowledge. Although
some of the design process was limited by technology,
working within the limits of technology was quite a
learning experience. It was the most crucial part of
my project or in my words the “make or break”section
of the project. This section bridged the gap between
technology and communication (a design trait). It
exposed me to different forms and experiments of data
visualization happening all across the globe.
13
Structure
Product
This part of the project was completely new and
experimental. With continuous referencing to the
internet and technical knowledge of a friend, the
product worked successfully. This section of the
project was tricky as it required precision. The result
however is, in my opinion, magical. It is this part that
makes the whole interface less mechanical and a
more humanistic one. It makes the audience use two
of their senses of vision and touch in comparison to
only vision. This multi-sensory information gain has a
much bigger impact on the user.
Technical
This part of the project is the backstage working of the
project, even though it is not visible to an audience;
it is the underdog of the project. This section includes
programming in Flash ActionScript 2, creating an even
infrared illumination of the surface, modifying the
camera to detect infrared light and animating in flash.
Design is not just what it looks
like and feels like. Design is how it
works.–Steve Jobs
Content
Introduction
With just one idea of finding data on sustainability,
I began to swim in a big pool of scattered data. The
information available on the subject was extensive and
took a lot of time to organize. There are three factors as
seen earlier that make the three pillars of sustainability.
Environment
The first and the most obvious thing one thinks of when
we talk about sustainability is global warming or the
carbon emissions. So, the environment factor was quite
evidently the GHG (green house gas) emissions made by
some of the lifestyle choices. The gases that come under
greenhouse gas are
CO2 (Carbon Dioxide)
CH4 (Methane)
N2O (Nitrous Oxide)
The standard unit for calculating GHG emission is
kilogram CO2 equivalent (kg CO2 eq). The important
element in calculating this, is the GHG emission
coefficient. This coefficient is calculated and derived after
a long methodical and logical calculation. This coefficient
is multiplied by a suitable data to give the GHG emission
for a particular object. These values are added to come
up with a common figure. This was the most important
and intense factor
Economic
This factor is quite simple and to the point. It gives the
amount of expenditure due to a particular lifestyle choice.
Comparisons can thus be made easily with other choices.
Comparing costs is a basic way of giving them alternate
choices of lifestyle. While the difference in expenditure
is not visible on a small scale, it becomes more evident
when looked at on a larger scale (per annum).
Social
This factor changes with each category, but if it was
to be generalized, it is how the society is affected by
a particular lifestyle choice. It is achieved when social
exclusion is minimised and social equity maximised.
Unlike the other two factors this factor is directly
proportional to sustainability. The higher the social factor,
more sustainable is the choice.
Categories
A big challenge was to define what choices are put in the
interface. What could be a possible way of categorising
14
Content
 them. A widely accepted approach is to identify and produced from the combustion of biomass / biofuels17 Examples
categorise emissions-releasing activities into three should be reported separately to emissions in scopes
groups (known as scopes). 1, 2, and 3. Carbon dioxide produced from biomass and
biofuels not as a result of the combustion of biomass and
Scope 1 (Direct emissions) biofuels (e.g. through industrial fermentation) should be
Activities owned or controlled by your organisation that reported within the scopes.
release emissions straight into the atmosphere. These
come under the category of direct emissions. After reading up on scopes and talking with Mr. Vivek Fuels Combustion Owned Transport Process Emissions Fugitive Emissions
Gilani, co-founder of No2Co2, I decided that the most
Scope 1 (boilers, furnaces or (trucks, trains, ships, (cement, aluminium, (air conditioning
Examples of scope 1 emissions are from combustion important categories are going to come from scope 1 and turbines) airplanes, cars) and waste) refrigeration leaks,
in owned or controlled boilers, furnaces, vehicles scope 2. These categories are: methane leaks from
and emissions from chemical production in owned or • Transport (scope 1) pipelines)
controlled process equipment. • Utility (scope 1 and 2)
• Food (scope 3)
Scope 2 (Energy indirect) These categories include many of the day to day items
Emissions being released into the atmosphere associated used in an average person’s life. These categories will be
with your consumption of purchased electricity, heat, explained in detail later. Most of the choices one needs to make
steam and cooling. These are indirect emissions that are to make their lifestyle more sustainable
a consequence of your organisation’s activities but which generally fall in scope 1 and scope 2
Scope 2
occur at sources you do not own or control. Consumption of bought categories. Scope 3 is not dealt with at
electricity, heat, steam personal level and hence is avoided
Scope 3 (Other indirect) and cooling
Emissions that are a consequence of your actions, which
occur at sources which you do not own or control and
those which are not classed as scope 2 emissions.

Examples of scope 3 emissions: business travel by means

not owned or controlled by your organisation, waste
disposal, or purchased materials or fuels. Carbon dioxide Scope 3
Purchased materials Transport-related Waste disposal Sold Goods and
and fuels activities (waste, recycling) Services
(extraction, processing (commuting, business (Use of goods and
15 and production) travel, distribution services)
16
Content
 Mind Map

Transport
Sustainable transport refers to any means of transport
Transport
with low impact on the environment, and includes walking Bus (intercity and intra city)
and cycling, transit oriented development, green vehicles,
car-pooling. This category gives options of various
modes of transport. Vehicles are major emitters of GHG’s.
As times change, the options for travelling increase. Trains (interstate and intrastate
This section looks at the different possibilities and how
different they are from each other.
Private Cars (all kinds)
The first and the most important step was to find GHG
emission coefficients for the choices given. The second
step was to figure out how to calculate the GHG emission
2 wheeler
for the mode of transport. To begin with, I went to a
carbon calculator at www.no2co2.com. The site shows
the working of the calculator specifically for India.
3 wheeler
For example, I looked at the working and found out
the different variables required to calculate the GHG
emissions of a particular mode of transport. The variables
Flights (national and international)
then became values that the audience chooses.

The environmental factor is the most important and

requires intensive calculations and formulae, economic
factor is factual and social is subjective. The following
mind maps are flow charts for each mode of transport.

The modes of transport open up

to a second level of the factors
that affect it
17 18
Content
Bus and Trains Flight Private Cars
Utility
The choices under this category are some of the most
basic elementary items used by a person in his or her day
Utility
to day life. Starting from energy sources to appliances Energy
to gadgets there are a few examples of each group. This
category belongs to both scope 1 and 2. Since most of the
gadgets and appliances work on electricity the main factor
Lighting
that is required to calculate the GHG emissions was the
emission coefficient of electricity. The power consumption
for each item is calculated and multiplied by GHG
emission coefficient of electricity. Paper and plastic

The idea of having this category was to show the impact

small things have. Most of these items are small and not
as far fetched as transport or industrial emission. But small Bottles
changes when gathered together over a long period of
time make a huge difference

Gadgets

2 wheeler
Appliances
3 wheeler

19 20
Content
Mind Map Energy Gadgets Appliances

Lighting Paper and plastic

The modes of transport open up 

to a second level of the factors
that affect it

21 22
Content
 Mind Map

Food
“Sustainable” food can mean different things based on
Food
the context it is viewed in. When producing food, we need Beverages
to use less finite resources like oil, emit less greenhouse
gases (Environmental), treat those in food chain better
(Social), and make money for further investment
(Economic). Sustainable food encourages debates and Grains
dilemmas such as food miles versus locally grown food,
organic versus GM, ethical and fair trade, land and labour,
climate change and carbon labelling, cheap versus quality
(assured), health and environment, biodiversity versus Non-Vegetarian
monoculture, vegetable and animal welfare.

This particular section does not have a direct impact on

environment, economy or society, but is essential and Fruits
can make a huge difference indirectly. The social factor in
food becomes really strong and prevalent because of the
various lifecycle stages in the food supply chain.

Vegetables

Different food options open up

to a second level of the factors
that affect it

23 24
Content
Grains Meat Beverages Overview
The GHG emission coefficient I used were calculated
specifically for Indian context. While the topic of a
sustainable and greener lifestyle is a prevalent concept in
western world, it is comparatively newer in India. GHG
emission coefficients are easily available for many foreign
countries, but finding data specific to India was a major
challenge. The bulk of this data was provided by NO2CO2.

Most of the data used in the interface is a close estimate.

Some of the data varies from state to state (eg: auto
rickshaw,taxi, fuel costs etc.). At any point the interface
looks at data of one specific place (a lot of the data was
adapted for Bangalore, India). Data can be easily modified
to fit other places’ requirements.

Updating this software is a simple task. All one needs is

Fruits Vegetables the new values for the GHG emission coefficient. These
values when updated in the database file change the
visualization accordingly.

An idea that I tried to incorporate in this interface was the

feeling of dealing with limitless options. The sophistication
of the database makes dealing with these numerous
options easier and much more user friendly.

25 26
Content
 Visualization

Introduction
Visualizing the interface was one of the most crucial steps
of the project. There was constant to and fro movement
from the visuals to the drawing board. Visualization in
general includes the following activities:
• Analysing the data
• Organising the data and giving hierarchy
• Making a userflow for the interface
• Graphics for the interface
• Graphics for the fiducials
Analyzing data
Initially the data I had was in its raw form. A major task
involved in categorizing and prioritizing the information
in the form of mind maps. This divided my interface into
three main levels. Now the challenge was to convert
the data to graphics. Each level needed to work well
separately and logically lead to the next level.
Each category has a similar hierarchy. While the levels
remain the same, what changes are the values at each
level. The hierarchy of the interface is as follow:
• Main options
• Factors that affect these options
• Values for factors
These are the three basic steps around which the whole
interface surrounds itself.
Aspects
The interface has various aspects that have to be dealt
with. Some of these aspects are:
Userflow
The sequence of events a user would need to go through.
Colour
Each category was given a colour scheme.
Size
Size of the interface in proportion to the screen size.
Feel of the visualization
The trade-off between technical versus humanistic, and
organic versus inorganic.
Simplistic look
Not mixing up the intensity of the information with the
graphic style. Keeping it clean and clear.

27 28
Content Visualization
UserFlow Colour BLUE
Each category was assigned a colour scheme. These Used to represent air. Most of the transport used has to
colours were defined with what seems appropriate for do with vehicular emissions released in the atmosphere
STEP 1 STEP 2 STEP 3 VISUALISATION each category but changed in order to make it visible on directly as exhausts.
the interface background.
The base of the interface is black and the colours were GREEN
chosen in such a way that they stand out on black but also Used to symbolise the soil or the plants that are essential
V1a make the inverse colour text (white) visible and legible. for food both in agriculture and animal husbandry. The
colour symbolises fertility.
FEDUCIAL 3

RED
Used to represent power,energy current. Since electricity
is a dominant source of energy for many items, red is a
BACK
suitable colour to represent it.
V2a

V3

V1b V2b
FEDUCIAL 2

BLANK SCREEN

BACK
V2c

V1c Utility Transport Food

FEDUCIAL 1

BACK
29 30
Visualization
 Fiducials Sketches for Step 1 Graphics for Step 1 and 2
These are the markers that trigger of the whole animation
on the table. These markers are used to identify different
tangibles on the table. Each category has its own distinct
marker attached to a tangible.

Visualising Steps
STEP 1
Step one shows the various choices in each categories.
While one is interacting with step one, step two opens up.
To select step two one needs to touch a suboption from
a series of presented ones. Depending on the number of
suboptions, different suboption panels show up.

STEP 2
Once a suboption is touched in step 2, the visualization
moves to step 3. In this step, the audience has to chose
from a given set of values for the factor they have selected.

STEP 3
The values from the previous step are used to calculate
the GHG emissions. These values are fed into a formula
which uses the database to calculate the emissions. These
formulae then trigger off a change in the visualization.
This vizualisation represents the social, economic and
environmental results.

Visualising suboptions section for

various number of options. Number
of suboptions is equal to the
number of sides of the polygon it is
encompassed in. As the fiducial is
rotated the appropriate suboption
31 values show.
32
Visualization
Visualisation
Graphics for Step 3
Possible graphic options for step
3. The third option was the one
I took forward, for reasons of
space utilization and the fact
that it looked more like a single
unit. The graphic is also neither
33 overpowering nor jarring.
Visualisation
Graphics for Step 3
Finalized option with sliders for
each category. The graphics are
the same but differ in colour. This
is the kind of language that was
developed all through the interface.
34
Visualisation
Visualization Module 1
Visualization mode where each
factor, ie. social, economic and
environmental, have distinct
dedicated space. Each unit has a
35 defined value.
Visualization Module 2
Visualization mode where
each factor social, economic
and environment have distinct
dedicated space. Each unit has a
defined value. In comparison to the
first module factors get more space.
36
Visualization Module 3
Visualization module where
each factor social, economic
and environment have distinct
dedicated space. The number of
units that fill up the height of the
37 factor changes accordingly.
Visualization Module 4
Social factor is not as factual as the
economic and environment factors. It is
more subjective. Hence, in this module,
the social factor is slightly different from
economic and environment factors. The
gradient defines how socially inclusive
the option is. 38
Visualization Module 5
This module was made keeping in
mind the space and the uniformity
of the whole unit. The concentric
visuals condense the space and
make it look brighter. This gives it
a “techy” or retro feeling.
39
Visualization Module 6
A visualization exploring the idea
of breaking out of geometry and
delving into a space of organic
visualization. The feel changes
from being “techy” to something
more natural and humanistic.
40
Visualization Module 7
This version basically explores
the most fundamental concept of
fractals. Each bigger unit is made
of four smaller units. As the data in
each of these categories increase
the minimum basic unit becomes
bigger. This iteration played with
scale, geometry.
41
Visualization Module 8a
Cons: Still very technical
and can get difficult to
Pros: The concept of understand. The organic
scale and size is clear or humanistic element
and obvious. It can is missing. Somewhat
work together with disconnect from the main
multiple visualizations radial format.
This version is aesthetically
appealing, solves the problem of
being organic and humanistic but
is one of the toughest iterations
to work with. Each concentric
circle has dots of the same size.
As one reach the core dot the unit
becomes bigger in size.
42
Visualization Module 8b
A step forward after I came up
43 with a direction to work with
Visualization Module 8c
Cons: The scale of each unit is not
quite clear. If the size of the fiducial
is x units then the visualization is This was a step taken to solve
60 times x (a 5cm fiducial gives 300 the problem of the previous Cons: I was satisfied
Pros: The look and feel, cm visualization). Which means on a visualizations large space at the achievement
matching radial style table of 4 feet by 3 feet only one can requirement. A somewhat Pros: The visualization of squeezing the
some breathing space in fit. Defeats the whole point of the frustrating exercise, but this is fits to the limits, The visualization but
between divisions (scope project. The merged visualization of what I came up with after some element of scale is disappointed with the
for intervention) two categories is a big hassle. trial and error. much clearer. way it looked. 44
Visualization Module 8d Wireframes

1st step in the wire frame 2nd step in the wireframe

This is the final iteration I would be working with. It looks

more aesthetic and the scale is clear. Each concentric
circle dot is 30% bigger than its previous one. The blank
dots in the last image show what they look like when
they are not filled they get filled one by one representing
the result of the various choices that the audience makes..
On the table, the fiducial size is ~5cm and the outer most
45 visual circle is ~34cm.
46
 Wireframes Fiducials
Fiducial is an object used on the surface which is
recognizable by the underlying system. This project uses
small, specialized markers for this task. They are stuck
to a wooden piece on which the icons that represent a
category are laser engraved.
User Manual
The user manual explains the step-by-step procedure of
going about using the interface. Please refer to the user
manual for details on the interface.

User
Manual

3rd step in the wireframe 4th step in the wireframe

Relook . Recalculate . Revise

make your lifestyle choice

47 48
Visualization
 Product
How Does it Work
In a nutshell the system works like this: the reacTIVision
software tracks the specially designed fiducial markers in
a real time video stream. The source image frame is first
converted to a black and white image with an adaptive
thresholding algorithm. Then this image is segmented
into a tree of alternating black and white regions (region
adjacency graph). This graph is then searched for unique
left heavy depth sequences, which have been encoded
into the fiducial symbol. Finally the found tree sequences
are matched to a dictionary to retrieve an unique ID
number. The fiducial design allows the efficient calculation
of the marker’s centre point as well as its orientation.
Messages implementing the TUIO protocol encode the
fiducials’ presence, location, orientation and identity and
transmit this data to the client applications.
Additionally reacTIVision uses the result of the image
segmentation in order to retrieve and identify small round
white blobs as finger tips on the surface. A quick and dirty
shape matching algorithm selects the actual finger blobs
from the possible region candidates. A complementary
blob tracking algorithm is also taking advantage of the
same data in order to track eventually not recognized
fiducials, for example where fast movements destroy the
49
actual fiducial structure in the image. The elements used
in the product are as follows:
IR LED’s
For the tracking, the objects need to be properly
illuminated, so the camera and thus the computer vision
application can see them correctly. For the projection onto
a table, the surface needs to be dark though, so the user
can see the projected image well enough. Since these two
necessary steps logically exclude each other, the solution
is to operate in two different spectra:
The projection has to be visible to the user, so the
computer vision component needs to operate in a different,
invisible spectrum such as near infrared in the range
of 850nm. Most cameras are perfectly sensitive within
the near IR spectrum, therefore infrared LED lamps
can be used to illuminate the table. All light from the
visible spectrum needs to be filtered in the camera, so
the computer vision algorithm is not disturbed by the
projection. Eventually an existing infrared blocker needs to
be removed from the camera.
50
Product
 Camera
A very affordable and relatively good camera for this
purpose is the Sony PS3Eye, which is also working well
under Windows, Linux and Mac OSX.
Table & surface
A camera and a projector with wide-angle lenses need
to be placed underneath the table, so they can both
cover the entire surface. Alternatively a mirror is used
in order to achieve a larger projection distance. For the
interactive surface itself, a normal perspex board is used
in conjunction with some ordinary tracing paper on the
top side for the projection. This material is completely
transparent for objects and finger tips in direct contact
with the surface. In order to avoid direct reflections of
the light source and projector lamp, the lower side of the
surface should have a matte finish (eg. frosted glass),
while maintaining the overall transparency.
Sourcing How it works
An brief description of where these materials were
sourced from. Wood was purchased from a local wood/
plywood shop. Frosted glass and the reflecting mirror
were purchased at a local glass and mirror shop. The
shape of the mirror was customised to suit the shape of
the projection. IR LED arrays (~850nm wavelength) were
procured from China. These are relatively hard to find in
India and some shops selling surveillance equipment stock
them. The PS3 Eye camera was not available in India at the Fiducial 1 Fiducial 2 Fiducial 3
time of purchase, hence was ordered from UK. This camera
can be ordered online as it is a common requirement Visual Feedback
in touch tables like the one made in this project. The
remaining materials were sourced from local shops.

C
o r

am
ct
e

er
oj

a
Pr
Video Video
IR light

TUI Application reacTIVision

TUIO
PS3 Eye IR LED’s array PS3 Eye IR LED’s array

51 52
Product
How it looks Work in progress

Wooden Lid

Frosted Glass

Wooden Plank

Mirror

IR LED array

Projector

Initial sketch of the structure. Made of wooden framework PS3 eye webcam
in such a way that it can be dismantled. 10 degrees incline.
A diagram demonstrating the different components used Projector box
in53
the construction of this structure. 54
Product
 Infrared light is not visible to the naked eye, but since
cameras have the ability to capture IR light, the pictures
look like those shown here. This method was used
afterwords to check the evenness of the illumination under
the table. The even illumination of the surface allows the
software to easily recognize fiducials placed on the table.
The array of infrared LED’s used have a small beam angle,
which means that the lighting is focused over a small
circular area on the surface. This made even illumination
harder. To solve this issue, very thin pieces of paper
were used to cover the arrays. This diffuses the light and
improves the software’s detection of fiducials.

55 56
Product
57 58

Product
 Progressive Table
Pictures below show the stages the table went through to
get to its final look.
Challenges
A project of this complexity is somewhat based on hit and
try. This makes the process uncertain and vulnerable to
problems at times. Few of the challenges faced:
Multiple Reflections: Most glass that coats mirrors are
not 100% transparent and tend to reflect a small portion
of the light (~5-10% light). Since, in order to keep costs
low, the mirror used is a relatively thick one, the projection
has multiple reflections from the impure glass. This can
be easily fixed by using a thinner mirror or a front-surface
mirror, albeit at a much higher cost.
IR Illumination: The dimensions of the table makes it hard
to achieve even illumination. The LED arrays used do not
59
Product
have a wide angle of deviation and this makes illumination
at the edges and corners of the table uneven. This can
again be easily fixed by using longer strips of LED’s with a
wider beam angle, once again for a higher cost.
PS3 Eye: The range of the camera is not wide enough to
capture the whole range of the table. To remedy this, a
wide-angle lens is used on the camera. As a result the
corners and edges of the table become a little out of focus.
This makes it harder for the software to recognise fiducials
on these parts of the table.
Top Surface: A suitable yet affordable material is a
tricky choice. As of now I have tried using an acrylic
sheet coated with butter paper and frosted glass. While
acrylic is lighter and easy to handle its extremely prone
to scratches,whereas glass is heavier and tricky to handle
but it is extremely good for projection.
Technical
ReacTIVision
ReacTIVision is a software, which sends messages about
touch and object tracking events. The messages are sent
in a format called UDP (User Datagram Protocol). Since
Flash only understands a format called TCP (Transfer
Control Protocol), a software called FlashOSC is needed
to convert the UDP format into TCP format. Flash
ActionScript processes these messages and updates
the objects on the screen accordingly. This framework
has been developed by Martin Kaltenbrunner and Ross
Bencina at the Music Technology Group at the University
Pompeu Fabra in Barcelona, Spain. It is the same software
that is used in the original Reactable project. The
software works by capturing a video from the camera and
processing the captured image to extract locations on the
screen where fingers are touching and locations on the
screen where specially marked fiducials have been placed.
The screen is calibrated using a grid of 8 horizontal and
8 vertical rows. Various parameters such as finger size,
finger sensitivity and viewing axes can be configured as
well. All these options were experimented with and an
optimal set of values was taken for the project setup.
Flash ActionScript 2
Flash ActionScript 2 is the core of the software and is used
to process the incoming data from reacTIVision and also
to control the behaviour of the various objects on stage.
If one of the fiducials is placed on the table, ActionScript
creates the corresponding movie at the given coordinates
and at the correct angle. If the fiducial is removed from
the table, ActionScript removes the corresponding movie
from the stage. If the fiducial is moved on the screen,
ActionScript updates the position of the corresponding
movie clips on the stage. The movement of fiducials
includes linear movement (left, right, up, down) or angular
rotation. Also, when a user touches a point on the table
with their fingertips, ActionScript simulates a click on the
corresponding area on the screen allowing for events such
as button presses. simulates a click on the corresponding
area on the screen.
Database
There are two main configuration files used by the
software. These are the data file and the configuration
file. The data file consists of all the various data needed
by the formulae present in the system. For example, in
order to calculate the carbon emissions from the usage of a
refrigerator, the data file is opened and the required value
is loaded. The configuration file has a similar format to
the data file but stores options that are used to configure
various parameters of the software. For example, the
60
Technical
 number of available options within a specific category is
stored in this file.
Both the data and configuration file are stored in a simple
XML format. XML or eXtensible Markup Language is a
flexible format used for storing simple data. Storing in this
format is advantageous as it is very easy to read XML files
using ActionScript and the modification of the file can be
done using any text editor such as Notepad. The XML
format has been designed to be human readable while
still being easy for computers to understand. In the XML
format, various values are stored between tags similar to
the tags used in HTML code.
Code
Simple XML document
<?xml version=”1.0” ?>
<config>
<transport_option1>Bus</transport_option1>
<transport_option2>Train</transport_option2>
<transport_option3>Car</transport_option3>
<transport_option4>2 Wheeler</transport_
option4>
<transport_option5>3 Wheeler<transport_
option5>
<transport_option6>Airplane</transport_
option6>
</config>
61
Technical
Structure of ActionScript Code
Below are the main functions that are present in the
ActionScript code along with their description.
function addTouch() {
// This function is called when the
user touches his fingers on the surface of the
table. This function simulates a mouse
// click.
} • Only state-specific electricity generation
function removeTouch() {
// This function is called when the user
removes his fingers from the surface of the
table. This function simulates a mouse being
// released.
} • All non-dairy livestock emissions attributed to
function updateTouch() {
// This function is called when a
user moves his finger without lifting it off
the screen after touching the screen. This
function simulates a mouse
// movement.
function addFiducial() {
// This function is called when the user
places a fiducial-marked object
// on the surface of the table.
} • Average all-India suburban services data assumed
References
Assumptions
Electericity Assumption
• Zero emissions assumed for non-fossil fuel based
energy generation i.e. solar, hydro, nuclear, wind
and any other renewable.
• Electricity related emissions are augmented with
a transmission distribution loss factor of 1.56.
considered for emissions coefficient calculation.
Contribution of national grid to states not included.
Meat Assumptions
• 200 grams meat assumed to be consumed per
meal (based on household level sampling).
meat production.
Rice Assumptions
• 150 grams rice assumed to be consumed per meal
(based on household level sampling).
City travel Assumptions
• Minimum charge for an auto is assumed to be 15
rupees. This is specific to city of Bangalore, India
• Single occupancy assumed.
to be applicable to all cities. Does not include data
from Delhi and Kolkata Metro.
• Passenger load factor for charter/school bus
assumed to be 100%.
Long Distance Travel Assumptions
• International air travel calculations based on
a uniform distribution of the Boeing 747, Boeing
777, and Airbus A330 aircrafts commonly used as
internation flights.
• Domestic air travel calculations for the ‘average’
condition based on uniform distribution of flights
(distance) and across all aircraft types owned by
airlines in India.
• For internation air travel, a short trip is assumed
to be between one and four hours. A medium sized
trip is assumed to be between four and eight hours
and a long trip is assumed to be more than eight
hours long. These values have been split based on
common flight destinations and their respective
travel time.
• For domestic air travel, a short trip is assumed to
be up to a maximum of 45 minutes. A medium sized
trip is assumed to be between 45 minutes and 90
minutes long. A long trip is assumed to be more
than 90 minutes long. These values have been split
up based on common flight destinations and their
respective travel time.
62
References
 References
• Fuel use for activities other than locomotive twelve hours long while a long trip is assumed to be
operation has been largely ignored for Rail Travel any travel trip greater than or equal to twelve hours. Department for Environment, Food and Rural Affairs
Calculations - only Diesel Fuel use included in • Passenger load factor for intercity (VOLVO) bus http://ww2.defra.gov.uk/ Flash Demo for Reactivision
inventory. assumed to be 100%. http://nuigroup.com/forums/viewthread/281/
• Broad gauge rail travel used as representative • Average speed for intercity (VOLVO) bus assumed Say No to CO2
scenario as it is the most predominant format. to be 55 kmph. http://www.no2co2.in/index.php ActionScript 2 Tutorials
• For long distance train travel, a short trip is • The calculation of GHG emissions from domestic http://www.freeactionscript.com/
assumed to be any travel time up to four hours. air travel is made based on the assumption of 65% reacTIVision
A medium trip is assumed to be any travel time load factor with 78 seats on the Dash-8 Q400 and http://reactivision.sourceforge.net/ Playstation Power Usage
between four and twelve hours and a long trip 139 seats on the B737-400. Both types of flights are http://reviews.cnet.com/green-tech/tv-power-efficiency/
is assumed to be any trip that is twelve hours or the most commonly used by domestic Indian airlines Wikipedia
longer. These values have been split based on all http://en.wikipedia.org Hitachi CP RX-70 Technical Specifications
train travel times across India. Private Vehicle Assuptions http://en.wikipedia.org/wiki/Reactable http://www.hitachidigitalmedia.com/product.do?actionNa
• For intercity bus travel, an air-conditioned Volvo • Highway driving speed is assumed at 85kmph and me=showProductAction&pt=6&pg=17&proid=594
bus is assumed to be the vehicle of choice. city driving speed is assumed at 55kmph. Reactable Home Page Appliance Watts Usage - http://www.donrowe.com/
• For intercity bus travel, a short trip is assumed • The list of vehicles presented are based on http://www.reactable.com/ inverters/usage_chart.html
to be any travel time up to four hours. A medium products available in the Indian Market
length trip is assumed to be between four and PeauProductions MT Website Tata Power Energy Club (Energy Calculator)
http://peauproductions.com/ http://www.tatapowerenergyclub.com/the-energy-club/
energy-calculator.asp
Natural User Interface (NUI) Group
http://nuigroup.com Extensible Markup Language (XML)
Data is the new soil, a fertile medium from http://www.w3.org/XML/
TUIO Protocol Home Page
which visualizations, infographics bloom http://www.tuio.org/ Ubuntu Linux
http://www.ubuntu.com/
like flowers. –Robert L. Peters Flash Open Sound Control (FLOSC)
http://www.benchun.net/flosc/

63 64
References References
 NO2CO2 Calculator http://www.meatthetruth.nl/download/20080518_US_
http://www.no2co2.in/CarbonCalculator.php carbon_savings_table.pdf

Sustainable Food http://earthtrends.wri.org/searchable_db/index.

http://www.sustainablefood.com/ php?action=select_variable&theme=8

Carbon Planet Prices of LPG in metro-cities : Indian Oil Corporation

http://www.carbonplanet.com/country_emissions
Reports
New Scientist Magazine Livestock
http://www.newscientist.com/article/dn16573-eating-less- Food Miles
meat-could-cut-climate-costs.html Report_INCCA
Marine Export India
http://www.newscientist.com/article/dn18195 Transport

Travel Math
http://www.travelmath.com

Random Websites
http://www.climatechallengeindia.org/How-Climate-
Change-affects-India

http://www.ghgprotocol.org/indian-industry-initiates-ghg-
inventorization-program-with-wri-and-us#high_2

http://moef.nic.in/modules/others/?f=event

http://www.vegsoc.org.au/forum_messages.asp?Thread_
ID=29&Topic_ID=8

65 66
References
67