Which Post-Punk Band Are You?

How I made an Instagram filter during the Coronavirus shelter in place...

In this walkthrough, we'll be making a 'Which Post-Punk Band Are You?' random band selector, in a style similar to which band filters you're currently seeing on Instagram. I'll be using the free platform called Spark AR to create the Instagram filter.

At the time that I am posting this I have had over 1000 shares. 

How to make an Instagram filter?

What I've already done is create some band images with the band names photoshopped into them. This will become my gallery to randomize.

I'm going to go to add an asset, add my animation sequence, and I'm just going to call this bands selector because I like to name things as I go along. In Spark AR, go to texture, choose the file, and I'm going to select my eleven images here.

I've actually got eleven sections here. You could have as many as you want. The more you've got, the more random and the more options the user could have, so go nuts. 

I'm going to hit open to get my nose in. And what that should do is it should create an animation texture file. So we've got these eleven frames here as a texture sequence linked to my bands select animation sequence. 

I'm going to enable the randomizer, and I'm just going to turn off the loop for now. So I want this randomizer to appear above the user's head again, mimicking a quite popular filter style.

I'm going to add my face tracker into my scene and then add a plane to that. Making sure that my plane is a child of my face tracker. After that, I'm going to move the tracker above the head and scale it up a little bit.

I've also created a graphic that has the 'Which Post-Punk Band Are You?' question on it, which I'll now import. And I'm going to use that as a material. I'm going to select my plane, and I'm going to call this my question plane. 

1. Create new material
2. Choose this new material
3. Change it to be flat
4. Choose a texture to be my question. 
5. Name the material 

So now we should have our one plane, which would be our question above our head. I'm going to adjust the scale a little bit and reposition it a bit. So it's just above the head.

Now I'm going to select this plane, hit command D, or control D to duplicate. I could also right-click and hit duplicate, this one is going to be the answer plane, so be sure to name it appropriately.

I'm going to create another new material and I'm going to set that to flat too. It is going to be my animation sequence. And I'm for now going to turn back on my animation so I can see it looping.

At the moment, we should have these two planes, and I want to make them roughly the same size and approximately the same position. 

Now we need to start giving the filter some controls. I'm going to go to view, show patch editor, and we're going to create a toggle. 

I'm going to add a screen tap. This could again be any number of options. If you wanted this to be something linked to the face tracker, you could have it as a gesture. Commonly people will choose the sort of headshake or nod action to trigger the Instagram filter. 

I'm going to link it from my top option to a switch. This switch is going to basically toggle between the two planes. 

I want the answer visibility linked to my not, and my question also connected to this switch. So the answer is not visible to begin with. I want my switch to be visible, so hence does not inverses it to be visible, confusing, I know.

Now, if I was to tap the screen, it would toggle between the two and hide the animation here, which we're now going to start controlling.

The way that these effects are typically run without using JavaScript is using a timer. We are going to use the actual time of the application to trigger it.

I'm going to add an offset patch. This offset patch will take in a one-time value and allow us to adjust it by a set amount of time. It will also, most importantly, give us the option for a reset. I want to make sure that I have the screen tap linked to the reset. 

I want my offset linked to a less than. This could be a more than, or an equals too, depending on how you want this to be controlled.

Link this offset to a loop animation. Make sure the duration is fairly small. If the value is small, the filter will actually play quite fast. I'm adjusting it to 0.5 for now. These values can be changed later. 

Link the looped value to a random patch, and the end value will be the number of options, in this case, eleven. Link this to a round function, because I want it to be a whole number. 

Then go to the bands selector, choose the current frame, and link this to the band frame. Make sure that the less than is set to not be zero; this is how many seconds it will be running before it sort of stops. 

If it is set to eight seconds, as the animation is less than eight seconds, it will play. If a user taps the screen, it's going to start the counter. It will go for about eight seconds, it'll stop, and choose a random frame. 

After I ran it the first time, I got The Chameleons. My favorite band is The Chameleons, apparently. 

I hope this has been useful to all of you or at least gave you something to occupy sometime during the Coronavirus stay home period.

Click here to go back to the blog.