Tim Stutts: ITP Project Blog

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

Plant visualization where each bezier curve spawns ten more from the tip, topped off with an ellipse for the sprout effect. View it here.

Launch here.

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

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.

A variation on the Zoetrope, where sequential images form interlocking gears. Mouse Y controls the speed.  View it here.