Patch Editor: Changing Colors in Response to Interactions

You can use the Patch Editor to add logic and interactivity to your effects. In this guide, you'll learn to make something in your effect change — for example a color or animation each time a user interacts with your effect.

For the examples in this guide, we're going to use a Screen Tap patch. This patch will detect the tap of someone's finger on the device's screen, and output a boolean signal. You could use any other patch that outputs a boolean signal — like a facial gesture recognition patch, or another interaction patch. To see what kind of signal a patch outputs, check the Patch Editor menu.

patch editor menu

Switching between 2 options using If Then Else

You can use the If Then Else and Switch patches to switch between 2 options in response to an interaction from the user. In this example, we'll use these patches to change the color of a material in the scene each time a tap is detected on the device screen.

Right-click in the Patch Editor, and select:

  1. A Screen Tap patch.
  2. An If Then Else patch.
  3. A Switch patch.

You'll also need a to create a consumer patch representing the property you want these patches to change. For this example:

  1. Create a material for an object in your scene, we're using a 3D heart.
  2. Click the arrow next to Texture in the Inspector panel to create a patch representing this property.

A yellow consumer patch representing the material's texture can be seen in the Patch Editor.

If you select the If Then Else patch and expand the blue box at the bottom of the patch, you'll see it can output different types of data. Select Color.

If, for example, you were using these patches to switch between two animations, you'd select Animation Data instead.

Changing the data type of the if then else patch.

Next to Then and Else, click the color symbols on the patch to choose new colors for the material.

Instead of adding these options to the patch itself, you could connect other patches to these ports. For example, animation playback controllers if you wanted to change an animation, or audio playback controllers to change a sound.


  1. The Screen Tap patch to the Switch patch.
  2. The On/Off port in Switch to the Condition input port in If Then Else.
  3. The output of If Then Else to the Diffuse Texture port in the material patch.

Your graph will look like this.

A patch graph containing four patches.

As a result of connecting these patches, each time the screen is tapped, a switch is turned on or off. When it's on, the material will take the color added next to Then in the If Then Else patch. When it's off, it'll change to the other color.

You can test this in the Simulator, by selecting Simulate Touch from the hamburger menu at the bottom of the patch and clicking anywhere in the Simulator:

The color of the 3D heart changes when a screen tap is simulated.

Counting between more than 2 options

To count between more than 2 options in response to an interaction, you can use the Counter and Option Picker patches.

Right-click in the Patch Editor and select:

  • A Screen Tap patch.
  • A Counter patch.
  • An Option Picker patch.

You'll also need a consumer patch representing the property in the scene object that you want to change. Like before, for this example we'll use the Diffuse Texture property in a material, to change the color of a material in the scene.

The Counter patch can be use to count through different options, which we'll set in the Option Picker patch.

You can use the ports and adjust the values in the Counter patch to count through options in different orders, or jump to a specific option.

The Option Picker can accept and output different data types — like animation, boolean signals and color. For this example, select Color from the menu at the bottom of the patch.

To set options in the Option Picker, click the value next to each port. For this example, set a different color in each one.

Connect the patches, so your graph looks like this:

A patch graph containing four patches.

Make sure the Maximum Count is set to match the number of options you've set in the Option Picker. We've set the Maximum Count to 4, to show 4 colors.

Randomizing the output

To show a random option in your effect, all you need to do is replace the Counter patch, with a Random patch. Make sure the End Value in the Random patch matches the number of options you've set in the Option Picker.

A patch graph containing four patches. The counter patch has been replaced with a random patch.
Was this article helpful?