1
00:00:02,518 --> 00:00:03,908
다음의 세가지 단계를 거치면
앞으로 그림을 색을 칠하여

2
00:00:03,908 --> 00:00:06,528
만들수 있다는 것을 알 수 있을 거에요

3
00:00:06,528 --> 00:00:08,559
우선 배경색을 그려보도록 하죠

4
00:00:08,559 --> 00:00:11,870
그러기 위해서는 우선 "background"와 "("를 입력하고

5
00:00:11,870 --> 00:00:13,892
나머지 항목들은 자동으로 완성될 거에요

6
00:00:13,892 --> 00:00:17,093
보다 자세히보자면,이것은 실제로는 
함수 호출(function call)이라는것을 알아차릴거에요

7
00:00:17,093 --> 00:00:19,074
함수의 이름은 여기있고

8
00:00:19,074 --> 00:00:22,235
여기서는 <i>background</i>겠죠
그리고 괄호( ( ) )가 있어요

9
00:00:22,235 --> 00:00:24,778
그리고 세가지의 파라미터(parameter)들이 그 안에 있고
각각 쉼표(,)로 나뉘어져있어요

10
00:00:25,018 --> 00:00:31,032
이 세 숫자는 배경이 되는 색에서
각각 빨강, 초록, 파랑의 양을 나타내요

11
00:00:31,236 --> 00:00:34,792
그 숫자들은 0에서 255사이의 어느 숫자나 입력이 가능해요

12
00:00:35,142 --> 00:00:37,393
여기서 0은 그 색이 아예 없는것을 의미하고

13
00:00:37,393 --> 00:00:39,787
255는 그 색이 최대로 존재하는 것을 의미해요

14
00:00:39,787 --> 00:00:42,963
그래서 빨강색을 최대로 주고,
초록과 파랑을 아무것도 칠하지 않은 결과

15
00:00:42,963 --> 00:00:45,130
배경색이 매우 밝은 빨강색이 된거에요

16
00:00:45,130 --> 00:00:48,128
만일 맨 처음 준 값보다 작은 값을 빨강색에 주게 된다면

17
00:00:48,138 --> 00:00:49,662
그러면 배경이 조금 어두운 빨강색처럼 보일거에요

18
00:00:49,662 --> 00:00:51,332
이 숫자들을 가지고 계속해서 수정 할 수도 있고

19
00:00:51,332 --> 00:00:53,258
그리고 어떠한 색이 나오는지 볼 수도 있어요

20
00:00:53,258 --> 00:00:58,534
혹은 모든 세 숫자를 한번에 조종할 수 있는 
좌우로 끌어서 조종하는 법을 사용할 수 도 있어요

21
00:00:59,382 --> 00:01:00,671
우선은 <i>background</i>라는 함수가

22
00:01:00,671 --> 00:01:02,980
진짜로 무엇을 하는지 아는 것이 중요해요

23
00:01:02,980 --> 00:01:06,100
그 함수는 단순히 전체 캔버스 전체에
색이 칠해진 거대한 사각형을 그릴거에요.

24
00:01:06,370 --> 00:01:08,765
만일 그 함수를 프로그램의 맨 마지막부분으로 옮긴다면

25
00:01:08,765 --> 00:01:11,860
내가 그린 모든 도형들 위로
커다란 배경색으로 칠해진 사각형만을 그릴 거에요

26
00:01:12,165 --> 00:01:14,710
당신은 "이것은 너무하네! 누가 이런것을 원한다고..."
라고 생각할 거에요

27
00:01:14,715 --> 00:01:16,530
하지만 앞으로는 어떻게 될지 모르니

28
00:01:16,770 --> 00:01:18,610
지금부터라도 항상 맨 위에
배경색을 지정하는것을 남겨두세요

29
00:01:19,250 --> 00:01:20,669
그럼 지금부터는 도형에 색을 칠해볼까요!

30
00:01:20,819 --> 00:01:26,666
컴퓨터를 색을 칠하는 조수나, 어떠한 색깔의 집사로
생각하는 것은 무척 도움이 될 거에요

31
00:01:27,000 --> 00:01:29,357
보통 이러한 친구들은 색깔들을 담당하고 있을텐데

32
00:01:29,547 --> 00:01:34,590
이 색깔을 담당하는 친구는 
왼손에는 색을 칠하기 위한 마커를 들고 있고

33
00:01:34,620 --> 00:01:39,079
오른쪽 손에는 페인트 통 하나를 들고 있을거에요

