Archive for May, 2010

The Maze Game

Friday, May 28th, 2010

Our first major assignment for the Games with Android class was to create a simple game in Processing using only simple shapes such as circles and rectangles. Since Android applications are built using Java, we were tasked with creating our games in Eclipse. Here is a brief overview of the initial concept I selected, followed by a description of how I have structured my solution (along with the initial prototype), and the problems and improvements that I have planned for the next iteration.

The Maze Game
After considering racing games, obstacle games, and space invader-type games I choose to create a maze-based adventure. My initial idea, which has been implemented in a rough a prototype, is described below.

The player is trapped in a maze and must navigate his way to safety. He/she is represented by a circle that is always located in the middle of the screen. The movement of the player through the maze is governed by a set of limited dynamics.

Once the player starts moving he/she will move continuously. The direction of movement can only be changed by bumping the game piece into a column or wall. When the game piece hits a rectangular object it reverses direction. When the game piece hits a circular object it changes direction by 90-degrees.

The player can steer his game piece in a limited manner. The steering enables the game piece to stray slightly from its current trajectory slightly. It is controlled by using the arrow keys or mouse.

As you will notice if you attempt to play the game, it still needs a lot of work. The collision tracking is not working well, and the game mechanics also need to be worked on. More on the planned improvements below.

Developing the Game
I spent a good number of hours working on this project last week. I wanted to lay a solid foundation so that it would make it easier to port the game to Android, which is the next step in this assignment. With this in mind, I decided to design a basic class structure before beginning to write code.

The main consideration guiding my design was a desire to write object-oriented code that would facilitate debugging, porting, and future improvements to the game mechanics. The initial architecture evolved during the implementation process into the structure depicted in the diagram below.

Game Class Architecture

In order to support multiple levels, I have created a function in the maze class that can read a text file made up of 0s, 1s, 2s, and 3s. It converts these text files into a maze made up of space, walls, round columns, and exits.

Planned Improvements
After playing the initial prototype I realized that I still have to do a lot of work. I also became even more excited about the possibilities of creating a good maze game. Here is a list of the planned improvements:

  • Change controls: simplify the game controls and improve the visual feedback. I plan to change the game controls in one of the following ways: make it Pac Man-like, where the controls change the direction in which the game piece is moving; or keep it similar to the current design but make the game piece move up or down one full row when the controls are pressed.
  • Change objective: rather than use small mazes with clear end points and time limits I am considering more open-ended possibilities. One idea that is loosely inspired by the 1980’s movie Tron, is to create a never ending maze that contains various different objects. When the player collides with one of these objects they would either gain benefits such as bonus points, special powers, or suffer punishment, such as death.
  • Design updates: Overall I need to think about how to make this game more compelling form a visual perspective. For now I plan to stay within the bounds of the assignment (limiting my shapes to rectangles and circles). That said, I want to explore how I can use color palettes and other design attributes to make the game look more appealing.

Casual Games for Android

Friday, May 21st, 2010

Earlier this week summer school started. During the first summer session I will be taking a course entitled “Introduction to Mobile Games for Android“. This is my first ever foray into the world of programming mobile applications.

I had originally planned to take a course that focused on development for the iPhone and iPad. Unfortunately, that course was cancelled so I decided to focus my studies on Android (for iPad and iPhone we have created a summer study group that will meet up weekly to learn the basics of Cocoa and Objective C).

The “Games for Android” course is being taught by Matt Parker. Matt is a resident at ITP who has done some pretty cool work over the past several years. Here is a short list of my favorite of his projects:

  • Recurse is an awesome game where you have to twist and move your body in order to score points. It provides a simple but addictive experience that has caused me to waste many hours on the ITP floor.
  • Lumarca is a volumetric display that Matt created for his final project at ITP. This interesting prototype is built using strings arranged in a three dimensional array, you have see it to understand what the hell I mean.
  • Lastly, Proclipsing is an extension that Matt wrote for the Eclipse IDE that enables Processing users to easily set-up their sketches in Eclipse (Thank You Matt!)

During our first week of classes our focus has been on getting up and running with Eclipse and agreeing on a practical definition for casual gaming. For the definition we identified the key areas where casual games differ from more immersive game experience as presented in Jesper Juul’s recent book A Casual Revolution. I am extremely excited about finally being able to understand the basics of how Eclipse works. It would have saved me many a headache to be able to use this IDE for my latest project, Finger Paint Mandala. Here is a link to the full syllabus for the course.

From a technical perspective, we are going to focus our coding efforts on Android version 1.6 (the latest version is 2.1). I was surprised to find out that the Android operating system for a given phone is defined by the carrier rather than the user. This is different than the iPhone, where the user can update his/her phone’s OS independently of the service provider.


