In order to work with variables in Cables, you can use the VarSet and VarGet operators . Variables are useful when you need to use the same values in multiple places in the patch and do not need to display their connections or in case there is a need to interact with them from outside Cables.

VarSet - Sets the value of the variable, each data type has its corresponding node. (ex: var set number, var set string)

VarGet - Reads the value of the variable, the node type must match the value you want to read (ex: string, number, array).

Generally only one VarSet operator is used to set the initial value of a variable, while you can have multiple VarGet operators to access that value in different parts of the patch

Accessing variables externally

One of the most powerful features of variables in Cables.gl is the ability to control them from outside the framework. This opens up a world of possibilities for integrating Cables.gl patches into interactive Web sites and custom applications.

To set a variable from outside, you use the CABLES.patch object, which provides methods for interacting with variables. There are two main modes:

Quick Version:

CABLES.patch.setVariable("clearColor", "#ffffff");

Full version:

const myVar = CABLES.patch.getVar("clearColor";  

if(myVar) {     

  // get the current value    
  const currentValue = myVar.getValue();
     
  // change the value    
  myVar.setValue("#ffffff"); 

}

The code should then be inserted once the patch object is initialized during embedding with html.

function patchFinishedLoading(patch){

  CABLES.patch.setVariable("clearColor", "#fa0000");

  }

Important: Variable names in Cables.gl are case-sensitive, so "clearColor" is different from "ClearColor".

Another useful feature is the ability to add a listener to a variable, which will be executed whenever the value of the variable changes. This allows you to create responsive patches that respond dynamically to changes in the data.

To add a listener, you use the on() method on the variable object, specifying the "change" event and a callback function that will be executed when the value changes. Here is an example:

const myColor = CABLES.patch.getVar("clearColor");

if(myColor) {

  // this function will be executed whenever the value changes
  myColor.on("change", function(newColor){
   
    console.log(newColor);

  });

}