Here are some screenshots from a user test with 12 year old children from a school in the Bronx. Each student was given twenty minutes to draw a map of their neighborhood using the current livelyhood applet.

George

John

Joseph

Mohammed

Mohammed 2

Navid

Launch here.

I made a lot of progress in Processing tonight.

In Draw mode, the user is prompted to sketch out their neighborhood and define the elements in it.

In Drag Mode, all elements freeze, movable boxes with deletion buttons form around each, and the key becomes an image and sketch display tool, which the user can move their mouse through horizontally to sift between various photos and sketches. Once they have chosen one, they can drag it out onto the map (function is partially working now). All sketches are stored as undefined–the user can redefine them when they drag them onto the map. Photos, when dragged out onto the map, form their own layer.

Lastly in Display mode, the user becomes an observer. The one interaction is scrolling over thumbnail images placed on the map and having them enlarge for viewing ( not currently functional yet ).

Now Livelyhood has a way to communicate what each element type is from a Key that will eventually display each permuation of a drawn element in a little box above its corresponding name. “Draw” more will work continue to use the drag and define approach of earlier versions, only the extra white boxes have been removed from that. Furthermore, in “Drag” mode, the user will be able to scroll through ( using the yellow arrows that pop up on mouse hover ) each permutation of a drawn element, and drag and stamp multiple copies of the element onto the map. Additionally the “x” and the “o” boxes next to the element box allow users to delete an element type or import a new one from a jpeg, which will be a way for users to place pictures onto their map. These pictures, like the drawn objects, will inherit the properties of each element type, so it will be possible to have an entire map composed of images or a combination of images and vectors. Also a new tenth element type, “Signs”, has been added to the menu. By dragging a sign onto a map, users will be able to place floating text commentary. I’ve also added parameters button, which will activate a menu of slides, controlling things like the type of interactions and behaviors of the people and cars, and time permitting, weather–yes, precipitation should occur periodically. The key should be fully implemented and working within the next week.

The above screenshots are from a user test I conducted with subject Mel, age 26. Some helpful comments:

“I like the flexibility of the greenery and of the general brown things category [ homes, factories, etc. ]”

“An area for improvement would be to eliminate the obstructive lines that occur when I draw a windmill and my end-point is connected to my start-point, when it’s unintentional.”

“I would be cool if some kind of object would stay within the water, so that the user could represent a boat.”

“It would be cool if cars bounced off the blocks.”

What can be done to make objects look more like their real world counterparts?

“Eliminating lines between start and end-points would create general flexibility, so that the user can add detail to anything they draw.”

How do you feel about the automatic resize function?

“Sometimes its helpful, sometimes its not helpful, in which case you can improvise. I used grass to cover up the water, etc.”

Try it for yourself in-browser here.

The Drawing tool is close to completion. I now have it so that each element has a size limit, and if the user exceeds this, the element is scaled down to the maximum allowed size. This prevents trees, for instance, from taking up the entire map. Also certain elements, like blocks, reduce the number of points when scaled, to make them look more geometric and also conserve processing power. The drew the above sketch on a napkin, showing the next direction to go with the project. There will be layers for different types of actions on the map–namely viewing, photo management, and parameter adjusting ( see icons at bottom left ). There will also be icons for map editing and text comments ( not shown currently). These will pop up when the user brings their mouse to the based of the applet.

- Now using Vector3D Class.

- Object-oriented elements with Array Lists.

- Trees spawn bezier curve birds.

- sparkling Water added to list of element definitions.

- Larger map with paper background.

Week of 4/6: Applet Development Continued

-         Convert existing applet to vectors.

-         Have all movement stop in draw mode.

-         Reintroduce Game Manager.

-         Array Lists for each element type, complete with unique properties:

o       Blocks are composed of thick, black lines; become quadrangles based on corner detection function; can not overlap each other, are spaced out from each other evenly to form roads, and contains structures.

o       Homes are structures composed of medium, brown lines; have a “Zzz” at a mean coordinate location of their array make-up; attract people based on size; can not overlap each other, and can only be placed in blocks.

o       Shops and factories are structures similar to homes, containing “$” and a particle smokestack based on the highest Y point in an array, respectively. 

o       Trees are composed of this wavering lines–a result of noise; generate a single bird that flies around close to the tree; attract people; can overlap each other, are auto-sized if they exceed a certain size and can only be placed on blocks.

o       People are composed of thin, magenta lines; are attracted to the edges of blocks and other people; cause structures to show activity, when in close proximity; are auto-sized if they exceed a certain size, and are limited to a population of 10.

o       Cars are similar to people only they colored gold, avoid each other, and move between blocks.

o       Other elements are colored purple, are stationary, and have no affect on their environment.

-         Elements can be dragged and deleted.

-         Elements are stored and recalled within stamp GUI, which is activated with a single mouse click on the applet.

Week of 4/13: Applet Refined and Tested

-         Work on Usability of GUI.

-         Test with ITP students and VEMNY kids.

-         Ask suggestions for improvement

-         Write up detailed reports of your findings.

-         Continue Programming.

Week of 4/20: Applet Completed

-         Applet completed and placed on Website.

-         Begin writing thesis paper.

-         Prepare for presentation.

-         Refine Power Point.

Week of 4/27

-         Finish thesis paper.

-         Finish Power Point.

-         Finish presentation preparation.

Week of 5/4

-         Thesis presentation.

-         Prepare for show by finalizing installation plans, creating additional documentation.

Week of 5/11

-         Show.

This applet is a test of the drawn-then-define approach for Livelyhood’s GUI. Mouse down to scribble, then release it into the environment. Repeat this action several times. Shorter sketches are brighter and move faster, longer sketches are darker and move slower. Due to an error, faster scribbles gradually morph into lighting bolts!

Launch Squiggle Tank.

Description

LivelyHood allows kids to be active participants in urban planning, by providing a web application where a child draws a map of their neighborhood, complete with roads, structures, and people, then situates relevant photos and text onto a separate layer of the map via cellphone. These map-based blogs are continually developed by the child and eventually sent to community representatives.

Personal Statement

Stefanie Wuschitz’s Bed Stuy Comic Project, created in 2006, involved at-risk youth reflecting on their own experiences, through hand-drawn comics, situated onto a map.http://www.grenzartikel.com/projects.htm#thumbFor my thesis, I envisioned a related project to this, involving even more user-generated content, evolved over time by the kids, and then sent out to the local powers at be, who have say when it comes to urban planning, the idea being that through these officials, kids could have a voice in city planning.

Background

Asked several ITP students to create a map of their own community using a set of colored markers and paper, which influenced the element vocabulary and color scheme of the resulting applet. Had a classroom of kids test and critique the applet, website and mobile uploader.

Audience

Kids, specifically ages 9 - 12, for creating the maps. Adults, specifically those who value the kid’s contributions and can act on their behalf, for viewing the maps.

User Scenario

The presentation for show is a simplified, single-user scenario of the implementation described below. Rather than focusing on the social aspects and effects of the project, it will instead showcases the graphical user interface and mobile phone involvement with the LivelyHood applet.In this scenario a user walks up to podium, on which a Wacom tablet is situated. In front of the podium, on the floor, is a blank canvas, on which the applet is displayed via ceiling-mounted projector. The user draws into the applet using the stylus, and creates a simple map. Afterwards they are prompted to use their own phone, or the Nokia N95 provided, to place mobile photos onto the map. Finally, for more information, off to the side is a basic computer setup, with the LivelyHood site on display.

Implementation

In creating this application in Processing, I wanted to implement programming concepts, such as inheritance, particles systems, and flocking behavior, that would make the application more than just a paint tool, so that the world would come to life on the screen. Structures can be copied with ease, factories emit smoke, people tend to congregate along the edges of blocks.Identifying the mess of drawing tools in programs like Photoshop and Flash, I was also interested in making a stealth graphical interface, that would allow for possibility and only make itself available as needed. In a process which I refer to as “draw then define,” the user sketches into a an applet, and upon release of the mouse, the GUI makes itself visible, presenting the user with a table of options in which they can declare the element-type, which in-turn affects things like color and behavior of the element on the map, and also allows the user to situate copies of previously drawn structures.Once the elements are in place a user would save changes and leave their map on display in a social site, where other users could view the maps and offer up commentary. A user could login, revisit and add more content to the map whenever they choose. By accessing the LivelyHood Site via cellphone, users would also be able to place photos and text on their maps. This phase could be accomplished out in the physical community, as opposed to in front of a computer, thus giving users the benefit of being in front of the very objects that they are depicting or commenting on.

References

“Turtles, Termites, and Traffic Jams: Explorations in Massively Parallel Microworlds” by Mitchel Resnick, “The Computational Beauty of Nature: Computer Explorations of Fractals, Chaos, Complex Systems, and Adaptation” by Gary William Flake, “Catching the Big Fish: Meditation, Consciousness, and Creativity” by David Lynch, and “Persuasive Games” by Ian Bogost.