BC Bestie: An AR Filter to Spread Good Vibes
A private AR filter that follows a recent trend on Instagram.
Intent:
Experimentation
Role:
AR, Branding, Development
Tech:
Spark AR, Figma, JavaScript
Duration:
3 hours
In early 2020, a new trend of face filters has emerged that involves random generators about a variety of different topics and. I gave this trend a try and built my own face filter that is supposed to determine my classmates soon-to-be best friend. The filter quickly spread in my private community and created good vibes.
Who will be your bestie in 2020?
As a graduate student at VCU Brandcenter, we are a big family that is fairly close and comes together a lot. I wanted to ask the Oracle who would become my best friend in 2020 and give my classmates the chance to try it out as well. According to the demonstration below, my fellow Australian friend and copywriter Kevin Ma it is.
The final filter for Instagram
The Process
Source Code
JavaScript
Just a few lines of code were necessary to make this simple effect happen. The source code is provided below.
const Scene = require('Scene');
export const Diagnostics = require('Diagnostics');
const Random = require('Random');
const Time = require('Time');
const Reactive = require('Reactive');
const Materials = require('Materials');
const Shaders = require('Shaders');
const Textures = require('Textures');const intervalTime = 100;
const waitUntilStart = 3000;
const stopTimerTime = 7000;
const maxIndex = 10;
var plane = Scene.root.find("plane0");
var randomNum = Math.floor(Random.random() * maxIndex) + 1;
const planeMat = Materials.get('planeMat');
const textureSlot = Shaders.DefaultMaterialTextures.DIFFUSE;
var intervalTimer;
Time.setTimeout(setUp,waitUntilStart);

function setUp()
{
   intervalTimer = Time.setInterval(changeScale, intervalTime);
}

function changeScale()
{
   Diagnostics.log(randomNum);
   randomNum = Math.floor(Random.random() * maxIndex) +1;
   planeMat.setTexture(Textures.get(randomNum.toString()).signal, {textureSlotName: textureSlot});
}
function stopIntervalTimer()
{
 Time.clearInterval(intervalTimer);
}

function random_item(items)
{
return items[Math.floor(Math.random()*items.length)];   
}

const timeoutTimer = Time.setTimeout(stopIntervalTimer, stopTimerTime);
Reflection
My biggest learning from this experimental project was that face filters are not as complex to build as one might think. My strongest programming language is JavaScript and I was very fortunate to find out that Facebook's Spark AR scripting is based on exactly that. I am very much looking forward to creating more complex face filters in the future that facilitate our lives in new and revolutionary ways.
Team
Dominik Hofacker
Experience Designer