Dress of Life

Please Click here to see full documentation, blog contains main aspects, full document contains all details.

Press Kit:

Dress of Life

By Mika Hirata, Katrina Larson, Ziyi Wang, Vivian Wong, Anran Zhou

‘Dress of Life’ is an installation piece that depicts a brief and abstract history of evolution. Utilizing projection mapping, animations, and sound, an awe-inspiring environment is created that draws the viewer in. As the animations are projected on a dress form, the viewer is compelled to contemplate and recognize their place in the world as a part of evolution, not as some higher being. The dress is made with scraps of paper that emulate nature, and features elements that are inspired by rivers, flowers, and tree bark. The front of the dress displays the abstract representation of evolution, while the back displays the animations in reverse to represent how life continues to cycle. We hope that this installation will help the audience realize that they are just a stop in evolution, rather than the end of it.

Dress of Life Full Video

Dress of Life – Front Only Video

24992615_10215902542584766_567062989_o  24623665_10215902542504764_898719214_o  screen-shot-2017-12-07-at-11-47-14-pm

Technical Documentation

Parts/Equipment List:

  • Paper
  • Glue gun
  • Two Projectors
  • Two Laptops


  • P5.js
  • Adobe Premiere Pro

Code: (All links in coding process documentation)

Design Files / Assets: Link to master folder

All assets and files can be found in this master folder.

Context Summary:

The Dress of Life is an art installation that explores the human connection with nature by displaying basic evolutionary history on a dress. Using animation and code, we project an abstract depiction of evolution on a dress which connects humans to evolution and reminds us that we are the result of all of this. Essentially, we wear the history of evolution on our backs. In this piece, we combined a traditional and new artistic media, coded animation and projection mapping, with fashion design. This combination relates to the concept of evolution, showing both old and new methods of creating.

There are several artists working in spaces similar to ‘The Dress of Life’. Starting with the base of our piece, we were inspired by Laura Baruel’s paper dresses from an exhibit called Rococo-Mania. Baruel utilized paper and fabric to create ornate and structured dresses that represented different natural elements. She merged nature and architecture in the sculptures and created extravagant silhouettes, but by exclusively using white materials, the audience is forced to focus on the textures and shapes of the dress. While designing the dress, we took inspiration from Baruel’s structured elements and her use of texture. Rather than using white materials to guide the viewer’s’ eye, we used it for its efficacy as a projection surface […]

Click here to see full documentation for full context summary.

Process Journal

Projection Process
1. Challenges

At first, we were trying to use some professional projection mapping software to create a more advanced and interactive projection mapping experience, so we tried three softwares; Madmapper, VPT 7, and Heavy M. We were extremely limited when using the free version of these softwares and there were compatibility issues with VPT 7. These softwares did not allow us to create more than one animation, hence we chose to simply integrate our animations as a video file and project it for now, and once we have a licence to Madmapper, we would continue our project and do more exploration.

 2. Solutions

Trial 1: After getting some advice from Haru, Adam and Kate, we tried mapping the image on the wall and people by using Adobe Illustrator (using Mask function). Through this experimentation we learned more about our limitations. We learned that the images cannot be projected onto dark objects or clothing.

Trial 2: We changed the image into 4K image, however the resolution of the projection mapping was not good enough to show the difference between regular and 4K resolution image.

Trial 3: We used an animation (screen capture of p5.js code created in Experiment 3) and cropped the animation into a dress shape by using Adobe Illustrator and Premiere. The moving object on the human body was very interesting to watch.

img_5641-2 img_5642-2
Left: First attempt to project a mask of dress shape using Photoshop and a projector. Right: Projection results onto a person.

Coding Process – details in full document.

screen-shot-2017-12-07-at-11-53-24-pmscreen-shot-2017-12-07-at-11-53-30-pmscreen-shot-2017-12-07-at-11-53-56-pmscreen-shot-2017-12-07-at-1-04-42-am screen-shot-2017-12-07-at-11-54-54-pmscreen-shot-2017-12-07-at-11-54-59-pmscreen-shot-2017-12-07-at-11-55-06-pmscreen-shot-2017-12-07-at-11-55-14-pm

Final Commented Code:

All Animation Videos:

The projected video for the front of the dress:

The projected video for the back of the dress:

Dress Design Process

