Bonsai
Role / UI Design, Animation, Programming
Time / 2020, 3 weeks
Contributor / DongNan
A piece of BonSai that resumes time and space, and is light enough to carry around. This Bonsai is in virtual form and it replays the cycle of seasons. As living in a concrete urban site, I sometimes hardly find the opportunity to go out often. New York cityscapes are hard to tell the changes unless the temperature hits you. Thus, I create a colorful BONSAI piece to appreciate nature and reflect the good memories that I spend outside the city. The user can move and pan the piece around.
The term Bonsai is a traditional floral design from Japan. You take a branch from a tree to plant it in a pot and let the little tree grow for decades and decades, meanwhile pruning and designing the tree for an intriguing form. I took the idea of planting a tree and placed the idea, not in a pot but our daily mobile devices to form this digital bonsai that everyone should have.
ideation
When thinking of augmented experience, I was attracted to building a getaway object that helps me relax inside the concrete forest of New York City.
New York City is known for the skyscrapers that are scattered around the tiny island. Sometimes I do see them as surreal. When the skyscrapers reflecting the atmosphere, I was amazed and thought it would be cool to create a project between the city and nature.
Skyscrapers in New York City
Another emerged motivation is that the accessibility to green space in the New York City is very limited for many people. They would not have the opportunity to spend enough time around the nature in this metropolitan. Thus, I built this virtual Bonsai upon the need for the reminiscence of the green nature within the city infustructure.
Set up a tone
SInce it is originated from a gardening art, the first thought I have for Bonsai, is the change of the seasons. I also want to create a sense of soft touch. I see a lot of the recent artwork that has been highlighted on the precision and details of its material. I want to do something different.
Color Palette
For my Bonsai, the theme will land on creating an intimate environment for users, as well as softness. The colors were made before the forms. People praise nature across cultures. I was searching for the "right" elements for each seasons. The ideal colors are calm, warm and cheerful.
Sketch
For my Bonsai, the theme will land on creating an intimate environment for users, as well as softness. The colors were made before the forms. People praise nature across cultures. I was searching for the "right" elements for each seasons. The ideal colors are calm, warm and cheerful.
The transition design will be triggered by the changing angles, to represent the cycle of a year as well as the growth ring.
Along with four seasons, there would also be seasonal elements that will add the mood, such as flower petals for spring, fireflies in summer, falling leaves for fall, and snowflakes for winter.
Mockup
The transition is designed very straightforward:
Model Mockup
According to the animation transition, I thus created the animated models for GLTF files, the AR format. This is the part I ran into the most problems.
Trouble shooting
Designing animated models was not that hard, but the procedure to translate those into the AR language was very dreadful. Besides the limited polygons and animation that a smartphone processor could carry, there were several unexpected troubles.
Particle System Failures
The design elements for the trees were initially created with particle systems and metaball particle systems. Apparently, it is not recognizable in GLTF format. The solution is to apply particle systems to mesh.
UV Mapping Glitches
I created the UV maps for all in a single image, the dimension was not small, 1024 px x 1024 px.
However, it always needed manual adjustments.
Missing Animations
Another glitch I encountered was the missing animation, the GLTF format was capable to carry tiny animations, any complex animations will be discarded. Thus, it is better to carry multiple animated models than just having everything in one.
Xcode Editor could be a PLUS!
Just in case any shading would not work, such as the illumination/emission, or you want to have a different UVs or apply different coats or multiplications, Xcode editor could be the last thing that will save the project.
Final Iteration
Right after a few edits on the app designs, I was able to carry the Bonsai on my phone.
Here it is:
Different Scenario Applications
And, you can place it anywhere
Further Editions
I do want to extend this project to my thesis. I will keep working on it this spring.