[javascript] P5.js에서 텍스트 입력을 어떻게 처리하나요?

P5.js에서 텍스트 입력을 처리하는 방법은 간단합니다. P5.js는 createInput() 함수를 통해 입력 필드를 생성하고, input.value()를 사용하여 입력된 텍스트 값을 가져올 수 있습니다.

다음은 P5.js에서 텍스트 입력을 처리하는 예제입니다.

let input;

function setup() {
  createCanvas(400, 200);
  input = createInput();
  input.position(20, 20);
  input.changed(processInput);
}

function draw() {
  background(220);
  let textValue = input.value();
  fill(0);
  text(textValue, 20, 50);
}

function processInput() {
  let textValue = input.value();
  console.log("입력된 텍스트:", textValue);
}

이 예제에서는 createInput() 함수를 사용하여 입력 필드를 생성하고, input.position() 함수를 사용하여 필드의 위치를 지정합니다. 그리고 input.changed() 함수를 사용하여 입력이 변경될 때마다 processInput() 함수가 실행되도록 합니다.

그리고 draw() 함수에서는 입력된 텍스트 값을 가져와서 화면에 텍스트로 출력합니다.

이제 위의 예제를 실행하고 입력 필드에 텍스트를 입력해보세요. 입력 필드 옆에 있는 콘솔에 입력된 텍스트 값이 표시될 것입니다.