5. 반복

EXERCISE 01A DISCOVERY OF PATTERN

 

 

이전 편에서 만든 그림이에요.

 

장황한 코드로부터 규칙을 발견하고 이를 반복문으로 구현해볼 거예요.

 

 

1. 규칙 찾기

먼저 점들의 위치값에서 규칙을 찾아봅시다

 

  point(width/2   +20  ,height/2   +20);   point(width/2   -20  ,height/2   +20);   point(width/2   -20  ,height/2   -20);  point(width/2   +20  ,height/2   -20);

  point(width/2   +40  ,height/2   +40);   point(width/2   -40  ,height/2   +40);   point(width/2   -40  ,height/2   -40);  point(width/2   +40  ,height/2   -40);

  point(width/2   +60  ,height/2   +60);   point(width/2   -60  ,height/2   +60);   point(width/2   -60  ,height/2   -60);  point(width/2   +60  ,height/2   -60);

  point(width/2   +80  ,height/2   +80);   point(width/2   -80  ,height/2   +80);   point(width/2   -80  ,height/2   -80);  point(width/2   +80  ,height/2   -80);

  point(width/2  +100  ,height/2  +100);   point(width/2   -100 ,height/2  +100);   point(width/2  -100  ,height/2  -100);  point(width/2  +100  ,height/2  -100);

  point(width/2  +120  ,height/2  +120);   point(width/2   -120 ,height/2  +120);   point(width/2  -120  ,height/2  -120);  point(width/2  +120  ,height/2  -120);

  point(width/2  +140  ,height/2  +140);   point(width/2   -140 ,height/2  +140);   point(width/2  -140  ,height/2  -140);  point(width/2  +140  ,height/2  -140);

  point(width/2  +160  ,height/2  +160);   point(width/2   -160 ,height/2  +160);   point(width/2  -160  ,height/2  -160);  point(width/2  +160  ,height/2  -160);

  point(width/2  +180  ,height/2  +180);   point(width/2   -180 ,height/2  +180);   point(width/2  -180  ,height/2  -180);  point(width/2  +180  ,height/2  -180);

  point(width/2  +200  ,height/2  +200);   point(width/2   -200 ,height/2  +200);   point(width/2  -200  ,height/2  -200);  point(width/2  +200  ,height/2  -200);

  point(width/2  +220  ,height/2  +220);   point(width/2   -220 ,height/2  +220);   point(width/2  -220  ,height/2  -220);  point(width/2  +220  ,height/2  -220);

  point(width/2  +240  ,height/2  +240);   point(width/2   -240 ,height/2  +240);   point(width/2  -240  ,height/2  -240);  point(width/2  +240  ,height/2  -240);

  point(width/2  +260  ,height/2  +260);   point(width/2   -260 ,height/2  +260);   point(width/2  -260  ,height/2  -260);  point(width/2  +260  ,height/2  -260);

  point(width/2  +280  ,height/2  +280);   point(width/2   -280 ,height/2  +280);   point(width/2  -280  ,height/2  -280);  point(width/2  +280  ,height/2  -280);

 

 

이 점들의 규칙은 무엇일까요?

width/2, height/2, 20,40,60,80,/// 280까지 증가하는 숫자들

이것들을 줄여줄 수 있을 것 같다.

뭐 이런 정도의 생각을 눈으로 확인하는 거죠.

 

 

width/2는 x값의 정중앙을 의미해요. 그래서 그냥 x로 치환할 거예요.

height/2는 y값의 정중앙을 의미해요. 마찬가지로 y로 치환하고요.

그럼 저 긴 문장들을 확 줄여주겠죠. 

 

그다음 단락이 반복되는데, 이건 숫자들만 증가하는 특징이 있어요.

그것도 매우 규칙적인 20 간격으로 말이죠. 그래서 아주 쉬워졌어요. 

 

변수 i라는 아이를 한 줄씩 진행될 때마다 20씩 증가시켜주는 거죠.

