[p5.js] 함수 호출과 인터랙션

random 함수를 이용해서 x, y 좌표에 랜덤한 값을 넣어줄 수 있다.

 

random(400) // 400 이하의 값 중 랜덤

random(100, 400) // 100~400 사이의 값 중 랜덤

 

function setup() {
  createCanvas(400, 400);
  background("#ececec");
}

function mousePressed() {
  
  // 기존 동그라미를 가려주기 위해 백그라운드를 다시 그려준다
  background("#ececec");
  
  // 400 이하 값 중 랜덤
  let x = random(400);
  let y = random(400);
  
  fill("pink");
  ellipse(x, y, 100, 100);
}

 

만약 위 코드의 mousePressed 함수 중 background 부분을 삭제하면

기존 동그라미가 사라지지 않으면서 새로운 위치에 생겨난다.

 

 

p5.js가 기본적으로 제공하는 함수들

 

- mousePressed : 마우스를 클릭할 때

- mouseReleased : 마우스를 뗄 때

- mouseMoved : 마우스를 움직일 때

- mouseDragged : 마우스를 드래그할 때

- keyPressed : 키보드 입력이 일어날 때

- keyReleased : 키보드를 뗄 때

 

 

결과물

 

 

위 함수들은 p5.js에서 기본으로 제공하는 내장함수인데,

내가 직접 정의하는 사용자 정의 함수를 만들 수도 있다.

 

아래 코드는 circleColor를 인자로 받는 randomCircle이라는 사용자 정의 함수를 만들어서

반복 사용되는 코드를 간결하게 정리한 것이다.

 

function setup() {
  createCanvas(400, 400);
  background("#ececec");
}

function randomCircle(circleColor) {
  let x = random(400);
  let y = random(400);
  
  fill(circleColor);
  ellipse(x, y, 100, 100);
}

function mousePressed() { 
  randomCircle("pink");
}

function mouseMoved() {
  randomCircle("skyblue");
}

function mouseDragged() {
  randomCircle("orange");
}

function mouseReleased(){
  randomCircle("tomato");
}

 

 

---

 

위 함수들은 사용자가 키보드나 마우스를 눌렀을 때 실행되는 함수들인데,

그러한 인터랙션이 없어도 자동으로 실행되는 함수가 바로 draw 함수다.

 

- draw : 1초에 60번씩 자동 실행되는 함수

function setup() {
  createCanvas(400, 400);
  background("#ececec");
  frameRate(5); // 아래 draw 함수에서 1초에 몇 번 실행될지 결정(=1초에 다섯번 실행)
}

function randomCircle(circleColor) {
  let x = random(400);
  let y = random(400);
  
  fill(circleColor);
  ellipse(x, y, 100, 100);
}

function draw() {
  randomCircle("orange");
}

 

 

 

[예제] 마우스 커서를 따라다니는 손가락 만들기

function setup() {
  createCanvas(400, 400);
  background("#ececec");
  noCursor(); //기존 마우스커서 지워주기
}

function draw() {
  background("#ececec");
  hand(mouseX, mouseY);
}

function hand(x, y) {
  //레이어 시작
  push();
    
    translate(x, y);
    strokeWeight(20);
    point(0, 0);
    line(0, 0, 0, 50); //검지
    line(20, 20, 20, 50); //중지
    line(40, 20, 40, 50); //약지
    line(60, 20, 60, 50); //새끼
  
    fill("black");
    ellipse(30, 60, 60, 60); //손등
  
    line(0, 70, -30, 40); //엄지
    
  //레이어 끝
  pop();
}