The createRadio() function is used to create a radio-button element in the DOM (Document Object Model). The .option() method is used to set the options for the radio.
This function requires p5.dom library. So add the following line in the head section of the index.html file.
Syntax:
createRadio( divId )
Parameters: This function accepts single parameter divId which holds the id and name of the created div and input field respectively.
Example: This example changes the background color according to the selected option of the radio-button.
// Create a variable for radio-button object var radio;
function setup() {
// Create a canvas
createCanvas(400, 400);
// Create a radio-button object
// and set options
radio = createRadio();
// Option 1 : orange
radio.option( 'orange' );
// Option 2 : skyblue
radio.option( 'skyblue' );
// Option 3 : green
radio.option( 'green' );
// Set the width
radio.style( "width" , "80px" );
// Position the radio-button object
radio.position(160, 200);
} function draw() {
// Get the value of the radio-button
var val = radio.value();
// Set the background-color
background(val);
} |
Output:
Reference:https://p5js.org/reference/#/p5/createRadio