음수와 양수는 그대로 형식을 유지시켜줘야겠죠.

먼저, 규칙을 명령문으로 만들어줄 for라는 반복문 구조를 알아야 하겠어요.

 

 

 

---

 

 

 

2. 반복문 구조

반복문의 구조이자 실행 순서예요.

 

 

for ( 초기값; 조건; 업데이트; ){

    명령문...

}

 

 

 

1. 초기값이 실행돼요.

2. 조건이 참 거짓인지 판단해요.

3. 참이라면 업데이트를 하고, 4.로 이동해요. / 거짓이라면 6.으로 이동해요.

4. 블록 내 명령문을 실행해요.

5. 업데이트를 실행하고 2번으로 돌아가 조건을 체크하고 그다음 순서... 

6. 반복을 종료해요.

 

 

 

즉 조건이 맞을 때까지 명령문을 반복하는데 한 번 할 때마다 변수를 업데이트시켜준다는 의미죠.

 

 

 

---

 

 

 

 

 

3. 반복문으로 규칙 만들기

 

 1) 점 그리기

위의 방법대로 규칙을 반복문으로 바꿔봐요.

 

void draw(){

  float x = width/2;

  float y = height/2;

  for (int i = 0; i < y; i += 20) {      

    stroke(255);   

    point(x +i  , y +i);   point(x -i  , y +i);   point(x -i  , y -i);  point(x +i  , y -i);

  }

 

 

x와 y와 i 만으로 저 몇 줄을 한 줄로 줄일 수 있는 거죠.

먼저 x와 y라는 중앙값들을 정해줬고,

i라는 변수를 선언하고 초기값을 0으로 시작하게 했죠.

다음 i는 y(height/2 ) 보다 작다 이므로,  300보다 작은 수라고 볼 수 있죠.

업데이트에 해당하는 i+=20이라는 말은 한 번 돌아올 때마다 i값이 20씩 더해지며 업데이트된다.

라는 의미인 것이죠.

즉, i라는 정수의 변수는 0에서 시작해서 20씩 증가하면서 점을 그려주다가, 300이 되면 반복을 종료하고 그리기를 멈춘다.

이런 뜻이죠.

 

이전과 똑같은데 명령어는 한 줄로 줄어들었어요. 물론 for라는 반복문을 사용했기에 가능했지요. 

 

 

 

 

 2) 선 그리기

사각형 그리는 것도 똑같은 방식으로 응용해서 그려봐요.

 

for (int i = 20; i < y*2; i += 40) {      

    stroke(100);   

    line(x, y   +i , x   -i , y);    line(x   -i , y , x  , y  -i);  line( x  , y  -i , x  +i , y );  line( x  +i , y , x , y  +i);  

  }

 

먼저 선의 색을 좀 옅게 바꾸고요. 완전 흰색으로 하면 점들의 밝기에 비해 너무 강하게 나타날 거예요.

그래서 stroke(100);으로 옅은 회색 정도로 바꿨어요.

시작되는 값을 20으로 했고, 40씩 그 간격이 발생하도록 했고요. y값은 2배로 해서, 화면이 꽉 차게 그려지도록 수정해서 완성해요.

 

 

 

 

 

 

 

 

4. 완성된 코드를 보며 복습해요.

void setup(){

  size(600, 600);

  background(0);

  }  

void draw(){

  float x = width/2;

  float y = height/2;

  for (int i = 0; i < y; i += 20) {      

    stroke(255);   

    point(x +i  , y +i);   point(x -i  , y +i);   point(x -i  , y -i);  point(x +i  , y -i);

  }  

  for (int i = 20; i < y*2; i += 40) {      

    stroke(100);   

    line(x, y   +i , x   -i , y);    line(x   -i , y , x  , y  -i);  line( x  , y  -i , x  +i , y );  line( x  +i , y , x , y  +i);  

  }

}

 

 

 

 

 

 

 

From.h