The make up effect

For this tutorial you'll create the make up effect by applying a custom texture to a face mesh.

Start by creating a face mesh as a child of the face tracker that's already in the scene. To help you keep track, rename it. We chose faceMeshMakeup.

In the Inspector, create a new material for faceMeshMakeup. Rename the material bunnyMakeup_mat.

You'll need to make a few changes to bunnyMakeup_mat in the Inspector:

1. Change the Shader Type to Face Paint.
2. To the right of Texture, click the dropdown menu and select bunnyMakeup_tex.

The make up will look quite bright. Under Render Options there are a few changes you can make, so it looks more natural. Change:

1. Opacity - we chose 80%.
2. BG Influence - we chose 50%.
3. Brightness - we chose 40%.

Your project will look like this:

Retouching

To add retouching, create a second face mesh and rename it faceMeshRetouch.

In the Inspector:

1. Create a new material for faceMeshRetouch.
2. Change the Shader Type to Retouching.
3. Adjust the slider to add a smoothing effect to the scene. Set the slider to 100%.

Face distortion

To distort the shape of the face, you'll add a 3D object called a blendshape to a face mesh. It's listed in the Assets panel as bunnyFaceMorph. This blendshape makes the eyes and cheeks a bit rounder, and the mouth a bit smaller.

Create a face mesh and rename it faceMeshDistortion. Scroll down to Deformation in the Inspector. Then:

1. Click + next to Deformation, and select bunnyFaceMorph.
2. Under Morph Object, adjust the slider to make the deformation more, or less, dramatic. We set it to 100%.
3. Uncheck the boxes next to Eyes and Mouth, so the face mesh doesn't cover them.

The shape of the face will look different:

Adding the 3D objects

The whiskers and ears are made using 3D objects.

We'll manipulate the position, scale and rotation of the 3D objects by making changes to the null objects. Otherwise, these properties would be controlled by the animations that are baked into the 3D object.

To add the objects to scene, drag them from the Assets panel into the Scene panel. We added each object to the scene twice:

1. Drag bunnyEar_animated onto bunnyEarRotator_left, and again onto bunnyEarRotator_right.
2. Drag bunnyWhisker_animated onto bunnyWhiskerRotator_left and again onto bunnyWhisterRotator_right.

Positioning the ears

Adjust the null objects to set the position of the ears. We used the manipulators to work out the best position, but you could also set the position in the Inspector. For:

1. bunnyEarRotator_left, set X to 2.5, Y to 10 and Z to -5.
2. bunnyEarRotator_right, set X to -2.5, Y to 10 and Z to -5.

For bunnyEarRotator_right, next to Scale change X to -1. This will flip the ear over to the other side. Making this adjustment to the Scale value changes the material's normals — they'll now be inside out. To fix this:

1. Select bunnyEar_color_Mat.
2. Go to Render Options in the Inspector.
3. Check the box next to Double Sided.

Positioning the whiskers

You'll use the Patch Editor to position the whiskers, so they're placed precisely below the nose.

First we need to flip one of the whiskers over to the other side of the face, like we did with the ears. To do this:

1. Select bunnyWhiskerRotator_right.
2. In the Inspector, next to Scale, change X to -1.

Again, make sure the material, whisker_mat is set to Double Sided. Check the box under Render Options in the Inspector.

Creating the patches

You'll position the whiskers by manipulating the position of the null objects.

To create patches to represent the position of the null objects, select bunnyWhiskerRotator_left and bunnyWhisterRotator_right. You can hold down command on your keyboard to select them both at the same time.

In the Inspector, click the arrow next to Position. A patch will be made for both null objects.

Then:

1. Drag the face tracker from the Scene panel, into the Patch Editor.
2. Right-click anywhere in the Patch Editor to open the menu. Select a Nose patch, and 2 Add patches.

For both Add patches, change the Type to Vector 3. This is because we're positioning the whiskers on a 3D object in 3D space.

The Nose patch is a face landmark patch. It will capture precise data on the position of the nose in the scene, so we can position the objects in relation to it.

Connecting the patches

Start by connecting the Face port in facetracker0to the Nose patch.

Then connect:

1. The Left Nostril Position port in the Nose patch to the input port at the top of an Add patch.
2. The Right Nostril Position port in the Nose patch to the input port at the top of the other Add patch.
3. The output port of each Add patch to the patches representing the 3D position of each object.

Your graph will look like this:

Tweak the values in the Add patches. This will position the whiskers in exactly the right place in relation to the nose:

