5. 반복

Processing

5. 반복

From.h 2024. 8. 6. 14:36

728x90

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);

}