In this effect, tapping the boombox on the device screen causes the effect to switch between 3 increasingly complex synced music loops. The volume of one clip will increase, with the others fading into the background. This technique is known as ‘loop layers’.
You'll use the Patch Editor to build this effect, trying out different audio, interaction and animation patches.
Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.
If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.
In this effect, we'll create child-parent relationships between different objects in the scene. Child objects will take on or be affected by the properties of the parent object.
To make one object the child of another, all you need to do is drag the child object onto the parent object. You can also right-click on an object and insert an object as its child.
When an object is a child of another object, it'll be listed underneath it in the Scene panel, like this:
In the example above, Boombox_animated is a 3D object. It's a child of a null object, placer. It will take on any transformations applied to the null object.
To start building the effect, add a plane tracker to your scene. Objects that are children of a plane tracker will appear when a flat surface is detected by the camera, for example a table or floor.
When you add a plane tracker the video in Spark AR Studio will change to blank.
Insert a null object as a child of the plane tracker.
To insert a null object:
We'll use placer to group 2 objects so we can make changes to them both at the same time:
We've already added the 3D object to the unfinished project. It's listed in the Assets panel as boombox_animated:
To add it to the effect, just drag and drop it from the Assets panel, into the Scene panel. Drag it on to placer so it becomes a child of the null object:
You'll see the boombox object in the Viewport and Simulator, but it isn't animated yet - we'll use animation patches to do this later.
Building a simple graph in the Patch Editor will animate the boombox.
If you expand boombox_animated in the Scene panel, you'll see it's made up of multiple objects:
The first 4 objects are meshes. The mesh is where materials are applied to determine how the boombox looks.
There's also a skeleton with 3 joints. We'll manipulate these joints to control the animation. We'll animate:
Creating the patches
We're going to manipulate the 3D Scale properties of the joints, so the boombox appears to get bigger, then smaller.
First, create patches to represent the 3D Scale of each joint:
Repeat these steps for speaker_left_jnt and speaker_right_jnt, so you have 3 patches in the Patch Editor.
Next, create patches to drive the animation:
The Loop Animation patch and Transition patches are usually used together. This is because the Loop Animation patch controls the progress of an animation, and the Transition patch can be configured to control how and where the object moves.
Animating the base
Start by connecting:
Because the Start value in the Transition patch is set to 0 by default, the rescaling effect is quite extreme:
To change this, set the Start values to 0.09.
Currently the boombox is getting bigger, then resetting to its original size. In the Loop Animation patch, check the box next to Mirrored. The boombox will get bigger and then gradually smaller:
The movement is also a bit slow - change the Duration to 0.4 to speed the animation up.
The final adjustment is to change the Curve in the Transition patch. This sets the movement of the object as it rescales. We chose Quintic In, but you could pick something different.
Your finished graph should look like this:
Animating the speakers
Animating the speakers is very similar to animating the base of the boombox. Again:
In the Loop Animation patch:
In the Transition patch:
Your graph should look like this:
Start by adding the 3 audio files to the scene. They’re listed in the Assets panel as:
You can customize this effect by swapping them for a different files - there are lots of free, licensed audio files to choose from in the AR Library.
Add the speakers
An object called a speaker renders audio in the effect. You’ll need to add 3, one for each audio file. Add the speakers as children of the placer null object:
It’s worth renaming the speakers to help you keep track as you’re building the effect. Rename:
Here’s how the Scene panel will look, with the 3 new speakers highlighted:
Set up the audio playback
You’ll use a patch representing each audio file, the Single-Clip Controller and the Audio Player patches to do this. A Pulse patch will detect when the effect opens and send a signal to the rest of the graph, triggering the playback. At the end of the graph, a patch representing the Audio property of each speaker will render the sound in the scene. To create this patch:
Three yellow patches will be added to the Patch Editor:
To create the other patches, right-click in the Patch Editor to open the menu. Add the following patches:
Finally a patch to represent each audio file:
Select an audio file in the Assets panel.
Drag it into the Patch Editor.
Repeat these steps for the remaining 2 audio files - you'll see 3 orange patches in the Patch Editor.
You'll build 3 small graphs, one for each audio file. To do this, connect:
Here’s how the 3 graphs in the Patch Editor will look:
If you click the Reset button in the toolbar, you’ll find all 3 clips are playing at the same time! It’s probably a good idea to turn down the volume on your computer until you’ve set up the loop layers.
Setting up audio loop layers
For the loop layers, we’ll add a volume value for each of the 3 speakers to an Option Picker patch. In each Option Picker, one speaker will be set to play at 50% volume, and the others will be set to 0.
An interaction patch connected to a Counter patch will count through each of the Option Picker patches. As a result, every time the boombox is tapped a different speaker will gradually reach 50% volume and the others will fade down to 0%.
Add the interaction patch
To add the interaction patch that will detect a tap on the boombox object on the device screen:
An Object Tap patch connected to a patch representing the boombox object in the scene will be added to the Patch Editor:
<image handle="GJrWEQVrjKXHuTgDAAAAAAAIVelUbj0JAAAD" />
To create the patches, right-click in the Patch Editor and add:
Next create patches to represent the Volume property of the speakers. Like before, select the speakers in the Scene panel. This time, click the arrow symbol next to Volume in the Inspector. 3 yellow patches will be added to the Patch Editor:
Connecting the patches
Now make connections between:
Here’s how the graph will look:
Editing the patches
Because there are 3 options to count through, change the Maximum Count value in the Counter patch to 3.
In each Option Picker patch, add a value to control the volume:
Now each time the screen is tapped, the counter state will be advanced. As a result, only one of the audio clips to be audible.
Adding exponential smoothing
An Exponential Smoothing patch will finish this part of the graph. Adding this patch between each Option Picker and speaker patch will change the volume more gradually when the screen is tapped, creating the cross-fade effect. Create this patch using the menu in the Patch Editor.
The finished section of the graph should will like this:
Editing the animation
So the animation moves in time with the audio clip, make a final adjustment to the animation patches you created earlier.
The audio clip is playing at 85 beats per minute. You’re going to use a Divide patch to output the seconds between each beat. This signal will drive the animation of the base of the speaker. You’ll animate the speakers at twice the speed of the base, using another Divide patch to halve the number outputted by the first Divide patch.
From the menu in the Patch Editor, select 2 Divide patches. Connect:
In the first Divide patch, set:
Set the bottom value of the second Divide patch to 2.
Here’s how the complete graph will look:
This effect uses interaction patches to change the scale, position and rotation of the boombox.
We'll adjust these properties in the null object, placer. This is because the scale, rotation and position of the boombox object are already controlled by the animation:
Learn more about editing these properties to manipulate the boombox in response to interactions.
The best way to try out this effect is by mirroring it to your device with the Spark AR Player app.