Calligraphy Animals | AR experience

To create this little AR project, I found an inspiration in an Andrew Fox’s kids book Learn to Draw Calligraphy Animals. The book has a step by step guide of how to draw an animal on one side, and a final drawing with some info about the animal on the other.

Tools used: Unity, Vuforia, Adobe Photoshop, Adobe AfterEffects.

Persona: I got this book for my 3.5 year old niece who is in love with drawing. She is very young so needs to be give a step by step tutorial on how to draw simple things. Despite of the age, however, 3 year olds seem to be way more fluent with smart phones than I could have imagined.

Idea: Using a mobile phone, one could point a camera at a final drawing and have a step by step guide animated on the screen too.

Design process

To tackle the task, I needed to:
1.Create a step by step guide animations for each animal in the book (Photoshop + AfterEffects);
2. Implement image recognition by camera, so that each animal drawing is triggering an animation when looked at through the camera (Unity + Vuforia).

Animation: Using Photoshop first to edit contrast and cut all elements out, I moved to AfterEffects to create a final step by step animation guide.

Image recognition: After taking photographs of animals target images, I had to edit contrast and crop them in Photoshop, so there were no elements that would disturb recognition by the Vuforia Target Manager. Although overall, having had very distinct black and white images is great. Images were very easily found through the camera.

This is a very simple task, but I find a huge potential in is, as it can animate storytelling for kids. Reading an ordinary book with plain illustrations can be merged with watching animations through your phone camera.


March 11, 2017


VR Design