ADVANCE INTERACTIVE DESIGN - PROJECT 2

 

23/09/20 - 28/10/20 (Week 5 - Week 10)
Neoh Kar Yan (0339338)

Advance Interactive Design
Project 2 - Spark AR Filter

---

INSTRUCTIONS

---

PROJECT 2 - SPARK AR FILTER

For this project we were required to create a face tracking filter using Spark AR with the following requirements:

- using native ui button ( minimum 3 options for filter )
- using face tracker
- background replacement
- using face interaction patch

I had a few ideas in mind. Here is a list of my ideas:

• Superheroes & Villains
• Malaysian restaurant seating simulation (Mamak, chinese restaurant, Warung etc)
• Viral fashion/makeup trends (Basic, E-girl, Soft girl, Vintage, Dark Academia, etc)

I went with the first idea. The three superheroes/villain I went with was Joker, Wonderwoman, and Maleficient. I started out by gathering resources and references online. Then proceeded to photoshop them on the face mask asset provided by Spark AR.

For each of the character, I had different interactive ideas in mind:

Joker 

• When the face is frowning/sad, the makeup will follow suit to a sad face.
• When both eyes blink, spades/hearts/clubs/diamonds will pour out from the eyes.

Wonderwoman

• When the head nods downwards, wonder woman's headpiece will appear.
• When both eyes blink, fire particles will appear in the background.

Maleficient

• When both eyes blink, green light beams will shine through from the pupils.
• When the mouth opens, green bubble particles will appear in the background.

Fig 1.1: Joker face mask process

Fig 1.2: Wonder woman makeup process

To make the filters, I had to watch tutorials from Mr. Lun and a lot of other youtube tutorials.

Fig 1.3: Spark AR process #1

Fig 1.4: Spark AR process #2

Fig 1.5: Spark AR process #3

Fig 1.6: Eyelid patch

Fig 1.7: Face tracker patch

Fig 1.8: UI picker patch

Fig 1.9: Screen tap patch

Fig 1.10: Overall patch editor

Final Submission: