Since Instagram did not approve my first filter, Cigarette Heaven, I decided to see if I could recreate my Banksy Artwork shredder which is almost a year old. It was in this experiment that I learned to really dig the Patch Editor and Instagram ended up approving the effect! Having recently been approved to join the Official Spark AR community on Facebook, I’ve been exposed to a vibrant community of artists creating work and sharing how they did it. I know I’ve already had many questions answered by simply visiting the group or watching one of the many YouTube tutorials available. In an effort to join in on this goodwill, I’d like to share how I put together the shredder in Spark AR.
Anatomy of a Filter
The effect really consists of three layers stacked on top of each other. On the bottom is the wooden paneling which exists behind the artwork or in our case the user’s video. One layer up is the user video, provided from the camera texture. And finally, the top layer consists of the art frame and a strip of white bars. As the camera layer slides down, it appears behind the white strips which mimics the effect of shredded paper. The effect layers then live on top of a wall layer which in our case is just a white background. Here’s how I created this arrangement in Spark AR.
First, I created a new
canvas0 object in Camera space mode and Full Screen sizing. Within this canvas, I added a new Rectangle called
wall, set it’s sizing to full width and height, and finally gave it a new flat white material. The next canvas,
canvas1, is set to World space mode with a size of
216. Contained within is a Rectangle named
wood with a similar sizing. This rectangle will receive a new material which uses the wooden back panel texture.
canvas2 is also set to World space mode and receives similar sizing. Within here we’ll add another Rectangle named
user which uses a material made of the camera texture. Let’s size it
216 also. (Note: this texture may looked stretched initially and we’ll talk about fixing that soon.) Finally, the last canvas,
canvas3, is also set to World space but receives a size of
310. Within this canvas will be two Rectangles. The first is the
frame itself. Sized at
310 also, this Rectangle includes a texture consisting of the art frame image. Finally, the last Rectangle, named
shreds, is sized at
150 and lives at a
-230 y position. This Rectangle consists of a material which contains our shred bars.
I’m not sure if it’s necessary for this effect but I also added layers for both background and foreground canvases and them associated them accordingly.
Prevent Camera Texture from Stretching
While our canvas objects all have precise pixel sizes, our camera texture does not. This is simply because Instagram works on many devices with many different dimensions. We’ll need to transform the camera texture based on the Screen Size. To do this, we’re going to jump into the Patch Editor. But first, click
Device in the Scene panel and create a Producer Patch. Let’s also choose the material which contains our camera texture and instead click the arrow to create a patch for it also. Finally, drag
cameraTexture0 into the patch editor to create another patch.
Now, in the Patch Editor starting from the
Device Producer Patch, click and drag the top “Screen Size” arrow out and
Unpack it as a Vector 2. Drag the
x value out and divide it from
150 to get our width percent. Then drag the
y out and
Multiply it by the width percent to get our new height. Then
Divide this new height by
216 to compute our
y transform scale.
y scale together with an
x scale of
1 then pass this Vector 2 over to a
2D Transform Pack Scale property. You’ll also want to set the pivot to
0.5 so it transforms from the center. Then patch the 2D transform to a
Texture Transform which is also attached to the
RGBA property of
cameraTexture0. Finally, connect this transformed texture to your user material.
Animating the Shredder
The animation of our filter is powered by a screen tap which moves the
canvas2 object which contains our user rectangle down its
y axis. You can do this by first adding a path for
Screen Tap in the Interaction section. Patch the
Tap action to both the
Reset of an
Animation patch and set the duration to five seconds. Then, patch the
Progress to a
Transition patch and set the end
y value to be
canvas2 in the Scene panel and click the arrow next to position in the Inspector panel to create a patch for it. Finally, connect the
Transition value to the
canvas2 position patch.
Now, when you tap your screen, your artwork should slide down. Tap again to restart the animation.
Adding Shredding Sound
We can the same
Screen Tap patch to power a simple audio clip. First, add your audio clip by choosing
+ Add Asset and selecting a
.m4a from your computer. Next, patch the same
Tap action to the
Play property of a new
Single-Clip Controller. Then, patch the controller to a new
Audio Player patch which also has the
.m4a audio file patched into it. (You can create a patch for your audio file by dragging it from the Assets panel into the Path Editor.) Back in the Scene panel, click
+ Add Object and add a
Speaker. Then in the Inspector panel, click the arrow next to
Audio to create a patch for it. Finally, patch the
Audio Player audio over to the