728x90
오늘은 마우스 인터랙션과 키보드 인터랙션을 소개해 드릴 예정입니다 !
먼저 마우스 인터랙션에 사용되는 함수는 다음과 같습니다.
- 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;
}
}
728x90
'Processing' 카테고리의 다른 글
[Processing] 정보와 예술개론_픽셀 (0) | 2022.10.01 |
---|---|
[Processing] 정보와 예술개론_이미지 불러오기, 블러링 (1) | 2022.10.01 |
[Processing] 정보와 예술개론_배열을 활용한 움직이는 원 (0) | 2022.10.01 |
[Processing] 정보와 예술개론_그림그리기의 기초, 선에 관하여 (0) | 2022.10.01 |
[Processing] 정보와 예술개론_자신의 그림 그리기 (0) | 2022.10.01 |