Skip to main content

Scan doodles and watch them come alive!

In this post I'd like to share about one of my projects involving doodles and bringing them to live with Unity. We prepare doodle papers and some crayons and let children color them. After they're done, we scan the images and they appear on the screen. The screen is projected on walls using projectors.


Doodles come alive on the screen

Project flow

I utilized document scanners readily available such as the following.

A document scanner

The scanner has many helpful features, such as cropping and rotating the scanned images so they are nice and straight even if the paper is slightly rotated or not aligned properly.

The scanned images are stored in a server and a Unity application polls the server for new images every few seconds. For the server I initially used AWS S3 for image storage and later on we switched to a local image server with Node JS.

Attaching 2D Texture to a 3D Model

I no longer have access to the actual doodle papers but they look like any other doodle template.
A sample of what the doodle paper looks like

After coloring the paper and scanned, the Unity application retrieves the images as PNG files and converts them into Texture2D objects. These textures are then applied to a 3D model with predetermined UV mapping. As a result, we get a 3D model of the fish (and other doodle objects such as trains, airplanes, etc) with the coloring as done on paper.

Differentiating Doodle Types

Since we had several types of doodles to choose from, fish, airplanes, UFO, divers, etc we need a way to separate the scanned images by their types. For this, we utilized QR codes printed on the doodle papers. Each QR code correspond to a doodle type and a small scanner application sorts out the types before sending them to the image server.

Challenges and possible extensions

There is limited space to show the doodle objects and it gets crowded really fast. If you have too many objects on screen they start to collide with each other and become very hard to control/animate. I had to make sure only a certain amount of the latest scanned doodles are active on the screen. And we cannot just make the older doodles disappear so I had to move them away from the viewport before turning them inactive.

Another challenge is that the installation does not have any scene changes like in games. So the app has to be very stable, and performance has to be high. We were running the installations for about 12 hours every day so making sure the installation is stable and runs without bugs was very challenging.

Another part that can be improved is the interactivity of the installation. It was mainly displaying 3D models on screen from paper doodles, but we could add more diverse interactions by adding touch support and various events (such as a shark appearing and eating all the doodle fishes every now and then). This could be something to explore in future installations.



Comments

Post a Comment

Popular posts from this blog

Using FCM with the new HTTP v1 API and NodeJS

When trying to send FCM notifications I found out that Google has changed their API specifications. The legacy API still works but if you want to use the latest v1 API you need to make several changes. The list of changes is listed on their site so I won't be repeating them again but I'll just mention some of the things that caused some trial and error on my project. The official guide from Google is here : Official Migration Guide to v1 . The request must have a Body with the JSON containing the message data. Most importantly it needs to have "message" field which must contain the target of the notification. Usually this is a Topic, or Device IDs. Since my previous project was using GAS, my request had a field called "payload" instead of "body". Using the request from my previous project, my request in Node JS was as follows: request ({ url: 'https://fcm.googleapis.com/v1/projects/safe-door-278108/messages:send' , method: ...
Post a Comment
Read more

Building a native plugin for Intel Realsense D415 for Unity

Based on a previous post , I decided to write a plugin for the Intel Realsense SDK methods so we can use these methods from within Unity. FYI Intel also has their own Unity wrapper in their Github repository , but for our projects, I needed to perform image processing with OpenCV and passing the results to Unity instead of just the raw image/depth data. There is a plugin called OpenCVForUnity to use OpenCV functions from Unity but previous experiments indicate the image processing inside Unity can take a long time. I hope this post can help someone else who wants to use Intel's cameras or any other devices natively in Unity. Test Environment Windows 10 64bit Unity 2017.2.0f3 x64 bit Realsense SDK from Intel CMake 3.0 or higher Steps Checkout the native plugin code here . Don't worry about the other projects in the same repository. The relevant code is in the link above. Checkout the Unity sample project here . However, instead of master you need to go to the br...
5 comments
Read more

Microsoft Azure Face API and Unity

During one of my projects, I came across Microsoft's face recognition API (Azure Face API) and it looked good enough to recognize people's faces and detect if a person is a newcomer or a repeating customer to our store. As our installations mainly use the game engine Unity, I wanted to be able to use the Face API from Unity. Face API does not have an SDK for Unity but their requests are just HTTP requests so the Networking classes in Unity can be wrapped into methods to make it easy to call these APIs. First of all, to those who just want to see the code, here it is . My tests focus on the identification of a face in an input image. The full tutorial I followed can be found here . The Main scene goes through the steps in the tutorial such as creating a PersonGroup and adding Persons to the group if it is not created yet. Just make sure you: Change the API key. I used a free trial key which is no longer valid. Use whatever images you want. I don't mind you us...
Post a Comment
Read more