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

버튼을 클릭하면 색이 변경되는 p5.js 코드를 사용하여 동적인 버튼을 만들어보겠습니다. . 클릭할 때마다 버튼의 색상이 변하며, 이를 통해 사용자의 상호작용을 활성화할 수 있습니다. 

 

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

 

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

 

1. 버튼 생성하기

2. 색상 변경 함수 구현하기

3. 버튼에 색상 적용하기

4. 동적 상호작용

추천글

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

 

버튼 생성하기

p5.js 라이브러리의 createButton() 함수를 사용하여 "Click me"라는 텍스트가 있는 버튼을 생성합니다. position() 함수를 사용하여 버튼의 위치를 설정하고, size() 함수를 사용하여 버튼의 크기를 설정합니다. 

setup()함수에 작성하시면 됩니다.

let button = createButton('Click me'); // 버튼 생성
button.position(125, 25); // 버튼 위치 설정
button.size(150, 150); // 버튼 크기 설정

색상 변경 함수 구현하기

 버튼의 배경색을 랜덤한 색상으로 변경합니다. color() 함수를 사용하여 랜덤한 RGB 값을 생성하고, select('button') 함수를 사용하여 버튼 요소를 선택한 다음, style() 함수를 사용하여 버튼의 배경색을 업데이트합니다.

function changeColor() {
  // 버튼 색상을 랜덤하게 변경
  buttonColor = color(random(255), random(255), random(255));
  select('button').style('background-color', buttonColor); // 버튼의 배경색 업데이트
}

버튼에 색상 적용하기

버튼에 mousePressed 이벤트 핸들러를 설정합니다. 버튼을 클릭하면 changeColor() 함수가 호출되어 버튼의 배경색이 랜덤한 색상으로 변경됩니다. 위에서 작성했던 버튼 코드 아래 추가하시면 됩니다.

button.mousePressed(changeColor); // 마우스 클릭 이벤트 핸들러 설정

동적 상호작용

전체코드는 아래와 같습니다. 실행시킨 뒤 눌러보시면 클릭때마다 버튼의 색이 변경됩니다.

let buttonColor; // 버튼의 색상 변수

function setup() {
  createCanvas(400, 200); // 캔버스 생성
  buttonColor = color(255, 0, 0); // 초기 버튼 색상: 빨간색
  let button = createButton('Click me'); // 버튼 생성
  button.position(125, 25); // 버튼 위치 설정
  button.style('background-color', buttonColor); // 버튼의 배경색 설정
  button.size(150, 150);
  button.mousePressed(changeColor); // 마우스 클릭 이벤트 핸들러 설정
}

function draw() {
  background(220); // 배경색 설정
}

function changeColor() {
  // 버튼 색상을 랜덤하게 변경
  buttonColor = color(random(255), random(255), random(255));
  select('button').style('background-color', buttonColor); // 버튼의 배경색 업데이트
}

 

클릭하면 색이 변경되는 버튼을 p5.js를 사용하여 만드는 방법에 대해 알아보았습니다. 사용자의 상호작용을 유도하고 동적인 웹 요소를 구현하는 데 유용한 기술입니다. 다양하게 변경해서 사용하시면 됩니다.

 

추천글

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