Advanced Interactive Design: Task 01


WEEK 01 - WEEK 12 (05/04/2023 - 19/06/2023)
Adena Tan Sue Lynn (0345769) / Bachelor of Design (Honours) in Creative Media
Advanced Interactive Design
Task 01


DIRECTORY


LECTURES

During Week 01's Class, I took some notes:

  • Expand on visual cues where apps/websites invite users to do certain things.
  • Tasks: Pre-development & development. 
  • Four categories: Randomiser, Fashion & Beauty, 3D AR, Gaming Effect. Must remember that it cannot be seen as promoting a brand.

Criteria: 

  1. Creativity
  2. Craftmanship
  3. Theme
  4. User-focus & voting
  5. Video posting

In this case, simplicity can work. Can be used to fit a proper brand & promote to people to try.

Website: 

  • Entertainment / promotional purposes. Etc: product launches. 
  • Make the thematic experiences from the brand. 


INSTRUCTIONS

Week 01 (05/04/2023 - 11/04/2023)

The document below is a quick view of the document. However, to view the GIFs present in the document, please click the link for direct access to the document.

https://docs.google.com/document/d/1uFW-G0j0ISwmNMxnifLynGrZOg0TuodiPEXZmiPeAbc/edit?usp=sharing

Week 02 (12/04/2023 - 18/04/2023)

During class, we were taught some of the ways to use Effect House. It was quite interesting, since I had never done it before. We were tasked to learn a bit by replacing a 3D item using an existing filter.

At first, I wanted to do Slenderman, but Effect House wouldn't let me due to the sizing of the model. Thus, I went with cute lil Neko Atsume. 

Figure 1.1.1 Neko Atsume 3D Model, link

Thus, I headed into Effect House and started. Initially, I had found some troubles with getting the textures to show up, but Mr Razif taught me once he saw me looking at articles and it was all good.

Figure 1.1.2 Effect House screenshot

I also tried it on my own TikTok app. However, I accidentally made it a bit squished... sorry lil kitty..

Figure 1.1.3 Kitty Tryout


During this week 06, I first put my filter ideas into slides to easily show Mr Razif my ideas for progression checks.

After getting his feedback and confirmation on which idea he thought was the best, I proceeded with learning how to make the filter.  

Figure 1.2.1 Tryout File

1. Making the Randomiser Portion

To quickly learn how to do this, I mainly used the 2D Randomiser Template provided by Effect House. I also looked at the little guide they have on their website to configure how to change the template. (However, I didn't really know why they didn't let me use the Texture Sequence I wanted, but I figured it was just a bug). 

During this process, I also learnt that there is no real way for an actual 3D randomiser, as there were no tutorials online as to how to do that, and from a testing standpoint, texture sequences only allowed for still images (png, jpg). 

2. Figuring out the 3D AR

I was quite nervous for the journey, but here is how I did it:

After learning that it is possible to export Illustrator assets as obj files, and importing them into Effect House, I felt a bit more at ease as a 3D noob. Thus, I decided to try it.

First, I made assets to use.

Figure 1.2.2 Asset for Filter Test

Then, I used this video to learn how to place the 3D object, with a face tracker.


With that, I ended up with something like this.

Figure 1.2.3 Tryout

With my new found knowledge, I recorded down some of what I had learnt as well as tried to come up with a solution for my 'issue'.


Week 08 was Independent Learning Week, and thus, I took it upon myself to do my filter. First, I started a new file as I figured the previous file had just been bugged (and Effect House released an update). This ended up being my solution to the randomiser not changing to the texture sequence I wanted to utilise.

Below were the assets I made in Illustrator. (I didn't end up using all of these tho.. Just needed some variety in case!) 

Figure 1.3.1 Assets Created

I also made the images to be used in the filter. Below is the title image and two of the eight sequence images I used for the filter.

Figures 1.3.2-1.3.4 Randomiser Images

After this, I used the previous week's learnings to make the filter.

Figure 1.3.5 Making the filter

For my assets, I mainly played around with the material settings in Effect House, especially the Environment & Rim Light settings. That is how they get their bright and light look!


Figures 1.3.6-1.3.7 Material Settings

To brighten the user's look, I also incorporated the use of eye filter in order to make the eye just a tad bit brighter. 

Figure 1.3.8 Eye Adjustment

During this Week 09, I was able to show Mr Razif my filter for his feedback. Once he advised me to alter the look of the words slightly to make it more visible as there was slight difficulty in reading the text. Thus, I did as advised. 

Figure 1.4.1 Word Editing

When you look at it like this, surely it will pose some skepticism if it would even work. Thankfully, it did though! In fact, it looked much better after this change. 

Figures 1.4.2-1.4.3 Before & After Adding Shadow

Thus, all I needed to do left was submit the effect.

Figure 1.5.1 Submitting the Filter

For my filter, I also created a thumbnail so it didnt just have the basic Effect House logo.

Figure 1.5.2 Filter Thumbnail

Thus, began my waiting process for Effect House to approve my filter. 

Figure 1.5.3 Waiting for Effect House to approve

I was so nervous, wondering why they haven't approved my filter until I submitted a second time. However, came Monday afternoon where it finally got approved and I almost cried literal tears of joy in the middle of the classroom.

Figure 1.5.4 My Filter Got Approved!

With that, I bring you my filter in the Final Submission tab~


FINAL SUBMISSION

Link to TikTok Filter: https://vm.tiktok.com/ZM2Aw96EU/

QR Code: 


Demo Video: 

Figure 2.1.1 Demo Video for Filter



FEEDBACK

Week 02 (12/04/2023)

Mr Razif looked at my work and told me to make sure I have the capability to do the proposed filters, especially since I'm still quite new to the 3D sculpting scene. 

Week 06 (10/05/2023)

When I presented my slides to Mr Razif, he was most content with my 3D Affirmation filter as it served as a purpose to uplift people. 

Week 07 (17/05/2023)

Once I updated Mr Razif regarding my findings on how to do the filter, he agreed on my methods.

Week 09 (31/05/2023)

Mr Razif advised I try to make the words more visible as there was a slight difficulty in reading them.


REFLECTION

Overall, this task has been very interesting. I always wondered how TikTok filters were made, but never experimented because I felt highly intimidated by the process. However, now, I have been able to see how it is, from the ideation stage to actually building the filter. I had some issues at first, but I was able to overcome them by utilising the different tutorials out there to help me build a filter that I am satisfied with. 

Popular Posts