Parameters

Reference ❯ Creating Parameters to Control Your Projects

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 parameters table to hold the value

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

function setup() //Creates a global variable called Radius parameter.number("Radius", "radius", 50, 300, 1, 100); end function draw() background(128); ellipseMode(RADIUS); ellipse(WIDTH/2, HEIGHT/2, parameters.radius); end

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

function setup() { // Creates a colour parameter variable called fillcolour // make it red by default parameter.colour("Fill Colour", 'fillcolour', new Colour('red')); // Creates a global colour parameter variable called strokecolour // make it white by default parameter.colour("Stroke Colour", 'strokecolour', new Colour('white')); } function draw() { background(128); strokeWidth(10); --Set our colours using the parameter values stroke(parameters.strokecolour); fill(parameters.fillcolour); ellipse(WIDTH/2, HEIGHT/2, 300); }

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

function setup() { // Creates a simple switch that prints when changed parameter.bool("My Switch", "myswitch", true, switchChanged); end function switchChanged( value ) { print( "My Switch changed to " + value ); }

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

function setup() { // Creates a simple switch that prints when changed parameter.text("Write some text", "mytext", "Hello World!", textChanged); } // Print our text parameter in upper-case function textChanged( value ) { print( string.upper(value) ) }

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

function setup() { // Creates a button to clear the output parameter.action("Clear Output", output.clear); }

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

Examples

function setup() { // Shows the elapsed time in the viewer parameter.watch("Elapsed Time",function() {return ElapsedTime;}); }

Printing

print() top ↑

Syntax

print(text)

This function prints a string (or something that can be converted to a string) to the output buffer.

text

string, the text to print

Clearing the Parameter and Output List