Tim Stutts: ITP Project Blog

I designed this logo for our Mobile Media final project using Illustrator.

Check out the front page, top-left: mobile.processing.org

A special thanks to Francis for putting it up there, and also to Mitch Said for hand modeling with Mobeat running on a Nokia N80 in the above photo.

In the game of Penultimate, players take turns telling a story one line at a time, while only seeing the previous line.

ameya
and then the sun set one final time leaving us in our present state of chaos
moon
all i hear is wolves howling and babies crying in terror. “God help us!”
daher
“Help us All!”
dec
It appeared as if they were not going to make it.
tim m.
So they gave up hope and killed themselves and everything ended.
patricia
But that wasn’t the end. After that,
vibha
she found him again , rediscovered her life , work and family.She was
moon
safe for the time being. until she discovered a sealed box under her bed.
tonio
but the box is locked. She guess that her step father knows about it.
patricia
She can’t ask him though. He can’t know she found it.
moon
its the head of a horse. a bloody horse with a name tag:
ameya
unknown. fletcher closed his eyes and died alone in the liquid hot magma.
jeremy
when his daughter heard the news, her body developed sores of sympathy
moon
but quickly tears of sorrow turned into laughter.
ameya
the dark face of hysteria in the face of 3 dozen scud missiles raining down.
patricia
She run. Asked for help. But no one seems to hear her.
jeremy
As she made her way down the block, her cries for help became louder.
yanyan
Meanwhile, a yellow taxi just stopped a abruptly in front of her.
moon
a man stepped out. it was Ameya. He shot her in the face.
ameya
he was a hero in all our eyes. Mrs. Moon reopened her “massage” saloon.

Today I got distracted from Thesis and decided to continue a recent ongoing project of programming a drum machine for the cellphone. Using Mobile Processing in conjunction with the MSound library, I was able to build a basic sequencer that triggers six samples along a grid, that can be looped and altered by the user in real-time. Currently the program opens in play mode, with the LEDS along the bottom indicating the current place within the beat. To activate trigger points, simply use the arrow keys to navigate the selector box to an appropriate space , time being horizontal and sample type vertical. Once there, click a number on the phone between 1-9 to control the volume or click 0 to mute. Enjoy the dancy, electro samples that result. The playback is still somewhat choppy, but this gives it a “crunk” feel. In time I plan on implementing the inactive parts of the GUI like the play / pause button, beat advance button, and tempo slider, but for now it’s a start.

Download Mobeat Alpha for mobile phone (.JAD file)!
Download Mobeat Alpha for mobile phone (.JAR file)!

How to run: there are two ways to get Mobeat on your phone. One is to access the links above on your phone via mobile internet. Try downloading the .JAD first–this is a secure way of pointing your phone to the actual .JAR, which is the application. If the .JAD doesn’t run on your phone, try going directly to the .JAR. To make this process easier you may want to email this blog entry URL to your email and access it on your phone, so you don’t have to navigate back to the page on your phone. The second way is tp download the .JAR file onto your computer desktop and bluetooth it over to your handset. Note, sound at this moment has only been tested, to work on the Nokia N95 and N80, however please contact me and let me know if you get it running on a different model.

View demo on YouTube http://www.youtube.com/watch?v=JtuXf8PigmU

Source Code:

Read more

NATURE OF CODE PORTION:
- runs in browser using HTML, Processing, and MySQL
- Livelyhood.us contains logo, description with visit, login computer, login mobile
- one profile accessible via user name and password
- the following Modes are…

Map Edit Mode ( viewable only by user )
- remove point and line functions; replace with vectors
- make object-oriented, incorporating array lists
- improve hand-drawn line quality
- program should have save function that uses MySQL database
- allow for storage and recall of preferred drawings; store a drawing by default, but allow user to delete duds within the GUI
- drawings should be definable, moveable and removed at user discretion

Environment Edit Mode ( viewable only by user )
- Sliders to define to behaviors of people and cars in neighborhood

Display Map Mode:
- people should move along block edges and interact with each other and structures*
- cars should move between blocks and avoid each other and people*
- structures will display indication of activity ie zzzz, $$$, smoke*
- sound effects and backgrounds*
- user comments below in browser