34
00:01:39,209 --> 00:01:42,513
컴퓨터는 그 색을 가진 마커를 가지고
모든 바깥의 선들((outlines)을 그리고

35
00:01:42,513 --> 00:01:44,550
페인트 통을 이용해서 그 도형에 색을 채울거에요

36
00:01:44,550 --> 00:01:47,269
지금부터 마커는 검정색,
그리고 하얀색 페인트 통을 가지고 있다고 해요

37
00:01:47,499 --> 00:01:51,280
하지만 <i>stroke</i>함수를 이용하여 마커의 색을 바꿀 수도 있어요

38
00:01:51,531 --> 00:01:55,274
우리는 여기서도 자동완성(autocomplete)기능을 사용할 수 있고,
그 다음엔 색을 고를 수 있어요

39
00:01:55,274 --> 00:01:58,310
이것은 이 친구가 들고 있는 마커의 색을 바꾸어요

40
00:01:58,560 --> 00:02:00,230
그러므로 이 이후에 그려진 모든 도형들의

41
00:02:00,230 --> 00:02:02,180
바깥 선들은 핑크색으로 변할 거에요

42
00:02:02,320 --> 00:02:04,950
가끔 우리는 도형의 바깥 선을 그리지 않고 싶을때도 있지요?

43
00:02:05,010 --> 00:02:06,544
그럴때는 다음과 같이 함수를 사용하면 돼요

44
00:02:06,544 --> 00:02:10,175
<i>noStroke</i>라는 함수를 그리기 전에 사용해주면 돼요

45
00:02:10,175 --> 00:02:12,686
보는것과 같이 이 함수는 parameters를 따로 가지지 않으므로

46
00:02:12,686 --> 00:02:17,009
우리는 단순히 함수 이름 뒤에 "();"를 붙여주면 될거에요

47
00:02:17,009 --> 00:02:19,428
그러고 나면 도형들의 바깥 선들이 없는 것을 볼 수 있을거에요

48
00:02:19,868 --> 00:02:21,531
또한 우리는 이 친구의 페인트 통의 색을 바꿔 줄 수도 있어요

49
00:02:21,531 --> 00:02:24,594
<i>Fill</i>이라는 함수를 통해서 말이죠

50
00:02:25,484 --> 00:02:27,509
이 함수를 코드의 맨 앞에 넣고 나면

51
00:02:27,509 --> 00:02:29,924
모든 도형이 밝은 빨강색으로 채워질 거에요

52
00:02:30,024 --> 00:02:31,961
마치 <i>noStroke</i> 함수와 비슷하게

53
00:02:31,961 --> 00:02:37,308
<i>noFill</i>이라는 함수도 있습니다
이것 역시 파라미터(parameters)를 가지지 않아요

54
00:02:38,028 --> 00:02:41,297
이것은 도형들을 투명하게 만들어요
즉 아무것도 채우지 않는 것이죠

55
00:02:42,247 --> 00:02:44,273
그럼 지금부터 이 친구를 실제로 색칠하여 보죠

56
00:02:44,273 --> 00:02:46,987
그의 몸을 이루는 삼각형부터 칠해보아요

57
00:02:46,987 --> 00:02:50,362
<i>stroke</i>의 색을 정해주어 도형의 바깥선을 설정해요

58
00:02:51,219 --> 00:02:54,856
어두운 초록색으로 지정해볼까요?

59
00:02:56,246 --> 00:02:58,407
그 다음에는 색을 채워넣어보아요

60
00:02:58,757 --> 00:03:02,241
멋있어 보이나요?
제가보기엔 밝은 초록이 더 나을거 같아요

61
00:03:02,241 --> 00:03:04,475
바꾸어봅시다
훨씬 나아보이네요

62
00:03:04,965 --> 00:03:07,547
다음은 그의 얼굴이에요
얼굴에 초록색 외곽선을 원하지는 않으니

63
00:03:07,547 --> 00:03:10,189
<i>stroke</i>함수를 이용해서 바꾸어보겠어요

64
00:03:12,899 --> 00:03:17,802
어두운 갈색의 외곽선을 사용해보았어요

65
00:03:18,072 --> 00:03:19,987
그리고 <i>fill</i>함수를 이용해서
다른색으로 얼굴을 칠해볼게요

66
00:03:21,202 --> 00:03:24,777
이 색깔이 좋아보이나요?

67
00:03:25,217 --> 00:03:27,846
이 색이 얼굴의 색으로는 좋아보이네요

68
00:03:30,475 --> 00:03:33,104
다음의 두 줄은 두개의 원형 도형으로 손을 표시하는 것이에요

69
00:03:33,114 --> 00:03:35,641
이 손들은 얼굴과 동일한 색을 가지도록 하고싶다면

70
00:03:35,641 --> 00:03:38,489
따로 마커나 페인트통을 수정하거나 할 필요가 없어요

71
00:03:38,507 --> 00:03:40,837
위에서 쓴 <i>stroke</i>나 <i>fill</i>이 
그대로 적용되도록 조용히 놔두면 되요

72
00:03:40,837 --> 00:03:42,250
입부분으로 옮겨가보죠

73
00:03:42,460 --> 00:03:44,891
입은 단순히 하나의 선이에요

74
00:03:46,551 --> 00:03:50,592
그러므로 채울만한 공간이 없어서
<i>fill</i>함수를 사용할 수 없어요

75
00:03:50,672 --> 00:03:53,153
하지만 선의 색을 바꾸는 <i>stroke</i>를 사용하는것은 가능해요

76
00:03:54,063 --> 00:03:56,156
그럼 멋진 빨강색으로 입술을 칠해보죠

77
00:03:56,246 --> 00:03:57,814
다음은 안경의 차례네요

78
00:03:57,834 --> 00:04:00,005
다시한번 <i>stroke</i>를 사용해보죠

79
00:04:00,085 --> 00:04:01,748
안경테에는 어떤색이 어울릴까요?

80
00:04:01,838 --> 00:04:03,737
무난하게 검정색으로 합시다

81
00:04:05,816 --> 00:04:11,465
안경의 렌즈가 되는 사각형은
안경테와 같은 색이어야하므로

82
00:04:11,465 --> 00:04:14,796
<i>stroke</i>로 선의 색을 바꾸어주지 않아도 되지만
<i>fill</i>함수는 사용해야 할겁니다

83
00:04:17,126 --> 00:04:20,032
테와 어울리도록 검정색을 칠해봅시다

84
00:04:20,032 --> 00:04:22,487
그러고 나면 우리 친구가 드디어 색을 가지게 되었어요!