Quid Queen's Quest

QR code for this AR experience
Coins group
Image tracker for united logos
Image tracker
Image tracker

Brief and Inspiration

This story is adapted by the developers' real journey as they ventured into AR industry, driven by their insatiable curiousity, the desire to gaze up at the sky and challenge their lives. We have always wanted to do an AR portfolio on our own website, so we did this project to abstract our experience into a Quid Queen journey to present. Welcome to our page: https://www.mianzi-lizi.com/quidqueensquest.

Align to the Theme and Medium

The theme perfectly matched what we were originally thinking about life, and we did. At the same time, we feel that one of the irreplaceable aspects of AR as a medium is the incredible integration and interaction between the virtual world and the real world, whether it is from reality to virtual or from virtual to reality, it is a step outward. So this idea also informs our interactive design.

About the Story

The project consists of three scenes, each designed to the Quid Queen’s journey of exploration and self-discovery. User will be the ‘outsider’ who can help the Quid Queen to step out of her kingdom and experience her journey together.

Chapter 01: "My Small Kingdom"

(First life stage of life from birth to 18 years old)

Filled with curiosity, Quid Queen attempts to venture beyond the confines of her "Coin Shield" and explore the grayscale realm outside her castle. This act represents her initial step into the unknown, leaving behind the familiar and embarking on a quest to understand her own kingdom.

Chapter 02: "The Wonderland"

(Second life stage of life from 18 to 30 years old)

In her small kingdom, Quid Queen discovers a magical gateway that entices her with the desire to explore further. With an insatiable curiosity, she steps through the ‘illusion portal’ and finds herself immersed in a vibrant and colorful world.

Chapter 03: ">>> Hello World"

(Current stage of life from 30 + and future!)

Quid Queen transcends dimensions and enters the realm of the real world. This act represents the developers' real journey from the media industry into the AR industry, driven by their insatiable curiosity and the desire to challenge themselves. Quid Queen's arrival in the real world signifies the culmination of their efforts and the realization of their dreams.

More behind-thinking and design mood board will update on our website.

Interactions and Objects

We chose to have coins, AR phone and laptop at hand around us, to interact with each other. Because it is a web page, we interact with the world inside the laptop screen. We are also working on a paper version, but we didn't finish it this time.

Based on the progressive form of the story, we also divided the interaction into three stages and layers:

Chapter 01

Quid Queen: 2D animation inside the screen
User: physical interaction
Borrowed from the British culture of the coat of arms on the coin to start the journey, from the Quid Queen's point of view is to break through the shield, and completely unaware of the world outside the screen, the user use the real coin puzzle, from the outside to open up the story happen inside the small kingdom.

Chapter 02

Quid Queen: 3D animation and fall out of the screen
User: Mouse move, touch control
The consideration here is more about the different input and output methods in different devices and media. In fact, here also includes a green screen video, the user can actually move the image to the side, to use the optical illusion to help the Quid Queen probe out of the screen to the real world, there is an interesting AR interaction, it works perfectly in green screen video template.

Chapter 03

Quid Queen: Interact with real world
User: Type a response (Planned, not completed)
The connection between the inside and outside worlds and people, the place where dialogue and communication arise, but have to hastily wrapped up.

Learn, Chanllenge and How we built it

**- 8th Wall WebAR  **

We've always been interested in trying webAR! This time the opportunity will be very exciting. It is our first time using javascript, so not too familiar with it, and still encountered some obstacles in the implementation of the function at first. That's why we decided to try not to be too difficult technically, but to work on creativity.

The main functions we based on are:

Green screen video (https://www.8thwall.com/8thwall/alphavideo-aframe)
Animation mixer (https://www.8thwall.com/playground/animation-loop-aframe)
Image Target with World space tracking (https://www.8thwall.com/8thwall/image-target-to-slam-aframe)

The most challenging part is how to synchronize the animation of 3Dmodel with the video, in particular, particularly silky smooth, not easy to miss the split connection.

**-Animation**

The animation of our first scene is done with PPT, the second 3D is done with Blender+Premiere+PS

**-AI-generated Images**

We use Adobe Firefly and Stable Diffusion to generate the cover image and abstract coin.

Accomplishments that we're proud of but nothing about tech

There are some hidden meaning and puns. For example, the title has three captical Q letters, which can be written as '3Q' (pronounce San Q in Chinese), it is for everyone : )
We made a little surprise to mark this hackathon, so we put a 8th wall coin as an AR souvenirs on our website for hosts and participants, an object can be called which sum up with 8th Wall, Niantic and Goldsmiths logos, but from three different perspectives.

What's next for Quid Queen's Quest

If the united logo above can be considered an agreement to 'Explore the outside world ,together' with us, then hopefully Quid Queen can take a ride this balloon ship to a more intriguing world!