Finger Paint Mandala: Prototype V1.1 Complete

Thursday, May 20th, 2010

Last week, I showed this project at the ITP show. Overall I got a very positive response, especially from kids and people who work with kids and education. Unfortunately, I was not able to get any good footage from the show itself as I was stuck behind the display for the entire time. I know that some other people captured some good footage and I will post links to it here once I find out where they are available.

After the show I decided to re-write the Processing sketch using a different TUIO library – I switched from the TuioZones library to the Tuio library (from the reacTVision team). I decided to make this leap because I was unhappy with the performance of the first draft of my sketch. The main issues that I was encountering were that the sketch seemed to run rather slow and the color selection was not working well (users were not able to select multiple colors at once). I’m happy to report that the new version of the sketch works better on both of these accounts.

Unfortunately, I still have some work to do to improve the performance of the multitouch display itself.  First and foremost, I need to take apart the display to improve the finger tracking resolution. I suspect that I forgot to remove one or two of the filter layers from the original LCD (I hope this is the case as this would be relatively easy to solve). The other issue that I need to address is to procure a new glass mirror that will not bend out of shape, like my current plexi mirror.


FarmBridge: 2010 Design Expo Winner

Wednesday, May 19th, 2010

I am happy to announce that our team and our project, FarmBridge, has been selected to represent ITP at the Microsoft Design Expo conference this summer.  This means that Cindy, Noah, Tianwei, and I are going to spend several days with Nancy Hechinger in Seattle this July.

FarmBridge Logo 839 186

Here is a long overdue update regarding our project and our final presentation. Over the past several weeks we worked hard to pull together initial design mock-ups and get our presentation ready for prime time. Here is a brief overview of the flow from our final presentation. Unfortunately, we are not able to post the entire presentation because it contains some content that we would rather not share online yet. That said, we have included a brief video that walks through some key features of the design.

Our Inspiration: We all live in New York and are passionate about food.  But even in this city of extreme wealth, entire communities do not have access to the kind of fresh, healthy that we care so much about. The question that motivates our project is how can we use technology to get locally farmed produce to more of the city’s residents.

Our Product: FarmBridge is an online platform that makes it easier for neighbors to form groups and gain access to locally farmed food. It provides two main sets of tools: 1) Management tools for community leaders 2) Social software for community as a whole.

Why CSAs: CSAs are grassroots community that are run by local communities that are dedicated to making healthy foods available in their neighborhoods. We decided to work with CSAs for three reasons:

  1. It is the only truly grassroots approach to the problems that the local food movement aims to address
  2. It is the model most able to get healthy food to neighborhoods in the city that need it
  3. Our research points to a tremendous demand from for foods from these communities

In the past 1-2 years there has been an explosion of interest in CSAs. The volunteers that run these groups are already responsible for organizing larger communities. They are also trying to bring more food offerings from more local producers, and add more payment options and subscription packages to allow a more diverse group of city residents to join their communities.

User Research: To inspire and guide our design we needed to gain a deep understanding of how these communities work. So we attended the annual CSA conference in New York, and held one-on-one conversations with more than 20 organizers and members from these communities. There are two main take aways from these conversations:

  1. First, local community organizers need tools that help them manage memberships, subscriptions, volunteers, communications and transitions.
  2. Second, we realized that running a successful community is too much work for just one person. These communities need social tools that enable organizers to actively engage members and farmers in the day-to-day activities of the community.

Initial Design & Experience: I’ve put together a brief video that walks through the design and experience slides from our presentation.

Here is a link to a post from Cindy regarding farmbridge.


Come Out and Play Festival: Battle of Brooklyn

Wednesday, May 19th, 2010

Battle of Brooklyn

Over the past several weeks I had been so focused on finals and the ITP show that I have neglected to provide updates regarding the Battle of Brooklyn – the street game I have developed with Morgen Fleisig for the Come Out and Play Festival. We have some good news, the game has been accepted into festival.

Here is the latest version of the game rules and mechanics. As you can see a lot has changed. I have also featured a few photos from the play testing sessions we’ve held over the past several weeks. We plan to hold a few more of these, so if you are interested in participating contact me at julioterra /at/ gmail /dot/ com.

Updated Game Details

Name of the game: Battle of Brooklyn

Tagline: Battle in hand-to-flag combat to conquer the park

Number of players: 30 to 40 players

Duration: One hour

Description:
The Battle of Brooklyn is a game about territorial conquest inspired by the revolutionary battle that that took place in Prospect Park. The redcoat or bluecoat armies are battling for control of the park and the future of our country.

In preparation for war, each army is looking to enlist fifteen (15) to twenty (20) honorable men and women. Both armies are organized into three regiments. Each regiment has at least five soldiers, a flag, and a map that the identifies the strategic territories they must conquer and defend.

Each soldier has four lives, represented by four flags attached to their belts. In hand-to-flag combat, soldiers fight to steal these life flags from enemy combatants. Captured life flags are attached to each regiments’ flagstaff and are crucial for conquering territory.

To conquer territory, an army must take a picture of a full regiment in a strategic location posing with their nation’s flags. The picture must then be delivered in person to the strategic battlefield command. The number of captured life flags featured in each picture determines which army holds a territory. Therefore, armies can conquer territories from one another throughout the battle.

If a soldier looses all four of his/her life flags, s/he must return to the infirmary to recuperate. At the infirmary soldiers that have lost all life flags can get new ones by trading-in life flags their army has captured from the opposing army.

That army that holds the most territories at the end of the game will emerge victorious and take all the glory.

Biography:
Julio Terra is a student at the Interactive Telecommunications Program with a background in interactive media and marketing. He is currently enrolled in a Big Games class that explores street games. On a personal level he enjoys exploring how mobile technology enables people to experience the physical world in new ways by connecting and blurring the line between physical and digital worlds.

Morgen Fleisig is also a student at the Interactive Telecommunications Program with a background in architecture, and currently enrolled in the same Big Games class with Julio. He is especially interested in the manner in which we extend ourselves into the world and reshape it, and what strategies and technologies we employ to do so.
Logo for the game

Images from Play Tests:


Final Lifecycle and System Redesign Presentation

Tuesday, May 18th, 2010

Now that I’ve survived finals and the Spring Show, I am finally able to catch up on my journal. Here I will to share the final presentation that I developed for my sustainable design class, If Products Could Their Stories. The focus of this final deliverable is to provide an overview of the lifecycle analysis that we carried out during the semester, and to propose a re-envisioned system that attempts to solve the most detrimental aspects of the current system.

On a personal level, the intent of my research was to gain a better understanding of the environmental and social costs associated to our current food system. I specifically decided to focus my analysis on Iceberg lettuce because it is the most popular leafy green in the US, and its popularity is largely driven by how well it travels rather than it nutritional value.

Enough with the introductions, here is a video of the presentation slides along with my voiceover. Please note that this version of the presentation is slightly longer than the one I delivered in class.

Food access and sustainability is an area of concern that I have recently become conscious of, and interested in. Here is a link to another project I have been working on this past semester along with other colleagues from ITP, it is called FarmBridge.


Finger Paint Mandala: Tracking Touches

Sunday, May 2nd, 2010

Earlier today I finally got to play around with capturing touch input using my new DSI (Diffuse Screen Illumination) multitouch set-up. I was happy that after two weeks of hard work building and assembling this multitouch display, today it was finally ready for the proverbial spin. Here is a video of the touch input being captured by the IR camera.

My first test of the day failed because the LCD monitor still had reflective filters that kept the IR light from shinning through to the camera. This problem was easily resolved and then I proceeded to carrying out my tests. My current focus is to play around with a different video tracking applications to find the best one for my project.

Today I decided to test ReacTIVision and CCV (Core Community Vision). Overall the CCV application was the easiest to use. It still took me a good 30 to 40 minutes of playing around with the settings before I was finally able to get my touches to show up properly.  In comparison, I was not able to get good finger touch readings on the ReacTIVision application.


Finger Paint Mandala: Building the Multitouch Display

Saturday, May 1st, 2010

Over the past two weeks I have been working on building a multitouch display for my finger paint mandala project (link to description). This has been an effortful and enjoyable undertaking. I have long wanted to play with multitouch displays – since before ITP when I would droll at TED videos and videos of the reacTable. Here I will share an overview of the research that I did, along with an extensive list of resources, and provide detailed information about my project, including a detailed description of my design and a list of all parts used.

Let’s start with some pictures of the display case that I just finished building:

Research on Multitouch Displays
Before getting started with building the touchscreen and buying parts I did a lot of research and spoke to several colleagues of mine from ITP who have worked on similar projects. Here is an overview of the online resources that I have discovered:

Peau Productions: The Peau Production website is where I began my research. I was referred to this site by Tamar, a friend from ITP. This site includes a good description of the main approaches for building touchscreen displays. After reading these descriptions I choose to build my display using the Diffuse Screen Illumination (DSI) design.

This site also provides detailed instructions regarding how to hack the PS3 Eye camera, and sells various different lenses for this camera. The PS3 Eye is one of the preferred cameras for touchscreen displays because it offers a high frame rate and low cost. I used these very instructions to hack my own camera. For those who do not want to go through the trouble of hacking a camera, they can just purchased a hacked camera from Peau Productions directly.

Instructables: The instructables site is well known for their rich database of how-to articles. For this project I found two articles that were very helpful: the first focused on how-to make an interactive multitouch display; the second is a guide to striping an LCD.

LumenLab: LumenLab is a website that has information about LCD monitors that can be easily disassembled. This is very helpful  because the cables used to connect an LCD display differ in fragility and length, and make some models considerably harder to disassemble.

One thing that I will note from personal experience is that even the same model can have a different set-up if it was assembled in different factories. For my project I used two 19” Samsung 906WB – I broke the first one during disassembly. The second one was much easier to take apart because it featured different components (and it was also refurbished, this may be reason why it had different components).

Webcam driver for MAC: In order to use the PS3 Eye camera on a Mac you need to download the appropriate driver. I am using the Webcam Driver for Mac that I found through the Peau Production website. I will provide updates regarding the settings of the webcam once I finish setting up the table.

Natural User Interface (NUI): In their own word, the “Natural User Interface Group or ~ NUI Group – is an interactive media group researching and creating open source machine sensing techniques to benefit artistic and educational applications.” The NUI wiki contains a lot of useful information including an extensive list of client libraries and tracker applications, many of which are open source.

I plan to test several of the applications and libraries on this list over the next week I calibrate the multitouch monitor and develop my first multitouch application. I will post my own insights regarding the applications and libraries available for Processing and Pure Data.

TUIO (Tangible User Interface Objects): TUIO is a protocol for tangible user interfaces. Here is a short description of TUIO from their own website: “TUIO is an open framework that defines a common protocol and API for tangible multitouch surfaces. The TUIO protocol allows the transmission of an abstract description of interactive surfaces, including touch events and tangible object states. This protocol encodes control data from a tracker application (e.g. based on computer vision) and sends it to any client application that is capable of decoding the protocol.”

The TUIO website provides detailed information about the TUIO protocol along with a wealth of links to trackers and libraries that use the TUIO protocol to enable the development of multitouch applications.

Community Core Vision CCV: Community Core Vision, also known as tbeta, is a tracker software that takes a video input stream and converts it to tracking data and events that can be used as the foundation for multitouch applications. This tracker software was developed by the NUI community and it performs a similar function to reactiVision.

ReacTIVision – the reactiVision application takes a video stream as input and then outputs tracking data and events similar to CCV. The main differentiation of reacTIVision is that it is also able to track over 200 custom fiducial markers. This tracker was created by the artists from Barcelona that developed the famous ReacTable.

XTuio: – xTuio is a research and development initiative related to multitouch technologies for Macs. It mostly provides tools for developing multitouch applications using C#/Cocoa. I don’t plan to use it in my current project as I will not use C#. However, this seems to be a powerful tool for those who have an expertise with these environments.

Environmental Lights – Environmental Lights is an online lighting store that sells IR LED ribbons that are ideal for making Diffuse Screen Illumination (DSI) and Frustrated Total Internal Reflection (FTIR) multitouch displays. On their site they provide helpful guides regarding how to use their IR LED ribbons to create these types of displays.

Display Case Design
After doing extensive research across all of the resources listed above I decided to built my multitouch display using the Diffuse Screen Illumination technique. Though initially I had grand plans to make a fancy acrylic case for my multitouch display, I ended up opting to build a simple wood case first. I may upgrade to a nice case once I get everything up and running.

Below is the design that I created for the initial wooden case that is pictured above, followed by a detailed list of the components I used in the implementation phase. Note that the case design was slightly modified during the implementation process.

The base of the case is created with two layers of 1/4″ bass and plywood. I purchased the wood for this case at a local arts supply shop, Blick Art.
Wood Base

The middle divider layer is placed between the LCD display and the IR acrylic. It is also created with two layers of 1/4″ bass and plywood. During implementation I glued thin strips of wood to the underside of the middle divider to keep the LCD display in place.
Middle Divider

The top cover of the case is created with two layers of 1/8″ bass and plywood. This is the thinnest layer of the table. Between the middle divider and top cover there is a small strip of wood that is connected to the screws to keep the acrylic panel from moving up or down.
Top Face of Case

Here is the side view of the table. As you can see, the table is similar to a double layer sandwich.
Multitouch Case Side View

Display Materials
Here is a detailed inventory of the materials I procured to build this touchscreen display:

Camera:

LCD Display:

  • Refurbished Samsung 906BW. Look for it on eBay. Other monitors can be used, check the LumenLab database for help. From my limited experience I’ve come to believe that refurbished models tend to work best.

IR lights:

Acrylic Panels:

Case:

  • Metal channels are required to frame the acrylic. The dimensions are as follows: must fit 1/2” of acryclic, preferably at least 5/8″ wide.
  • Spacers are important to make sure that Acrylic does not rest directly on top of the IR light strips. This can damage the IR lights.
  • Wood to build the case as outlined in the designs above.