Advanced Interactive Design

November 19, 2020

Advanced Interactive Design - Project 2

07/10/2020 - 4/11/2020 (Week 7-Week 11)
Chan Qian Hui 0334447
Advanced Interactive Design
Project 2

Instructions

Project 2

Research
For my project 2, I wanted to explore as many different features as possible instead of reusing the same elements in each filter. My overall theme would be dreamy, I also want to add touchup on the faces but make it as subtle as possible so the user looks good on screen.

Process

Native UI Button
For the UI button, I used only 3 options and using value and equals to so that each button can link to as many elements as I want to. It is also easier to organize whenever I want to change the icons to swap the order since the "equals" patch acts as a switch for connection.

Fig 1.0 Native UI patch

Skin Smoothing and lipstick

Fig 1.1 Skin smoothing

Fig 1.2 Creating lipstick asset

Fig 1.3 adding lipstick asset

Filter #1
For filter #1, I included an animated texture on face and a fixed background.

Fig 2.0 Full Patch for Filter #1

Animated Texture on face: Directional Light
I added 3 different directional light that wraps around the face for the first filter. The first two lights are just solid metallic lights that rotate around the face mesh while the third one follows a face texture so it creates a image on the face.

Fig 2.1 Directional Light on face

Fig 2.2 Creating face assets

Fig 2.3 Adding face mesh

Static Background (alpha camera segmentation)
For the background of first filter, I used person segmentation texture and camera texture on alpha for background so the background will automatically disappear where the camera touches.

Fig 2.4 Creating background in Photoshop

Fig 2.5 Adding background (camera segmentation)

I also added a feature which enables user to tap on screen to remove the background whenever they like it

Fig 2.6 Screen tap patch

Filter #2

For filter #2, I used a fixed texture and directional light on face while the background I used particle emitter effect. I also added a mouth open feature so that particle would emit out when user open mouth.

Fig 3.0 Full Patch for Filter #2

Face mesh texture and directional light:
For this filter, the face texture is simple and the assets were created in photoshop

Fig 3.1 Creating face asset

Fig 3.2 Adding face mesh

Particle Emitter Background:
For the background emitter, a different approach had to be used compared to the first on since i cant edit directly on the material. Instead I would have to create different layers to ensure that the user camera is always at the front and the emitter is at the back

Fig 3.3 adding particle emitter

The emitter had to use "line" type instead of the others to ensure that it lays on the same screen with user and not go out of the layer boundary. Then by segmenting the camera onto the front layer and emitter to the back, the emitter would then automatically be placed behind the user.

Fig 3.4 Layer segmentation for particle emitter

Open Mouth Interaction:
For the open mouth interaction, I created a particle emitter and this time i used point type so the particles would come out from singular point. I also need to move the pivot also so the emitter comes out from the correct position.