[Processing] 정보와 예술개론_마우스,키보드 인터랙션

오늘은 마우스 인터랙션과 키보드 인터랙션을 소개해 드릴 예정입니다 !

 

먼저 마우스 인터랙션에 사용되는 함수는 다음과 같습니다.

 - mouseClicked()    : 마우스 버튼이 눌린 후 떨어질 때 실행된다.

 - mouseDragged()   : 마우스 버튼이 눌린 채 드래그될 때 실행된다.

 - mouseMoved()     : 마우스가 움직일 때 실행된다.

 - mouseReleased() : 마우스버튼이 떨어질 때 실행된다.

 - mouseWheel()      : 마우스의 휠의 회전 숫자를 반환한다.

 - mousePressed()   : 마우스가 클릭되면 자동으로 호출된다.

 

 

여기서 선형보간 함수 lerp()를 잠깐 소개하겠습니다.

lerp(a, b, c)함수는 a위치부터 b위치까지 c만큼 값을 변경하는 함수입니다.

 

아래 예시를 보고, c값을 크게 하면 따라오는 속도가 빨라짐을 이해하시면 됩니다 !

목적지에 원이 거의 도달하면 움직임의 속도가 줄어듭니다.

 

PVector begin;
void setup() {
  size(400, 400);
  begin = new PVector(width/2, height/2);
  fill(50);
}

void draw() {
  background(255);

  begin.x = lerp(begin.x, mouseX, 0.05);
  begin.y = lerp(begin.y, mouseY, 0.05);

  ellipse(begin.x, begin.y, 50, 50);
}

 

여기서는 마우스가 안보이네요..

 

 

---

 

 

다음으로 < 키보드 인터랙션 >을 소개해드리겠습니다.

 

 

 키보드에서 눌러진 키는 일반적인 글자키와 특수키로 나뉩니다.

화살표 등이 특수키입니다. 특수키가 눌리면 key라는 시스템변수에 CODED라는 값이 저장되는 데, 이를 이용해서 눌린 키가 특수키인지 글자키인지 구분할 수 있습니다. 만약 눌린 키가 글자키이면 key변수에 해당 글자가 저장됩니다.

 

아래의 2인용 키보드 게임의 코드를 보면서 이해해봅시다 ! !

 

int circleX, circleY;
int speed = 5;

void setup() {
  size(300, 300);
  stroke(0);
  fill(30);
}

void draw() {
  background(255);
  ellipse(circleX, circleY, 50, 50);
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == LEFT) circleX -=speed;
    else if (keyCode == RIGHT)circleX +=speed;
    else if (keyCode == UP)circleY -=speed;
    else if (keyCode == DOWN)circleY +=speed;
  } else {
    if (key == 'a')circleX -=speed;
    else if (key == 'd')circleX +=speed;
    else if (key == 'w')circleY -=speed;
    else if (key == 's')circleY +=speed;
  }
}

---

 

시간에 따라 주기적인 행동을 하는 방법 또한 소개해드리겠습니다.

일단, 프레임과 관련된 변수는 다음과 같습니다.

 

- frameRate : 초당 프레임이 업데이트 하는 속도를 나타내는 내부 변수, 초당 60프레임이 기본

- frameRate() : frameRate변수값을 변경하는 내부 함수. 컴퓨터의 성능이 허용하는 한 최대한 이 속도를 맞춰준다.

- frameCount : 프로그램 실행 시부터 증가한 현재 프레임 번호.

 

교재의 내용을 응용하여 1초마다 원의 색을 바꾸는 코드를 짜보았습니다.

 

 

int circolor;

void setup() {
  size(300, 300);
  frameRate(60);
  circolor = 250;

  fill(circolor, circolor, circolor);
}

void draw() {
  ellipse(150, 80, 70, 70);
  ellipse(150, 220, 70, 70);
  ellipse(150, 150, 70, 70);
  if (frameCount == 60) {
    fill(255-circolor,circolor, 255-circolor);
    if (circolor == 0) circolor = 50;
    else if (circolor == 50)circolor= 100;
    else if (circolor == 100)circolor= 150;
    else if (circolor == 150)circolor= 200;
    else if (circolor == 200)circolor= 250;
    else if (circolor == 250)circolor= 0;
    frameCount = 0;
  }
}