• For the Add patch connected to bunnywhiskerRotator_left, set X to 1.5, Y to -0.8 and Z to -0.1.
• For the second Add patch, set X to -1.5, Y to -0.8 and Z to -0.1.

The whiskers will be positioned directly under the nose.

Animating the whiskers

The 3D object we've used to create the whiskers has an animation included in the file. The animation is listed as wiggle in the Assets panel. To make the animation play in the effect we'll use an animation playback controller:

1. Click Add Asset at the bottom of the Assets Panel.
2. Select Animation Playback Controller.

Add the animation clip to the animation playback controller:

1. Select animationPlaybackController0 in the Assets panel.
2. In the Inspector, click the dropdown next to Animation Clip.
3. Select Wiggle from the menu.

To connect the playback controller to the objects in the scene:

1. Select bunny_whisker_animated.
2. In the Inspector, select Animation Playback Controller0 from the dropdown next to Animation.
3. Repeat this step for the other set of whiskers.

The animation playback controller is set to play the animation at the start of the effect by default, and loop continually while the effect plays. You could change these properties, and the speed of the animation, in the Inspector.

Animating the ears

We could use an animation playback controller to animate the ears too, but in the finished effect we've used the Patch Editor instead. This is so we can add a Delay patch to make the animation for each ear start at a slightly different time, so the movement looks more natural.

Creating the patches

To create patches representing the Animation property of the objects:

1. In the Scene panel, select bunnyEar_animated - you'll need to expand the bunnyEarRotator_left null object first.
2. Click the arrow to the right of Animation in the Inspector panel.
3. Repeat these steps for bunnyEar_animated under bunnyEarRotator_right.

Next, create the animation patches. Right-click in the Patch Editor and select:

1. A Loop Animation patch - this patch will tell the animations to loop continuously.
2. 2 Animation Player patches - to drive the animations for each ear.
3. A Delay patch.

In the Assets panel, under BunnyEar_animated, select Swing and drag it into the Patch Editor:

Connecting the patches

First connect the Animation Player patches:

1. Connect the Animation port in the first Animation Player patch to the Animation port in one of the bunnyEar_animated patches.
2. Connect the Animation port in the other Animation Player patch to the Animation port in the other bunnyEar_animated patch.

Next, connect:

1. The Swing patch to the Animation Asset input port of each Animation Player.
2. The Progress port in Loop Animation to the Progress port in one of the Animation Player patches.

To add the Delay patch:

1. Connect the Progress port in Loop Animation to the input in the Delay patch.
2. Connect the output of the Delay patch to the Progress port in the other Animation Player patch.

Set the Duration value in the Delay patch. We went with 0.43 seconds.

Your graph will look like this:

The ears will now be animated.

Changing color options

We've used a Screen Tap, Counter and Option Picker to count through different color options when the screen is tapped.

Creating the patches

From the menu in the Patch Editor, select a:

1. Screen Tap patch - to detect when someone taps the device screen.
2. Counter - to count through color options the option picker.
3. Option Picker - this is where we'll set the color options. You'll need to set the Type to Color.
4. Mix patch - to combine the logic with the texture and material.

Next, create patches to represent the texture and material:

1. Select bunny_tex in the Assets panel, and drag it into the Patch Editor to create a patch.
2. Select bunnyEar_color_mat in the Assets panel. This is the material applied to the bunny ears.
3. In the Inspector, click the arrow next to the right of Diffuse Texture to create a patch representing this property.

Make sure the material is set to render on both sides of the mesh by checking the box next to Double Sided in the Inspector.

Connecting the patches

Connect the patches, so your graph looks like this:

Adding the color options

In the Counter patch, make sure the Maximum Count matches the number of color options you'll add in the Option Picker. We set it to 2.

Add color options for the ears in the Option Picker. We picked blue and pink, but you could go with something else.

It's important here to set the Alpha value in the Mix patch to grey. This causes the patches to create a mix of the original texture from the texture patch, and the colors coming from the Option Picker.

In the Counter patch, make sure the Maximum Count matches the number of color options you'll add in the Option Picker. We set it to 2.

You can test this part of the effect by clicking the gear in the Simulator, and selecting Simulate Touch.

Adding exponential smoothing

In real life the ears would move in response to the movement of the head, instead of in a uniform way like they are at the moment. For example if the head moved quickly, so would the ears.

To achieve this effect we're going to use exponential smoothing. We've added a Patch Group to the project that you can use to do this. It's listed in the Assets panel as Exponential Smooth Vec3.

We'll use the rotation of the user's head to trigger the exponential smoothing. So when the head rotates, exponential smoothing will cause the ears to move in response.

