[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:04.48,Default,,0000,0000,0000,,배열을 생성하고 접근하는 방법에 대해 지금까지 배웠어요
Dialogue: 0,0:00:04.48,0:00:08.52,Default,,0000,0000,0000,,배열의 좋은 점은 프로그램이 실행되는 동안
Dialogue: 0,0:00:08.52,0:00:12.86,Default,,0000,0000,0000,,일반적인 변수처럼 동적으로 값을 변경할 수 있다는거에요
Dialogue: 0,0:00:12.86,0:00:15.80,Default,,0000,0000,0000,,좋아요\N무슨 말인지 직접 보여드릴게요
Dialogue: 0,0:00:15.80,0:00:21.17,Default,,0000,0000,0000,,호퍼(캐릭터)가 풍선을 들고 있어요\N귀엽네요
Dialogue: 0,0:00:21.17,0:00:29.40,Default,,0000,0000,0000,,풍선 두개에 각각 x좌표값을 넣었어요
Dialogue: 0,0:00:29.40,0:00:35.47,Default,,0000,0000,0000,,그리고나서 루프(반복문)를 통해 배열의 원소들을 모두 읽어요
Dialogue: 0,0:00:35.47,0:00:40.26,Default,,0000,0000,0000,,xPosision 배열에 두 개의 값을 가지고 있는데 \N두 개의 풍선의 위치입니다
Dialogue: 0,0:00:40.26,0:00:47.64,Default,,0000,0000,0000,,그 후 "x"위치에 30x40에 해당하는 크기의 동그라미(풍선)을 그려요
Dialogue: 0,0:00:47.64,0:00:51.03,Default,,0000,0000,0000,,좋아요\N이제 어떻게 작동하는지 볼거에요
Dialogue: 0,0:00:51.03,0:00:58.24,Default,,0000,0000,0000,,풍선을 추가하고싶으면 배열에 숫자를 추가하기만 하면 돼요\N300을 넣어 볼까요
Dialogue: 0,0:00:58.24,0:01:02.100,Default,,0000,0000,0000,,아름다워요\N호퍼는 풍선을 3개나 갖고 있어 기분좋아하네요
Dialogue: 0,0:01:02.100,0:01:10.78,Default,,0000,0000,0000,,그런데 풍선을 새로 추가하기 위해 코딩을 할 줄 모르는 \N사용자에게 그 방법을 말해주려고 해요
Dialogue: 0,0:01:10.78,0:01:17.80,Default,,0000,0000,0000,,사용자에게 프로그램을 제공하고 \N"원하는 위치에 클릭하면 풍선이 표시됩니다" 라고 말하고싶어요
Dialogue: 0,0:01:17.80,0:01:20.69,Default,,0000,0000,0000,,굉장히 멋질거같아요
Dialogue: 0,0:01:20.69,0:01:26.25,Default,,0000,0000,0000,,이제 어떻게 해야하죠?\N프로그램이 시간 흐름에 따라 변해야겠죠?
Dialogue: 0,0:01:26.25,0:01:30.28,Default,,0000,0000,0000,,사용자가 클릭할 때마다 풍선이 나타날거에요
Dialogue: 0,0:01:30.28,0:01:37.64,Default,,0000,0000,0000,,시간에 따라 변할 수 있게 draw 함수를 사용할게요
Dialogue: 0,0:01:37.64,0:01:43.18,Default,,0000,0000,0000,,전부 draw 함수 내부로 넣을게요. 좋아요
Dialogue: 0,0:01:43.18,0:01:48.40,Default,,0000,0000,0000,,먼저 사용자가 마우스를 누르면 즉시 알아야해요
Dialogue: 0,0:01:48.40,0:01:55.34,Default,,0000,0000,0000,,if (mouseIsPressed) 를 이용해서 가능하지요
Dialogue: 0,0:01:55.34,0:02:01.18,Default,,0000,0000,0000,,그리고 마우스를 누르면 배열에 숫자를 추가시켜야해요
Dialogue: 0,0:02:01.18,0:02:04.23,Default,,0000,0000,0000,,항목 두 개를 가지고 다시 해 볼게요
Dialogue: 0,0:02:04.23,0:02:10.46,Default,,0000,0000,0000,,이제 배열에 숫자 하나를 추가 하려고 합니다\N그렇게 하는 한 가지 방법을 보여 드릴게요
Dialogue: 0,0:02:10.46,0:02:18.51,Default,,0000,0000,0000,,xPositions[2] = mouseX;로 하면 됩니다
Dialogue: 0,0:02:18.51,0:02:21.68,Default,,0000,0000,0000,,좋습니다\N작동하는 것을 보여드릴게요
Dialogue: 0,0:02:21.68,0:02:26.64,Default,,0000,0000,0000,,클릭하면 풍선이 생겼어요. 짜잔!\N어떻게 한거죠?
Dialogue: 0,0:02:26.64,0:02:33.64,Default,,0000,0000,0000,,배열 xPositions 의 2 위치인데\N
Dialogue: 0,0:02:33.64,0:02:38.26,Default,,0000,0000,0000,,배열은 0부터 세니까 세번째 원소라는 것을 알 수 있지요
Dialogue: 0,0:02:38.26,0:02:41.74,Default,,0000,0000,0000,,그런데 배열의 세번째 위치에 원소가 없어요
Dialogue: 0,0:02:41.74,0:02:45.90,Default,,0000,0000,0000,,xPositions[2]라는 것을 인식하고 나서 mouseX를 대입해요
Dialogue: 0,0:02:45.90,0:02:51.36,Default,,0000,0000,0000,,xPositions[2] 위치에 아무것도 없었지만\N이제 mouseX가 입력되었어요
Dialogue: 0,0:02:51.36,0:02:54.50,Default,,0000,0000,0000,,이제 배열은 3개의 항목을 가진 길이를 갖고
Dialogue: 0,0:02:54.50,0:02:59.80,Default,,0000,0000,0000,,for 루프는 쭈욱 진행해서 세번째 풍선 그리기가 끝나요
Dialogue: 0,0:02:59.80,0:03:04.03,Default,,0000,0000,0000,,정말 멋져요\N좀 더 클릭해서 어떻게 되는지를 보도록 합시다
Dialogue: 0,0:03:04.03,0:03:10.69,Default,,0000,0000,0000,,클릭할 때마다 세번째 풍선이 그려지는 것을 볼 수 있어요
Dialogue: 0,0:03:10.69,0:03:18.94,Default,,0000,0000,0000,,그 이유는 계속 2라는 위치에 오버라이딩(겹쳐쓰기) 하기 때문이에요
Dialogue: 0,0:03:18.94,0:03:22.90,Default,,0000,0000,0000,,매번 mouseX로 값이 겹쳐지게 됩니다
Dialogue: 0,0:03:22.90,0:03:25.96,Default,,0000,0000,0000,,그래서 풍선은 3개만 가질 수 있어요
Dialogue: 0,0:03:25.96,0:03:34.46,Default,,0000,0000,0000,,0 위치에서 하나, 1 위치에서 하나, \N계속 변하는 2 위치에서 하나, 맞죠?
Dialogue: 0,0:03:34.46,0:03:40.24,Default,,0000,0000,0000,,멋져요\N하지만 우리는 풍선을 계속 더 많이 만들고 싶은 겁니다
Dialogue: 0,0:03:40.24,0:03:43.52,Default,,0000,0000,0000,,사용자가 클릭할 때마다 새로운 풍선이 생기도록요
Dialogue: 0,0:03:43.52,0:03:50.85,Default,,0000,0000,0000,,배열의 인덱스를 계속 증가시킬 필요가 있다는 의미에요
Dialogue: 0,0:03:50.85,0:03:56.11,Default,,0000,0000,0000,,매번 2 위치에만 저장하는게 아니라 \N2, 3, 4, 5, 6, 등의 위치에도 저장하고 싶어요
Dialogue: 0,0:03:56.11,0:04:01.02,Default,,0000,0000,0000,,newInd = 2; 라는 카운터 변수를 가지고 할 수 있어요
Dialogue: 0,0:04:01.02,0:04:05.52,Default,,0000,0000,0000,,2 대신에 newInd라고 적고 사용할 거에요
Dialogue: 0,0:04:05.52,0:04:09.76,Default,,0000,0000,0000,,그리고 난 후 newInd++ 만 해주면 됩니다
Dialogue: 0,0:04:09.76,0:04:16.23,Default,,0000,0000,0000,,매번 여기에 1을 증가하게 되면 2에서 시작하고 3, 4 가 됩니다
Dialogue: 0,0:04:16.23,0:04:18.47,Default,,0000,0000,0000,,누를 때마다 더해질 거에요\N직접 해보세요
Dialogue: 0,0:04:18.47,0:04:22.01,Default,,0000,0000,0000,,짜잔! 풍선이 많아졌어요\N풍선파티에요 와~
Dialogue: 0,0:04:22.01,0:04:26.35,Default,,0000,0000,0000,,멋지지요?\N하지만 풍선을 많이 만들려고
Dialogue: 0,0:04:26.35,0:04:31.94,Default,,0000,0000,0000,,배열 인덱스를 많이 만드는 것은 최선의 방법은 아니에요
Dialogue: 0,0:04:31.94,0:04:35.02,Default,,0000,0000,0000,,더 쉬운 방법이 있어요
Dialogue: 0,0:04:35.02,0:04:42.77,Default,,0000,0000,0000,,이전에 했던것을 지우고 주석으로 남길게요
Dialogue: 0,0:04:42.77,0:04:50.100,Default,,0000,0000,0000,,자 그리고 xPositions.push(mouseX);을 해봅시다
Dialogue: 0,0:04:50.100,0:04:56.57,Default,,0000,0000,0000,,이것의 역할은 xPositions 배열에서 메서드를 호출하는 거에요
Dialogue: 0,0:04:56.57,0:05:05.23,Default,,0000,0000,0000,,배열에 다음과 같이 명령하네요\N"mouseX라는 새로운 값을 배열의 끝에 집어넣어"라고 말입니다
Dialogue: 0,0:05:05.23,0:05:12.47,Default,,0000,0000,0000,,이제 그 명령이 호출될 때마다, 즉 사용자가 마우스 클릭을 할 때마다\NmouseX를 배열의 끝에 집어넣을 것입니다
Dialogue: 0,0:05:12.47,0:05:16.77,Default,,0000,0000,0000,,배열은 커지고 커지고 더 커질거에요\N재시작하고 다시 해보세요
Dialogue: 0,0:05:16.77,0:05:22.68,Default,,0000,0000,0000,,짜잔, 작동해요!\N이전보다 짧은 코드로 작동하네요. 맞죠?
Dialogue: 0,0:05:22.68,0:05:27.63,Default,,0000,0000,0000,,이렇게 배열에 무엇을 추가하고자 한다면 \N대부분 push를 사용해야합니다
Dialogue: 0,0:05:27.63,0:05:31.76,Default,,0000,0000,0000,,그리고 꽤 깔끔한 편이에요\N왜냐하면 이 후에 배열이 더 커지고 커져도 문제 없기 때문이죠
Dialogue: 0,0:05:31.76,0:05:36.02,Default,,0000,0000,0000,,애니메이션이나 사용자가 일을 할 때 \N유용하게 사용될 거에요
Dialogue: 0,0:05:36.02,0:05:41.30,Default,,0000,0000,0000,,지금까지 90%는 아마 배열을 기존 방식처럼 사용했겠지만
Dialogue: 0,0:05:41.30,0:05:47.02,Default,,0000,0000,0000,,배열을 이용해서 더 많은 일을 할 수 있어요\N질문이 있으면 토론방에서 질문하세요
Dialogue: 0,0:05:47.02,0:05:50.78,Default,,0000,0000,0000,,그 전에 오늘 배운 기초내용을 숙지하세요