Advanced Interactive Design / Task 2: Interactive AR Application

 




7.11.2022 - 14.11.2022 (Week 11 - Week 12)
Audrey Gracia Djohari / 0348120
Advanced Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 2: Interactive AR Application



PROJECT 1: INTERACTIVE AR APPLICATION


Instruction

Augmented Reality Experience Filter

AR is the latest form of interactive design nowadays. Students are required to develop AR applications with AR interactivity that will detect user faces and expressions.

Software Requirement: Spark AR Studio

Helpful Videos

Fig. 1.0: Tutorial 1, Maru Studio (Youtube)

Fig. 1.1: Tutorial 2, Maru Studio (Youtube)

Fig. 1.2: Picker UI, Sulaiman Surani (Youtube)

System Errors & App Crash

So, something bad happened when I was working on my filter. The app crashed and couldn't load a single text. I have attached screenshots of what happened below. 


Fig. 2.0-2.1: Errors in my laptop

I was stuck because I was not familiar at all with this app so it was quite impossible for me to proceed like this. So I went to Taylor's Library to use the Mac Lab however turns out they didn't let me download anything new. And unfortunately, the Macs don't have Meta Spark Studio. Not gonna lie it left me hopeless.

I went back home and begged my housemate to lend me her laptop, thankfully she was so kind and willing to help me, however, she got many classes so I had to stop whenever she had class or assignments. It went smoothly at first, the app on her laptop was working normally, but suddenly, when I was half done with my filter, the same Wakandan language appeared again! 

Fig. 2.2: Errors in my friend's laptop

So basically, because the universe did not help me, I was forced to proceed to work with this alien language which makes no sense at all. I relied solely on Youtube videos to guide me through it all. If I wanted to search on some button, I had to type it and counted the row according to the Youtube video. To be honest, It felt like I was designing half blind. But surprisingly, I MANAGED TO FINISH THE FILTERRR YEAYY !! But if you want me to explain what I did,  I can't, because I truly have no idea what I was clicking.

Patch Editor

This is the flow in my Patch Editor board. Sorry, the app couldn't load the text.

Fig. 3.0: Overall Patch Flow (App is crashed so it cannot load any text)

Fig. 3.1: Instruction

Fig. 3.2: Flying Objects Animation Patches

Fig. 3.3: Fire animation & "Blow A Kiss" Gesture

Fig. 3.4: UI Picker (The Buttons with Number)

Posting Effects in Meta Hub

After I'm done with the filter design, I exported it as .arexport and posted it in Meta Hub.

Fig. 4.0: Filters on Instagram

Final Outcome

Finally, these are the filters for Nyala Candle (the imaginary candle shop). Basically, user can 'Tap' wherever they want to light up the candle, then they can blow it and the fire will die. I used the "Blow a Kiss" gesture to make this possible. Furthermore, the user can choose 3 filters by clicking the buttons below, then the candle and the flying objects will change. There's the bearry candle, bubble candle and rainbow candle.



Fig. 5.0: Nyala Candle Filter



FEEDBACK

WEEK 11:

General Feedback
An example of the very minimum needed to demonstrate- UI buttons to change appearance (can be a face mask, wearables, etc) + background. A step up would be adding some animation to the visuals. 




REFLECTION

Experience
At first, I was very intrigued by learning how to make a filter. But unfortunately, Meta Spark Studio wasn't as friendly as I hoped. The crash & errors really made me struggle so I did not really enjoy the working process. However, I would love to do it again as long as the app is better. I think this project made me feel cool because I can make my own filters now. It can be something to brag about. Lol.

Observation
I observed that "flow" is very important in filters. And designing that flow is not as fun as using the filters. Thank goodness there are so many Youtube videos about it because the patches were not as simple as it looks.
  
Findings
I learned that making filters is a huge business and marketing prospect and it's important for designers like me to learn about it. It would be useful for future projects and it also taught me more about flow.

Comments