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/
Reference: https://p5js.org/reference/#/p5/constrain
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
