Unfettered

Design Process

Acting as a faceless man, the audience can stand in the middle of the waterfall to interact with the water drops. When you touch the water drops, it will break into butterflies and fly away. One of the main characteristics of water is that it is the source of every living creature. So I implemented this concept into my project as it can nurture and breed some living things, which is the butterfly in my project. The water drops can be treated as cocoons of the butterfly. When you touch those water drops, you’ll break the cocoon and the butterfly will come out and fly away. It also has a meaning that without water, a caterpillar can never break the cocoon and become a butterfly. For the image of the audience, I created a really cute and faceless translucent avatar so that you can clearly see your movement and interaction with the water drops.

Techniques

PoseNet: I use PoseNet to detect the positions of body segments like eyes, nose, ears, shoulders, elbows, and wrists.
Butterfly: from “function” to “class”. Since the code for the butterfly was borrowed from an online open source, it was built as a “function” instead of a “class”. So professor helped me change the “function” into a class so that I can manipulate the butterfly with interaction.
Water drops: “class”. I created another “class” to display the water drops.
Sound effect: load a song in asset with “mousePressed”. By uploading a song file into the “asset”, I used the function “mousePressed” to loop the song in the project.
Trail effect: “createGraphics” to separate two layers. Because I wanted to create a trail effect for the water drops but not the avatar, I decided to use “createGraphics” to create two separate layers, putting the water drops on one layer and the avatar on another. In this way, I can change the opacity value for the background of the water drop layer and not affect the avatar.
Faceless avatar: “bezier” curve. I used “bezier” to create the avatar with aesthetically smooth curves.

PoseNet: I use PoseNet to detect the positions of body segments like eyes, nose, ears, shoulders, elbows, and wrists.
Butterfly: from “function” to “class”. Since the code for the butterfly was borrowed from an online open source, it was built as a “function” instead of a “class”. So professor helped me change the “function” into a class so that I can manipulate the butterfly with interaction.
Water drops: “class”. I created another “class” to display the water drops.
Sound effect: load a song in asset with “mousePressed”. By uploading a song file into the “asset”, I used the function “mousePressed” to loop the song in the project.
Trail effect: “createGraphics” to separate two layers. Because I wanted to create a trail effect for the water drops but not the avatar, I decided to use “createGraphics” to create two separate layers, putting the water drops on one layer and the avatar on another. In this way, I can change the opacity value for the background of the water drop layer and not affect the avatar.
Faceless avatar: “bezier” curve. I used “bezier” to create the avatar with aesthetically smooth curves.

PoseNet: I use PoseNet to detect the positions of body segments like eyes, nose, ears, shoulders, elbows, and wrists.
Butterfly: from “function” to “class”. Since the code for the butterfly was borrowed from an online open source, it was built as a “function” instead of a “class”. So professor helped me change the “function” into a class so that I can manipulate the butterfly with interaction.
Water drops: “class”. I created another “class” to display the water drops.
Sound effect: load a song in asset with “mousePressed”. By uploading a song file into the “asset”, I used the function “mousePressed” to loop the song in the project.
Trail effect: “createGraphics” to separate two layers. Because I wanted to create a trail effect for the water drops but not the avatar, I decided to use “createGraphics” to create two separate layers, putting the water drops on one layer and the avatar on another. In this way, I can change the opacity value for the background of the water drop layer and not affect the avatar.
Faceless avatar: “bezier” curve. I used “bezier” to create the avatar with aesthetically smooth curves.

See the full documentation: https://wp.nyu.edu/nyushanghai-sonnyyan/2020/11/05/mlni-midterm-project-aquatic-butterfly/