IG Random Selector | My First AR Project — Part 1

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.

Right-click on Focal Distance and hover over add. Click on Face Tracker.

After the Face Tracker has been added, right-click the freshly created Face Tracker and create 2 planes. Call them ‘Question’ and ‘Answers’.