Sunday, September 22, 2024
Google search engine
HomeLanguagesJavascriptp5.js createInput() Function

p5.js createInput() Function

The createInput() function is used to create an input element in the DOM for accepting text input. The optional parameters can be used to set the type of input that can be entered. You can use the set() function to define the length of the box. 

Syntax:

createInput(value, type)

Parameters: This function accepts two parameters as mentioned above and described below:

  • value: This string parameter used to set the default value of the input.
  • type: This is a string parameter which sets the type of input. It can have values such as ‘text’, ‘password’, etc for accepting text with that specific format.

Return Value: It returns a pointer to the p5.Element with the created node. 

Below examples illustrate the createInput() function in p5.js: 

Example 1: 

javascript




function setup() {
  createCanvas(300, 200);
  textSize(18);
  
  text("Enter username:", 20, 20);
  usernameInput = createInput('Your username', 'text');
  usernameInput.position(30, 40);
  
  text("Enter password:", 20, 80);
  passInput = createInput('', 'password');
  passInput.position(30, 100);
  
  text("Enter Date of Birth:", 20, 140); 
  dobInput = createInput('1970-01-01', 'date');
  dobInput.position(30, 160);
}


Output:

 input-multiple-min 

Example 2: 

javascript




function setup() {
  createCanvas(600, 300);
  textSize(28);
  text("Write in the input box to display the text", 20, 40);
  
  // Create input element
  let inputElem = createInput('');
  inputElem.input(onInput);
  inputElem.position(30, 60)
}
  
function onInput() {
  clear();
  text("Write in the input box to display the text", 20, 40);
  
  fill("green")
  strokeWeight(10)
  rect(0, 100, 600, 100)
  
  // Display the text entered
  fill("black")
  text(this.value(), 20, 140)
}


Output:

 input-text 

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/createInput

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!

RELATED ARTICLES

Most Popular

Recent Comments