p5.js | Función crear entrada()

La función createInput() se usa para crear un elemento de entrada en el DOM para aceptar la entrada de texto. Los parámetros opcionales se pueden usar para establecer el tipo de entrada que se puede ingresar. Puede usar la función set() para definir la longitud de la caja. 

Sintaxis:

createInput(value, type)

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • valor: este parámetro de string se utiliza para establecer el valor predeterminado de la entrada.
  • type: este es un parámetro de string que establece el tipo de entrada. Puede tener valores como ‘texto’, ‘contraseña’, etc. para aceptar texto con ese formato específico.

Valor devuelto: Devuelve un puntero al p5.Element con el Node creado. 

Los siguientes ejemplos ilustran la función createInput() en p5.js: 

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

Producción:

 input-multiple-min 

Ejemplo 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)
}

Producción:

 input-text 

Editor en línea: https://editor.p5js.org/ 

Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/ 

Referencia: https://p5js.org/reference/#/p5/createInput

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *