Using Augmented Reality to blow your special one's mind on their birthday's
Make someone feel extra special for their birthday using Augumented Reality. Read on to find out more!!
As long as one is human, everyone wants to know that they are special to someone else. I wanted to let another know that they are my special someone, and even better her birthday was right across the corner. So, I set out to give her the best birthday wish she ever got.
The hard part came when the question “HOW!!!” arrived in my head and kept slapping any idea that was even remotely “common” or “known” into the abyss of “HELL NO!!”. After almost getting a bald patch while young trying to land a good idea, it dawned on me…….I am a GEEK!! and everyone knows in the 21st century, there just cannot exist an unfair advantage greater than that apart from being a GOD ofcourse
Now, I know she loves Pokemon Go and the hype AR is getting right now….*cue drum rolls*
The idea of using Augmented Reality for her birthday!!!!
Thy reached the Technical Details Floodgate, Proceed at Own Risk
I used the following libraries for making this:-
A-frame, read more about it here and
AR.js, read more about it here and here
A-Frame’s Particle System Component, this was for adding things like stars or dust or snow something like a party of sorts.
Believe me, even if you don’t know much about VR or AR, you can easily create a VR scene using A-Frame. The only prerequisite is HTML, which you can learn easily here. For a better understanding, though, I recommend that you go through A-Frame School, which is a great collection of tutorials intended for beginners.
To watch the AR scene, you have to:
- Open this HIRO marker image in your desktop browser.
- Open this AR web app in your phone browser, and point it to your screen.
When you scan a marker (here, a HIRO marker), it’ll display an AR scene on your phone, just like the image above. I used a plain HIRO marker, but you can create your own marker as well.
I got the 3D models files of cake from Google Poly. You can import any asset files in A-Frame using the <a-assets> tag. You can also import separate fonts, in case you want to use a different font.
A-Frame supports Audio files as well. You can use the <audio> tag to import your files, under the <a-assets> tag.
The final code and the file structure was like below
index.html
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
</head>
<body style="margin: 0px;overflow: hidden;">
<a-scene embedded arjs="sourceType:webcam;debugUIEnabled: false;">
<a-assets>
<a-asset-item id="cake" src="./model.gltf"></a-asset-item>
</a-assets>
<a-marker-camera preset="hiro">
<a-entity rotation="-90 0 0">
<a-entity position="0 -7 -15" particle-system="preset:default;accelerationValue:0,-10,0;color:#f9e154;particleCount:1000;direction:-1;rotationAxis:z;rotation:-90 0 0"></a-entity>
</a-entity>
<a-entity rotation="-80 0 0" position="0 -2 0" text-geometry="value: Happy Birthday Harshitha"></a-entity>
<a-entity rotation="-80 0 0" scale="1.1 1.1 1.1" gltf-model="#cake"></a-entity>
</a-marker-camera>
</a-scene>
</body>
</html>
Also, for it to work, you should not open the index.html file directly but intead download the live server or host it in places like github, glitch or areas like that but the easiest way is to get the live server extension for VS code and serve it through there or atleast that is what I did.
If everything goes fine, It should look something like this
This I made for public use, but my own was a bit more different but I cannot add those files here. You can easily customize it to your own as long as you understand how it was done. So, GO CRAZY!!
Resources
- Source Code — https://github.com/highskillzz/ARbirthday-aframe
- Demo — https://highskillzz.github.io/ARbirthday-aframe/
Pratik Parmar
There is also another article that does the same thing as this one, it would be better to check it out if you would like to know the meaning of each line of code.
Thank you for reading. I mostly write tutorials on the problems I have faced and whatever new tech I explore, so stay tuned for the next article.
If you found this article helpful, give me some claps 👏.
And you can follow me on Twitter.