Growing Together

• 

  ImageTarget1

• 

  ImageTarget2

• 

  ImageTarget4

• 

  ImageTarget3

Inspiration

We drew no inspiration from previous AR work. Our unique concept revolves around uniting people through the exchange of image targets. Our aim is to challenge the prevailing notion that technology often disconnects individuals from nature, by harnessing its potential to bring humans, nature, and technology back together.

What it does

This app aims to inspire users to venture outdoors and engage with nature. Upon scanning the image of a withered tree, an enchanting tree in its initial stage of growth will materialise. Users can interact with the tree by tapping on it, prompting it to grow. As the tree reaches certain stages of growth, the image itself transforms into the next image target, which subsequent users can scan.

This unique concept fosters a sense of connection and collaboration among users. It requires individuals to connect with the previous user in order to witness the tree's growth together. This process repeats four times until the last user encounters a majestic, fully-grown tree.

The underlying purpose of this application is to forge a harmonious bond between humans and nature, as well as foster connections between individuals by leveraging the immersive capabilities of augmented reality technology.

How we built it

We developed our application by utilizing image targeting techniques. Our approach involved firstly linking an image of a withered tree, serving as one of our image targets, and our initial virtual video depicting the initial growth of a tree. Subsequently, we employed the final frame of each animation representing various stages of tree growth as individual image targets, which would trigger the appearance of a new 'growing' phase of the tree. Eventually, when the fourth user scans the last image, they will witness the sight of a fully-grown tree.

Challenges we ran into

Spawning 2D Images: We discovered that the image targeting documentation primarily focuses on spawning 3D objects, making it difficult for us to incorporate 2D textures into the virtual world. Unfortunately, our team members are not well-versed in HTML and JavaScript, which further hindered our progress in this area. Animating the 2D Images: Given our limited coding skills, we faced difficulties in successfully animating our 2D images using automatic frame playback, despite having all the frames prepared. Consequently, we made the decision to utilize videos as a substitute for spawning the 2D textures and their corresponding animations. Adding Sound Effects: We attempted to implement an audio.js and a Howler library to incorporate sound effects. However, we encountered coding errors that prevented us from successfully adding the desired audio elements.

Accomplishments that we're proud of...

Despite none of our group members having prior experience in HTML coding, we managed to accomplish the fundamental vision: scanning an image to create an animation.Then, when others scanned the final frame of the video, a new video would be generated based on the preceding one. Although the course proved to be arduous, we persisted until the end of the hackathon. This epitomizes the essence of a "marathon" – refusing to surrender midway and persevering through the challenges, even when they appear daunting.

What we learned

We learned HTML programming skill and A-Frame from the documentation and online resources.

What's next for Growing Together

During this competition, our group members provided great creative ideas. Once the competition concludes, we will ponder over the following solutions: How can we utilize 2D sprites in A-Frame to create motion effects? How can we integrate stable diffusion into our project to generate visually artistic effects? How to create some specific sounds? Additionally, we are also considering the creation of an ideal prototype within a VR environment using Unity, aligning with our envisioned concept.

Built With

• 8thwall