Advanced Interactive Design / Task 2

-

07.09.2022 - 30.12.2022 (Week 2 - Week 14)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Advanced Interactive Design / Taylor's University 
Task 1 : Interactive AR Application

INSTRUCTIONS
<back to top>


fig 1.1 Module Information Booklet of Advanced Interactive Design

PROGRESSION
<back to top>

WEEK 12 (17/11/2022):
To begin with this project, first I need to create the ideation. So I'm planning to create an AR Filter that is having the same concept with the first project. Dimoo World.

As known from the previous project, I've chosen this 3 products:

fig 2.1 zodiac series, forest night series, pets vacation, jurassic world series

From that I planned to use their elements as the filter objects, so I tried to look for what do I have in each 
series.
ZODIAC
FOREST NIGHT
PETS VACATION
JURASSIC WORLD
fig 2.6, jurassic world, source: (https://www.actioncity.com.my/products/dimoo-jurassic-world-series)

Then from that I came out with my ideation, I don't choose any from the Forest Night Series because there're no suitable elements for the filter. So, instead, I choose smiley world, which is appearing as the main landing page of my project 1.

fig 2.7, smiley world mega dimoo, source: (https://www.actioncity.com.sg/products/pre-order-mega-collection-1000-just-dimoo-x-smileyworld)

WEEK 12 (18/11/2022):
So here's my ideation:
fig 2.8, ideation (procreate), source: (https://youtu.be/1Txqo63Nxps)

WEEK 12 (19/11/2022):
From that first, I tried to learn on how to use AR Sparks. I dived in on some YouTube videos out there, first, I wanted to try on creating the UI Segmentation buttons and how to create segmentation between the background and the person, so I came up with this tutorial:

UI Picker + Background Replacement | Spark AR Studio Tutorial
DJS CREATES - https://youtu.be/JYgaYlu_iKE

output:
fig 2.9, background segmentation and UI picker trial 1, source (https://youtube.com/shorts/MttsiaJVYQ0?feature=share)

Then I learned how to place the filter (still image):
How to make 3 Option Filter or more with UI Picker Buttons | Instagram Filter Spark AR Tutorial

Moving on to the animated filter:
How to make an 'Animated Birds' Instagram filter in 5 minutes | Spark AR

I successfully created the animated filters, but then I don't know how to place it into the UI picker since they are different from the videos, they're planes. Thus, Mr. Razif recommended me to dive in to this recording, and I followed that and it worked!

Spark AR - Janice
Razif Mohamed - https://youtu.be/kR5kjJUwxps

Which from all of these, I came up with this:
fig 2.10, animated filters, source (https://youtube.com/shorts/DCZOo6Jfixs?feature=share)

But then I got problem with my filter, the preview is not clear, it's not transparent:
fig 2.11, problem

WEEK 12 (21/11/2022):
Asked Mr. Razif on any solution for this, and gladly Mr. Razif guided me patiently and told me that it was a bug that can be removed by removing the face filter 3 and 4 on his video. But then, I tried the same method but it didn't work on my laptop.

I was almost desperate and panic since the submission is 2 hours left, but then I suddenly got an idea to swipe the arrangement of background and the filters, and, voila! it worked. I'm so glad.

Finally, I came up with this as my final:
fig 2.12, final IG filter, source; (https://youtube.com/shorts/f9LV-U9lrZc?feature=share)

    FEEDBACKS

    no feedbacks just consultations via text.

      REFLECTION 

      It was a challenging task, since we have to learn ourselves from the YouTube, and there were no class sessions for this project because we learn individually. But because of that, I was able to underestand the main basic feature of the Sparks AR, creating filters, backgrounds which really makes me proud because there's like a sense of achievement in there.

      Comments

      Post a Comment

      Popular posts from this blog

      How to Create Jump Link

      -
      Image
      What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code:  <span id="LIST"></span>  on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
      Read more