05.04.2023 - 19.06.2023 (Week 01 - Week 12)
Adeline Wong Chyn Nee / 0344017 / Mr. Razif
Advanced Interactive Design
Task 01
In the week 3 class, we were introduced to Adobe Animate CC, we were
told that it's a widely-used software now in the advertising/
graphic design industry. As I've always been super focused on Adobe
softwares like Illustrator, Indesign, and Photoshop. I felt I could
try expanding my skills in vector animation for any online/ website
making use. So that was an interesting thing that I took note of.
Tutorial - Animate CC
A. Connecting pages with buttons
Through simple layout and scripting, we learned how to link different
pages to their own button accordingly.
B. Bouncing Ball
We also learned how to make a bouncing ball! All these
can be tested in HTML form so we did that too to show Mr.
Razif.
TASK 01: Interactive AR Application
We will be working on a TikTok AR filter. There will be a workshop on
18th April at 2 PM at lecture theatre 9.
Application for task:
TikTok Effect house (to be downloaded)
Come up with 3 ideas, and
we need to have a reflective blog.
Types of filters:
- Randomizer
- Fashion and beauty
- 3D AR
- Gaming Effect
Research on TikTok AR Filters
Just like the filter feature on our Instagram stories, TikTok Filters
also allows us to change the look of our TikTok videos. We simply tap
the record button and tap on the “Effects” feature in the bottom left
corner. From there, we get to choose from a variety of filters such as
trending filters, campaign filters, green screen filters, funny ones,
beautifying ones, and 14 other categories. There are also more DIY
options such as the create option where we can enter the context of
the filters ourselves. In this case, we are focusing on the AR
filters/ effects rather than normal preset filters.
From what I know, TikTok provides four main types of filters that
users can choose from, and they are randomizer, fashion and beauty, 3D
AR, and gaming effects. However, TikTok does feature another set of
“filters” which are for the clips/ images we put on Tiktok, and not to
be confused with the AR interactive filters focused on here, they are
just preset of different contrast, exposure, and color.
Oftentimes, when we use the AR filters on Instagram or TikTok, we are
portraying a new narrative for ourselves in the app, while creating
different final TikTok videos. The AR filters may help a user gain
confidence, create funny content, or even help self-realization.
Tiktok Filter Research
TikTok filter #01 - Matchstick Quiz
The objective of this filter game is to move a single
matchstick to another position to correct the
equation. My experience with this game AR filter was confusing at first,
but I managed to get a grasp after failing multiple times. The AR filter is able to get users to
enter a competitive mode as most would want to
win.
Some downsides:
-The time is just too fast! Even 3 seconds more is enough…
- Questions would repeat after 6-7 plays
TikTok filter #02 - Atop Skyscraper
This 3D AR filter was really fun as it takes you into the person
standing on top of the skyscraper in the filter. We get to turn
every angle within 180 degree, so up, down, left, right, and
diagonal. I paired the filter with upbeat music and it made the
whole thing look so cute and funny!
Some downsides:
- Nothing much after than the movement
- Have to add trendy music for it to be exciting!
TikTok filter #03 - Types of beauty filters
Pretty self-explanatory as it makes anyone look bootiful.
Here are 2 of them.
TASK 01: TikTok AR filter Ideas
Augmented Reality Experience Filter AR is the latest form of
interactive design nowadays
We are required to develop an AR application with AR
interactivity that will detect user face and expression
Software Requirement: Effect House
A. Ideation Process
1A. Taylorian Food Tournament
For the idea development, I have decided on the "Choose with Head Tilt" filter which acts as a quiz with no correct answer. The
user would choose by tilting their heads toward their
preferred answer. The options would include all types of
restaurant names that a Taylorian is used to, such as the ones
at Syopz.
My Goal: To achieve 40 or more uses
Filter Title: "Food Tournament (Taylor Uni Edition)"
Number of questions: 16 total results to
randomise from, 4 sets of choices
Number of results: One
However, soon after, I finally realised and remember that we are
not supposed to use brand names in our filters, and I had to
include restaurants images in mine. So I decided to alter it and
change it into something else.
This next idea stems from my own current experience, which is my
self-isolation experience, making me deprived of human
interactions, like the ones I would have if i were in campus. So I
thought, what if, I make a Taylor's sound board, with playable
sounds such as a lecturer talking, students chattering, and the
ducks quacking, because that is how socially deprived I am.
1B. Taylor's Soundboard (WIP)
I started by creating 5 buttons on Canva and exporting it with
a transparent background. The I imported the them into the
asset panel. Then, to apply them, I used screen image and
replaced the image slot with the imported assets.
So far, I've yet to finish the sounds, I plan to record them on
campus when I return.
However, you could try to scan the QR code below to test it (not
sure if it works).
Chosen Idea: Face distortion (Shrek)
1. Shrekifying Process: Colour
The first I did was set the colours right. What I did was I referred
to an image of shrek, hoping to find a colour most similar to the
original. To make the colour suit both light and ark skin tones, I
played around with the blend mode while going back and forth the two
models.
2. Shrekifying Process: Face Shape
After trying different ways to distort a face, I ended up making the
face shape with 'Face Stretch' under 'Face Effects'. Although in the
scene panel it looks super weird and unlike shrek, however when
applied, it somehow works.
What I added to make it Shrek-like:
- Enlarge jaw and chin
- Enlarge nose
- Bring lip closer to nose
- Make forehead tiny
- Make eye shape rounder
3. Shrekifying Process: Face Shape
Next I created a concept to make the filter interesting by adding a
'call-to-action' sign, At the bottom, users are encouraged to do a
finger heart which triggers 'All Star' by Smash Mouth.
As the finger heart is what the 'oppas' in Korea do to show
affection towards their fans, this added element would allow users
to act like they are the "Ogre Oppa" themselves. As if they are
greeting their beloved fans.
4. Shrekifying Process: Ears
The shrek ears are also added using a head tracker to screen image
(taught by Alicia). This would then complete the ogre look!
5. Shrekifying Process: Setting the mood
A. Shrekifying Process: Music
B. Shrekifying Process: Smile
I added this since it's a fan meeting concept, so smiling is not
optional, it is required, or the fans would feel like they wasted their
money on this fan meeting.
6. Shrekifying self: Testing
Test it out yourself!
7. Refinement
In week 9's class, Mr. Razif advise me to use song that will not get
copyrighted. Currently, I am using the original All Star. I thought to
tackle this, I could either speed up the song or use an instrumental
version.
I ended using the sped up one for more engagement such as lip-syncing and any random performance. This is the updated one, do try.
Comments
Post a Comment