Opening the Patch Editor

To get started, open the unfinished project in the example project folder.

You will see a 3D object that looks like a red nose in the Viewport and Simulator, attached to the face.

You'll will also see 3 particle systems listed in the Scene panel. They're called red emitter, yellow emitter and green emitter. Together, they create the confetti effect:

To start working with patches, open the Patch Editor:

1. Click the Workspace icon at the top of the Toolbar.
2. Select Show Patch Editor.

There's already a simple patch graph in the Patch Editor:

The graph uses a face landmark patch, Nose, to fix the clown nose to the tip of the nose.

Using the Screen Pinch patch

First you're going to add the interaction that changes the size of the clown nose. You'll use the Screen Pinch patch to do this — but there are all kinds of interaction patches to choose from.

Start by adding the patch that will detect a pinching movement on the device screen:

1. Double-click anywhere in the Patch Editor.
2. Select a Screen Pinch patch from the menu.
3. Click Add Patch.

You'll see the new patch in the Patch Editor:

The Screen Pinch patch has four ports. We're only going to use the Scale output port, because we want to use this interaction to control the size of the clown nose.

To control all of the scale coordinates of the clown nose at once, you'll need to take the screen pinch gesture and convert it into one point. To do this you can use the Pack patch.

To add the patch:

1. Double-click in the Patch Editor.
2. Insert the Pack patch.

Then, connect the Scale port in the Screen Pinch patch to each of the 3 input ports in the Pack patch:

Now you've converted the screen pinch gesture into one point, you can connect it to a patch representing the scale of the clown nose itself. To do this:

1. Go to the Scene panel and select clown_nose.dae.
2. Find the Scale property in the Inspector.
3. Click the small arrow next to Scale.
4. Connect the output port of the Pack patch to the 3D Scale input in the patch you just created.

The scale of the clown nose should now change when you pinch the screen. To test this click the hamburger menu at the bottom the Simulator, and select Simulate Touch.

To simulate two fingers rotating or pinching the screen:

• On MacOS, hold Option, click and drag.
• On Windows, hold Alt, click and drag.

Using the Screen Tap and Hold patch

As you can see in the Viewport and the Simulator, the confetti is visible all the time. Let’s change this using the Screen Tap and Hold patch.

First create the patch:

1. Double-click anywhere in the Patch Editor.
2. Find the Screen Tap and Hold patch, and insert it.

This patch has three ports. We're going to focus on the Gesture State port:

It outputs a boolean data type, which means at any point in time it's either true or false. In this graph, it means the tap and hold gesture is either detected or it isn't.

To tell Meta Spark Studio what to do when a tap and hold is detected, you'll need to:

1. Insert an If Then Else patch, using the menu in the Patch Editor.
2. Connect the Gesture State port in the Screen Tap and Hold patch to the Condition port in the If Then Else patch.
3. Change the 0 value next to the Then port in the If Then Else patch to 10. This will set how long the hold needs to be for the confetti to be triggered.

Next, you'll need to send this signal to the particle systems. The property that controls the rate at which particles are emitted is the Birthrate, so that's where you need to send the signal.

To send the signal to the particle system:

1. Go to the Scene panel and select the each particle system — you can select them all at the same time by holding down command or control on your keyboard.
2. Click the arrow next to Birthrate to insert this patch into the Patch Editor.

You’ll see 3 patches, representing the Birthrate of each particle system.

Connect the output port on the right hand side of the If Then Else patch to the Birthrate ports in each patch:

The confetti in your scene should now only appear when a long press is detected.

To test this, click the hamburger menu at the bottom the Simulator, and select Simulate Touch: