Overview
Overview of Parameters top ↑
Parameters are ways to elicit information from the user. A parameter defines a widget in the parameters panel (on the left of the browser window) which the user can interact with at any time during the execution of the script. The parameter functions all have a similar syntax:
p = new Parameter(options);
Creating Parameters
parameter.number( text, name, min, max, step, initial, callback ) top ↑
Syntax
parameter.number( text, name )
parameter.number( text, name, min, max )
parameter.number( text, name, min, max, step )
parameter.number( text, name, min, max, step, initial )
parameter.number( text, name, min, max, step, initial, callback )
This function creates a visual slider in the viewer that can be used to adjust a global variable in your code.
You generally call the parameter.number() function in the setup() function of your main file. The string you specify for name will be added to the parameters table that can be used in your code. When you adjust the slider in the viewer, the variable will be set appropriately. The three parameters, min, max, and step allow you to set the minimum, maximum, and step value of your parameter respectively. If an initial value is not specified, then the parameter takes on the minimum value initially. If no minimum or maximum values are specified, the parameter uses the range [0, 1] with step value 0.1. If the minimum and maximum are specified but the step value is not, the step value is taken to be 1.
The optional callback argument specifies a callback function to be called when the parameter slider changes. This callback function is provided the parameter's value as its single argument.
| text | string, the text is displayed above the slider |
| name | string, the parameter function will create a key in the |
| min | int or float, specifies the minimum value that your parameter can take |
| max | int or float, specifies the maximum value that your parameter can take |
| slider | int or float, specifies the step value for the slider |
| initial | int or float, specifies the initial, or starting, value of the parameter |
| callback | function, this function will be called whenever the parameter is changed, it will be given the parameter value as an argument |
Examples
parameter.colour( text, name, colour, callback ) top ↑
Syntax
parameter.colour( text, name )
parameter.colour( text, name, colour )
parameter.colour( text, name, colour, callback )
This function creates a visual colour sample in the viewer that can be used to adjust a colour variable in the parameters object in your code.
You generally call the parameter.colour() function in the setup() function of your main file. The string you specify for name will be added to the parameters table as a colour type.
This can be used in your code. When you tap the colour sample in the viewer, an interactive colour picker will be presented, allowing you to adjust the variable live, while your code is running.
You may also set the initial value of the colour with a colour object.
The optional callback argument specifies a callback function to be called when the colour value changes. This callback function is provided a single argument, of the colour type, containing the new value.
Note that this uses the HTML5 colour picker. In some browsers, there is no obvious Select button and the picker should be dismissed by clicking the X button on its window.
| text | string, the text displayed by the colour picker |
| name | string, the parameter function will create a colour variable with this name in the parameters object |
| colour | colour, specifies the initial colour |
| callback | function, this function will be called whenever the parameter is changed, it will be given the new colour value as an argument |
Examples
parameter.bool( text, name, initial, callback ) top ↑
Syntax
parameter.bool( text, name )
parameter.bool( text, name, initial )
parameter.bool( text, name, initial, callback )
This function creates a visual switch in the viewer that can be used to adjust a boolean variable in your code.
You generally call the parameter.bool() function in the setup() function of your main file. The string you specify for name will be exposed as a variable in the parameters object that can be used in your code.
When you adjust the switch in the viewer, the variable will be set appropriately. You may also specify an initial value for the switch. With true causing the switch to be set to the ON state, and false setting the switch to the OFF state.
The optional callback argument specifies a callback function to be called when the parameter switch changes. This callback function is provided the parameter's value as its single argument.
| text | string, the text shown in the parameter pane |
| name | string, the parameter function will create a variable with this name in the parameters object |
| initial | boolean, specifies the initial value of the boolean parameter |
| callback | function, this function will be called whenever the parameter is changed, it will be given the parameter value as an argument |
Examples
parameter.text( text, name, initial ) top ↑
Syntax
parameter.text( text, name )
parameter.text( text, name, initial )
parameter.text( text, name, initial, callback )
This function creates a visual text box in the viewer. You can type in this control to adjust the contents of the corresponding string value in the parameters object defined by name.
You generally call the parameter.text() function in the setup() function of your main file. The string you specify for name will be exposed as a value in the parameters object that can be used in your code.
When you input text in the parameter.text control, the variable defined by name will be set appropriately. You may also specify the initial contents of the text variable by setting initial to a string.
The optional callback argument specifies a callback function to be called when the parameter text changes. This callback function is provided the parameter's value as its single argument.
| text | string, the text to display above the input field |
| name | string, the parameter function will create a variable with this key in the parameters object |
| initial | string, specifies the initial value of the text parameter |
| callback | function, this function will be called whenever the parameter is changed, it will be given the parameter value as an argument |
Examples
parameter.action( name, callback ) top ↑
Syntax
parameter.action( name, callback )
This function creates a visual button in the viewer sidebar. Pressing the button will call the function defined by callback. The name argument sets the label of the button.
You generally call the parameter.action() function in the setup() function of your main file. The string you specify for name will be used to label the button that appears in the viewer. It will not be exposed as a variable.
The callback argument specifies a callback function to be called when the button is pressed. It is passed the name of the button as its only argument.
| name | string, the parameter function will create a global variable with this name |
| callback | function, this function will be called whenever the parameter is changed, it will be given the parameter value as an argument |
Examples
Watching Expressions
parameter.watch( text, function ) top ↑
Syntax
parameter.watch( text, function )
This function allows you to monitor the return value of a javascript function within the viewer. Generally you call the parameter.watch() function from the setup() function in your main file.
| text | string, the title shown above the output |
| function | function, the function whose return value to show |