The ability to use variables within Studio greatly enhances flexibility in configuring interactivity for projects, enabling the creation of complex solutions and systems.

This feature is currently in Beta as we actively refine the experience with variables and expressions. Despite ongoing improvements, it is already highly functional and enhances project capabilities significantly.

</aside>

What are Variables?

Vectary enables users to create and manage variables that can be utilized across various Studio settings. These variables represent data elements such as numbers, text, or formulas, which can be created directly within Studio or imported from external sources like Google Sheets. A variable can store a specific value or use expressions to dynamically determine its value based on other parameters.

Variables are also available for use in Slider and Input (new elements of Floating UI)

</aside>

All variables are centralized for easy access and management:

Clipboard-20241211-115352-665.mp4

To delete or rename a variable, right-click on its name

</aside>

Expressions

Expressions provide a dynamic method for calculating parameter values using functions, binary operators, and variables.

This approach facilitates the creation of procedural effects and enables the implementation of complex solutions.

Most input fields in the UI support expressions (a detailed list can be found here), allowing for real-time modification of various settings, parameters, and text.

Let's consider a simple example using Variables and Expressions:

Task: create a configuration that allows parametric changes to the length and width of the tabletop.

Step 1: Create a simple table using primitives

Step 2: Create variables Width and Length (assign a value of 100 to each as the base size)

Step 3: Assign the created variables to the dimensions along the X and Y axes (replace the value with the variable name)

Step 4: To ensure the position of the table legs changes synchronously with the table dimensions, an expression using the variable must be assigned for the position value of each leg:

Almost done, only the UI for resizing remains to be created.

Step 5: Add a Floating UI to the scene and create a Text element along with a Slider element. The Text element will dynamically display the table size, while the Slider will be used to adjust the size.

Step 6: Setup the Text element using an expression so that the table size is dynamically displayed based on the size selected by the end user

</aside>

Syntax

The syntax for expressions is inspired by JavaScript. While it resembles JavaScript in many ways, it is not a full implementation of the language. Instead, it is a minimalistic subset specifically tailored for defining expressions in this context.

This approach ensures simplicity and ease of use while maintaining the flexibility needed for powerful expressions. Users familiar with JavaScript will find the syntax intuitive, but it's important to note that certain JavaScript features may not be available.

Data types

| --- | --- | --- | --- |

Supported data structures

Our expression language supports the following data structures: