다운로드 교육자료 문제해결 레퍼런스 구입방법

교육 자료 : 프로세싱 : 마우스와 키보드 이벤트

직선 그리기
프로세싱의 mouseX와 mouseY 변수는 현재 마우스 커서의 X, Y 좌표를 나타냅니다.

창의 중심에서 마우스 커서의 현재 위치까지 선을 그려 봅시다.

void setup() {
    size(600, 400);
    background(255);
    stroke(0, 0, 255);
}

void draw() {
    line(300, 200, mouseX, mouseY);
}

그려진 선이 계속 남아 있어서 보기 싫습니다. 현재 마우스 커서의 위치에 대한 선만 그리도록 합시다. background() 함수로 매번 창 전체를 칠해서 이전 그림을 다 지운 후 선을 그리면 됩니다. background() 함수를 setup() 함수에서 draw() 함수로 옮기도록 합시다.

void setup() {
    size(600, 400);
    stroke(0, 0, 255);
}

void draw() {
    background(255);
    line(300, 200, mouseX, mouseY);
}

이번에는 마우스 버튼을 누를 때만 그림을 새로 그리도록 해봅시다. mousePressed() 함수를 선언하면 마우스 버튼을 누를 때마다 호출해 줍니다.

void setup() {
    size(600, 400);
    background(255);
    stroke(0, 0, 255);
}

void draw() {
    line(300, 200, mouseX, mouseY);
}

void mousePressed() {
    background(255);
}

마우스 왼쪽 버튼과 다른 버튼을 구분하여 다른 색상을 칠해봅시다. 프로세싱의 mouseButton 변수는 현재 눌러진 마우스 버튼을 나타냅니다. LEFT는 마우스 왼쪽 버튼, RIGHT는 오른쪽 버튼입니다.

void setup() {
    size(600, 400);
    background(255);
    stroke(0, 0, 255);
}

void draw() {
    line(300, 200, mouseX, mouseY);
}

void mousePressed() {
    if(mouseButton == LEFT) {
        background(255, 122, 0);
    } else {
        background(255);
    }
}
마우스 커서를 따라다니는 사각형
주황색 사각형이 마우스 커서를 따라 움직이도록 해봅시다.

void setup() {
    size(600, 400);
    background(255);
    fill(255, 122, 0);
    noStroke();
}

void draw() {
    background(255);
    rect(mouseX, mouseY, 100, 100);
}

마우스 커서가 사각형의 중심에 있도록 하려면 어떻게 해야 할까요? 사각형의 크기를 알기 때문에 다음과 같이 사각형을 이동하여 그리면 될 것 같습니다.

void setup() {
    size(600, 400);
    background(255);
    fill(255, 122, 0);
    noStroke();
}

void draw() {
    background(255);
    rect(mouseX - 50, mouseY - 50, 100, 100);
}

하지만 사각형의 크기가 달라지면 계산을 새로 해야 하므로 불편합니다. 다른 방법을 알아보도록 합시다. rectMode() 함수를 사용하면 사각형을 그리는 방법을 변경할 수 있습니다.

mode 값으로 CORNER, CORNERS, CENTER, RADIUS 중 하나를 설정할 수 있는데 지금까지 사각형을 그린 방법이 CORNER 모드입니다. 즉, rect() 함수의 첫 번째, 두 번째 파라미터를 사각형의 왼쪽 위 좌표로 사용하고, 세 번째, 네 번째 파라미터를 사각형의 폭과 높이로 사용하였습니다. 각 모드는 다음과 같이 rect() 함수의 파라미터들을 해석합니다.

모드 첫 번째 파라미터 두 번째 파라미터 세 번째 파라미터 네 번째 파라미터
CORNER 사각형의 왼쪽 위 X 좌표 사각형의 왼쪽 위 Y 좌표 사각형의 폭 사각형의 높이
CORNERS 사각형의 왼쪽 위 X 좌표 사각형의 왼쪽 위 Y 좌표 사각형의 오른쪽 아래 X 좌표 사각형의 오른쪽 아래 Y 좌표
CENTER 사각형 중심의 X 좌표 사각형 중심의 Y 좌표 사각형의 폭 사각형의 높이
RADIUS 사각형 중심의 X 좌표 사각형 중심의 Y 좌표 사각형 폭의 1/2 사각형 높이의 1/2

CENTER 모드를 사용하여 마우스 커서가 사각형의 중심에 있도록 합시다.

void setup() {
    size(600, 400);
    background(255);
    fill(255, 122, 0);
    noStroke();
    rectMode(CENTER);
}

void draw() {
    background(255);
    rect(mouseX, mouseY, 100, 100);
}
그림판 만들기
mouseDragged() 함수는 마우스 버튼을 누른 상태에서 마우스 커서를 움직이면 호출됩니다.

프로세싱의 pmouseX와 pmouseY 변수는 이전 프레임의 마우스 커서 X, Y 좌표를 나타냅니다.

이전 프레임의 마우스 커서 좌표 (pmouseX, pmouseY)에서 현재 프레임의 마우스 커서 좌표 (mouseX, mouseY)까지 선을 누적하여 그리면 마우스 커서를 드래그하여 그림을 그릴 수 있습니다.

void setup() {
    size(600, 400);
    background(255);
    stroke(0, 0, 255);
}

void draw() {
}

void mouseDragged() {
    line(pmouseX, pmouseY, mouseX, mouseY); // x1, y1, x2, y2
}

마우스 오른쪽 버튼을 누르면 그림을 지우고 새로 그리도록 해봅시다.
그림 저장하기
그림판으로 그린 그림을 파일로 저장하고 싶습니다. keyPressed() 함수는 키보드의 키를 누르면 호출되고, 프로세싱의 key 변수는 눌러진 키를 나타냅니다.

saveFrame() 함수는 입력한 파일 이름(filename)으로 현재 창의 화면을 그림 파일로 저장합니다. 파일 이름의 확장자는 tif, tga, jpg, png 중의 하나입니다.

키보드의 알파벳 a 키를 누르면 현재 창의 화면을 저장하고, 다른 키를 누르면 창의 그림을 지우도록 해봅시다.

void setup() {
    size(600, 400);
    background(255);
    stroke(0, 0, 255);
}

void draw() {
}

void mouseDragged() {
    line(pmouseX, pmouseY, mouseX, mouseY); // x1, y1, x2, y2
}

void keyPressed() {
    if(key == 'a') {
        saveFrame("c:\\processing-3.2.3\\sample.png");
    } else {
        background(255);
    }
}

그림 파일의 전체 경로를 지정하지 않고 파일 이름만 지정하는 경우에는 작성한 코드가 저장된 위치와 같은 위치에 그림 파일이 저장됩니다.

saveFrame("sample.png");

이 경우에는 코드를 실행하기 전에 우선 작성한 코드를 파일로 저장해야 합니다. 파일 메뉴의 저장 메뉴 또는 다른 이름으로 저장... 메뉴를 선택하여 작성한 코드를 저장합시다.

작성한 코드가 저장되는 위치는 파일 메뉴의 환경 설정 메뉴에서 확인할 수 있습니다. 설정 대화상자가 나타나면 스케치 폴더 위치를 확인합시다. 네비게이션 버튼을 클릭하면 스케치 폴더의 위치를 변경할 수 있습니다.
응용 프로그램 만들기
작성한 코드를 응용 프로그램으로 만들어 봅시다.

  1. 파일 메뉴의 저장 메뉴 또는 다른 이름으로 저장... 메뉴를 선택하여 작성한 코드를 저장합니다.
  2. 파일 메뉴의 어플리케이션으로 내보내기... 메뉴를 선택합니다.
  3. 내보내기 옵션 대화상자가 나타나면 플랫폼에서 OS를 선택합니다.
  4. 프로세싱은 자바 기반으로 만들어져 있기 때문에 응용 프로그램이 실행되려면 자바 가상 머신(JVM)이 필요합니다.
    • 응용 프로그램이 실행될 컴퓨터에 자바 가상 머신이 설치되어 있으면 Embed Java for Windows를 체크하지 않아도 됩니다.
    • 응용 프로그램이 실행될 컴퓨터에 자바 가상 머신이 설치되어 있지 않으면 Embed Java for Windows를 체크해야 합니다.
  5. 내보내기 버튼을 클릭하면 응용 프로그램이 만들어집니다. 응용 프로그램은 작성한 코드가 저장된 위치와 같은 위치에 저장됩니다.
프로세싱 더 자세히 알기
지금까지 프로세싱의 기초적인 부분을 살펴보았습니다. 프로세싱에 대해 좀 더 자세히 알고 싶으면 http://www.processing.org를 방문하여 화면 왼쪽의 Reference, Tutorials, Examples 메뉴를 살펴보도록 합시다.

키보드 이벤트에 대해서는 햄스터 기초키보드 이벤트에서 좀 더 알아보도록 하겠습니다.
목차
수업 자료 내려 받기
수업 준비
  1. 하드웨어 살펴보기
  2. 햄스터 · 햄스터S · USB 동글 PDF · PPT
  3. 소프트웨어 설치 (설치 파일을 내려 받은 경우)
  4. PDF · PPT
  5. 소프트웨어 설치 (라이브러리 파일을 내려 받은 경우)
  6. PDF · PPT
  7. 로봇과 컴퓨터 연결
  8. PDF · PPT
  9. 소프트웨어 실행
  10. PDF · PPT
  11. 환경 설정
  12. PDF · PPT
프로세싱 기초
  1. 도형 그리기
  2. 애니메이션
  3. 마우스와 키보드 이벤트
햄스터 기초
  1. 코드의 기본 형태 만들기
  2. 클라우드 컴퓨터 환경에서 작업하기 (선택 사항)
  3. 말판 이동하기 #1 (순차, 횟수 반복)
  4. 이동하고 회전하기
  5. LED 켜고 소리 내기
  6. 순서대로, 반복하여 명령하기
  7. 키보드 이벤트
  8. 근접 센서 사용하기
  9. 말판 이동하기 #2 (~인 동안 반복)
  10. 바닥 센서 사용하기
  11. 밝기 센서와 가속도 센서 사용하기
  12. 브레이튼버그의 로봇
햄스터 심화
  1. 보드 게임 만들기
  2. 그래픽 인터페이스
  3. 센서 한 개를 사용한 라인 트레이서
  4. 센서 두 개를 사용한 라인 트레이서
  5. 햄스터 친구 따라가기 (2인 1조)
  6. 벽 따라가기
  7. 로봇 청소기 흉내 내기
  8. 라인 트레이서 교차로 주행하기
  9. 미로 탈출
확장 키트
  1. 조립하기
  2. 핀/소켓 배치 살펴보기
  3. 디지털 입력 - 버튼을 누르면 삐 소리가 나요
  4. 디지털 출력 - 어두우면 LED 불이 켜져요
  5. 디지털 출력 - 반짝반짝 LED를 깜박여요
  6. 디지털 출력 - 기울이는 방향으로 LED가 켜져요
  7. 아날로그 입력 - 포텐셔미터를 돌리면 음 높이가 달라져요
  8. 아날로그 입력 - 뜨겁지 않게 해주세요
  9. 아날로그 입력 - 빛을 따라 움직여요
  10. PWM 출력 - LED 불이 부드럽게 밝아졌다 어두워져요
  11. PWM 출력 - LED 촛불이 바람에 흔들려요
  12. 아날로그 서보 출력 - 햄스터 로봇에게 꼬리가 생겼어요
햄스터 고급
  1. 행위 기반의 로봇 제어
  2. 경로 탐색
  3. 자리 바꾸기
Copyright 로봇SW교육원 All rights reserved.
어려운 일이 있으면 광운대학교 로봇학부 박광현 교수(akaii@kw.ac.kr)에게 연락하세요.