p5.js로 실시간 사용자 입력 렌더링하기

안녕하세요! 이번에는 p5.js 라이브러리를 사용하여 사용자 입력을 받고, 그 입력 값을 캔버스에 실시간으로 렌더링하는 방법에 대해 알아보겠습니다.

 

 p5.js로 실시간 사용자 입력 렌더링하기

 

 p5.js로 실시간 사용자 입력 렌더링하기

 

1. 사용자 입력 받기

2. 입력 값 업데이트

3. 입력 값 렌더링

4. 전체코드

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

사용자 입력 받기

먼저 setup() 함수 내에서 createInput() 함수를 사용하여 입력 상자를 생성합니다. 그리고 position() 함수를 사용하여 입력 상자의 위치를 설정합니다.

저는 처음에 createInput() 이런게 있는 지 모르고 html로 직접 input을 해서 하려고 했습니다... 계속 에러가 나고 안되더라구요 ㅠ

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

입력 값 업데이트

사용자가 입력 상자에 값을 입력할 때마다 updateText() 함수가 호출되도록 input.changed(updateText) 함수를 사용합니다. updateText() 함수 내에서는 this.value()를 사용하여 입력 상자의 값을 가져와 userInput 변수에 저장합니다.

let userInput = '';

function updateText() {
  userInput = this.value();
}

입력 값 렌더링

draw() 함수 내에서 background() 함수를 사용하여 캔버스의 배경색을 설정합니다. 그리고 textSize() 함수를 사용하여 텍스트 크기를 설정하고, fill() 함수를 사용하여 텍스트 색상을 설정합니다. 마지막으로 text() 함수를 사용하여 userInput 변수의 값을 캔버스에 렌더링합니다.

function draw() {
  background(220);
  textSize(32);
  fill(0);
  text(userInput, 20, 100);
}

전체코드

let userInput = '';

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

function draw() {
  background(220);
  textSize(32);
  fill(0);
  text(userInput, 20, 100);
}

function updateText() {
  userInput = this.value();
}

 

이 예제를 통해 p5.js에서 사용자 입력을 받고, 그 입력 값을 캔버스에 렌더링하는 방법을 배울 수 있습니다. 이 기능을 활용하면 다양한 인터랙티브 프로젝트를 만들 수 있습니다.

아래 p5.js 에디터에서 확인해보실 수 있습니다.

https://editor.p5js.org/

p5.js Web Editor

 

추천글

클릭하면 변하는 버튼: p5.js로 색상 변경하기

클릭하면 변하는 버튼: p5.js로 색상 변경하기

p5.js로 구현하는 모자이크 효과 만들기

p5.js로 구현하는 모자이크 효과 만들기