Variables & Expressions
Last updated
Last updated
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.
Vectary enables 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.
All variables are centralized for easy access and management:
To delete or rename a variable, right-click on its name
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.
Create a simple table using primitives
Create variables: Width and Length
Assign a value of 100 to each as the base size.
Assign variables
Assign the created variables to the dimensions along the X and Y axes (replace the value with the variable name)
Expression setup
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:
Leg 1
-width/2+5
-length/2+5
Leg 2
-width/2+5
length/2-5
Leg 3
width/2+5
length/2+5
Leg 4
width/2-5
-length/2+5
Add the Floating UI
Add the 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.
Setup Text element
Setup the Text element using an expression so that the table size is dynamically displayed based on the size selected by the end user.
Use the following expression: "Width ${width} "
Setup the Slider
Setup the Slider element to allow the end user to adjust the dimensions of the table
Specify the variable Width, set the Range and Step:
Repeat steps 6 and 7 for the length
Done! The Preview mode can now be activated to check the result:
