Current Courses

Misc

 
HomeCourses

CTIN 405l
Design and Technology for Mobile Experiences

Critical and pragmatic insights into designing mobile experiences and technology. Design groups will develop a mobile project using principles from readings and class discussions.


Class Aggregator

xml

PoolLoop- Final Project

PoolLoop
A Mobile Mixing Experience

PoolLoop is an iPhone app that uses material generated or captured by the user/users to create a unique experience of time, space, sound and visuals.

Context

This application is intended for on-the-go creativity and collaboration. Designed to be accessible to all users, it can be operated easily and quickly to channel creativity.

Design

PoolLoop enables an interactive/creative experience between one or more users. It can reshape a moment in time, alter the way of thinking about an audio/visual relationship, and create a virtual place as the user(s) select and manipulate material specific to their own cultural and social contexts.

The virtual musician(s) are given multiple sources of material to choose from. There is the option of uploading your own generated content from your computer. This can include any sound/visual relationship, as well as the freedom to encode an alpha channel. Also, users can sample their own sounds and images from their phone’s camera, or download them from online (ex. youtube), to manipulate into their creative compositions.

In game play between users, the images and sounds are mixed and fused together, generating a true harmony of the elements. When these elements are combined, the result is an artistic mold in time and space that would have otherwise never existed. This allows the users to truly collaborate and combine their ideas, creating a social labyrinth of audio and visual. The results serve to be a representation of merging virtual identities.

Play Experience

Each player has the ability to load two sets of content each (a video/graphic with audio attached). If one is composing alone, they can activate the content with the select screen and manipulate it using the tilt (up and down) of the phone and its rotation (door knob motion) while selecting the clip they want to manipulate.

Sources of content include recording it with your iPhone or downloading from an online site you are browsing. You can use the select screen to activate your clips and tilt and rotate the phone to manipulate the elements. Tilting up and down increases and decreases the speed of the clip while rotating displaces the pixels of video. For example, if you are using more than one video clip, they will be layered, with the most recently loaded image on top. When you rotate the phone, it will use the bottom layer of video to displace the top layer, creating a new video, which is a merging combination of the two visually.

Interactive Play: Two users can interactively create a composition by loading their own elements and using the app’s features to merge and distort their sound and video. In order for the two users to play, one must invite the other to a creative session, and then the two players must upload their content into each others libraries. Once each player has the resources from the other, play can be initiated.

At the end of each session the user has the option to save their composition and can also email it to themselves or post it on the internet. The result is an easy and fun creative venture into the virtual manipulation of a moment and experience.


Collaborators: Steve Day and Diana Reichenbach


PoolLoop PowerPoint

We don't need an EMP

Check out the link to a realization of a dream! And it doesn't require the use of costly and dangerous nuclear weapons!!

http://www.intomobile.com/2007/09/28/palm-phone-jammer-fits-in-your-hand-annoys-everyone-around-you.html

Sketch #4-Bouncing Cranium

Sorry this took so long... finally was able to access the lab and use the computer. Enjoy!

Bouncing Cranium

Sketch #5-Laundry Mat Attack

Here is my idea for sketch #5:

Laundry Mat Attack

Laundry Mat Attack is an enacted narrative, where the theme and story of the game unfolds as the character moves through the space. It is designed for players who want to pass the time in the laundry mat specifically. As players are waiting for their loads to wash and dry in real life, they are virtually venting their frustrations through the game world while trying to develop the best strategy for quick and accurate laundry mat protocol.

During the unfolding of the game the player will encounter and overcome many obstacles which happen in real world laundry mats. These include:
-Navigating through overcrowded spaces
-A plan of attack for beating other visitors to open washers and dryers
-Obtaining money (credits) and changing them out for quarters
-Buying laundry detergent and bleach
-Dividing items into lights and darks
-Developing relationships with other users and the owners to help you speed up your laundry process.

Each of these obstacles will be addressed and overcome in a separate game which can be played through a battle of the wills or a physical confrontation. Once you are near another player or a machine you will be given the option of how to address the obstacle at hand, and follow through with a game.

For example, if you and another player reach an open machine at the same time you will be presented with options which you can choose from. 1. Physical confrontation 2. Activate a battle of the wills 3. Challenge them to play a game with you 4. Give up the machine

Another example is earning credits necessary to do laundry. You can do this while laundry is washing or drying, or you must do this before doing laundry at all if you have no credits to begin with. You can choose from a few options of occupations including but not limited to: soliciting for money, folding someone else’s laundry for a few extra tokens, selling newspapers for the stand across the street etc. These tasks bring on a new realm of personal interaction and obstacles that you must overcome when you are presented with them. Your game can be saved, if your real world laundry finishes before virtual world laundry does.

You can play the game with others at a laundry mat who have this application on their phone (and log into the network), or you can play against virtual players (the computer). You can also send instant messages to other players on the network about your observations or frustrations in your current laundry mat condition.

You can win by collecting points from your various tasks. You can continue to try to beat your last score, or the scores of others. You gain points by quickness and accuracy in laundry completion, by winning fights or battles of the wills, by cultivating positive relationships with the owners and other users, etc. For instance, you can sometimes gain more points by giving up a machine than fighting for it, depending on the character that you are up against (ex. Elderly person). However, ultimately the challenge and fun in the game is about the experiences you encounter in the process of doing laundry and how you overcome them.


Here is a quick chart of a tentative laundry mat:

DR_Laundry%20Mat.jpg

and the .doc file of the game plan:
LaundryMatAttack.doc



CTIN 405 - Backseat Driver

Formatted PDF version: Download file

Backseat Driver
CTIN 405 - Context-specific mobile game

Backseat Driver is an iPhone game that uses Google Maps and challenges car passengers to find the fastest route to their real-world destination in a strategic racing game.

Context

The Backseat Driver app targets iPhone users who are stuck as passengers in a car. More specifically, it targets those passengers who think they know a better way to reach their destination.

Design

Backseat Driver’s gameplay consists of selecting routes for the player’s three cars in order to reach a particular destination as fast as possible. The player must then modify the routes in real-time as the cars run into traffic.

The player’s goal is to reach the destination using the virtual cars before he or she reaches the destination in real-life (determined by the iPhone’s GPS).

Beyond directing the routes of the cars, the player can use special “reckless driving” abilities to make real-time play more exciting. These abilities include “sidewalk driving” and “run a red light.” When a player uses an ability, he or she plays a short arcade mini-game in the vein of Frogger or other simple 2D retro game. The more an ability is used, the more difficult the games become. Failing to complete a mini-game results in a time penalty.

The primary challenge in developing this game is determining the traffic density and speed of surface streets. Google Maps only covers the general speed of freeways. The temporary solution to this problem to create general speeds for different surface streets on a city-by-city basis for the different times of day—morning-peak, morning off-hour, midday-peak, midday off-hour, afternoon-peak, afternoon off-hour, evening, early morning.

If enough users participate, the program could track the users and record their speed on a given street at a particular time. With enough data, the average speed of different routes could reflect this data. This information could even extend to Google Maps database similar to Google Image Labeler.

Play Experience

After the player enters the application, the destination is pulled from the Maps application. The player must confirm this destination. If the destination is denied or no destination is found, the player must enter a destination using the Maps app interface.

The player then enters a route using waypoints, similar to the route creation on the web version of Google Maps. Once the route is determined, players may alternate between the different cars.

The user sees the selected car’s location (a red icon) and speed. The other cars’ locations are marked by green icons.

wireframe1.png

The user may expand this window and select “Change Route” or one of three abilities: “Run red light,” “Sidewalk drive,” or “Illegal maneuver.”

If an ability is selected, a new view is opened with a top-down view mini-game. These mini-games can be decided at a later time. If the player loses, the car is slowed down and the player receives a message, such as “Stopped by a cop!” If the player succeeds, the car increases in speed. In either case, abilities for that car are given a 15 second cool down. Every time an ability is used, the associated mini-game becomes more difficult.

If a car reaches the destination before the user, the player receives a win-screen and score. If the player reaches the destination in the real-world first, the player loses and receives an end-game screen celebrating the talents of their driver.

Sketch 5

LoveTAP

The scene:
Today is a beautiful day, and you have a few things you would like to finish up. You're feeling pretty good, and, if you do say so yourself, you're looking pretty awesome too. What better place to go do this work... and be seen than the local Starbucks or Coffee Bean? That way you can enjoy a beverage, bask in the sun (or the indoor air conditioning) and perhaps catch the eye of a stranger.

The problem:
Say you do in fact find a stranger who catches your eye... and you're too shy to simply march up to them and try to break the ice. This is where this iPhone application comes in. Whenever you are in a Starbucks or a Coffee Bean you are able to access this application. The location based mechanic allows you to view the "blue-print" like set up of the location, showing you the tables and locations in the store. You can tap on your phone where the location of this desirable stranger is, and thus the game begins. In a 20 questions style fashion, you invite the object of your momentary affection to look around the room and by asking yes or no questions, try to figure out who you are. While this application could be played simply as a game it also enables the players to break the ice between one another, and perhaps the end result will be a face to face exchange.

How it works:
You open up the application by tapping on the icon.
Up comes a layout of your current coffee location.
There is an "X" to mark your location, and then flashing icons wherever there are people who also have this application.
You tap on one of those individuals locations on the map, and it sends a "You've been tapped" buzz notification to them and then they accept and begin playing the game.
They ask questions which show up on your phone like text messages and you are allowed to select "yes" or "no" in response.
Eventually after enough of these questions have been exchanged the player who is guessing also can access the map of the store and click on the location where they think you are. If they guess correctly, they win, and if they don't manage to guess in 20 questions or they guess wrong, you win.
If at any time you wish to end the game, you simply select "Quit" and it is over on your phone, and the other player is notified that you have removed yourself from the game.
You can also block certain players from reaching you as a safety/comfort precaution.

Images:
Download file

CTIN 405 Sketch 5

An application to be used at a gas station. A time game where the user tries to stop the counter on a certain dollar value. Rate of time varies based on price per gallon of gas.

View image
View image

Project #2 - Chroma Chronicle

Chroma Chronicle

Chroma Chronicle is a mobile application which captures the memory of a location/experience through visuals and audio. The idea is similar to how one would use a camera. The user must acknowledge the space they are in and make a decision to capture this experience by sending a request to the chroma chronicle application.

The application takes the longitude and latitude of the user and maps the longitude coordinate to a visual (color) and the latitude to a tone. The user can then collect these results and playback as a visual/auditory record of a trip, etc. This can then be exported to one's email and be shared online with others.

The big part of the application is that the user is an active participant in creating an archive of their travels. It's a way to create an actual 'soundtrack for our lives' and a way to remember these experiences through a stimulus of our senses. The tones and colors are assigned randomly to the longitude and latitude coordinates.

CTIN 405 - Wranglers Playtest Report

Formatted PDF version: Download file

Two playtests of Wrangler’s first iteration were conducted with different rules and settings. Eight people organized into three teams participated both times.

The first 5-minute session took place at The Grove and required players to move strangers into circles. The second 10-minute session was played at an adjacent park and eliminated the circles with player’s able to take pictures of strangers in any location.

Results

Players noted that strangers were more receptive to participating at the park as they were not traveling to a particular destination. Players also mentioned that moving into the circle “freaked out” targeted strangers. In both locations, there was concern from strangers regarding their photograph being taken. In an instance of emergent gameplay, one team had concerned strangers cover their face with the flier while another team only took pictures below the neck.

Beyond these stranger-player dynamics, players commented that there were only one or two tactics in approaching strangers. There was no variation in their contact strategy. Furthermore, each team has the same bonuses (more strangers at once is better and raptors for double points). There is potential for different bonuses that could alter play strategies beyond canvassing crowds of strangers

While two of the teams were successful, the third team gave up early and got a fraction of the points of the other two. Afterwards, they mentioned a sense of shame in approaching strangers. This needs to be dealt with, as one of the points of this experience is to create a fun motivation for talking to strangers and remove that shyness. While variations in bonuses and tactics could help this, it is worth looking at one of the most minor rules of the game, but one of the most popular—the raptor pose.

Making strangers pose as raptors for extra points was an afterthought, but the two teams who saw the rule heartily endorsed it (in fact, the team that gave up early didn’t even know about that rule). Players suggested adding more poses as different bonuses, but this comment could be extrapolated to a more generalized mechanic: making playful requests of strangers that make them active participants in the game. The circles was a location-based way of doing that, but posing as a dinosaur is a lot more fun than walking into a circle on the ground (and a lot less foreboding).

Other points of note:
• Parties were interested in seeing their pictures online
• Players would point to other teams to look legitimate
• Strangers were more apt to hold on to the flier if they knew the game rules were on the back (a serendipitous printing mistake)

Planned Changes

The second iteration will replace the circles with new, more playful tasks like the raptor pose, which the strangers must do for the players. These different tasks will result in different point multipliers and unlock new tasks.

Potential tasks include new animal-based poses, action shots (e.g. the strangers must be photographed in mid air), or convincing strangers to take pictures together with the players. The original core mechanic—taking pictures of as many strangers at once as possible—will be downgraded to be one of these tasks. These tasks make the game similar to a photographic scavenger hunt in which players must interact with their subjects.

By focusing on creating a more playful dynamic between strangers and players, the game will deemphasize shameful soliciting and highlight the players’ duty to bring strangers into the magic circle.

Minor changes:
• Intentionally printing rules on back of fliers
• Shorter game time – approx. 5 minutes
• Locations must focus on recreational areas such as parks

CTIN 405 - Wranglers

I started with two objectives:
1. Force players to draw strangers into the game and directly interact with them
2. Make it a promotional game for a website/movie

It became a game about wrangling strangers and photographing them with promotional materials for a friend's website, 5secondfilms.com.

PDF of the real-world game prototype, "Wranglers": Download file

Document text without the nice formatting:

Wranglers

Wranglers is a location-based promotional game in which teams of players move, or “wrangle,” strangers into pre-defined areas and take pictures of them holding promotional materials for points.

This promotion will be for the comedy website, 5secondfilms.com.

Goal

Earn the most points by taking photos of strangers holding your team’s 5secondfilm cards in your team’s designated area.

The more strangers you photograph at once, the more points. Players earn additional points by convincing the strangers to pose like a raptor.

Setup

At least six players are needed.

The players divide into three color-coded teams—red, blue, and white. Players are given colored armbands corresponding to their team.

The game should take place in a heavily trafficked area such as an outdoor mall or shopping center. Three circles—one for each team—are drawn in chalk 10 feet apart in an open space.

wranglers.png

The players are given two items:
1. Two identical instruction cards
2. One-hundred identical color-coded promotional cards per team to be used in the photos with strangers for points

Instruction card text:
1. Get strangers into your team’s colored circle - the more, the better.
2. Take pictures of the strangers holding your team’s promotional cards.
a. Each stranger is worth 1 point times the total number of strangers in the picture → if you take a picture of 2 strangers at the same time, they’re each worth 2 points.
b. Make them pose like raptors for double points!
3. Team with the most points in 15 minutes wins.

Tips:
1. Keep one teammate near the circle ready to take pictures
2. Spread-out to grab passer-by’s as well as groups farther away
3. Try to convince strangers to stay in the circle until you’ve got a bigger group to photograph (3 people in one photo is worth 9 people in 9 different photos)

To win more prizes after the game:
1. Friend “5secondfilms [team color]” on Facebook
2. Post the photos on Facebook and tag them with your new friend, “fivesecondfilms [team color]” the same week you’ve played the game
3. The team with most points on Facebook wins [insert prize]

Promotional card description:
Cards are color-coded by team and contain a graphic and web address for 5secondfilms.

Tallying Points

The moderator who drew the circles and passed out game materials does an initial point tally. Moderator takes back leftover materials and erases circles. After one week, moderator logs on to the three Facebook accounts 5SecondFilms Red, White, and Blue and tallies points again for the official score.

One photo’s points = (number of strangers in photo) per stranger. Strangers posing as raptors are worth two times the numbers of strangers.

Potential Directions

Facebook friends of players will be exposed to photos from the promotional game and have an opportunity to click through to the 5secondfilm profiles. The use of Web 2.0 extends the game beyond initial participants to the social network of each individual.

The promotion can be made even more effective by adding a broader game in which the recruited strangers can participate. The promotional cards the stranger holds in the photos could include unique codes that can redeemed online for a chance to win prizes or to sign up and participate in a meta-game. By taking a photo and receiving a promo card, strangers can join afterwards online and follow the larger progress of their team as the location-based game occurs multiple times in different locations.

CTIN 405 - iPhone sketch

I had trouble with the file that Will posted, so I just went through the first stages of the BIT-101 tutorial. I replaced the ball's constant motion with random x and y values. When the user touches the screen the ball's random location is reduced to a 20x20 area around the touched area.

Here is a .zip of the project: Download file

I initially tried to grab values from an XML file, but it just wasn't panning out. If anybody has any good tutorials/resources, it would be much appreciated.

Sketch 4 - Young G. Kim

After hours of working on my computer and this app...

Download file


A simple image swap...

Sketch 4 - Michaela Morris

I'm really not skilled with this... so I managed (much to my surprise) to change the images in the ball bounce app...

Download file

sketch 4 grin

Download file

i tried to let it bounce longer before it become a loop bouncing between top to bottom.

CTIN 405 Sketch 4

Download file

I changed the speed of the image transitioning time from 1.75 seconds to 10. This decreases the frame rate of the animation, making it appear more choppy than normal.

Design Sketch 4 -- Flubber

Basically I just tweaked a few things to harken it back to the bad days of Robin Williams comedy.


Download file

Sketch 4, assignment + sample code

The assignment for Monday is to build something with the iPhone simulator based on the code provided for you below.

This sketch is designed to get you comfortable looking at and editing objective-c code in the XCode environment, so your sketch should show that you've spent considerable time playing around with the code base, and have manipulated it in some distinguishable way.

I'll be in office hours on thursday, and I recommend if you are having troubles, come hang out.

The basic steps to get up and running in XCode are:

• Open XCode in Macintosh HD/Developer/Applications/XCode
• Alternatively, you can download and double click the "BallBounce.xcodeproj" file included below

I've tried to comment the code best I could. It's based on Keith Peters' Gravity Tutorial for iPhone, which is in 5 parts, which can be found here: [1] [2] [3] [4] [5]. Keith goes into quite a bit of detail about some of this stuff, and some of the later tutorials add some things like accelerometer control.

I've also added a bunch of little things to his code, which you can experiment with. Check the rather extensive README.rtf that you can view from within XCode after you open the project.

Download file


have fun!

Logan and Rebecca's Project

Logan Olson
Rebecca Shapiro
CTIN 405
February 23, 2009

THE CONCEPT
Create a localized news aggregator that consists of both mainstream/professional news sources as well as user generated content/citizen journo reports.

WHY WOULD PEOPLE WANT THIS APPLICATION?
Recently, a few studies concluded that trust in the mainstream media is at an all time low. Even experts in the journalism industry are citing little faith in the news as a possible reason why newspapers around the country are failing and closing, one after the other.

Simultaneously, many people are turning to citizen journalists, blogs and user generated content to gain more perspective and insight into a given news story. Even mainstream news sites try to incorporate aspects of citizen journalism into their nightly newscasts, especially when reporting breaking news.

Though the reality of the news industry is quite sobering to lovers of legacy media, new technology, such as a mobile application, can address this situation by considering traditional and new sources of media when aggregating news for a consumer. With a phone’s ability to measure one’s location quite simply, news consumers can get localized news from the traditional sources that were one the most trusted names in news, to more current, user generated material that can offer more insight.

WHO WOULD WANT THIS?
Those most likely to use this application are individuals working in media or total news junkies that enjoy analyzing how different news sources treat news.

HOW DOES IT WORK?
The application has three primary windows. The mobile device measures your location with the phone’s GPS, thus aggregating news based on ones location.

The first window serves as an aggregator with a few headlines from professional sources. The bottom portion of the screen would aggregate user generated / citizen journo headlines. User generated content appear with a different color, indicating the nature of the content. Users have the option between having rolling user generated headlines and static professional headlines, or vice versa.

From this window, one selects a certain local news story or topic, taking one to the second window. This window expands upon the topic by showing different user generated and professional headlines within that chosen topic.

