2018년 9월 디자인과 코딩을 함께 다루는 유튜브 채널을 열었습니다. "타입과 미디어" 사이트는 당분간 유지할 계획이지만, 새로운 정보는 유튜브 비디오를 통해서 소개하겠습니다. 많은 관심 부탁드립니다! — 정대인

반복문

세부 목차

for 반복문

반복문을 사용해서 반복적인 작업을 단순화할 수 있습니다. 예를 들어, 수직선을 10픽셀 간격으로 계속해서 그리는 스케치를 만든다고 합시다.

line(0, 0, 0, height);
line(10, 0, 10, height);
line(20, 0, 20, height);
line(30, 0, 30, height);
line(40, 0, 40, height);
line(50, 0, 50, height);
// keep repeating...

위의 코드처럼, 우리는 일일히 line() 함수를 호출해야 합니다. 만약 간격을 10픽셀에서 20픽셀로 바꿔야핟나면 어떡할까요? 그 많은 코드를 일일히 수정해줘야 합니다. for 반복문을 사용해서 똑같은 결과를 만들어봅시다.

size(600, 200);
background(255);

for (int i = 0; i < width; i += 10) {
  line(i, 0, i, height);
}
Your browser does not support canvas.

위의 예제처럼 코드가 훨씬 짧아졌고, 이후 수정도 용이합니다. 규칙적인 작업을 반복해서 수행해야 할 때 반복문을 효과적으로 사용할 수 있습니다. 반복문은 아래와 같은 구조로 이루어져있습니다.

for (init; test; update) {
  // do something
}

프로세싱이 for 구문을 만나게 되면, 먼저 init에 해당하는 변수를 만들고, 초기화합니다. 위의 수직선을 그리는 예제에서는 int i = 0;이 되겠습니다. 이 i 변수는 for 반복문이 실행 중에만 존재하는 지역변수(local variable)입니다. for의 실행이 종료되고 스케치가 다음 줄로 넘어가면, 변수는 사라집니다.

두번째, 생성된 i변수를 test합니다. i < width;가 이에 해당합니다. 그 테스트의 값이 true인 경우에만 for 구문 내의 내용이 실행됩니다.

현재, i의 값은 0이고 width600므로, i < widthtrue입니다. 따라서 line(i, 0, i, height);는 실행됩니다.

마지막으로 i변수의 값은 i += 10, 즉, 10으로 업데이트됩니다. 그리고 다시 i < width 테스트로 돌아간 후, 테스트가 false가 될 때까지 계속해서 반복 실행됩니다.

아래는 반복문을 사용한 예제입니다.

PFont font;
String s ="반짝";

size(600, 200);

font = createFont("SansSerif", 120);
textFont(font);
textAlign(LEFT, CENTER);

noStroke();

background(255);

color c = color(250, 50, 200);
for (int i = 0; i < 20; i++) {
  fill(c, 255 - i*10);
  text(s, 100+i, height/2-i);
}
Your browser does not support canvas.

while 반복문

while 반복문의 경우, while() 소괄호 안의 내용이 true로 평가되는 경우 반복문의 내용이 계속해서 실행됩니다. 소괄호 안의 표현은 언젠가는 false가 되어야 합니다. 그렇지 않으면, 무한루프에 빠져서 스케치가 멈춰버릴 수 있습니다.

PFont font;

size(600, 200);

font = createFont("SansSerif", 100);
textFont(font);
textAlign(CENTER, CENTER);

background(255);

int i = 0;
while (i < 25) {
  fill(200, i*10, i*10);
  textSize(60 + i*2);
  text("타입과 미디어", width/2, height/2 - i);
  i++;
}
Your browser does not support canvas.