Modifying Arrays (Video Version)

배열을 생성하고 접근하는 방법에 대해 지금까지 배웠어요

배열의 좋은 점은 프로그램이 실행되는 동안

일반적인 변수처럼 동적으로 값을 변경할 수 있다는거에요

좋아요
무슨 말인지 직접 보여드릴게요

호퍼(캐릭터)가 풍선을 들고 있어요
귀엽네요

풍선 두개에 각각 x좌표값을 넣었어요

그리고나서 루프(반복문)를 통해 배열의 원소들을 모두 읽어요

xPosision 배열에 두 개의 값을 가지고 있는데
두 개의 풍선의 위치입니다

그 후 "x"위치에 30x40에 해당하는 크기의 동그라미(풍선)을 그려요

좋아요
이제 어떻게 작동하는지 볼거에요

풍선을 추가하고싶으면 배열에 숫자를 추가하기만 하면 돼요
300을 넣어 볼까요

아름다워요
호퍼는 풍선을 3개나 갖고 있어 기분좋아하네요

그런데 풍선을 새로 추가하기 위해 코딩을 할 줄 모르는
사용자에게 그 방법을 말해주려고 해요

사용자에게 프로그램을 제공하고
"원하는 위치에 클릭하면 풍선이 표시됩니다" 라고 말하고싶어요

굉장히 멋질거같아요

이제 어떻게 해야하죠?
프로그램이 시간 흐름에 따라 변해야겠죠?

사용자가 클릭할 때마다 풍선이 나타날거에요

시간에 따라 변할 수 있게 draw 함수를 사용할게요

전부 draw 함수 내부로 넣을게요. 좋아요

먼저 사용자가 마우스를 누르면 즉시 알아야해요

if (mouseIsPressed) 를 이용해서 가능하지요

그리고 마우스를 누르면 배열에 숫자를 추가시켜야해요

항목 두 개를 가지고 다시 해 볼게요

이제 배열에 숫자 하나를 추가 하려고 합니다
그렇게 하는 한 가지 방법을 보여 드릴게요

xPositions[2] = mouseX;로 하면 됩니다

좋습니다
작동하는 것을 보여드릴게요

클릭하면 풍선이 생겼어요. 짜잔!
어떻게 한거죠?

배열 xPositions 의 2 위치인데

배열은 0부터 세니까 세번째 원소라는 것을 알 수 있지요

그런데 배열의 세번째 위치에 원소가 없어요

xPositions[2]라는 것을 인식하고 나서 mouseX를 대입해요

xPositions[2] 위치에 아무것도 없었지만
이제 mouseX가 입력되었어요

이제 배열은 3개의 항목을 가진 길이를 갖고

for 루프는 쭈욱 진행해서 세번째 풍선 그리기가 끝나요

정말 멋져요
좀 더 클릭해서 어떻게 되는지를 보도록 합시다

클릭할 때마다 세번째 풍선이 그려지는 것을 볼 수 있어요

그 이유는 계속 2라는 위치에 오버라이딩(겹쳐쓰기) 하기 때문이에요

매번 mouseX로 값이 겹쳐지게 됩니다

그래서 풍선은 3개만 가질 수 있어요

0 위치에서 하나, 1 위치에서 하나,
계속 변하는 2 위치에서 하나, 맞죠?

멋져요
하지만 우리는 풍선을 계속 더 많이 만들고 싶은 겁니다

사용자가 클릭할 때마다 새로운 풍선이 생기도록요

배열의 인덱스를 계속 증가시킬 필요가 있다는 의미에요

매번 2 위치에만 저장하는게 아니라
2, 3, 4, 5, 6, 등의 위치에도 저장하고 싶어요

newInd = 2; 라는 카운터 변수를 가지고 할 수 있어요

2 대신에 newInd라고 적고 사용할 거에요

그리고 난 후 newInd++ 만 해주면 됩니다

매번 여기에 1을 증가하게 되면 2에서 시작하고 3, 4 가 됩니다

누를 때마다 더해질 거에요
직접 해보세요

짜잔! 풍선이 많아졌어요
풍선파티에요 와~

멋지지요?
하지만 풍선을 많이 만들려고

배열 인덱스를 많이 만드는 것은 최선의 방법은 아니에요

더 쉬운 방법이 있어요

이전에 했던것을 지우고 주석으로 남길게요

자 그리고 xPositions.push(mouseX);을 해봅시다

이것의 역할은 xPositions 배열에서 메서드를 호출하는 거에요

배열에 다음과 같이 명령하네요
"mouseX라는 새로운 값을 배열의 끝에 집어넣어"라고 말입니다

이제 그 명령이 호출될 때마다, 즉 사용자가 마우스 클릭을 할 때마다
mouseX를 배열의 끝에 집어넣을 것입니다

배열은 커지고 커지고 더 커질거에요
재시작하고 다시 해보세요

짜잔, 작동해요!
이전보다 짧은 코드로 작동하네요. 맞죠?

이렇게 배열에 무엇을 추가하고자 한다면
대부분 push를 사용해야합니다

그리고 꽤 깔끔한 편이에요
왜냐하면 이 후에 배열이 더 커지고 커져도 문제 없기 때문이죠

애니메이션이나 사용자가 일을 할 때
유용하게 사용될 거에요

지금까지 90%는 아마 배열을 기존 방식처럼 사용했겠지만

배열을 이용해서 더 많은 일을 할 수 있어요
질문이 있으면 토론방에서 질문하세요

그 전에 오늘 배운 기초내용을 숙지하세요