Script light blocks enables to you to create custom effects by writing JavaScript code. You can create a new Script light block by clicking the green plus icon next to "Scripts" in the light blocks panel. Then you need to create a new text file in your filesystem. You then select the text file in the file path parameter. Now it's time to add some code to the file.
<aside> 💡 You can find some example script files on the Github page of the Bento project.
</aside>
At first, we want to create some parameters that we want to control on the light block. We can use the script object to add custom parameters, as well as log debug infos in the Logger panel.
For example if we want to create a Parameter called position with a default value of 0.5 and range between 0 and 1 we can use the following code:
script.addFloatParameter("Position", "The position of the point", 0.5, 0,1);
Below you find a full reference of methods available through the script object.
Here is a full reference of methods available on the script object:
| Method | Description | Example |
|---|---|---|
| addFloatParameter(name, description, default, min max) | This will add a float number parameter (slider). | script.addFloatParameter("My Float Param","Description of my float param",.1,0,1); |
| addIntParameter(name, description, default, min max) | add an integer number parameter (stepper), default value of 2, with a range between 0 and 10 | script.addIntParameter("My Int Param","Description of my int param",2,0,10); |
| addBoolParameter(name, description, default) | add a boolean parameter (toggle) | script.addBoolParameter("My Bool Param","Description of my bool param",false); |
| addStringParameter(name, description, default) | add a string parameter (text field) | script.addStringParameter("My String Param","Description of my string param", "cool"); |
| addColorParameter(name, description, default) | add a color parameter (color picker). | |
| You can either set the default color with ARGB hex value, [r,g,b,a] float array, or r,g,b,a separate values. r, g and b values are always between 0 and 1 and alpha is optional (you can specify r,g,b only); | script.addColorParameter("My Color Param","Description of my color param",0xff0000ff); //default blue alpha 100% |
|
script.addColorParameter("My Color Param 2 ","Description of my color param",[1,0,1]); //default purple |
||
| addEnumParameter(name, description, label1, value1, label2, value2, ...) | add a enum parameter (dropdown with options) | |
| Each pair of values after the first 2 arguments define an option and its linked data | script.addEnumParameter("My Enum Param","Description of my enum param", "Option 1", 1,"Option 2", 5, "Option 3", "banana"); |
|
| log(message) | Logs a message (must activate "Log" in the script parameters) | script.log("This is a message"); |
| logWarning(message) | Logs a message as a warning | script.logWarning("This is a warning"); |
| logError(message) | Logs a message as an error | script.logError("This is an error"); |
Next, we create a function called updateColors. The JavaScript Runtime of Bento will call this function for each prop whenever it needs to output colors from the script light block. It will also pass in the following parameters that can be used to create the actual colors:
<aside> 💡
In JavaScript the order of the parameters is relevant!
</aside>
Example code to create the updateColors function:
function updateColors(colours, id, resolution, time, params) { // actual code creating colors goes here }