Display Photo Mode:
- photo layer (updated via mobile web) shows up on top with map elements  opaque and beneath.
- photos are clickable whereupon, their descriptions show up near the bottom of the map.*
- user comments below in browser

MOBILE MEDIA PORTION

Mobile Photo Upload Mode:
- Login mobile from Livelyhood.us
- WAP screen of options: upload photo, delete photo.
- for upload photo WAP page that runs on mobile browser containing photo upload button, clickable map grid, manual coordinate entry, comment button, submit.  If square is taken by another image coord shows up as red.
- for delete photo a similar screen, only user is prompted to select what to do delete.

THESIS SEMINAR PORTION

- Written Thesis Document
- Presentation Preparation
- Power Point

* = lower priority

I’m going to be discussing the button and graphical user interface challenges that we face as mobile phone users and application developers. In making decision as a player or developer, is it helpful to view the cellphone as a small personal computer, miniature gaming device, etc? We’ll look at ways in which non-SMS/MMS mobile games, particularly those based on previous console or desktop games, deal with the challenge of limited screen real estate, soft key / number keyboard, and maintaining an immersive experience.

View Flash version of presentation here. ( Allow a moment to load )

I spent many hours this weekend testing out two different play screens on my mobile phones in a simple Mobile Processing application that cycled through the hand-drawn and grid map designs, trying to get a sense of what design was most viewable, while looking ahead to what interface challenges may arise. I concluded that using the hand-drawn approach on the phone would be possible, but drawn elements would resemble those on a etch-a-sketch, devoid of curves and gesture. I also concluded that the grid map approach would bare too strong of a resemblance to Simcity and make the user treat it as a game, rather than a blog or expressive canvas situated within a map. A solution involving a compromise between these two approaches finally came to me: maintain the hand-drawn look, but impose it onto a grid. In this model a user would move a highlighted square along an 12 x 12 grid using the directional keys on the cellphone. Once on the desired square, the user could click the enter button, and the map would be hidden and replaced by a full-screen element selector tool, with hand-drawn looking houses, stores, factories, roads, etc. The user would press enter on one of these elements to place it on the previously clicked square, where upon the selector tool would disappear and the map, with its new element, would become visible again. From the same selector menu, the user may also edit the look of each element globally using a similar GUI to the map itself. Basically the user would make pixel edits to the element from a separate sub menu. Also on the element select tool would be a link to a separate screen, in which the user could determine the number of people and cars on a map and their behavior using several sliders. I haven’t decided what to do about floating text and mobile images at this time, but hope to work this out in the next couple days, as I build a prototype of this new approach!

I created the beginnings of a simple flight shooter game in Mobile Processing, here seen running on a Nokia N95. The user controls a small aircraft using the arrow keys, while traveling upwards through a hand-drawn level. The drawing is one I made for Inclusive Game Design last semester and is a PNG file that’s 1700 pixels high–surprising that it loaded fine on both the Nokia and Samsung. Download Lift Off Mobile for your cellphone here.

I’m also using Mobile Processing to test out the two different approaches for Livelyhood on both Samsung and Nokia phones. The general consensus seems to be that both designs appear too small on the Samsung’s 176 pixel wide screen, but viewable on Nokia’s 240 pixel wide screen. Should I develop LivelyHood Mobile to run only on larger smart phones?

source code:

Read more

While presenting my midterm today, and discussing the difficulties of making the content uploader work for mobile phone, Shawn suggested a lo-fi solution of using an old school html image map or table, where a user could select regions of the map to specify picture placement. I built this mobile webpage prototype with a table with each cell notated according to the column and row. From this screen the user will eventually be able to title the image, write a comment, choose the location, and upload a camera phone picture onto a miniature screenshot of their map. The change will be reflected onto the server, so that after the uploading takes place, all users will be able to go to the more complex Processsing-based map on any desktop computer and view the image. This eliminates the need for a user to download a separate Mobile Processing of Flash Lite application onto their phone. View the prototype GUI on your cellphone:

LivelyHoodContentUploaderGUI

The website is in the early stages. Currently just a huge logo, couple sentences, and a link. Over the next few months this will be growing into living place for user-generated maps and related media, so keep checking back!
www.livelyhood.us