Next, one selects which source (whether it's a professional site or a user generated site). The final window showcases that specific article or photograph.

We programmed this application using the UI builder for all the visual parts.

Scavenger Hunt

Here is our first project. We made a scavenger hunt around the room that requires you to do tasks, collect numbers, and put clues together to find the final prize.
-Chris and Josh

Download file

Download file

CTIN 405 - news aggregator

Per Rebecca's write-up, our goal was to create a digital prototype for a local news aggregator combining "citizen journalism" with more established news articles.

Here is a .zip of the Xcode project: Download file

Planned functionality that didn't make it in:
Ability to switch main view between articles and citizen sources
Color of UITableCell's to denote source (I settled w/ changing the text color)
Rolling text of alternate main view at bottom of main view
Detail view of a source just Google's the source's title (no real links)

Additionally functionality that would've been nice for the digital prototype:
Text that isn't hard-coded into an array but drawn from a webpage's content
Secondary line of text with different formatting (primary line would be first line of content, with second line being source)

After creating this prototype, the biggest addition needed was not foreseen in the write-up--how a user adds and manages the content received. There needs to be some way to rate feeds and individual pieces of content, as well as a way to connect stories together under one topic. Otherwise, a site manager or algorithm (?) would be responsible for parsing all of the data, which drops the site back into the moors of managed news content that we were trying to escape.

Taking this into consideration, I realized we'd need a back end to either host user content or at least a database of ratings and connections for the content out there (or a combination of the two). It almost seems worth making a website like this first and then porting it to the iPhone down the line.

Late Sketches 1,2,3

Here are my sketches:
1
An odd triangle abstraction.
Download file
2
An app that tells you if it is cold or hot outside.
Download file
3
An app that compares your physical contact with a person and distant contact.
Download file

Sketch 3

Download file

Here is my sketch 3, a scavenger hunt program.

sketch 3

It's an idea about getting friends' locations by calling their mobile numbers.

Download file

sketch 2

Download file

I tried out several typography and background design for the sketch. And this is one of them.

Sketch #3

This is a proposed application with an attempt at roughing out the code. The application would use a site called Brightkite to track users' location in comparison with your own location via cell phone. When a person arrives within 100 meters of your location you would receive a text. The goal would be that you could meet up with friends and family who are close by, or perhaps even avoid them.

Sketch #3

Sketch 3

This is for an app that will act like a tour guide when the user is at monuments/abroad.
Download file

CTIN405 sketch 3.5

Download file

pizza ordering app. it is only the code logic and there are still some holes

CTIN 405 Sketch #3

I made a paper prototype for an app that would allow a person to find out what has happened in the area they're currently standing in. They could look up either the general area or specific coordinates. Along with looking at information, news articles, and pictures of that area, people can add their own events--no matter how big or small--for others to view when they step into the same spot.

Download file

CTIN 405 Sketch 3

Download file - pseudocode

I made a paper prototype of a mobile application created for use at a zoo. The basic idea is changing the information the phone displays based on the type of exhibit the user is at. There is also the option to take pictures and group them based on exhibits for sharing and comparing with other zoo visitors.

View image 1 - Zoo Map

View image 2 - Map Up-close

View image 3 - Phone Screen in African Savanna

View image 4 - Other Phone "Screenshots"

View image 5 - Photo Sharing

Mobile Sketch 3

What a Trip gives users a chance to carve out their own place by recording their own route or discover a new space by following the footsteps of others.

Download file

405 assignment 2

So this week, I was supposed to create an iPhone prototype that incorporates the ideas of space and place.

Idea:
When users twitter or take a photo, the picture or text would be tied to the GPS coordinates of its creation. Users could enter the app and see glowing nodes whose size and brightness would be relative to the user's proximity to the original location. Nodes would be created for not only the iPhone user but his or her friends' text/photos, as well.

Prototype:
My goal was to create a modifiable SQLite database that contained a user's notes and GPS coordinates (which were loaded on startup as opposed to pressing a button in the UI). I was also trying to figure out graphics that do not use the UI framework.

Execution:
I was working off of three separate examples:

1. My previous assignment for GPS
2. This tutorial for SQLite: http://icodeblog.com/2008/08/19/iphone-programming-tutorial-creating-a-todo-list-using-sqlite-part-1/
3. The Apple Dev Center's GLSprite example

Unfortunately, things didn't go as smoothly as planned. I didn't get so far as the graphics, getting stuck with the SQLite and GPS combination. Here is the botched project: Download file

Some of the questions I have after this endeavor:
1. What does the CLLocation's "(id) sender" refer to and how can I incorporate it into NSTimer?
2. Will NSNumber work for holding the GPS coords?
3. What sqlite3_column_* and bind_* type works for incorporating the GPS coordinates?
4. Is there a way to print to a console or something similar for debugging?


Design Sketch 3

Download file

Here's a word doc that has the design for a World Weather app, which is designed to show the weather for the users location, and other places around the world with very similar weather.

Sketch #1 and #2

I was finally able to log in to get these posted. Sorry for taking so long.

Sketch #1: Just a copy/paste of one of the tutorials. Nothing interesting.
Download file (.pde)
Download file (.jar)

Sketch #2: Depending on the temperature for the coordinates, it draws a sun, smiley face, or a snowflake.
Download file (.pde)
Download file (.jar)




NY Times Article: Mobile Apps That Tackle More Than Tedium

Nokia hosted a competition for programmers to create innovative mobile applications in three areas: Eco, Emerging Markets, and Technology. Check out the NYTimes article here.

For a complete list of finalists, click here.

Sketch 2

Download file

Uses latitude and longitude to call a web service to get the local time. Couldn't figure out how to grab just the local time from the xml returned from the web service, so I printed the whole thing instead.

sketch 2

still fooling around with the code. tried to make it suggest clothing needs based on the temperature. waiting to test it out with gps.

Download file

sketch.02_sday

Download file

sketch.01_sday

Download file

sketch 1

mod of the etch sketch multicolored line and background changes color when shook.
Download file

CTIN 405 - First iPhone app

A Hello World'esque application - the user presses a button to view his or her Latitude and Longitude coordinates.

Download as a .zip file

Next step is to figure out CoreGraphics and create some visuals outside of Interface Builder.

GGJam Winners

The Inaugural Global Game Jam was a great success!

We are all winners because 38 people made 8 games in 48 hours but these are the ones we gave prizes too...

(Play all the games from USC and around the world at globalgamejam.org)


1st place - Furballs
Justin Lewis
Lisa Takehana
Joanna Zeta
Andrew Christensen
Karl Harns
Alex Fairman

2nd place - Microcosmic
Damon Stea
Ben Bharier
Asher Vollmer
Bob Lydecker

3rd - Syzygaia
Jonathan Carmel
Lindsey Talbot
Robert Nall
Carter Thomas
Christopher Cotta


and here is the winner for my favorite Interactive Media related Super Bowl add...

Homework 1, First Sketch

Finally got this up and working.
Download file

CTIN 405 Sketch 2

Download file

CTIN 405 Sketch 1

Download file

Readings for 2/9

I'll also be sending out an email w/ attached pdf. The web readings are here.

• Dan Hill: "City as Platform" (link)
• Anne Galloway: "The Rise of the Sensor Citizen" (link)

Short Extra Credit (not really, just if you are interested):
• Guardian recap of Matt Jones' Good Ideas Salon (link)
• "How the city hurts your brain" (link)

Sketch #2-Diana Reichenbach

I included the .pde and .rtf files. Enjoy!

Download file


Download file

Sketch #1-Diana Reichenbach

Here is the first sketch... finally got the account setup to post =)

