ADVANCED INTERACTIVE DESIGN｜TASK 1 : INTERACTIVE AR APPLICATION

-

Feng weijie | 0349058

Advanced Interactive Design | B' in Creative Media

03.04.2023 -28.6.2023 (Week 14 -Week 1)

Task  1: Interactive AR Application 

---

Advanced Interactive Design Project 1 #Interactive AR Apps

Operating instructions

AR (Augmented Reality) is the latest form in the current field of interaction design. We will need to develop AR applications with AR interactivity that will be able to detect the user's face and expressions. The goal of this app is to provide customers in stores with an innovative way to try different options before buying. Of course, Mr. Razif also encourages students to actively come up with new AR application ideas, but he needs to get his approval to ensure that the project is feasible and innovative before starting development.

exploration

➜ Week 2: Brainstorm at least 3 ideas for your own filters

Brainstorm 3 filters ideas

After all these research exercises, I have to admit that designing an AR filter that is both beautiful and creative is actually quite challenging. So I decided not to put too much pressure on myself and just try to list some of the thoughts that were currently in my head.

Creative idea 1 #Beauty Filter - Face Decoration Animation Filter

Figure 1.0 Face Decoration Animation Filter

One visual I found on Pinterest that appealed to me was the AR facial effect in the promotional video for the new album of the Korean girl group Aseap. As the character's face gradually appeared, the AR special effects slowly grew on her face, creating stunning visual effects. The effect was both beautiful and mysterious, like a mask that caught my eye. This combination of creativity and technology enables impressive artistic expression in the AR world.

Creative idea 2 # Special Effects Filter - AR effect filter with 3D mount

Figure 1.1  AR effect filter with 3D mount

In my journey of exploration, I have constantly sought images and visual effects displays that can ignite my inspiration. When I stumbled upon a blogger riding a mechanical beetle on Xiaohongshu (Little Red Book), inspiration erupted within me. It led me to contemplate designing a unique mount or having a virtual creature accompany me. The enigmatic creature of a dragon holds a special fascination for me, perhaps because I was born in the Year of the Dragon.

I've found some visually striking photos, mainly inspired by the cyberpunk style, which I deeply admire for its sophisticated color palettes. Whether it's the appearance of a Buddha statue in the background, the presence of a dragon circling behind, or the gradual blossoming of plants, they all profoundly captivate me and fuel my desire to create and explore. The amalgamation of these elements has provided my creative pursuits with a wealth of imaginative space, offering myriad inspiration and possibilities for my future projects.

Creative idea 3 #Hand Try-On Filter - Virtual Things 3dar effect filter

Figure 1.2 Virtual Things 3D AR effect filter

Why did I choose this hand effect? I chose this theme because I was inspired by Instagram influencers who create filters. In these effects, flowers suddenly blossom or flames ignite from the hands, accompanied by fluttering butterflies. All of this makes me feel incredibly creative and excited, igniting my inspiration.

This hand effect has opened a door for my imagination, allowing me to explore how to incorporate these beautiful elements into my creations. It's like having flowers or flames bloom on my hands, accompanied by the dance of butterflies. This visual spectacle is incredible, as if I'm creating a magical performance on my own hands.

This effect is not only beautiful but also possesses a unique charm, making me feel like I'm in a fairy tale world every time I use it. I truly enjoy exploring and experimenting with different hand effects, allowing me to capture this unique beauty and wonder in my work.

Conceive proposal slides

Figure 1.3 Conceive proposal slides

➜ week 3：Continue the research

After thinking deeper, I realized that the best way to ensure that my final project website was relevant to an interactive AR application was to first clarify the website's goals and tasks, and then derive the functions and uses of the interactive AR application from it. This ensures a stronger connection between the two, making it easier for users to understand the core values of the product or brand

# Finalize Idea

Figure 1.4 New idea proposal

➜ week 5: no class （Public Holiday）

➜ week 6-7 update

After receiving feedback and engaging in in-depth discussions, I've been inspired by a brand new #idea: to use 3D milk tea effects as my ultimate proposal. The core concept of this idea is to create an adorable "3D milk tea" model framework.

To accomplish this goal, I actively explored and delved deep into research, ultimately opting for the use of a 3D application called Nomad on my iPad. Over the past few weeks, I've dedicated a significant amount of time and effort to learning and mastering this application. Despite Nomad being considered relatively user-friendly for modeling, I've still shed quite a few tears of frustration to create the model I envision.

# Visual research on milk tea

I've been scouring the internet for various milk tea materials to develop a uniquely cute visual representation of milk tea. This research will serve as the foundation for creating my model.

Figure 1.5 Visual research

# nomad application  practical operation

This is a detailed illustration of my creative journey, where the ups and downs are only known to me. I mentioned that I used Nomad for 3D modeling. However, as a UI/UX student, my 3D modeling skills are not very proficient; I'm a beginner. It was my first attempt with this software, and during the process of creating a 3D milk tea model, I faced numerous challenges and experienced failures along the way. At several points, I felt discouraged. Fortunately, I managed to complete the task just in time! Huhu.

Figure 1.6 Practical operation

Then I used this experience to create 2 other milk tea models of different colors ~

Recreating the same milk tea model once again made me feel right at home, and it was a breeze. What's more, mastering this entirely new modeling skill ignited a profound sense of achievement within me. This process has deeply reinforced the importance of continuous learning and pushing one's own boundaries.

Figure 1.7 Practical operation

The final display of the three bubble milk tea models

Figure 1.8 Bubble milk tea models

When I tried to import it into the computer, to my surprise, the textures had disappeared. It was only later that I discovered the issue was related to the file format - I needed to use files in the .gib format. This discovery truly left me astonished.

Figure 1.9 Error image

When I had successfully overcome the modeling challenges, I proceeded to the final step of importing AR filters. Since our ultimate goal was to integrate these filters into Instagram, I chose Spark AR for this last stage. Thanks to Mr. Razif, who explained some basic operations during our classes, I found this phase relatively easy to navigate.

Figure 2.0 Filter making process

When I got to this stage, I noticed that the visual effects were a bit too simple. So, I decided to enhance it by adding some star stickers to increase its visual appeal.

Figure 2.1 Filter-making process

# Bubble tea capture showcasing

Figure 2.3 Bubble tea capture showcasing

# Final task 1: Interactive AR filters

Figure 2.4 Final task

---

Feedback

week 3

Lecturer Mr. Razif made an important suggestion, he believes that there needs to be a closer connection and coordination between my interactive AR application and the eventual website. Currently, they seem to be independent of each other and lack correlation, which can affect the overall user experience and brand image. Therefore, I intend to further revise my vision to ensure that the two aspects can better interface with each other to more powerfully demonstrate the core values and characteristics of a product or brand. This adjustment will help improve the quality and attractiveness of my project.

Week 4

Lecturer Mr. Razif suggested injecting some innovative elements into the final special effects work to stand out in visual research. This includes considering changing the background to enhance visual appeal. In addition, you need to pay attention to the scale of the product's special effects and ensure that they are more refined and balanced to make the overall effect better. These improvements will help make the project more creative and engaging.

week 5: no class （Public Holiday）

---

Reflection

This assignment provided me with an opportunity to explore and understand a 3D application called Nomad, which I had been eager to try for some time. Undoubtedly, it was initially a challenging experience, as I encountered various issues that required me to find solutions on my own, which is often expected as a design student.

One of the challenges I faced included the difficulty of successfully exporting OBJ files to Spark AR. Through this task, I learned a great deal and gained additional skills, particularly problem-solving skills. We delved deeper into the 3D application, acquiring fundamental knowledge about importing and exporting files, allowing us to seamlessly switch between various devices, including smartphones, iPads, and laptops.

Furthermore, adding and selecting textures was also one of the complex parts. To expedite the progress of the filters, I actively sought out relevant tutorials. All in all, this assignment provided valuable insights into using 3D applications and problem-solving, which undoubtedly will help me succeed in this phase.