Lecture 11. Processing으로 게임을 만들 수 있다!(4): 마우스로 패드 만들기

📖 학습 내용 및 학습 목표

✍ 학습 내용

1. 출력(Output)과 입력(Input)
2. 마우스의 좌표값을 알 수 있는 시스템 변수
3. 실습: mouseX, mouseY
4. 실습: 마우스를 따라다니는 패드 만들기
5. 실습: 공을 튕기는 패드 만들기

✍ 학습 목표

1. 출력(Output)과 입력(Input)의 차이를 이해하고 Processing에서의 입력에 대해 설명할 수 있다.
2. 마우스의 X, Y 좌표 개념을 이해할 수 있다.
3. 실습을 통해 마우스의 X, Y 좌표를 시스템 변수로 불러오고 사용할 수 있다.
4. 실습을 통해 조건문(if) 안에 조건문(if)을 사용하고 마우스를 따라다니는 패드를 만들 수 있다.
5. 실습을 통해 공을 튕기는 패드를 완성할 수 있다.

---

📖 1. 출력(Output)과 입력(Input)

✍ 출력(Output)

• 출력할 수 있는 어떤 수단을 통해 컴퓨터 내부의 정보(문자, 그림 등)를
  컴퓨터가 내보내는 것(= 출력하는 것)
• 출력 수단과 출력 정보
  • 모니터: 문자, 이미지, 영상 등의 정보
  • 스피커: 컴퓨터 내부의 소리 등의 정보
  • 프린터: 컴퓨터 내부의 문서, 이미지 등의 정보

✍ 입력(Input)

• 입력할 수 있는 어떤 수단을 통해 컴퓨터 외부의 정보(문자, 그림 등)를
  컴퓨터에 보내는 것(= 입력하는 것)
• 입력 수단과 입력 정보
  • 마우스: 마우스 왼쪽/오른쪽 클릭, 마우스 위치 등의 정보
  • 키보드: 눌러진 자판의 문자 혹은 기능 등의 정보
  • 마이크: 나의 목소리, 주변 소리 등의 정보
  • 카메라: 나와 주변 모습을 담은 영상 등의 정보
  • 스캐너: 문서(종이)의 문자, 이미지 등의 정보

✍ Processing에서 출력(Output)

• https://processing.org/reference/#Output
• println() : 입력된 값을 콘솔(console)에 출력

✍ Processing에서 입력(Input)

• https://processing.org/reference#Input
• mouseX: 마우스의 X 좌표를 알려주는 시스템 변수
• mouseY: 마우스의 Y 좌표를 알려주는 시스템 변수
• mousePressed: 마우스를 클릭하면 참(true), 클릭하지 않으면 거짓(false)으로 알려주는 시스템 변수

---

📖 2. 마우스의 좌표값을 알 수 있는 시스템 변수

✍ Processing에서 좌표 복습

• Processing의 좌표 영점(0, 0)은 캔버스(Canvas)의 왼쪽 상단
• Processing의 좌표 끝은 지정한 캔버스(Canvas)의 size-1과 같음
  • 예시
    size(600, 500)이라면,
    x좌표는 0부터 599까지 600개의 좌표를 가짐,
    y좌표는 0부터 499까지 500개의 좌표를 가짐

✍ 시스템 변수

• Processing에서 기본적으로 제공하며, 이미 값을 갖고 있는 변수
• intege, string 데이터 타입의 변수는 직접 선언해주어야 하지만
  시스템 변수는 이미 값을 갖고 있기 때문에 불러와서 사용하기만 하면 됨

✍ mouseX

• 마우스의 X좌표를 출력하는 시스템 변수

✍ mouseY

• 마우스의 Y좌표를 출력하는 시스템 변수