Download file

New Location Example using home values

Hey,

Here's a new file showing how to use a home values web service to build a little price thermometer. Basically, in the new sketch, we set a switch that makes the app react to either the temperature service, or a home values service, and then decides what to do with the returned values.


//set up the service type, either temperature or homevalues
String serviceType;
serviceType = "homevalues";

//use this new url to get either temp or home values
request = client.GET("/clients/405/services.php?service="+serviceType+"&lat=34.052187&lon=-118.243425");


in the libraryEvent method, we'll check to see which type of service we are using. If it's the homevalues service, we'll turn on the draw() animation loop using loop(); Otherwise, we'll just call redraw() to call the draw() function only once.


if(serviceType == "temperature") {
redraw(); //call the draw() function once
} else if(serviceType == "homevalues") {
//start animating again
loop();
}


Download file

com.mpp.player.PowerPlayerAppScreenSnapz001.jpg

This week's reading

Last but not least, the reading for this week can be found here:

Re-Place-ing Space: The Roles of Place and Space in Collaborative Systems

iPhone version of the location/weather example

Here's the iPhone version of the Location updating code we went through with mobile processing today.

Download file

If you understand what was going on with the mobile processing example below, you should be able to understand, at a basic level, what is happening here. I've tried to comment the code extensively, although for you iphone-dev newbies, some of the iphone syntax might be pretty odd. Let me know if you guys have problems with this.

Also: if you need a developer certificate for iPhone, please email me and I will add you to the list.

Location Tutorial | Mobile Processing

As we went through in class today, it's pretty easy to get your phone's location using Mobile Processing and the GPS on the N95.

First, you'll want to grab the mlocation library from Mary Jane Soft HERE.

Once the zip file is downloaded, expand it so you have an mlocation folder. Drag that mlocation folder into your mobile processing application folder:

YOUR_MOBILE_PROCESSING_DIRECTORY/libraries/

You should see some other libraries already there. Once you do that, restart mobile processing if it's already open. Otherwise, just open it and you're good to go.

You can download the .pde (mobile processing sketch) here:

Download file

The main parts of code you should be interested in are...

This bit connects to the server nodesnoop.com:


client = new PClient(this, "www.nodesnoop.com");


After that connection has been made, we're going to query the mlocation library for the latitude and longitude.


MLocation.location(coords);


This sticks the latitude and longitude in the coods array, which we will use when we send the request to the server we just connected to:


request = client.GET("/clients/405/weather.php?lat=" + coords[0] + "&lon=" + coords[1]);


Here we're sending an http get request to the server we connected to above. We're requesting the file weather.php, and we're sending that file the parameters lat and lon, which are assigned values based on the coords variable we get from MLocation.

in the libraryEvent callback function we'll look for the file to be completed


} else if (event == PRequest.EVENT_DONE) {
//done reading
msg = new String((byte[]) data);
println(msg); //print out in the mobile processing debug window for testing purposes
request.close(); //close the request
redraw(); //call the draw() function once
}


Basically, this just says: "When the file is loaded completely, set the msg variable to the output of the file we requested." In this case, the file returns the current temperature of the latitude and longitude it was given.

After we do this, we'll call redraw() which calls the draw() method once.

