Spark AR Scripting Examples: code snippets

The list of Spark AR Scripting Examples. Copy and Paste Spark AR JavaScript code snippets for all data types: Text, Number, Vectors, Pulse and Boolean.

Native UI Picker

This common script has been updated in version 85+ of Spark AR. There is updated documentation and an example here. The Picker and Slider UI elements are now available as patch objects. Select “Add Patch” in the Patch Editor window, then search for “Picker” or “Slider”.

---

Promise

To prepare textures, materials and other scene objects for your effect script; start your script using the Promise.all method. This method gets all the objects we need ready for use within the script.

const Scene = require('Scene');
const Textures = require('Textures');
const Materials = require('Materials');
const Reactive = require('Reactive');

Promise.all([

    // Find Texture
    Textures.findFirst('textureName'),
    // Find Material
    Materials.findFirst('materialName'),
    // Find Scene Object
    Scene.root.findFirst('sceneObject'),

]).then(function (results) {

    // Define variable names for items we found
    const theTexture = results[0];
    const theMaterial = results[1];
    const theSceneObject= results[2];

    // Change the theMaterial texture to theTexture
    theMaterial.diffuse = theTexture;

    // Execute other code and functions here
});

---

Spark AR Scripting Examples

Sending values from the Patch Editor the the script and visa versa has changed. Here is the official documentation; and here are some examples. I will continue to add to this list. If you are having trouble, or receiving a scripting error, make sure you have all the Modules you need loaded. Modules are listed first at the top of the script file.

To Script

Number: getScalar

Patches.outputs.getScalar('ToScriptNumber').then(event=> {
     event.monitor().subscribe(function (values) {
          Diagnostics.log(values.newValue);
     });
});

Text: getString

Patches.outputs.getString('ToScriptText').then(event => {
     Diagnostics.log(event.pinLastValue());
});

Boolean: getBoolean

Patches.outputs.getBoolean('ToScriptBoolean').then(event => {
     event.monitor().subscribe(function (values) {
          Diagnostics.log(values.newValue);
          Diagnostics.log(values.oldValue);
     });
});

Pulse: getPulse

// Declare variable to keep track of this pulse
var pulsed;

Patches.outputs.getPulse('ToScriptPulse').then(event => {
     pulsed = event.subscribe(function () {
          // code to execute when pulse happens
          // "pulsed" variable will be available throughout the script
     });
});

Vector 2: getPoint2D

// Declare variable with x and y properties
var vector2 = {x: 0, y: 0};

//Vector 2
Patches.outputs.getPoint2D('ToScriptVector2').then(pixelPointSignal => {

     // Pin
     vector2.x = pixelPointSignal.x.pinLastValue();
     vector2.y = pixelPointSignal.y.pinLastValue();

     // Monitor
     pixelPointSignal.x.monitor({ fireOnInitialValue: true }).subscribe(function (xSignal) {
          vector2.x = xSignal.newValue;
     });
     pixelPointSignal.y.monitor({ fireOnInitialValue: true }).subscribe(function (ySignal) {
          vector2.y = ySignal.newValue;
      });

});

Vector 3: getPoint

// Declare variable with x, y, z properties
var vector3 = { x: 0, y: 0, z: 0 };

// Vector 3
Patches.outputs.getPoint('ToScriptVector3').then(pointSignal => {

     // Pin
     vector3.x = pointSignal.x.pinLastValue();
     vector3.y = pointSignal.y.pinLastValue();
     vector3.z = pointSignal.z.pinLastValue();

     // Monitor
     pointSignal.x.monitor({ fireOnInitialValue: true }).subscribe(function (xSignal) {
          vector3.x = xSignal.newValue;
      });
     pointSignal.y.monitor({ fireOnInitialValue: true }).subscribe(function (ySignal) {
          vector3.y = ySignal.newValue;
      });
     pointSignal.z.monitor({ fireOnInitialValue: true }).subscribe(function (zSignal) {
          vector3.z = zSignal.newValue;
      });
});

Vector 4: getColor

// Declare variable with x, y, z, w properties
var vector4 = {x: 0, y: 0, z: 0, w: 0};

// Vector 4
// Cannot monitor this signal without crashing program.
Patches.outputs.getColor('ToScriptVector4').then(colorSignal => {
     vector4.x = colorSignal.red.pinLastValue();
     vector4.y = colorSignal.green.pinLastValue();
     vector4.z = colorSignal.blue.pinLastValue();
     vector4.w = colorSignal.alpha.pinLastValue();
});

From Script

Number: setScalar

// Example number to send to Patch Editor from script
var scriptNumber;

Patches.inputs.setScalar('FromScriptNumber', scriptNumber);

Text: setString

// Example string (text) to send to Patch Editor from script
var scriptString = "Example Text";
var scriptNumber = 3;

Patches.inputs.setString('FromScriptText', scriptString);
Patches.inputs.setString('FromScriptNumberAsText', scriptNumber.toString());

Boolean: setBoolean

Patches.inputs.setBoolean('FromScriptBoolean', true);

Pulse: setPulse

// Include Reactive Module at top of script
const Reactive = require('Reactive');

// Call this function to pulse 'FromScriptPulse'
// Reactive.once() will send an event pulse
// If it's not in a function, it will fire once on load

function sendPulse() {
     Patches.inputs.setPulse('FromScriptPulse', Reactive.once());
}

Vector 2: setPoint2D

// Include Reactive Module at top of script
const Reactive = require('Reactive');

// Declare variable to send 2 values
var pixelSignal = Reactive.point2d(10, 20);

// Set the vector 2
Patches.inputs.setPoint2D('FromScriptVector2', pixelSignal);

Vector 3: setPoint

// Include Reactive Module at top of script
const Reactive = require('Reactive');

// Declare variable to send 3 values
var pointSignal = Reactive.point(10, 20, 30);

// Set the vector 3
Patches.inputs.setPoint('FromScriptVector3', pointSignal)

Locale Module

Get language, region and locale using the asynchronous StringSignal get method.

Language

// Include this module
const Locale = require('Locale');

Locale.language.monitor({ fireOnInitialValue: true }).subscribe(function (values) {
    // Get language
    const language = values.newValue;

// Put code that is dependent on the value above in this same block

});

Region

// Include this module
const Locale = require('Locale');

Locale.region.monitor({ fireOnInitialValue: true }).subscribe(function (values) {
    // Get language
    const region= values.newValue;

// Put code that is dependent on the value above in this same block

});

Locale

// Include this module
const Locale = require('Locale');

Locale.locale.monitor({ fireOnInitialValue: true }).subscribe(function (values) {
    // Get language
    const locale= values.newValue;

    // Put code that is dependent on the value above in this same block

});

---

Thanks for visiting. If you have more questions about this particular topic, feel free to send me a message or email. For more tutorials and visual programming pleasure, check out the Newcolor YouTube channel.