Creating the colorful gradient texture

We’ll start by creating a new diffuse texture for the rect_betweenhands object that's already added to the unfinished project. First, create a Diffuse Texture property patch for the betweenhands_mat:

1. In the Assets panel, select betweenhands_mat.
2. Click the arrow to the left of Texture in the Inspector.
3. Drag the patch to a clear space in the Patch Editor, where it’s easier to work with.

Next, we'll use a patch asset to create the colorful texture. For this tutorial we're using the Quad Gradient patch asset from AR library. It’s listed in the Assets panel. To add it to your graph:

1. Drag the Quad Gradient from the Assets panel to the Patch Editor.
2. Connect the patch to the Diffuse Texture property patch.
3. Finally, in the Assets panel, select betweenhands_mat and In the Inspector, change the Blend Mode to Add and the Opacity to 50%.

Your graph will look like this:

Hold up both hands and you’ll see the new colorful material in the Simulator!

Creating the zoom effect

Next you’ll use the Patch Editor to make the camera texture bigger and smaller, creating the zoom effect we need.

First, add a rectangle:

1. Click + at the bottom of the Scene panel.
2. Select Rectangle.
3. Rename it to cam_tex.

Next, ensure the rectangle is set in the correct layer and that it fills the entire screen. You can do both in in the Inspector, with cam_tex selected:

1. To the right of Layer, make sure that layer0, is selected. This is because in the Layers panel, we arranged this layer to be rendered last, so it doesnt cover the colorful gradient.
2. To the right of Width and Height, click the value.
3. From the dropdowns that appear, select Fill Width, and Fill Height.

This will temporarily cover the camera feed input with a checked texture. To create a material for the rectangle:

1. With your new rectangle selected, go to the Inspector and to the right of Materials, click + , then Create New Material.
2. Rename the material, cam_tex_mat.
3. In the Asset panel, select cam_tex_mat.
4. In the Inspector, change the material’s Shader Type to Flat.

Staying inside the Inspector, click the arrow to the left of Texture. This will create a patch representing the material’s texture.

Then create the camera texture:

1. In the Scene panel, select the Camera.
2. In the Inspector, to the right of Texture Extraction, click +

It'll be listed as cameraTexture0 in the Assets panel. Drag cameraTexture0 from the Assets panel into the Patch Editor.

Finally, in the Patch Editor, connect the RGBA port to the yellow patch representing cam_tex_mat. Your graph will look like this:

You’ll see the live video feed back in the Simulator. We’ll add the zoom logic next.

Scaling the camera texture

To create the zoom effect, we need to scale the camera texture up and down dynamically as the hands are tracked. We’ll start with creating the patch graph to scale the texture. First add a Texture Transform and 2D transform pack pacth, then connect:

• The CameraTexture0 RGBA output to the Texture input in the Texture Transform patch.
• The output of the Texture Transform patch to the input of the camTextMat Diffuse Texture. This replaces the connection between cameraTexture0 and camTextMat.
• The 2D Transform Pack patch to the Transform input of the Texture Transform patch.

You won’t see any zoom effect in the camera because we haven’t scaled the camera texture up or down yet. To do this, we would need to edit the x and yScale values in the 2D Transform Pack patch. In the example below, we’re manually increasing the scale on the x and y axis by 0.3. In the next section we’ll show you how to do this dynamically, as each hand is tracked.

Dynamically scaling the camera texture

To scale the camera texture dynamically, we need to trigger an animation patch when a hand is found in the camera, connected to a transition patch, which will dynamically change the scale of the camera texture. We’re going to do this for one hand at a time, so start by locating the first Hand Bounding Box patch — the one in the green comment box.

Next add a pulse patch, an animation patch and a transition patch.

Then connect:

1. The Is Tracked output of the Hand Bounding Box to the Pulse patch.
2. The Turned On output of the Pulse patch to the Play input in the Animation patch.
3. The Turned Off output of the Pulse patch to the Reset input in the Animation patch. We’ve left the animation duration at the default 1, but you can edit this to suit.
4. The Progress output in the Animation patch to the Progress input in the Transition patch. At the bottom of the Transition patch, change the data type to Vector 2, as we’re working with 2D coordinates (the x and y values of the camera texture).
5. Edit the values in the Transition patch by changing the Start x and y values to 1 and the End x and y values to 1.3. This way, we are telling Spark AR to dynamically scale the camera texture from by 0.3 when a hand is tracked in the scene.

The Transition patch to the Scale input in the 2D Transform Pack patch.

Your graph will look like this:

Your effect looks like this:

You’ll notice that the zoom transition seems quite abrupt. We’ll add an exponential smoothing function between the transition and scaling to smooth it and make it more natural. First add:

• An Unpack patch. Change the data type to Vector 2.
• A Pack patch. Change the data type to Vector 2.
• Two Exponential Smoothing patches.

Then connect:

1. The Transition patch to the Unpack Patch. This splits the x and y signals into two separate number values, required for the Exponential Smoothing patch.
2. Connect the X of the Unpack patch to one Exponential Smoothing patch and the Y output to the other. This adds smoothing to both signals.
3. Connect the Outputs of the Exponential Smoothing patches to the inputs of the Pack patch.
4. Connect the Vector output of the Pack patch to the Scale input of the 2D Transform Pack. This packs the X and Y data streams back into a vector 2 data type.

Increasing the zoom effect with the second hand

At the moment the zoom effect only works for one hand. To create an increased zoom effect when the second hand is tracked, we need to set up some logic to check if the hand count in the hand finder patch is equal 2 and, if so, scale the camera texture to 1.6. First add an Equals Exactly patch and an If then Else patch. Then connect:

1. The count output in the Hand Finder patch to the First Number input in the Equals Exactly patch.
2. The Equals Exactly patch to the Condition input of the If then Else patch. Make sure to change the If then Else patch to Vector 2 data type.
3. The If Then Else patch to the End input in the Transition patch.

Edit the values

In the Equals Exactly patch, edit the Second Number value to 2. This means a boolean true signal will be sent to the If Then Else patch when the hand count in the Hand Finder patch is 2.

Finally in the If Then Else patch edit the Else value to 1.3 and the Then value to 1.6 on both axis. This means that if the condition is true, and there are two hands found, the x and y values of the camera texture will increase to 1.6. If only one hand is found the value increases to 1.3.

Your graph will look like this:

Here’s how your final effect will look!