Advanced Interactive Design - Project 2

27/04/21 - 31/06/21 (Week 5 - Week 10)

Atiqah Farzana Binti Syalleh Karimyee (0336740)
Advanced Interactive Design
Project 2

---

LECTURE NOTES

Week 5: Spark AR Basics

Mr. Lun taught us a new software, Spark AR, which we will be using for our project 2 and final project.

Week 6: Spark AR - Interaction Patch, 3D Model

We continued learning how to use Spark AR, specifically the interaction patch. As an extra, Mr Lun also taught us how to insert a 3D model into the filter, however, it is not a requirement for our project 2.

Week 7: Spark AR - Fixed Target Tracker, Plane Tracking

Today's lesson was on creating a fixed target tracker, such as for logo/poster tracking. He also showed us how to make a plane tracking filter which is placing a 3D object in the real world.

Week 8: Independent Learning Week

No class today as it is Independent Learning Week.

---

INSTRUCTIONS

Module Information Booklet:

---

PROJECT

Project 2 - Augmented Reality Experience Filter

Week 5 (26/04/2021) - Week 10 (31/06/2021)

Our project requires us to create an AR filter using Spark AR. The theme/topic is up to us, so we can make it however we want.

The basic requirements are:

• Use face tracker
• Use native UI button to switch AR filter options (minimum 3 options)
• Use face interaction patch, which lets the user interact with AR filter using facial expression
• Background replacement

Here are my slides for project 2:

For inspiration, I went to Instagram to browse the different filters. After brainstorming for a bit, I decided to work on a Tamagotchi-themed filter.

I sketched out the 3 filter versions and started planning for the interaction patch.

Fig. 1.1 - Filters Sketch

Here are some references I found that looks similar to what I'm going for:

Fig. 1.2 - Filters Inspo

 I started working on the backgrounds. The new Tamagotchi has coloured backgrounds, no longer just black and white pixels, so I had room to make it very fun and colourful.

Fig. 1.3 - Modern Tamagotchi

Fig. 1.4 - Tamagotchi Backgrounds

Out of these backgrounds, I chose the Jelly Living and Sunflower living, and I decided to make my own design for the last background.

Fig. 1.5 - Jelly Living Background

 

Fig. 1.6 - Sunflower Living Background

 

Since the Tamagotchi screens are square, the backgrounds had to be redrawn to fit in the phone's portrait dimension. I did the backgrounds in GIMP because during this time our Adobe subscription was expired for a week (and it was a really, really difficult time). Thankfully I had some experience using GIMP so it didn't take much time to adjust back into it.

Fig. 1.7 - Progress: Background 1

Fig. 1.8 - Progress: Background 2

Fig. 1.9 - Progress: Background 3

Fig. 1.10 - Street Environment Pixel Art

For my last background, I used the resources from this free artwork. I wanted to maintain the pixel art style for all the backgrounds so this was perfect. The first 2 backgrounds were already bright, so the last one is a night scene to add some variety.

This is also my first time doing pixel art, so they don't really look like pixels because I didn't really know how to navigate through GIMP so I did my best. The jellyfish background looks a bit sloppy but the sunflower one has more prominent pixel outlines.

Fig. 1.11 - Background 1: Jelly Living

Fig. 1.12 - Background 1: Jelly Living Progress GIF

Fig. 1.13 - Background 2: Sunflower Living

Fig. 1.14 - Background 1: Jelly Living

After finishing the backgrounds, I could start doing the actual face filters now. I gathered up several Tamagotchi characters and turned them into PNGs. Making all of them into PNGs at once will be much faster later on when I just have to arrange them onto the face.

Fig. 1.15 - Tamagotchi Characters

For the other 2 filters, I decided to keep them simple by just having one character for each filter. I chose the two main characters, Mamethci and Kuchipatchi.

My idea is to use the new, 3D version of the character on the filter's forehead, with the pixelated versions on the cheek. To make the filter extra cute I added a soft blush and sparkles under the eyes as well.

Fig. 1.16 - Mametchi

Fig. 1.17 - Kuchipatchi

 

Fig. 1.18 - Pixel Characters

Fig. 1.19 - Sparkles

Filter progress:

Fig. 1.20 - Progress: Filter 1

Fig. 1.21 - Progress: Filter 2

Fig. 1.22 - Progress: Filter 3

I exported the filters and placed them into Spark AR.

Fig. 1.23 - Spark AR Progress: Filter 1

Fig. 1.24 - Spark AR Progress: Filter 2

Fig. 1.25 - Spark AR Progress: Filter 3

I used the Patch editor to add the screen tap that will switch to the different backgrounds, and also the interaction patch, where the sparkles come out of the eyes when you blink.

Fig. 1.26 - Patch Editor: Screen Tap for Backgrounds

Fig. 1.27 - Patch Editor: Interactive Patch

To change the background, it is necessary to have the small icons on the bottom so I just used the original square-shaped Tamagotchi backgrounds.

Fig. 1.28 - Background Icon 1

Fig. 1.29 - Background Icon 2

Fig. 1.30 - Background Icon 3

Here is the final Tamagotchi filter being used:

---

FEEDBACK

Week 5 (26/04/2021)

Specific feedback: No feedback

Week 6 (03/05/2021)

Specific feedback: No feedback

Week 7 (10/05/2021)

Specific feedback: Mr Lun said I can proceed, and suggested that I can put the Tamagotchi character in 2D rectangle/plane and put in front of the person too.

Week 8 (17/05/2021)

Specific feedback: Independent Learning Week.

Week 9 (24/05/2021)

Specific feedback: Mr Lun suggested that I can use the ears of the tamagotchi as a 'hat' by putting it on a plane and placing it on the forehead. Although it wouldn't be 3D, it looks quite okay from the front. He also suggested that I can add another 2D plane in front of the user plane to create a screen effect of the tamagotchi. 

REFLECTION

Experience/Observation/Findings: Week 5 (26/04/2021); So far Spark AR looks much simpler than Adobe Animate, and I'm excited to make filters with it :) Week 6 (03/05/2021); There's a lot of cool stuff we can do on Spark AR without having much experience using it. Some of the more difficult features would be the 3D texture, which I hope to learn and create a filter with next time. Week 7 (10/05/2021); I found that the logo/poster tracking filter would be suitable for my Creative Brand Strategy module later on, and I can potentially use these skills to make a filter for that module's final project. Week 8 (17/05/2021); Independent learning week. Week 9 (24/05/2021); We have pretty much covered the MIB so now it's just the matter of finishing the projects.