Advanced Interactive Design / Project 2

November 27, 2022

Advanced Interactive Design / Project 2

12.10.2022 - 20.11.2022 (Week 10 - 12)
Lew Se Win / 0347637 / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Project 2: Interactive AR Application

TUTORIAL

Tutorial classes' progress & outcome

Project 2: Interactive AR Application

For this project, we are required to create Augmented Reality Experience Filter using Spark AR Studio (Meta AR Studio).

Continuing from project 1, I would like to create an AR filter related to Malaysia's general election (GE15). The first thought that came to mind was to make a sticker face filter, reusing the sticker shop idea from project 1.

Figure 1.1 References

Before I start doing anything on Spark AR, I designed all the stickers in Adobe Illustrator.

Figure 1.2 Progress

After that, I downloaded the facemesh reference from the internet in order to place the stickers around the face more accurately. I arrange the placement of stickers in Adobe Photoshop.

Figure 1.3 Sticker placing progress

Figure 1.4 Sticker placement #1

Figure 1.5 Sticker placement #2

Figure 1.6 Sticker placement #3 (final)

Later on, I transferred it to Spark AR and start working in Spark AR following online tutorials.

Figure 2.0 Face tracker in Spark AR

After the face sticker, I decided to add rotating text on the forehead. I first created the asset in illustrator.

Figure 2.1 "Every Vote Counts" text asset

First, I created a 3D cylinder in Spark AR. Following that, I added patches to allow text rotation in Spark AR.

Figure 2.2 Rotating text

Figure 2.3 Rotating text patch editor

Next, I created the frame for this filter.

Figure 2.4 Frame

I added animation to the confetti and the "Malaysia" word at the bottom. After that, I decided to only activate the confetti after a tap on screen. This is because the confetti will make the screen look overcrowded.

Figure 2.5 Progress (Tap to change)

Figure 2.6 Tap to change patch editor

Following that, many people would like to take pictures with their purple/black finger, indicating that they have voted, on election day. As a result, my idea is to include a hand tracker that allows users to take a photo with their finger and a sticker that indicates they voted. The sticker could also allow postal voters to take a photo of themselves with the purple/black finger, which they would not be able to experience on election day.

Figure 3.0 Hand tracker

I then have another interactive and playable idea, which is to allow the voting animation to play when the mouth opens. With that, I created the assets in Illustrator.

Figure 4.0 Voting Animation Assets

My first thought is to play the animation only once when the mouth is open. Despite watching several tutorials, I was only able to make the animation play and stop when the mouth opened.

Figure 4.1 Voting Animation (mouth open)