Revisiting the Banksy Artwork Shredder in Spark AR

An introduction to the Patch Editor

Aug 30 · 5 min read

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 150 by 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 150 by 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 240 by 310. Within this canvas will be two Rectangles. The first is the frame itself. Sized at 240 by 310 also, this Rectangle includes a texture consisting of the art frame image. Finally, the last Rectangle, named shreds, is sized at 150 by 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. Pack the 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 by 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 Play and 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 -0.07. Select 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 speaker0 patch.

Lee Martin

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade