Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.


JavaScript to Patch Bridging

You can pass information between Javascript and the Patch Editor by adding shared signal variables.

We support 4 types of variable:

  1. Boolean
  2. Trigger
  3. Scalar
  4. Vec3

To do this, open the script inspector by clicking on your script in the Assets panel. The script inspector will open in the Inspector panel.

Getting signal variables from script to the Patch Editor

Use script to Patch Editor variables to get signal variables declared in Javascript, in the Patch Editor.

To send a signal from your script to the Patch Editor, use this code snippet. Add lines to your script depending on the type of variable you're using.

   var Patches = require('Patches');
    // Set a signal varialble: 
   Patches.setBooleanValue("boolVar", boolSignal);
   Patches.setScalarValue("scaleVar", scalarSignal);
   Patches.setVectorValue("vectorVar", vectorSignal);
   Patches.setPointValue("vectorVar", pointSignal);
   Patches.setPulseValue("triggerVar", eventSource);
    // Provided that boolSignal, scalarSignal, vectorSignal etc are defined signal variables 
    //Set a constant: 
   Patches.setBooleanValue("boolVar", false);
   Patches.setScalarValue("scaleVar", 0.75);
   Patches.setVectorValue("vectorVar", Reactive.vector(-10, 20, -10));
   Patches.setPointValue("vectorVar", Reactive.point(-10, 20, -10));
   Patches.setPulseValue("triggerVar", Reactive.once());
    // Provided that Reactive is a reference to the reactive module 

Then, select your script in the Assets panel, or create a new one by clicking + and selecting Create New Script.

In the Inspector panel:

  1. Under From Script, click + to add the new script variable.
  2. Change the variable name to match the name of the variable defined in your script, if you need to.
  3. Click Actions and select Read variables from script, or drag and drop your script from the Assets panel into the Patch Editor.

This will create a purple producer patch, with the variable you defined.

The output ports in your patch will represent the script to Patch Editor variables. You can connect these ports to any other patches.


In this example we've told the Patch Editor through Pulse signal when a Target texture on a Plane Tracker, targetPlane, is found with high confidence.

   var Patches = require('Patches')
   var Scene = require('Scene')
   var Reactive = require('Reactive')
   // Get a reference to the target plane
   var targetPlane =  Scene.root.find('targetPlane');
   // Subscribe to confidence 
   var confidenceSub = targetPlane.confidence.monitor().subscribe(function (e) {
       if (e.newValue == 'HIGH') {
           // Update the Script to Editor signal named "targetFound
           Patches.setPulseValue("targetFound", Reactive.once());

This is how the graph looks in the Patch Editor:

Setting variables from script to Patch Editor

Use Patch Editor to script variables to set signal variables declared in Javascript, from the Patch Editor.

In the Inspector panel:

  1. Under To Script, click + to add your new script variable.
  2. Change the variable name to match the name of the variable defined in the script, if you need to.
  3. You'll see a new variable row - click the circle next to it to add a patch.

You'll see your patch in the Patch Editor - it'll be a blue consumer patch. Connect a signal to the patch, so it can be read inside the script.

Use this code snipped to read a signal from the Patch Editor inside the script. Add lines to your script, depending on the type of variable you're using.

   var Patches = require('Patches');
   // Get a signal
   var boolSignal = Patches.getBooleanValue("boolVar");
   var scaleSignal = Patches.getScalarValue("scaleVar");
   var vectorSignal = Patches.getVectorValue("vectorVar");
   var pointSignal = Patches.getVectorValue("pointsVar");
   var eventSource = Patches.getPulseValue("triggerVar");


In this example the object in our scene is represented by the blue patch, earth. We used the Object Tap patch to toggle the rotation of this object. Instead of rotating automatically when the effect is opened, the object will rotate when it's tapped.

We created a new Trigger variable from the To Script section of the script inspector. We then changed the name of the variable to earthTapped - by clicking on its name in the Inspector panel.

Next we tapped the connection icon to create a patch in the Patch Editor.

In the script, we set up the subscription to this signal variable:

      var Patches = require('Patches');
      var Diagnostics = require('Diagnostics');
      Patches.getPulseValue('earthTapped').subscribe(function (e) {

This will result in outputting Tap! to the console when someone taps on the object.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.

Read FAQs