Relook . Recalculate . Revise make your lifestyle choice A Diploma Project Documentation Saakshita Prabhakar
3
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
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
Relook . Recalculate . Revise make your lifestyle choice
A Diploma Project Documentation Saakshita Prabhakar
II
III
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
IV
1
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.
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 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
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.
2 Project Proposal
Wisdom
Behaviour Change
Knowledge
Understanding Change
Information
Graphs of Usage
Data
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.
Energy Data A visual hierarchy of how the mind works after it views information therefore Information Visualization plays an important role in the process of transforming information into knowledge. Source: The role of (meter) design in behavioural change
3 Project Proposal
Social
Equitable
Bearable
Sustainable Economic
Environment Viable
Sustainable living at the most fundamental level is about the application of sustainability to lifestyle choice and decisions. Sustainability itself is expressed as meeting present ecological, societal, and economical needs without compromising these factors for future generations. (Source: Wikipedia)
4 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.
•Food •Transport •Utilities •Water •Materials •Waste/hygiene
Possible Choices Imported Local Meat Organic Inorganic Genetically Modified
{
FOOD
{
Economic
Factors that contribute GHG emission Treating those in the food chain better Expenditure
Social
Environment
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 affected by any one particular choice. The interface would visualise and show the corresponding changes in these factors depending on the choices made by the audience.
5 Project Proposal
Form The final interface is expected to use the same technology used in a Reactable. New media has a lot of power today. Some great works communicate well with the help of new media. It excites the senses beyond reading. The form is a highly sensory way of communicating information. This interface would be accompanied by a small book or wheel chart giving detailed information about each of these categories (the interface alone is insufficient in terms of details). The role of the interface is to excite audiences to a level where they automatically want to interact with such data. Once the interest is created one can spend some quality time getting involved with the content.
Target Audience A presentation like this one is open to all age groups. The content is universally important for people of all ages, although young children are expected to benefit the most. Children are more receptive and open to change. The intention is to make an impact on a students’ mind (make it memorable)so that they can remember it while making their future decisions
• What does sustainability in the broad categories of lifestyle (eg. food, transport, materials etc.) mean? • Emotional design
Resources • NGO’s and other government organisations • Online Reports and thesis • Online facts and statistics • Magazine articles • Presentations • Various websites on data visualization and information design such as.“Good Transparency”, “Information is Beautiful”, “Smashing Magazine” • Various Books on data visualization and information design eg: Data Flow by Klanten et al. • Research work done by other professionals in this field.
Research Questions • What is behaviour change? • What is the technology behind a Reactable and how would a similar interface work? • Tips for good visualization • What is sustainable lifestyle?
6 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.
Design creates culture. Culture shapes values. Values determine the future. Design is therefore responsible for the world we live in. –Robert L. Peters
7 Project Proposal
Inspiration Gapminder
Reactable
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.
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.gapminder.org/ website: http://www.reactable.com/
8 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
9 Inspiration
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.
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
Visualization
New Media
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.
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.
10 Key Elements
11
Stages Introduction
PROJECT STAGES
The magnitude of this project is such that the best 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 to the other and it is only through a continuous hit and trial that a final working piece is produced. The technology at this level has its own limitations which needs to/should be considered before constructing the product. This was a good platform to apply my visual 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
Content Visualization Product Technical
* 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
12 Structure
Content
Product
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.
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 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
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 categorise emissions-releasing activities into three groups (known as scopes).
Scope 1 (Direct emissions) Activities owned or controlled by your organisation that release emissions straight into the atmosphere. These come under the category of direct emissions. Examples of scope 1 emissions are from combustion in owned or controlled boilers, furnaces, vehicles and emissions from chemical production in owned or controlled process equipment.
Scope 2 (Energy indirect) Emissions being released into the atmosphere associated with your consumption of purchased electricity, heat, steam and cooling. These are indirect emissions that are a consequence of your organisation’s activities but which occur at sources you do not own or control.
Scope 3 (Other indirect) 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
15 Content
produced from the combustion of biomass / biofuels17 should be reported separately to emissions in scopes 1, 2, and 3. Carbon dioxide produced from biomass and biofuels not as a result of the combustion of biomass and biofuels (e.g. through industrial fermentation) should be reported within the scopes. After reading up on scopes and talking with Mr. Vivek Gilani, co-founder of No2Co2, I decided that the most important categories are going to come from scope 1 and scope 2. These categories are: • Transport (scope 1) • Utility (scope 1 and 2) • Food (scope 3) These categories include many of the day to day items used in an average person’s life. These categories will be explained in detail later.
Examples
Scope 1
Scope 2
Fuels Combustion (boilers, furnaces or turbines)
Owned Transport (trucks, trains, ships, airplanes, cars)
Process Emissions (cement, aluminium, and waste)
Fugitive Emissions (air conditioning refrigeration leaks, methane leaks from pipelines)
Most of the choices one needs to make to make their lifestyle more sustainable generally fall in scope 1 and scope 2 categories. Scope 3 is not dealt with at personal level and hence is avoided
Consumption of bought electricity, heat, steam and cooling
Scope 3 Purchased materials and fuels (extraction, processing and production)
Transport-related activities (commuting, business travel, distribution
Waste disposal (waste, recycling)
Sold Goods and Services (Use of goods and services)
16
Transport Sustainable transport refers to any means of transport with low impact on the environment, and includes walking 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. This section looks at the different possibilities and how different they are from each other. 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 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. 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 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.
17 Content
Transport Bus (intercity and intra city)
Trains (interstate and intrastate
Private Cars (all kinds)
2 wheeler
3 wheeler
Flights (national and international)
Mind Map
The modes of transport open up to a second level of the factors that affect it
18
Bus and Trains
Flight
2 wheeler 3 wheeler
19
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 to day life. Starting from energy sources to appliances 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 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. 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 changes when gathered together over a long period of time make a huge difference
Utility Energy
Lighting
Paper and plastic
Bottles
Gadgets
Appliances
20 Content
Mind Map
The modes of transport open up to a second level of the factors that affect it
ď ľ
21 Content
Energy
Lighting
Gadgets
Appliances
Paper and plastic
22
Food “Sustainable� food can mean different things based on the context it is viewed in. When producing food, we need 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 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 monoculture, vegetable and animal welfare. This particular section does not have a direct impact on environment, economy or society, but is essential and 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.
Food Beverages
Grains
Non-Vegetarian
Fruits
Vegetables
23 Content
Mind Map
Different food options open up to a second level of the factors that affect it
24
Grains
Fruits
25
Meat
Vegetables
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 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.
26 Content
27 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.
28 Visualization
UserFlow
STEP 1
STEP 2
STEP 3
VISUALISATION
FEDUCIAL 3
V1a
BACK
V2a V3
BLANK SCREEN
FEDUCIAL 2
V1b
BACK
V2c
FEDUCIAL 1
V1c
29
BACK
V2b
Colour Each category was assigned a colour scheme. These colours were defined with what seems appropriate for each category but changed in order to make it visible on the interface background. The base of the interface is black and the colours were chosen in such a way that they stand out on black but also make the inverse colour text (white) visible and legible.
BLUE Used to represent air. Most of the transport used has to do with vehicular emissions released in the atmosphere directly as exhausts. GREEN Used to symbolise the soil or the plants that are essential for food both in agriculture and animal husbandry. The colour symbolises fertility.
RED Used to represent power,energy current. Since electricity is a dominant source of energy for many items, red is a suitable colour to represent it.
Utility
Transport
Food
30 Visualization
Fiducials 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.
31 Visualization
Sketches for Step 1
Graphics for Step 1 and 2
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 values show.
32 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 overpowering nor jarring. 33 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
35
Visualization mode where each factor, ie. social, economic and environmental, have distinct dedicated space. Each unit has a 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
37
Visualization module where each factor social, economic and environment have distinct dedicated space. The number of units that fill up the height of the 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
39
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.
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
41
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.
Pros: The concept of scale and size is clear and obvious. It can work together with multiple visualizations
Cons: Still very technical and can get difficult to understand. The organic or humanistic element is missing. Somewhat disconnect from the main radial format.
Visualization Module 8a
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
43
A step forward after I came up with a direction to work with
Pros: The look and feel, matching radial style some breathing space in between divisions (scope for intervention)
Cons: The scale of each unit is not quite clear. If the size of the fiducial is x units then the visualization is 60 times x (a 5cm fiducial gives 300 cm visualization). Which means on a table of 4 feet by 3 feet only one can fit. Defeats the whole point of the project. The merged visualization of two categories is a big hassle.
Visualization Module 8c
This was a step taken to solve the problem of the previous visualizations large space requirement. A somewhat frustrating exercise, but this is what I came up with after some trial and error.
Pros: The visualization fits to the limits, The element of scale is much clearer.
Cons: I was satisfied at the achievement of squeezing the visualization but disappointed with the way it looked.
44
Visualization Module 8d
45
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 visual circle is ~34cm.
Wireframes
1st step in the wire frame
2nd step in the wireframe
46
Wireframes
3rd step in the wireframe
47
4th step in the wireframe
Fiducials
User Manual
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.
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
Relook . Recalculate . Revise make your lifestyle choice
48 Visualization
49
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
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
Sourcing
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.
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 time of purchase, hence was ordered from UK. This camera can be ordered online as it is a common requirement in touch tables like the one made in this project. The remaining materials were sourced from local shops.
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.
PS3 Eye
51 Product
IR LED’s array
PS3 Eye
IR LED’s array
How it works
Fiducial 1
Fiducial 2
Fiducial 3
Visual Feedback
Pr oj e
a er am
ct o
r
C
Video
Video IR light TUI Application
reacTIVision TUIO
52
How it looks
Wooden Lid
Frosted Glass
Wooden Plank
Mirror
IR LED array Projector
Initial sketch of the structure. Made of wooden framework in such a way that it can be dismantled. 10 degrees incline. A diagram demonstrating the different components used in53 the construction of this structure.
PS3 eye webcam Projector box
Work in progress
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 Product
56
57
58 Product
Progressive Table Pictures below show the stages the table went through to get to its final look.
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.
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
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=â&#x20AC;?1.0â&#x20AC;? ?> <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. } 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. } 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. }
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. • Only state-specific electricity generation 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). • All non-dairy livestock emissions attributed to 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. • Average all-India suburban services data 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
• Fuel use for activities other than locomotive operation has been largely ignored for Rail Travel Calculations - only Diesel Fuel use included in inventory. • Broad gauge rail travel used as representative scenario as it is the most predominant format. • For long distance train travel, a short trip is assumed to be any travel time up to four hours. A medium trip is assumed to be any travel time between four and twelve hours and a long trip is assumed to be any trip that is twelve hours or longer. These values have been split based on all train travel times across India. • For intercity bus travel, an air-conditioned Volvo bus is assumed to be the vehicle of choice. • For intercity bus travel, a short trip is assumed to be any travel time up to four hours. A medium length trip is assumed to be between four and
twelve hours long while a long trip is assumed to be any travel trip greater than or equal to twelve hours. • Passenger load factor for intercity (VOLVO) bus assumed to be 100%. • Average speed for intercity (VOLVO) bus assumed to be 55 kmph. • The calculation of GHG emissions from domestic air travel is made based on the assumption of 65% load factor with 78 seats on the Dash-8 Q400 and 139 seats on the B737-400. Both types of flights are the most commonly used by domestic Indian airlines
Private Vehicle Assuptions • Highway driving speed is assumed at 85kmph and city driving speed is assumed at 55kmph. • The list of vehicles presented are based on products available in the Indian Market
Data is the new soil, a fertile medium from which visualizations, infographics bloom like flowers. –Robert L. Peters
63 References
References Department for Environment, Food and Rural Affairs http://ww2.defra.gov.uk/
Flash Demo for Reactivision http://nuigroup.com/forums/viewthread/281/
Say No to CO2
http://www.no2co2.in/index.php
ActionScript 2 Tutorials http://www.freeactionscript.com/
reacTIVision http://reactivision.sourceforge.net/
Playstation Power Usage http://reviews.cnet.com/green-tech/tv-power-efficiency/
Wikipedia http://en.wikipedia.org http://en.wikipedia.org/wiki/Reactable
Hitachi CP RX-70 Technical Specifications
http://www.reactable.com/
http://www.hitachidigitalmedia.com/product.do?actionNa me=showProductAction&pt=6&pg=17&proid=594 Appliance Watts Usage - http://www.donrowe.com/ inverters/usage_chart.html
PeauProductions MT Website
Tata Power Energy Club (Energy Calculator)
http://peauproductions.com/
http://www.tatapowerenergyclub.com/the-energy-club/ energy-calculator.asp
Reactable Home Page
Natural User Interface (NUI) Group http://nuigroup.com
Extensible Markup Language (XML) http://www.w3.org/XML/
TUIO Protocol Home Page http://www.tuio.org/
Ubuntu Linux http://www.ubuntu.com/
Flash Open Sound Control (FLOSC) http://www.benchun.net/flosc/
64 References
NO2CO2 Calculator http://www.no2co2.in/CarbonCalculator.php
Sustainable Food
http://www.meatthetruth.nl/download/20080518_US_ carbon_savings_table.pdf
http://www.sustainablefood.com/
http://earthtrends.wri.org/searchable_db/index. 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 http://www.newscientist.com/article/dn16573-eating-lessmeat-could-cut-climate-costs.html http://www.newscientist.com/article/dn18195
Travel Math http://www.travelmath.com
Random Websites http://www.climatechallengeindia.org/How-ClimateChange-affects-India http://www.ghgprotocol.org/indian-industry-initiates-ghginventorization-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 References
Livestock Food Miles Report_INCCA Marine Export India Transport
2