AR ( augmented reality ) is not going anywhere. As a web developer, I’ve stayed clear of anything AR or VR related to focus on the many libraries that seem to be appearing out of nowhere. Ironically, out of nowhere, I was tasked to create a Random Selector on Instagram. This was my journey.
The AR Random Selector is this, for lack of a better term, a game on Instagram. When users starts recording on their phones, the initial image changes and randomly chooses an answer. When I first started working on it, there were no tutorials for what I needed so the building process was littered with trials and errors. I’ll skip the failures and demonstrate a step-by-step of what worked for me.
00. Requirements
- Download Spark AR (free)
- Download Spark AR Player on your phone ( Play Store / App Store )
- Create the images for your randomizer
– 1 must be the ‘question’ while the others can be the ‘answers’
– Ensure all these images are the relatively the same size - Understanding knowledge conditional logic (ex. if/else )
- A Facebook and/or Instagram account to publish
That’s it. Coding is not required for this, but Spark AR does have the ability to include custom scripts. Let’s jump in:
01. Create a New Project
Feel free to name it anything and save the empty file.
On the top left portion of the window, you’ll see a tab/panel called Scene. This will have default lighting and where we’ll add the face recognition.
Delete any pre-loaded features inside Focal Distance. Once deleted, right-click on Focal Distance and hover over add. Click on Face Tracker. Below is a screen shot for visual representation.
After the Face Tracker has been added, right-click the freshly created Face Tracker and create 2 planes. Call them ‘Question’ and ‘Answers’.