Documentation

2025.3.12 Final Version

In-class user testing observations

During the in-class user testing session, I noticed that the main issue was that the instructions and the user interface weren’t clear enough. I had to provide instructions and guide the users through their exploration frequently. It is promising, however, that people are generally interested in exploring the different effects and producing many interesting results. Thus, I focused primarily on optimizing user interaction and only making minor tweaks to the effects themselves.

Design refinements

First, I decided to redesign the user interface to make it physical and more intuitive by sticking stickers to signify the function of a particular key.

For the keys that apply an artistic effect(inverse, posterize, noise, duotone, and colorize), the design intends to emphasize and visualize what each effect achieves. The more functional keys(export, reset, capture, and arrow keys) are outlined in black to highlight their importance and utility purpose. There are also comments outlined in black dashes that explain each key’s function to clarify any remaining ambiguity.

Because of the new user interface, I was able to remove all the buttons and move the canvas to the center of the screen.

Another critical but less visible adjustment is changes to how the posterize and duotone functions work.

Before, I merely declared certain fixed thresholds that determined which color the pixel should be categorized under.,, page_asset/img5.png Now, the thresholds depend on the quantiles so that the pixels will necessarily be distributed among each color evenly, even if they are all very similar. This change prevents all the pixels in an image from turning into one color for falling under a specific fixed threshold.,, page_asset/img6.png

Additional observations

The new observation matched my expectations. The instructions on the user interface are clear enough that I don’t need to provide additional information to help the users interact with the photo booth. I also found it exciting that they were all interested in experimentation and enjoyed playing with the different effects.

2025.3.5 Prototype

Intervention

Rather than thinking about constraints, I first wanted to enlarge the effects of the user’s creativity to enable more possibilities with the images. This object is achieved by allowing them to create a collage of 9(3*3) different photographs. Each photograph is independent and can be retaken if the previous image is unsatisfactory. I also added numerous effects(grain, colorize, posterize, inverse, and duotone), which can be applied to an image by hovering above and clicking the image after selecting the respective effect.

The constraint is that each effect’s result is randomized and intended to produce different images. I added the randomness to restrict the user’s ability so that the results are unexpected, making the entire experience exploratory and exciting. For the final version, I wish to add more interventions with regards to the trigger of each effects so they are not simply buttons to make the interaction more engaging and diverse.

Inspiration

The main inspiration for this project in terms of the technical aspect comes from a previous project that similarly explores around representing pixels in images with p5.js objects: Animated Images Experiment

With regards to the creative and artistic aspects, it is inspired by German Photographer Rolf Behme’s works and specifically how he plays with collages that feature numerous photographs:

page_asset/img10.png, page_asset/img11.png

Process

Like the Animated Images Experiment, I created a class of bead objects representing a pixel on an image. Each bead contains a color and a position. What is different for this project is that the points overlap, so the entire canvas will be covered.

Next, I wanted to store all the beads that make up an image in a 2D-Array for each image so that an image can be saved in p5.js. I thus created a Pic class of objects that represented each of the 3*3=9 images. Each pic object contains a 2D array of beads that stores its pixels and a position object that indicates where it is located on the canvas. The Pic class includes two most important functions: picSet() and picShow(). picSet() sets the 2D array of beads according to the pixels of an image when a photograph is taken to store the image. picShow() then draws the stored image onto the canvas.

An array of 3*3 Pic objects is created to make a collage of photographs. When the mouse hovers above an image and clicks on it, the picSet() and picShow() functions are activated to redraw the moment the photograph was taken. Before picSet() is activated to store an image, the video of the camera’s view is played.

Lastly, I added numerous effects that manipulate how each individual bead by interfering with the show() function of the Bead class.

User Testing Plan & Questions

For next class, I want to test how people interact and utilize the different effects to create interesting collages. This knowledge could help me develop more interesting effects for the final version. In addition, I would like to survey people about how other triggers can be implemented to replace the buttons that I have right now.

Questions

What might be other effects that people might be interested in? Could I also implement effects that distort the images in different ways instead of only changing the color of the pixels? Should I add more effects or reduce the amount of effects to make the controls more digestible?

How can I replace buttons that users click on to change the effect that is to be applied to an image? Could they be physical triggers, using touch, sound, or light? Or should it be like a game?