HomeLanguagesJavascriptp5.js input() Function

p5.js input() Function

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);
   
  // 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)
}


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

RELATED ARTICLES

Most Popular

Dominic
32533 POSTS0 COMMENTS
Milvus
131 POSTS0 COMMENTS
Nango Kala
6913 POSTS0 COMMENTS
Nicole Veronica
12029 POSTS0 COMMENTS
Nokonwaba Nkukhwana
12132 POSTS0 COMMENTS
Shaida Kate Naidoo
7043 POSTS0 COMMENTS
Ted Musemwa
7280 POSTS0 COMMENTS
Thapelo Manthata
7000 POSTS0 COMMENTS
Umr Jansen
6986 POSTS0 COMMENTS