반복문 기초: for loop

1. 문법 구조

• for: 반복을 시작한다는 문법적인 약속

• ( ) : 어떤 규칙으로 반복할 지를 작성하는 곳. 함수의 파라미터 처럼 입력정보를 준다고 생각하자.

• { } : 어떤 일을 실행할 지 작성하는 곳. 함수의 중괄호 처럼.

for ( /* 파라미터, 인풋 정보, 어떤 규칙으로 반복할 것인지 */ ) {

    /* 어떤 것을 반복할 것인지 */

}

( ) 안에 쓰는 내용 3가지

• let i = 0 i 라는 변수의 시작값 (변수 이름은 마음대로)

• i = i + 50 변수를 얼만큼씩 증가 / 감소시킬 것인지: 증감

• i < 300 변수의 최대값. 변수가 300보다 커지면 반복을 멈춘다: 리밋

for(let i = 0; i < width; i = i + 50) { /* 생략 */ }

i = i + 50; // 변수 i 를 +50씩 업데이트.
시작    ↱ 간격 ↰                                끝
0-----50-----100-----150-----200-----250-----300

i = i + 100; i < 400  // 변수 i 를 +100씩 업데이트. 400이 최대.
시작          ↱    간격    ↰                        끝
0----------100----------200----------300----------400

비쥬얼라이저 2d.js : https://openprocessing.org/sketch/1829134

2. 변수를 반복문 안에서 활용하기.

결국 우리는 변수를 반복해서 업데이트 시키는 것.

for(let i = 0; i < width; i = i + 50) {
    push();
    translate(i, 0);  // i 변수를 가로 위치에 활용.
    ellipse(...);
    pop();
}

• 가로로 도형을 반복해서 그리는 반복문이 된다.

• 좀 더 직관적으로 가로 반복 (x 값 업데이트)이라는 것을 나타내기 위해 변수 이름을 바꿔도 된다.

3. 변수 이름과 응용 바꿔보기

• 위 코드와 아래 코드의 다른 점은 무엇인가?

for(let x = 0; x < width; x = x + 50) {
    push();
    translate(x, 0);
    ellipse(...);
    pop();
}

for(let y = 0; y < height; y = y + 50) {
    push();
    translate(0, y); 
    ellipse(...);
    pop();
}

• 변수의 최소값을 바꿔서 가로 혹은 세로로 캔버스를 꽉 채우자.

  • 캔버스의 왼쪽 x 값, 위 y 값은 0이 아닌 무엇인가?

4. 실습: 반복문의 변수를 도형 사이즈, 색깔 값에도 응용해보기.

for(let y = 0; y < height; y = y + 50) {
    push();
    translate(y, y);
    fill(255, y, y * 2) 
    ellipse(0, 0, y, y);
    pop();
}

5. 실습: 캔버스의 가로, 세로 모두 도형으로 채우고 싶다면?

• 반복문 안의 반복문도 가능하다~

• Nested Loops

/* 외부 반복문 */
for(let x = xStart; x < xStop; x = x + xGap) {
    /* 내부 반복문 */
    for(let y = yStart; y < yStop; y = y + yGap) {
        /* 도형 그리기 함수 */   
    }
}

반복문 연습 링크

• 직접 연습해보기: https://openprocessing.org/sketch/1829166

• 칸 아카데미

---