First, we'll check if the msg variable got set correctly. If there was some issue, it will not be set, and therefore be null.


if(msg == null) {
background(255);
}


Otherwise, we'll do something based on that temperature value. In this instance, we're just changing the background color of the app based on the temp., but I'd imagine you can come up with something better than that.


} else {
//if we do, do something with that information.
//in this example, we compare the integer value of msg (the integer temperature)
//with a range of values to change the background color

//YOU CAN EDIT THIS CODE TO MAYBE DO SOMETHING MORE INTERESTING

if(int(msg) > 60 && int(msg) <= 70) {
background(255,255,0);
} else if(int(msg) > 70 && int(msg) <= 100) {
background(255,0,0);
} else {
background(0,0,255);
}
}


Rebecca Shapiro Sketch 1

Download file

This is an example from processing :)

CTIN 405 - Sketch 1

Here's the code for my first sketch using Mobile Processing:

int[] sqrWidth = new int[5];
int[] sqrHeight = new int[5];
int letterX = 0;
int letterY = 0;
String str = "SIEHEHFBEICBT592483659234875290348578243075824ROISBHRKUSHBRSUBIRBUKUBHFKJHBSIQBIQRHBQO";

void setup()
{
sqrWidth[1] = 5;
sqrWidth[2] = 176;
letterX = random(width);
letterY = random(height);

background(255);
noStroke();
fill(0);

PFont font;
font = loadFont(FACE_SYSTEM, STYLE_PLAIN,SIZE_MEDIUM);
textFont(font);
textAlign(CENTER);
rectMode(CORNERS);
}

void draw()
{
background(random(255),random(255),random(255));

if(keyPressed)
{
letterX = random(width);
letterY = random(height);
}

char c[] = {str.charAt(random(85))};
String str2 = new String(c);

text(str2, letterX,letterY);

fill(random(255),random(255),random(255));
sqrWidth[1] = (sqrWidth[1] + 1) % 176;
sqrHeight[1] = pointerY;
rect(0,0,sqrWidth[1],sqrHeight[1]);

fill(random(255),random(255),random(255));
sqrWidth[2] = (sqrWidth[2] - 1) % 176;
sqrHeight[2] = pointerY;
rect(sqrWidth[2],sqrHeight[2],176,208);
}

CTIN 405 Sketch 1

This is Resonata. Source code by Oolong.

It's a spring system, designed to demonstrate many of the universal features of waves.

Download file

CTIN 405 | Sketch 1

Here's some super random lines, the screen clears when you press any key.


Download file

CTIN 405: Sketch 1

This is similar to the Etch example, but I added a few things.

Download file

CTIN405 sketch 1

here is my first mobile sketch. It is a magic eight ball...

Download file

Web Readings for 1/26

The web readings for next week are listed below.

Adam Greenfield: No Boundaries [http://is.gd/gvdD]

Smule iPhone apps [http://is.gd/gveK]

Mobile Processing Step-By-Step [http://is.gd/gvfS]

Exclusive RjDj Interview: Interactive Music Listening, Everywhere You Go [http://is.gd/4cX5]

Class Syllabus

Here it is:

Download file

Building a j2me app with Mobile Processing

One of the technologies the class will be looking at is mobile processing.

Mobile Processing is an open source programming environment for people who want to design and prototype software for mobile phones. It is based on and shares the same design goals as the open source Processing project. Sketches programmed using Mobile Processing run on Java Powered mobile devices.


Building an app with mobile processing is pretty simple.

1) Download mobile processing from here.

2) Follow the instructions there to download a WTK (wireless toolkit) to your machine. The WTK is basically just allows mobile processing to compile your apps and also a way to simulate them on the desktop. More on that later. Note: he WTK link has changed from what is on the mobile processing site. You can download it for mac here.

3) Install mobile processing and go to the mobile preferences tab (shown) to enter the path of the WTK you just installed.

Mobile%20ProcessingScreenSnapz001.png

4) Enter some code in your sketch window. You can choose something to quickly get started, copying and pasting from the examples. This one will do.

5) Run your app by pressing the little play icon in the upper left corner of the sketch window.

OR

6) Build your application for use on a mobile device. Choose Export MIDIet from the File Window

Mobile%20ProcessingScreenSnapz002.png

This is the basic procedure for building an application very quickly using mobile processing.

The class will provide 6 nokia N95 devices, which will be good to use if you are building a sketch in Mobile Processing. However, mobile processing is also designed to be able to be used with a wide array of devices. You can see if your phone is supported by checking the list here.