Advanced Interactive Design / Task 1

5.4.2023- 18.6.2023 (Week 1 - Week 11)
Cheryl Voo Yie Qi / 0349878
Advanced Interactive Design / Bachelor of Design in Creative Media
Task 1 / Interactive AR Application (Tiktok filter)

---

Week 1

We are required to brainstorm filter ideas from social media. And list out 3 ideas for our filter.

Week 2 
This week we explored Effect House to create filters. 

Fig 1.1, Exploring Effect House

Fig 1.2, Exploring Effect House (AR filter)

Week 5 

This week we had a TikTok workshop and we learned about some experiences from Mr. Kow, the content creator from Tiktok Effect House.

@gameplus40

Week 6

We get a consulting session with Mr. Razif to decide which idea we are doing and start working on it.

---

Task 1 / TikTok filter (Effect House)

Idea 1

@funnelvision she got me @lex_0724 #giordano ♬ Monkeys Spinning Monkeys - Kevin MacLeod & Kevin The Monkey

Fig 2.1, Reference

 

• Turn the man into the "IT" clown to make it more scary.
• The balloon appears first to make people think it's just a balloon but suddenly the clown appears.

Fig 2.2, IT

Idea 2

Food randomizer 

• "What to eat" 
• 2 randomizers on one screen (Example: the top one is "ramen", the bottom one is "peanut butter"  
• Not normal foods (funny things/ food) / Weird food combos

Fig 2.3, Sketch

Fig 2.4, Randomizer reference

@vanessaxramos This is not random YALL #disney #disneyfilter #disneycharacter #whichdisney #funny ♬ original sound - Vanessa Ramos

Fig 2.5, Randomizer reference

Idea 3

Game filter

• Defusing bombs (cutting wires).
• Answering the trivia questions to cut the correct wire to defuse the bomb.
• Answer 5 questions in 50 seconds to defuse the bomb.
• If answered wrongly, the bomb will explode and the player's face will turn like this:
  
  
  
  Fig 2.6, Bomb exploded

  
  
  
  
  
  

  Fig 2.7, Bomb exploded

  
  

Fig 2.8, Defusing bomb

Fig 2.9, Sketch

After consulting with Mr. Razif, I decided to work on the third idea and sir suggested replacing the trivia question thingy with some kind of puzzle and trying to explore more about the puzzle thing.

Explorations

@projoearfilters Disney Princess Puzzle #filterbyprojoearfilters #disneyprincess #disneyprincesspuzzle #puzzlegame #tiktokpuzzle #disneypuzzle #puzzlefilter #puzzle #tiktokgame #projoearfilters ♬ Beat-Chill Trap - MMS

 Fig 2.10, Reference from Tiktok

@kennyhaller THEY PUT WORDLE IN TIKTOK WTFFF #wordle #wordletok #wordletips #dailywordle #wordgame #wordgames #puzzle #challenge #game #gamer #gaming #filter #tiktokfilter #newgame #fyp #kennyhaller ♬ sans. - Toby Fox

Fig 2.11, Reference from TikTok 

@fahrezaos

Busyet ada filter game baru susah bener 😭

♬ Spongebob Tomfoolery - Dante9k Remix - David Snell

Fig 2.12, Reference from TikTok

@lilyslilah Officiellement le jeu le plus dur….#filtretiktok #filtre #filtrepuzzle #filtrejeu #tiktokfilter #gamefilter #puzzlechallenge ♬ Bad Decisions - benny blanco & BTS & Snoop Dogg

Fig 2.13, Reference from TikTok

@dailyxsav Just leave it tk the pros thank you #gaming #filter #mastermind #number #numbertok #dailywordle #dailysav #dailyxsav ♬ Mastermind - Taylor Swift

 Fig 2.14, Reference from TikTok

@stelac07 Shy type ang ferson today 😅 #tiktokfunfilters #colorpuzzle #tiktokfilters #tiktokgames #tiktokfun ♬ оригинальный звук - сырок

Fig 2.15, Reference from TikTok

In the end, I decided to create a slide puzzle filter combining the bomb explosion effect. Basically, players have to complete the puzzle in a limited time (30 seconds?) in order to diffuse the bomb, if not the bomb will explode.

Development

I wanted to keep my puzzle simple so I decided to create a 3x3 sliding puzzle. I split the picture into 9 grids by using an image splitter to create the puzzle. 

Fig 2.16, Picture chosen for puzzle

Fig 2.17, Image splitter, https://postcron.com/image-splitter/en/

Fig 2.18, Split image

Fig 2.19, Puzzle

Fig 2.20, Puzzle in Effect House with a timer

For the other assets, like normal text I did it in Adobe Illustrator and export them into PNGs.

Fig 2.20, Texts

Fig 2.21, Texts in Effect House

The confetti and party hat effect is for those who successfully solve the puzzle within a limited time and diffused the bomb. The confetti and party hat were from Effect House's assets library.

Fig 2.22, Confetti and Party Hat

For the bomb explosion effect, I downloaded the video from Pexels and converted it to a GIF using an online converter. After that, I had to split the GIF into PNG, so that it can import into Effect House as a texture sequence. 

Fig 2.23, Explosion video

Fig 2.24, Explosion GIF

Fig 2.25, Explosion split to PNGs

Fig 2.26, Explosion effect imported to Effect House

Fig 2.27, Explosion effect in Effect House

I also created a "dirty/smoked" face mask using Ipad and imported it to Effect House to make the explosion effect more realistic.

Fig 2.28, Explosion effect in Effect House

And I did some simple visual scripting like a screen tap to trigger the puzzle and different effects for different results (confetti and party hat/explosion effect).

Fig 2.29, Visual scripting

Fig 2.30, Visual scripting

After that, I don't really know and I can't find any tutorial about the slide puzzle part, but before I ask Mr.Razif, I tried to use ChatGPT but it does not give any useful advice so I asked Mr. Razif for advice. Then, Mr. Razif suggested using https://www.perplexity.ai/ instead of ChatGPT. So I got some answers from perplexity.ai and I tried using the advice :

Fig 2.31, Asking in perplexity.ai

Fig 2.32, Asking in perplexity.ai

Then I tried the steps givens and use https://www.construct.net/en to create the slide puzzle:

Fig 2.33, Making slide puzzle in Construct, 

the video tutorial I'm following: https://www.youtube.com/watch?v=WXvMKHkn7-4

Fig 2.34, Slide puzzle in Construct

Fig 2.35, Slide puzzle in Construct

But it turned out to be a HTML file, so I can't import it to Effect House:) After that, I ask for Mr.Razif's help. But maybe the slide puzzle effect is difficult to achieve so he suggested working on another idea. 

SECOND ATTEMPT

I didn't use the other ideas that I proposed previously because I really like the puzzle idea, so I did a simple puzzle-tapping game filter. Basically, the player has to tap the screen to stop the correct puzzle sequence, and there is only one correct puzzle among the puzzles.

Fig 2.36, The correct puzzle and the puzzles with random sequence

Some assets for the filter:

Fig 2.37, Assets

Same as my previous filter by having different effects for winning and losing. And I added a sound effect to both results. Then, I also made them able to replay by showing thumbs up to the camera.

Fig 2.38, Lose (Raining with a vintage filter and a sad sound effect)

Fig 2.39, Win (Confetti and a hooray sound effect)

Fig 2.40, Win (Confetti and a hooray sound effect)

Fig 2.41, Lose (Raining with a vintage filter and a sad sound effect)

Fig 2.42, Visual Scripting

FINAL OUTCOME

Fig 2.43, Filter testing

---

REFLECTIONS

It's my first time creating my own effect filter, it feels very fun and interesting since we always saw people using filters for videos on TikTok, Instagram, and all that, and now we are making our own one, so it's quite exciting and new to me. The Tik Tok filter project took longer than I expected, and the result is not what I expected. Maybe I just overestimated myself, and I'm not familiar with the effect house, or the jigsaw sliding filter is too complicated to realize. But overall I think it's a good experience to create our own effect filter. And I wanted to thank Mr. Razif for spending time to help us solve our filter problem and giving a lot of suggestions, even though my first effect can't make it in the end but really appreciate it.