Personal Augmented Reality project created with Unity and Vuforia.
This project is an AR application that works with markers. The purpose is that users can scan a marker that is close to a painting (or that is the painting itself) and that the application displays the frame with an animation and three options that users will be able to select, the options would include:
- Button to take a screenshot.
- Button to show information regarding the work.
- Button to show some reference video.
- Design
- Development
- Testing the application
- Available targets
- Future updates
- Download the demo
- Videos used in the project
Before I started building the program, I had to think about the layout and graphic elements that I would use to present the information to the user. For the elaboration of the UI designs of the application, I used the figma tool, as a result, the following GUIs were elaborated for the project:
The first thing the user will see when starting the application, I made both the logo and the background with the Krita editing tool.
The corresponding painting will be displayed, includes an animation and the name of the painting is displayed above it along with three buttons: • On the left is a button to take screenshots. • On the right is the button that displays information about the painting and also the button that displays a video related to it.
When the user presses the information button, this box is shown that includes: the image and the name of the painting, the name of the artist and a brief description of the painting.
When the user presses the video button, a box with the video related to the painting will be displayed.
In this section I describe my process of creating the project.
For the home interface I created a canvas in the project, to this I added the elements that I designed previously: the background, the button, the logo and the texts, for the text I had to download and import the SourceSansPro source in the project.
An animation was included to give a more interactive effect to the home panel, the animation makes the home button fade and reappear subtly.
The button closes the home panel when pressed and in turn starts the ARCamera:
For each animation I had to edit some images of each painting, I did this with the Krita editing tool:
Edited images for The Starry Night painting:
Once the necessary images were finished, I imported them into Unity and converted them into sprites so that I could use them in the tool:
A "PlaneTitle" was added to add the title of the painting, new targets were added to the vuforia database and imported.
The paint was added on top of the target:
Once I imported the images and transformed them into sprites, with the Unity animation tool I put them together by adding the correct time intervals. With the property "Sprite" I was able to make each image change to another at the moment that I selected:
To add the project buttons, I had to create a new canvas, this time inside the ARCamera hierarchy just below the target and the painting (ImageHolder) so that they can appear together with the frame when the user points with their camera:
The icon and button were added, some transparency was also added to give it a better effect. The following functionality was added to the information button:
The code basically makes that when the information button is pressed, it activates the panel with the painting information:
The panel includes elements such as: titles, description, painting image and a button to close the panel.
The functionality of the button to close the panel is similar to that of the button to open it:
The button to display the video works the same as the button to display the information:
Video panel:
For the video, I added the video player component as well as a new texture so that I can render it:
The videos had to be imported prior to the project. To close the panel, this functionality was added to the button:
For the screenshot button, I imported an external Asset called Native Toolkit:
The following functionality was added to the screenshot button:
When the user presses the button, the application takes a screenshot and stores it on the device, in the path Android > data > com.IvnAguilar.AugmentedArt.
Home
Turning the camera on
Detecting the target
Pressing the information button
Pressing the video button
Screenshot saved
• New elements in the information panel that may be useful for the user or more interesting data.
• Updates for the video panel so the user can pause, control volume, or rewind and forward.
• New buttons to increase interaction with the user, an idea that was contemplated at the beginning was a button that displayed a new view with the gallery of all the paintings available in the application.
• New animations for each painting, also new effects or improve the existing ones.
• More paints could be added to the application to increase the information available.
You can download the demo clicking here
All the videos used in this project are not mine. These are the original authors: