Tim Stutts: ITP Project Blog

Check it out at www.livelyhood.us

Note: forms and links are set up at this time.

I created this model in Processing to demonstrate the exponential property of recursion. Click here to see it in motion.

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

ITP student Sinan Ascioglu has recently launched a site for users of Processing to share and critique each others creations. I’ve already uploaded quite a few of my own applets. This site should serve ITP and related communities well.

http://openprocessing.org/

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

In the recent years, Google Maps and related initiatives have laid the framework for web-based mapping to a degree where civil infrastructure can be superimposed over satellite images, with an abundance of data points, three-dimensional representations of urban areas, and even ground-level photographs of city streets. For those who aim to explore maps through movement, technologies such as Global Positioning System (GPS) and wifi triangulation are simultaneously solving the issue of determining location for users within a navigating, physical space. Explore maps from home, on vehicle or foot—your choice.

A newfound sense of location awareness has changed the way we relate to a world, where traveling to places or making contact with fellow humans was once only the result of coincidence or carefully planned encounter. We can now put down our guidebooks and printouts, pick up our smart phones and PDAs, and chart a course on the go.

As location-based technologies become accessible to developers outside of the corporations in which they were created, we are also witnessing a number of innovations. OnNYCturf.org, with funding from the Pay Pal donations of transit-conscious users, has taken the Google Maps API and placed onto it the New York City subway system. Similar efforts are arising all the time, connecting and directing us in ways that continually emphasize and define a complex physicality, of which we are all a part.

It would be accurate to say that we are well on our way to being covered in terms of the physical respects to mapping and navigation, but it is also important to consider the subjective interpretations of these very same spaces. We can label on a physical mapping application, for instance, that the distance between point A and point B by car is 1.2 Miles. We can even find a Japanese restaurant along that route that’s open until 10pm, and furthermore read a four star review by a patron that also lists their favorite sake, while noting a second review that gives the same restaurant two stars and says, “Don’t try it.”

The review superimposed over a physical map is certainly a move in the direction of the subjective, though what if this model could be taken a step further, to allow the user to affect the map itself, by drawing out and notating a neighborhood based on their own perceptions space and distance. By using their own unique set of iconography, photographic montage, floating text commentary, even moving objects—that is the aim of Livelyhood. Such a tool would no doubt prove to be powerful in terms of what it could express for the user, and for that matter, to other users involved in the same social network. Picture several maps created by children in the same impoverished neighborhood, sighting a particular block as being avoided or dangerous, and the desire for action instilled in an elected city official discovering the correlation. In time psycho-geography can have a place in urban planning.

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 )

This video demonstrates an applet where a user draws a sketch, then defines it as a Factory, whereupon it generates a particle system smoke effect from the highest ( or in the case of Processing, the lowest) Y coordinates in the array of points drawn. Watch video here.

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