Class 10 Intro to Comp Media – Proposal “Collage Character Portrait”

Project Summary 

Ideal Scenario

I’m hoping to eventually design a large projected interaction. People can playfully answer “What main character are you in a novel?” People would drag images of minor characters, similes and metaphors to the outline of their figure, as a way of defining themselves by what surrounds them. The interaction would take a few steps:

  • Enter a photobooth-like environment
  • Snap a photo of their whole body, which is turned into a silhouette. This is projected on a wall.
  • Drag from a “pile” of various characters/objects at the base of the projection to surround their figure’s outline.
  • At the end of the interaction, people can print out their picture and take it home with them. Or post online. Etc.

Prototype for Now

But for now, I’ll make a simple prototype for my Intro to Computational Media final…. This will include being able to use a laptop’s camera to capture a portrait and turn it into black and white (or other colors), drag objects to to your portrait’s outline with the mouse or possibly with touch, and then finally email yourself the photo or post it online.

Context and Audience

This is definitely for fun, is interactive, and is meant to give people a moment to consider how what is outside their bodies can define their identities. (Which is in great contrast to my Intro to Physical Computing project, which externalizes what’s going on in people’s heads. You can see more about that project over here.)


Looking forward to redrawing these sketches next time…!

This is my “Prototype for Now”



Here is my Ideal Scenario

Later on, I hope to build it further into this type of interaction:




Why? And Inspirations

This idea is based on a digital humanities project I contributed to this summer. You can learn more about it below. I’m interested in how people or characters are defined in creative ways by objects or the people around them.

Background (not necessary to read unless you’re really interested! Mostly for me to reference later.)

This digital humanities project was led by my friends Sarah Berkowitz and James Ascher at University of Virginia. They used textual analysis and github to explore the nature of character in 19th century literature and new practices of digital transcription in the 21st century. Their project focused on Characters, the second volume of a book called Genuine Remains by Samuel Butler, a 19th century author in England.  Each chapter in the book is a brief series of “jokes” about a stereotypical person, such as “A Wooer, ” “An Astrologer,” and a “Corrupt Judge”. The descriptions are biting, witty, and act a bit like a dictionary of people. You can see online the transcription and analysis here on this website and over here on Github.

While working on the project, I was struck that only men were featured as main characters, which is unsurprisingly for the time.  But the absence of women made us wonder even further about ALL the “invisible ink” minor characters mentioned in each chapter. How do these passing characters add definition and meaning to the main character?   Can these “invisible” characters be made more visible?

Sarah did some amazing analysis and a group of chapters to categorize “non-specific humans,” “proper names,” “mythological creatures,” and “animals”.  I’ve been inspired to take this type of analysis and let people play with it in a visual and fun way.



Source Material

I need more references, so please suggest them! I did find:

  • This interactive window projection by NuFormer, a group in the Netherlands, came up in my google search. I like how it turns your body into another texture and outline.


  • This pinterest collection of “interactive wall installations” is helpful.

  • There I found this interesting advocacy intallation against child abuse.  It seems to just use projection from the back to turn your body into a black shadow.


  • This is also cool:



For my simple prototype, I’ll use:

  • The Coding Train videos on how to use a laptop’s camera to create portraits and modify pixels to become black and white, or whatever colors I choose.
  • A library called matter.js that Dan Shiffman recommended, which is a 2D physics engine for the web. I can use it to mimic the effect of a “pile of trash” of objects on the ground, that people can “pick up” and attach to the outside of their portrait.


Collecting ideas for a title and 1-sentence description

I am literally collecting ideas. Let me know!

Project Planning

I will be making a spread sheet to give myself a certain number of hours each week until the finals, so that I’m forced to keep this manageable.


November 15

November 22 (no class because of Thanksgiving)

November 29

December 6


User Testing of Interface/Environment

I’ll also be doing a few user tests with just paper and pencils, to understand if there’s anything elegantly simple I can do to make the interaction more compelling and easier to understand.

I also need to ask people what metaphors or similes they would describe themselves as, so I can be sure to have a variety of


I need more code references for the behavior of snapping something to the outline of a shape. I didn’t get far online. Otherwise I’ll just use the mouse to move the collaged objects around, and some very suggestive user interface to insist the user put them around their outline…

I also need to find out how to drag a shape next to another, so that the one is partially hidden behind the other. In my mind, the outline of the figure is the first layer, and shapes are a little behind the figure as a second layer.