Lofi Beats To Grow Trees To

We use Lofi beats to study and to chill, but what else can we use it for? To grow trees! So grow a tree today with this filter and join others in planting a virtual tree. Grow a tree, save the Earth!

Comment

Inspiration

Our team really loves listening to Lofi hip hop and chill beats while we dev. If you've never listened to Lofi beats before, here's a reference via a Youtube video - link.

So we decided to make a filter based on Lofi hip hop beats that leads you on a journey by tapping on objects. We then collaborated on the narrative and landed on a 2D triangle becoming a 3D model and then turning into a low-poly tree! Virtual objects really do grow up~ Ultimately, we wanted to create a multi-stage abstract representation with lofi aesthetics.

What it does

Let us transport you to a place where Lofi beats can grow trees. Your seed is a 2D triangle that is just yearning to grow up~ So how do you grow it? By tapping on it of course! Did you know tapping transfers your virtual enjoyment and lets virtual objects level up? Now you do.

Tap that 2D triangle seed of a virtual tree and watch it grow into a 3D pyramid. But wait! It grew too big. Oh gosh, you were really excited weren't you? Ok, we can solve this.

Let's use our all powerful finger again to tap these positronicatomic primative objects. A cylinder, a cube, and a sphere. What?! You didn't know those where the building blocks of all virtual life. Tsk. You know your protons, neutrons, and electrons? Yeah, to virtual objects, those are a cylinder, a cube, and a sphere ok. Don't judge. But we digress. Tap the cube, then the cylinder, and then the sphere in that order! Don't mess it up~

Boom~ Uh oh, what happened to the sphere. Why are we inside it. Oh my. Is that a render of a twerking person. Is this positronicatomic sphere laughing at us. Hah. Tap that twerking individual.

The individual fell into the hole? There are no holes in this dimension. Oh no. We're going too deep. Is this like the fifth lofidimension? Just keep tapping! We'll get out of this cylindrical pickle. Tap the hyperdimensional triangle...the one with all the crazy lights on it.

AHHHHHHHHHHHHHH now we're travelling into the sixth lofidimension. Wait is that a door? What happens if we tap it? What are you waiting for. Tap the door

And there we go. Tap the tree. We raised this kid of a virtual tree all the way from a 2D triangle. Whew. What a journey it is to be a parent.

Now plant this virtual tree into your real world using the world tracker AR technology, take a picture, and show the world that you care about trees, virtual or physical <3

Oh, and you can tap the tree to change the color. The tree will also utter a cute "thank you". Because you are breathtaking.

Before I forget, you can also pan to move the tree in the x & z axis + pinch to scale

How we built it

We used SparkAR to develop this AR effect for Instagram and Facebook. SparkAR is an AR software developed by Facebook that can be used by a wide range of individuals, from children interested in STEM, to Instagram influences, and of course, creative professionals.

The low poly models were made with Cinema 4D or taken from our creative library of royalty-free purchased assets. The 2D animations were made using Adobe Photoshop CC and After Effects CC. The 3D twerking animation was made through Adobe Mixamo and edited in Blender.

Challenges we ran into

Too many frames for animations! There is a texture animation that is around 21MB and really needed heavy compression. Next time, we'll do more with less frames.

Juggling performance for a wide range of phones is tough as well, especially for both platforms.

As Instagram has an aversion to text in AR effects. We sought to figure out a way to provide accessibility to users - e.g tap this to continue. In addition, we weren't able to include voice overs as it exceeded the total data allowance - 4mb. As such, we designed the experience itself to communicate the core narrative - which is growing a virtual tree is weird in an aesthically pleasingly good way.

Accomplishments that we're proud of

We made a creative filter based on Lofi and trees! We managed to design a multi-stage experience with no code, just using the visual editor! As a team, we've also managed to figure out a workflow that allows us to edit the project in stages, letting multiple people work in parallel.

We made this is in week - from inception to development to upload.

What we learned

Combining multiple Spark AR projects is tough but doable given time. A multi-stage AR experience should be given more time, say about 2 weeks. We need to learn how to compress audio better.

What's next for Lofi Beats Grow Trees

Fitting in the voice over into 4 MB (perhaps by reducing some of the textures) and uploading an improved version as a director's cut (or rather, developer commentary) :D

We recommend using the INSTAGRAM VERSION of the effect as it was made for the platform.

Preview links have been added under Try It Out section as the effect is still being reviewed.

Built With

  • sparkar
Share this project:

Updates