Lecture06. Processing으로 과녁(Target)을 그려보자!

📖 학습 내용 및 학습 목표

✍ 학습 내용

1. 실습: Processing 백과사전, Reference
2. 실습: 캔버스(Canvas) 생성하기
3. 실습: 캔버스(Canvas) 좌표 이해하기
4. 실습: 캔버스(Canvas)에 흑백 과녁 그리기
5. 실습: 캔버스(Canvas)에 색이 들어간 원 그리기
6. 실습: 캔버스(Canvas)에 다른 도형 그리기
7. 실습: 캔버스(Canvas)에 컬러 과녁 그리기

✍ 학습 목표

1. 실습을 통해 Processing Reference 사용 방법을 이해하고 사용할 수 있다.
2. 실습을 통해 캔버스(Canvas)를 생성하고 그림을 그릴 수 있다.

---

📖 1. 실습: Processing 백과사전, Reference

✍ Processing Reference 사용 방법

1. https://processing.org에 접속
2. 메뉴의 Documentation을 클릭하여 Reference로 이동
3. 영어로 키워드를 검색하여 원하는 함수를 찾아서 사용(예시: size…)

---

📖 2. 실습: 캔버스(Canvas) 생성하기

✍ 캔버스(Canvas)

• Processing에서 그림을 그리는 코드 작성시 결과가 출력되는 화면
• 그림을 그리는 도화지같은 역할

✍ size(int, int);

• Canvas 사이즈를 결정하는 함수

• 괄호 안에 두 개의 숫자를 콤마로 구분하여 입력이 필수

• 첫 번째 숫자는 가로 사이즈, 두 번째 숫자는 세로 사이즈

• 예시

  • size(600, 400); //가로 600 pixel, 세로 400 pixel의 Canvas 생성
  • size(600, 600); //가로 600 pixel, 세로 600 pixel의 Canvas 생성

---

📖 3. 실습: 캔버스(Canvas) 좌표 이해하기

✍ x축과 y축 좌표

• 좌표

  • 직선, 평면, 공간에서 점의 위치를 나타내기 위해 사용되는 값

• x축

  • 평면 위에서 폭, 가로를 의미하는 축
  • 왼쪽에서 오른쪽으로 갈수록 좌표 값이 커짐

• y축

  • 평면 위에서 높이, 세로를 의미하는 축
  • 위쪽에서 아래쪽으로 갈수록 좌표 값이 커짐

• 시작 지점(원점, origin)

  • Processing Canvas의 가장 왼쪽 위의 시작 부분
  • (x, y) 좌표 (0, 0)으로 표기할 수 있음

• 예시(Canvas size(500, 500);에서 좌표값)

  • 시작점 : (x, y) 좌표 (0, 0)
  • 중앙점 : (x, y) 좌표 (250, 250)
  • 종료점 : (x, y) 좌표 (500, 500)

---

📖 4. 실습: 캔버스(Canvas)에 흑백 과녁 그리기

✍ fill();

• 그리고자하는 도형의 내부색을 설정하는 함수
• 괄호 안에 들어가는 숫자가 1개인 경우 흑백으로 표현됨
• 숫자가 클수록 밝아짐

✍ ellipse();

• 타원을 그리는 함수
• 괄호 안에 4개의 숫자가 콤마(,)로 구분되어 입력되어야 함
• 타원의 중앙이 되는 점의 x축, y축 좌표 값과 원의 가로 지름, 세로 지름, 총 4개의 숫자 사용

---

📖 5. 실습: 캔버스(Canvas)에 색이 들어간 원 그리기

✍ fill(int, int, int);

• 그리고자하는 도형의 내부색을 설정하는 함수
• 괄호 안에 들어가는 숫자가 3개인 경우,
  첫 번째 숫자가 빨강(Red),
  두 번째 숫자가 초록(Green),
  세 번째 숫자가 파랑(Blue)
• 각 자리에 입력되는 숫자가 클수록 원색에 가까움
• 예시
  • 하양색 : fill(255, 255, 255);
  • 검정색 : fill(0, 0, 0);
  • 빨강색 : fill(255, 0, 0);
  • 초록색 : fill(0, 255, 0);
  • 파랑색 : fill(0, 0, 255);
  • 노랑색 : fill(255, 255, 0);

---

📖 6. 실습: 캔버스(Canvas)에 다른 도형 그리기

✍ stroke();

• 그리려는 도형의 외곽선 색을 설정하는 함수
• 괄호 안에 들어가는 숫자가 1개인 경우 흑백으로 표현됨
• 숫자가 클수록 밝아짐

✍ strokeWeight();

• 도형의 선의 굵기를 결정하는 함수
• 괄호에는 1개의 숫자가 들어감
• 숫자가 높을 수록 굵은 선이 만들어짐

✍ noStroke();

• 이 코드 이후 그리는 도형은 외곽선을 그리지 않도록 하는 함수

✍ line();

• 두 점의 좌표를 기준으로 선을 그리는 함수
• 괄호 안에 4개의 숫자가 콤마(,)로 구분되어 입력되어야 함
• 첫 번째 점의 x축, y축 좌표 그리고 두 번째 점의 x축 좌표, y축 좌표로 총 4개의 숫자 사용

✍ rect();

• 사각형을 그리는 함수
• 괄호 안에 4개의 숫자가 콤마(,)로 구분되어 입력되어야 함
• 사각형의 왼쪽 위의 모서리 좌표값과 사각형의 가로, 세로 사이즈 총 4개의 숫자 사용

✍ triangle();

• 삼각형을 그리는 함수
• 괄호 안에 6개의 숫자가 콤마(,)로 구분되어 입력되어야 함
• 삼각형 세 꼭짓점의 좌표가 각각 들어므로 총 6개의 숫자 사용

---

📖 7. 실습: 캔버스(Canvas)에 컬러 과녁 그리기

✍ 실습 유의사항

• 앞의 실습에서 배운 내용을 사용하여 오늘의 학습 목표인 컬러 과녁을 그리는 실습입니다.
  모르는 것은 질문 게시판 혹은 튜터에게 질문해주세요.