The constrain() function in p5.js is used to constrain a number between a given minimum and maximum limit.
Syntax:
constrain( n, low, high )
Parameters: This function accept three parameters as mentioned above and described below:
- n: It is a number which denotes the value that has to be constrained.
- low: It is a number which denotes the minimum limit to which the number is constrained.
- high: It is a number which denotes the maximum limit to which the number is constrained.
Return Value: It returns a number with the constrained value.
The example below illustrates the constrain() function in p5.js:
Example 1:
function setup() {
createCanvas(650, 200);
textSize(20);
inputElemA = createInput(10);
inputElemA.position(30, 40);
inputElemB = createInput(100);
inputElemB.position(30, 60);
sliderElem = createSlider(-100, 100, 50, 1);
sliderElem.position(30, 120);
} function draw() {
clear();
text( "Enter two values between which the "
+ "number would be constrained" , 20, 20);
text( "Move the slider to observe the effects"
+ " of the constrain() function" , 20, 100);
// Convert the string value to a number value
inputValA = Number(inputElemA.value());
inputValB = Number(inputElemB.value());
sliderVal = sliderElem.value();
text( "The slider value is: " + sliderVal, 20, 160);
// Display the constrained value
text( "The constrained value is: "
+ constrain(sliderVal, inputValA,
inputValB), 20, 180);
} |
Output:
Example 2:
function setup() {
createCanvas(600, 350);
textSize(20);
} function draw() {
clear();
text( "Move the pointer to see the effect "
+ "of constrain() in the square" , 20, 30);
text( "White circle represents unconstrained"
+ " mouse" , 20, 50);
text( "Red circle represents mouse constrained"
+ " to box dimensions" , 20, 70);
noFill();
square(100, 100, 200);
circle(mouseX, mouseY, 40);
// Constrain the mouse x and y position
constrainedMouseX = constrain(mouseX, 100, 300);
constrainedMouseY = constrain(mouseY, 100, 300);
fill( 'red' );
circle(constrainedMouseX, constrainedMouseY, 20);
} |
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/amp/
Reference: https://p5js.org/reference/#/p5/constrain