Advanced Interactive Design - Project 2
Tamara Audrey Saputra (0335846)
Advanced Interactive Design
Project 2
Instruction
Project 2 - Augmented Reality Application Application
Week 8 | Proposal
In this project, we have to make an AR using Spark AR Studio. The work should include features such as:
- using native UI button ( 3 options for filter )
- using face tracker
- background replacement
Therefore, before proceeding with the work I proposed the idea first to Mr. Lun.
- using native UI button ( 3 options for filter )
- using face tracker
- background replacement
Therefore, before proceeding with the work I proposed the idea first to Mr. Lun.
After getting a green light form Mr.Lun, I proceed with sketching the designs of the masks.
Week 9 | Making Assets
I first find a portrait photo to act as a head reference for my masks.
fig 1: portrait for sketching guide
From there, I did all of the three design sketches on top of it to get a rough overall idea.
fig 2: Papua Filter Sketch
fig 2: Bali Filter Sketch
fig 4: Magelang Filter Sketch
I then export the sketch onto a new canvas and start outlining the sketch and make some adjustments here and there as well as adding all of the details. After having the outlined version where I can now visualize it clearly, I continued with coloring the headpieces and its decoration.
fig 5: Papua Headpiece Process
fig 6: Magelang Headpiece Process
fig 7: Bali Headpiece Process
fig 8: Bali Head Decor Process
fig 9: Papua Head Decor Process
fig 10: Magelang Head Decor Process
As for the face make-up, I searched for the Spark AR Studio's face mesh so that I can have the design correctly placed where it's supposed to be when it's scanned on a person's face.
fig 11: Face make-up/paint process
And lastly, for the background replacement, I made a background with a night sky that I feel could bring out the rich colors of the design even more.
fig 12: Background process
I did all of the assets making in Procreate. Below is the time-lapse for the three headpieces that I did. The decorations are not shown here as it is done on a different document.
I first find a portrait photo to act as a head reference for my masks.
From there, I did all of the three design sketches on top of it to get a rough overall idea.
I then export the sketch onto a new canvas and start outlining the sketch and make some adjustments here and there as well as adding all of the details. After having the outlined version where I can now visualize it clearly, I continued with coloring the headpieces and its decoration.
As for the face make-up, I searched for the Spark AR Studio's face mesh so that I can have the design correctly placed where it's supposed to be when it's scanned on a person's face.
And lastly, for the background replacement, I made a background with a night sky that I feel could bring out the rich colors of the design even more.
I did all of the assets making in Procreate. Below is the time-lapse for the three headpieces that I did. The decorations are not shown here as it is done on a different document.
 |
| fig 1: portrait for sketching guide |
From there, I did all of the three design sketches on top of it to get a rough overall idea.
 |
| fig 2: Papua Filter Sketch |
|
| fig 2: Bali Filter Sketch |
 |
| fig 4: Magelang Filter Sketch |
I then export the sketch onto a new canvas and start outlining the sketch and make some adjustments here and there as well as adding all of the details. After having the outlined version where I can now visualize it clearly, I continued with coloring the headpieces and its decoration.
 |
| fig 5: Papua Headpiece Process |
 |
| fig 6: Magelang Headpiece Process |
 |
| fig 7: Bali Headpiece Process |
 |
| fig 8: Bali Head Decor Process |
 |
| fig 9: Papua Head Decor Process |
 |
| fig 10: Magelang Head Decor Process |
As for the face make-up, I searched for the Spark AR Studio's face mesh so that I can have the design correctly placed where it's supposed to be when it's scanned on a person's face.
 |
| fig 11: Face make-up/paint process |
And lastly, for the background replacement, I made a background with a night sky that I feel could bring out the rich colors of the design even more.
 |
| fig 12: Background process |
I did all of the assets making in Procreate. Below is the time-lapse for the three headpieces that I did. The decorations are not shown here as it is done on a different document.
Week 10 | Studio AR Spark
After everything is done, I exported the assets to Spark AR Studio. There, I placed the face-paints on a face-mesh layer and the headpieces on plane layers. And all of them are under the face-tracker layer so that it can detect faces.
 |
| fig 13: AR Spark Process |
As part of the requirement requires native UI picker, here is the patches that I did for it. It allows the user to change between the designs by clicking on the three buttons at the bottom.
 |
| fig 14: Patches |
While previewing it on the Spark AR Studio, there we lots of iterations done on the designs. Especially, on the minor details of the face mask where I sometimes feel something is too big or it's not in the right place when it is wrapped on the face.
Submission
Here is the preview of the AR filter when used on the phone.
Youtube link: https://youtu.be/PYsivkRJlIw
Comments
Post a Comment