p5.js input() Function
Last Updated :
16 Aug, 2023
Improve
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:
javascript
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
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.
function setup() {
createCanvas(600, 300);
textSize(28);
fill("green")
text("Write in the input box to change the text", 10, 20);
// create input box
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)
// get the text entered
fill("black")
text(this.value(), 20, 120)
}