screen-shot-2017-12-07-at-11-45-47-pm screen-shot-2017-12-07-at-11-45-54-pm
We started with a base that would hold the shape, and then add texture and designs on it. After that we added crumpled paper for a general surface. The effect fit to our concept and also create an interesting look.   

screen-shot-2017-12-07-at-11-45-15-pm screen-shot-2017-12-07-at-11-45-24-pm
After the base is finished, we added more and more pieces on. The patterns on the dress are abstracted representation of nature and life. The flowers, petals, long stripe and rounded shape all speaks to our concept.

screen-shot-2017-12-07-at-11-45-35-pm screen-shot-2017-12-07-at-11-45-40-pm
After finished the form of the dress, we tested projection onto the dress. We tried projecting our animations and see which works. Based on that we changed some of our designs and added more.

Initial Concept: With this being a dress of life, we wanted to make the dress look and feel natural, so our dress would need to be soft and flowy and be made of organic forms.

Ideas and inspirations: We want the nature parts to be abstractive and shown as patterns on the dress, hoping to create a decaying effect on the bottom, as a way of showing a procedure in the life cycle. We also thought about adding paper folding techniques, in order to create a flat and clean surface, which might be better for projection.

screen-shot-2017-12-08-at-12-03-55-am screen-shot-2017-12-08-at-12-04-02-am
Since we were almost done with creating dress, we started mapping the patterns on the dress in a dark room.

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-12-04-22-50-15 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-12-04-22-55-45
To map the patterns on the dress, we created a mask of the dress by tracing the outer lines with using Adobe Illustrator.

Combined the patterns that we created with using p5.js by using Adobe Premiere Pro. To crop the animations in the dress shape, we used “track matt key”. Also we added a fading effect at the end of each animations.

img_0098 img_0107 img_0101
Another trial of using the projectors to map the patters on the dress. This time, we used to projector to project the patterns on the both side back and front., Also our patterns were very clear on the dress even though the room was not dark.

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-12-06-22-29-40 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-12-06-22-29-21 screen-shot-2017-12-07-at-11-47-14-pm
Our last trial in an absolutely dark room with two projectors to map the patterns on the front and the backside of the dress with a music.  



https://www.youtube.com/watch?v=kjPTQLgGpq8 Interstellar: A Trip Hop Mix, Confused Bi-Product of a Misinformed Culture


Toftegaard, Kirsten. “Rokoko-Mania.” Laura Baruël, 2011, www.baruel.dk/filter/Projects/3451239.

This article provided us with an artist statement and commentary regarding Laura Baruel’s work, one of the most influential artists for the dress design. The natural elements that she created using paper inspired us and gave us a guideline for what is possible with paper.

Karayiannis, A. Lapanupat, P. Zhu, M. “Evolutionary Design.” Nature Inspired Design, 2009, http://www.cs.bham.ac.uk/~rjh/courses/NatureInspiredDesign/2009-10/StudentWork/Group4/EvoArt.pdf.

In this article, the basics of evolutionary design were explored. They discussed the fundamentals of this art and how it uses similar terminology to genetics and evolutionary studies.

Cope, Greg. “Evolutionary Art Using A Genetic Algorithm.” Algosome, www.algosome.com/articles/genetic-algorithm-evolution-art.html.

Another article that provided a summary of genetic algorithms in programming. This type of programming inspired our ‘tree’ style animation.

Hart, Matthew. “Projection Mapping On Clothes Is Now Possible, Great For Making Memes.” Nerdist, October 2016, https://nerdist.com/projection-mapping-on-clothes-is-now-possible-great-for-making-memes/

This was a more casual article in a news format. It showcased the places that we could eventually go with projection mapping. The researchers featured were able to have the projection keep a constant position on a moving fabric.

Kestecher, Alexa. “Couture Fairy Tale.” Creators, July 2012, https://creators.vice.com/en_us/article/z4yjva/designer-franck-sorbier-projects-an-haute-couture-fairy-tale.

Similar to our design, the designer featured in this article used dresses as a screen for projections. He used both his dress and the surrounding area as projection surfaces to create an environment that conveyed a story. This all encompassing projection mapping is an inspiration for where we could take this project in the future.


This entry was posted in Experiment 4. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

You must be logged in to post a comment.

Use of this service is governed by the IT Acceptable Use and Web Technologies policies.
Privacy Notice: It is possible for your name, e-mail address, and/or student/staff/faculty UserID to be publicly revealed if you choose to use OCAD University Blogs.