Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

You can pass information between the script and the patch editor by adding shared variables.

Patch Editor and Script support 7 different types of variables:

Patch Editor type Script type
Boolean BoolSignal
Color ColorSignal
Number ScalarSignal
Pulse EventSource
Text StringSignal
Vector 2 Vec2Signal
Vector 3 VectorSignal or PointSignal
Vector 4 Vec4Signal

After selecting the script file in the Assets panel, you can create shared variables from the inspection panel.

Send variables from the script to the patch editor

send

To send a variable from the script to the patch editor, use the set method provided by the PatchesModule API.

The following example shows a Boolean sent from the script to the patch editor:

// Load in the Patches module
const Patches = require('Patches');

(async function() { // Enable async/await in JS [part 1]

    // Create a boolean variable
    const myBoolean = true;

    // Send the boolean to the Patch Editor as 'myBoolean'
    await Patches.inputs.setBoolean('myBoolean', myBoolean); }) ();// Enable async/await in JS [part 2]
        
Copy the code

access

Access variables sent from the script in the patch editor:

  1. Select the script file in the Assets panel.
  2. In the inspection panel, to the right of the From Script, click + to add a new variable.
  3. Change the variable names to match those defined in the script.
  4. Create producer patch was selected under Interactions.

This will create a purple producer patch with all the variables you defined under the From Script section as output. You can connect the output port to another patch.

Send variables from the patch editor to the script

send

To send a variable from the patch editor to the script:

  1. Select the script file in the Assets panel.
  2. In the inspection panel, To the right of To Script, click + To add a new Script variable.
  3. Change the variable name to match the variable name that will be used in the script.
  4. Click the arrow next to the variable.

This creates a yellow consumer patch whose value can be read in the script. You can change this value by connecting another patch to its input port.

access

To access variables sent from the patch editor in the script, use the GET method provided by the patch module.

The following example shows accessing text in a script in the patch editor:

// Load in the Patches module
const Patches = require('Patches');

(async function() { // Enable async/await in JS [part 1]

    // Get the 'myString' string value from the Patch Editor
    const myString = await Patches.outputs.getString('myString'); }) ();// Enable async/await in JS [part 2]
Copy the code