Creating the patches

1. Create patches for the 3D Rotation property of the null objects bunnyEarRotator_left and bunnyEarRotator_right.
2. Drag the Exponential Smooth Vec3 patch group into the Patch Editor.

The patch group

If you click the right corner of the patch group, the group will expand. You'll see it's made of several patches:

The input is driven by the 3D Rotation of the face tracker.

Unpack allows us to take each of these coordinates and perform separate operations on them. In this case, we've used Exponential Smoothing patches to return a smoothed signal, based on the Damping factor. In this case, we set the Damping factor to 200 milliseconds.

Click Back to Main to return to the graph.

Connecting the patches

1. Connect the 3D Rotation port in facetracker0 to the Input port in Exponential Smooth Vec3.
2. Connect the Output port in Exponential Smooth Vec3 to the 3D Rotation ports in bunnyEarRotator_left and bunnyEarRotator_right.

Your graph will look like this:

Adding custom instructions

We've added an instruction token to this effect. We've used:

1. A Runtime patch to detect how long the effect has been running.
2. A Less Than patch. We adjusted the value in this patch to 3 seconds. This will display instructions while the effect has been running for under 3 seconds.

Adding audio

To finish the effect, add a sound that plays each time the screen is tapped:

This is known as one-shot audio. It’s super easy, all you’ll do is add 4 more patches to your graph.

We’ve already added the audio file you’ll need to the project - it’s listed as arl_sfx_UISynthElements_os_04.m4a in the Assets panel.

Add a speaker

To render sound in any effect, you’ll need a scene object called a speaker. To add it:

1. Click Add Object.
2. Select Speaker from the menu.

The network of patches you’ll build will send a signal to a patch representing the speaker, playing the sound in the scene.

To create a patch for the speaker:

1. In the Scene panel, select speaker0.
2. Go to the Inspector.
3. Click the arrow to the left of Audio.

A yellow patch will be added to the Patch Editor:

Adding the triggered sound

To do this you’ll connect the Screen Tap patch you’ve already added to the speaker patch, using a Multi-Clip Controller and Audio Player patch to connect the audio file. The Multi-Clip Controller will cause the clip to play in full each time the screen is tapped, even if it means playing multiple versions of the same clip over the top of one another.

To create these patches, right-click in the Patch Editor to open the menu. Select the:

• Multi-Clip Controller patch.
• Audio Player patch.

You’ll also need a patch representing the audio file. To create it, just select arl_sfx_UISynthElements_os_04.m4a in the Assets panel and drag it into the Patch Editor. An orange patch will be added:

Now connect the patches. Connect:

1. The Tap output of the Screen Tap patch to the Play input in the Multi-Clip Controller patch.
2. The output of the Multi-Clip Controller patch to the Controller input in the Audio Player patch.
3. The output of the Audio Player patch to the Audio input in the yellow patch representing the speaker.
4. The output of the orange patch representing the audio clip to the Audio Clip input in the Audio Player patch.

Here’s how the graph will look:

You’ve now added the audio clip to your effect! You can test it by clicking in the Simulator. You might need to click the Refresh button in the toolbar to hear it.

Tapping the screen in this effect is a subtle interaction, so the sound shouldn’t be too prominent. Complete this audio effect by adjusting the volume:

1. In the Scene panel, select speaker0.
2. Go to the Inspector.
3. Change Volume to 50% using the slider.

Distorting the microphone output

To record the user's voice and play a distorted, high-pitched version back in the scene, you'll combine the Microphone with an audio effect patch called the Pitch Shifter.

The Microphone is included in every effect by default. It’s already listed at the bottom of the Scene panel.

Add it to the Patch Editor, so its output can be connected to the audio effect patch. To do this, simply drag the Microphone from the Scene panel into the Patch Editor. A purple Microphone patch will be added:

The output of the Microphone will be rendered through a speaker. Add another speaker object to the Scene panel and create an Audio patch.

At this point, you could connect the Audio output of the Microphone patch to the Audio input of the new speaker for voice recording, replicating the default behavior of the microphone. Adding a Pitch Shifter patch will change the default behavior.

To create a Pitch Shifter patch, right-click the Patch Editor to open the menu and select Pitch Shifter. To heighten the pitch, enter a number above 0 in the Semi input, with 12 representing the highest pitch. We’ve gone with 5.

Now connect:

1. The Audio output of the Microphone patch to the Audio input of the Pitch Shifter patch.
2. The Audio output of the Pitch Shifter patch to the Audio input of the new speaker patch.

Here's how the graph will look: