Projects marked with the "Playground Project" badge are short-term projects, visual experiments, or other exercises where my intent was to develop or improve a skill based on smaller creative problems. Hence, they may not feature a strategy or process explanation. Check out my playground page for more projects like this.
OK
ABOUTPRODUCTSCASE STUDIESIN THE NEWSBLOG
ABOUTWORKBLOG
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
The local feed including an onboarding message when first visited. You also have a quick overview of local events and all users that are currently online which is the equivalent of them being nearby.
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
Designed and developed with ❤️ by Dominik Hofacker.
If you want to hear me talk in a hilarious southern accent or you happen to like my work, send me a message here (yeehaw). hofackerd@mymail.vcu.edu.