▶함께배우는 프로세싱 :: KEY의 활용

▶함께배우는 프로세싱 :: KEY의 활용

---

이번글에서는 프로세싱에서 KEY를 활용하는 방법에 대해 살펴보려고 한다. 프로세싱에서는 사용자의 key입력신호를 바탕으로 시각화하는데 사용할 수 있도록, 여러가지 관련함수를 제공하고 있다.

프로세싱 시각화 콘텐츠에서 key값은 여러가지 용도로 사용된다. 

1. 시각화결과물에 사용자가 탐색을 할 수 있도록 하는 경우

2. 콘텐츠 제작중에 제작자가 여러가지 형태나, 범위를 보고자 할 경우

1번의 경우는 최종적인 결과물에 사용자가 조작가능하도록 key 기능을 포함시키는 것이다. 예를들어 키보드 화살표 '↑↓→←'를 통해 전체적인 구조를 살펴볼 수 있도록 하거나, 특정 키 값('+', '-'등)을 직접 지정하여 줌인아웃하는 경우등이 있다. 

다른 글에서 살펴봤던 kepler시각화에서도 제작자는 키보드의 '`', '1', '2', '3', '4'키로 행성의 정렬방식의 변경할수있도록 설정했다.

사용자가 콘텐츠를 탐색하고자 할때, key값을 통한 제어(예를들어 키보드 상하좌우키 등)는 사용자로하여금 그러한 탐색환경에 쉽게 접근할 수 있도록 돕는다.

프로세싱세의 key관련 함수들

key()

keyCode()

keyPressed()

keyPressed

keyReleased()

keyTyped()

key()

---

사용자가 누르거나 놓은 가장 최근의 키값을 활용하는 것. 앞으로 살펴볼 key관련 기능은 이런방식으로 동작한다.

draw()안에서 if문과 함께 keyPressd()를 적용했기때문에, 사용자가 b또는 b키를 누를 경우, 도형의 색상을 검정색(0)으로 칠하게 된다. 여기서 중요한 점은 key는 "눌렸을때"만 동작한다는 점이다. 키를 오래누르고 있으면 누르고있는 동안 도형은 검정색으로 칠해지고, 손을 떼는 순간 흰색으로 칠해지게 된다.

keyReleased()

---

앞서 살펴본 key()함수는 누를때 작동하지만, keyReleased()함수는 키가 눌렸다가 '놓을때'호출되는 함수이다.

이 코드를 실행하면, key()와 keyRelease()간의 차이점을 알 수 있다. 이 코드를 실행해보고 확인해보자. 키를 누를 때는 아무 반응이 없고, 키를 떼는 순간에만 한번 반응 한다는 것을 알 수 있다.(우리는 키를 오래 누르고 있을 수는 있지만, 오랜시간에 걸쳐 떼는 것은 할 수 없다. 오직 누르거나, 떼거나 둘중하나만 할 수 있다.)

key()의 다양한 활용에 대한 예제를 해보기위해 작성한 코드이다. 편의를 위하여 도형은 화면 중앙에서 생성된뒤, 다음 사진에서 볼 수 있는 keyPressed()함수이 코드에 의해 움직이게 된다.

keyPressed()는 이렇게 draw()밖에서 특정 인자에 값을 변경하는 방법으로 많이 활용된다. 이런 기능은 사용자 뿐만아니라, 프로세싱콘텐츠를 제작하는 데 있어서도 유용하다. 예를들어 특정 값이 화면에 표시되는 범위를 정하고자 할때, 여려번 변수를 고쳐가며 동작버튼을 누르는 방법도 있지만, 이렇게 조작가능하게 설정한뒤 적절한 범위를 찾아내는 방법으로 사용할 수 있다.

key값 이용 시 주의사항

---

다양한 OS를 고려한 콘텐르를 만들경우 해당 OS의 키값에 대한 이해가 필요하다. 예를들어 윈도우사용자의 키보드에는 ALT지만, MAC에는 OPTION이다. 이를 고려하여 적절한 값을 지정해줄 필요가 있겠다.