p5.js input() Function
Last Updated :
16 Aug, 2023
The input() function is invoked whenever user input is detected on the element. It can be used to detect keystrokes or changes in the values of a slider. It can also be used to attach an event listener to an element.
Syntax:
input(fxn)
Parameters: This function accepts a single parameter as mentioned above and described below.
- fxn: This is the callback function that would be called whenever input is detected. It can be passed ‘false’, which would prevent the previous firing function to stop firing.
Below example illustrates the input() function in p5.js:
Example:
function setup() {
createCanvas(600, 300);
textSize(28);
fill( "green" )
text( "Write in the input box to change the text" , 10, 20);
let inputElem = createInput( '' );
inputElem.input(onInput);
inputElem.position(20, 40)
}
function onInput() {
clear();
text( "Write in the input box to change the text" , 10, 20);
fill( "green" )
strokeWeight(10)
rect(0, 80, 600, 100)
fill( "black" )
text( this .value(), 20, 120)
}
|
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/input
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...