Nested For Loops (Video Version)

보석은 예쁘죠

보석 한개보다 좋은 건 여러개의 보석이죠

이제 우리는 loop을 사용해서
여러개의 보석을 만들줄 알죠

for loop을 사용해
한 줄에 12개의 보석을 만들어보죠

왼쪽에서 오른쪽으로요

이렇게요

for 안에 변수 i = 0; i는 12보다 작고; i++

이 줄을 복사해서 for문 안에다가 붙여넣어요

이렇게 하면 12개의 보석이
맨 윗줄 한 칸에 겹쳐서 나와요

근데 우리는 화면을 가로질러서 나오게하고 싶어요

그렇다는 건 x값이 바꿔야한다는거죠

지금은 36인데, 매번 값이
다르게 나오게하고 싶어요

i값을 이용해서 하면 됩니다

간단하게 i 곱하기 36
이렇게 하면

첫번째 값은 0이고, 다음은 36, 72....

이제 한 줄의 보석이 나오네요

인디아나존스나 알라딘 영화를 보면

보석을 발견할 때

보통 이렇게 한 줄의 보석만을 발견하지 않죠

보석 더미를 발견하죠

그럼 어떻게 하면 보석을 쭈욱

스크린 밑에까지 나오게 할 수 있을까요?

우선 이 for loop을 복사 붙여넣기 한 후

y를 매번 바꿔줍니다

60 그 다음에는 90

이제 보석 3줄이 생겼네요

하지만 이 방법이 좋지 않은게

매줄마다 복사 붙여넣기 한 후
값을 바꿔줘야되요

이렇게 반복적인 코드를 작성하면

"loop을 사용해야지" 라는 생각이 들지만

이미 loop을 쓰고 있어요

그렇다면 이런 반복적인
코드 작성의 해결책은 뭘까요?

Nested for loop (겹쳐진 for loop) 이라는 것이 있습니다
loop 안에 loop 입니다

바깥쪽 loop을 만든 후에

이건 스크린 밑으로
내려가는 걸 해주는 loop이고

안쪽 loop은 보석 한 줄을

왼쪽에서 오른쪽으로 나타나게 합니다

어떻게 하는지 보여드리죠

변수 i를 사용하고 있으니
다른 변수 j를 사용하죠

변수 j = 0; j는 13보다 작고; j++

이게 위에서 아래로 내려가는 것을
담당하는 저희의 바깥쪽 loop이 됩니다

기존에 사용했던 for loop을 안에다가 넣습니다

들여쓰기를 고치고, 기존의 것을 지웁니다

이렇게하면 한 줄에 똑같은 보석이 겹치게 나옵니다

그러니 y의 값이 변하게 해줘야겠죠

기존의 것을 그대로 가져왔기 때문에

y값이 항상 90입니다

매 행마다 y의 값이 바뀌게 하고 싶어요

x는 i값을 이용하니, y는 j를 이용하게 합니다

x에서 했던 방식대로 j 곱하기 30을 합니다

짜잔! 멋집니다.

다시 우리가 한 것을 살펴보죠

바깥쪽 loop은 j가 13이 될 때까지 실행하며

매번 안쪽 loop을 실행시킵니다

안쪽 loop은 i가 12이 될 때까지 실행하고

매번 i와 j를 이용하여
x와 y위치에 보석을 그립니다

따라서 i의 값이 j의 값보다 훨씬 더 자주 변하죠

더 잘 이해하기 위해 실제로 i 값과 j 값이 변하는 것을
시각적으로 보도록 합시다

이미지 출력 부분을 주석처리하고

색이 나오게 한 후

text 명령어를 이용해 j값이 보이게하죠

이 위치에 j가 나타나도록 입력합니다

이제 j가 0부터 12까지 나오는게 보이네요

이건 보석의 행의 위치와 같죠

이제 i의 값이 어떻게 변해 가는지를 보도록 합시다

다른 색깔이 나오게 한 다음

i를 입력해서

x 값이 화면의 가로로 나오게 x값이 변하게 해줍니다

y에도 똑같이 해주고요

i가 0부터 11까지 나오는게 보이네요

i가 더 자주 변하는 걸 알 수 있죠

그리고 이 줄의 코드가
윗줄의 코드보다 더 많이 실행됩니다

왜냐하면 이 줄은 안쪽 loop이
실행될때마다 실행되는데

윗 줄의 코드는 바깥loop이 실행될때만
실행되니까요

i와 j값을 출력해봤는데요

nested for loop을 더 잘 이해하셨기를 바랍니다

다시 보석 문제로 돌아가보죠

nested for loop에서 많은 걸 할 수 있는데요

이 세상에 있는 것들 중에서

2차원 무늬들은 체스보드나 퀼트

미국 국기의 별, 멋진 패턴, 벽지모양 등이 있는데

우선 이 코드를 이용해

이미지를 바꿔보도록 하죠

하트모양이 나오도록 해보죠

짠!