원을 하나만 그리지 않고 캔버스 전체에 바둑판 모양으로 채우고 싶다고 해 봅시다.
원의 크기를 줄이고 원의 중심이 서로 50px씩 떨어지게 하면 캔버스에 64개의 원을 그릴 수 있습니다.
물론, 앞에서 만든 코드를 63번 복사해서 붙여넣고, 일일이 좌표를 수정해서 바둑판 모양으로 채워도 됩니다.
하지만 너무 지겹겠지요?
다행히 컴퓨터는 이런 반복적인 작업에 최적화되어 있습니다.
원 64개를 동일한 간격으로 그리려면 어떻게 해야 하는지 살펴봅시다.
원 하나를 그리는 코드를 다음과 같이 수정하십시오.

$(document).ready(function () {
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));

    var c;
    for (var x=25; x<400; x+=50) {
        for (var y=25; y<400; y+=50) {
            c = Shape.Circle(x, y, 20);
            c.fillColor = 'green';
        }
    }

    paper.view.draw();
})

브라우저를 새로고침하면 녹색 원 64개가 나타납니다.

프로그래밍 경험이 없다면 앞의 코드가 좀 어렵게 느껴질 수도 있겠지만,
128줄을 손으로 작성하는 것보다는 훨씬 낫다는 건 이해할 수 있을 겁니다.

여기서 사용한 것은 for 루프입니다.
for 루프는 4장에서 자세히 배울 흐름 제어 문법의 일부입니다.
for 루프를 사용하려면 초기값(25), 제한 조건(400 미만), 증가분(50)이 필요합니다.
x축과 y축에서 각각 반복해야 하므로 루프를 두 번 썼습니다.

NOTE_ 이 예제는 여러 가지 방법으로 만들 수 있습니다.
여기서 사용한 방법은 x, y 좌표를 중요하게 취급했습니다.
원이 어디서 시작하는지, 원 사이의 간격은 얼마가 되어야 하는지 명시적으로 지정했습니다.
다른 방법을 쓸 수도 있습니다.
예를 들어 좌표와 상관없이 원의 숫자(64)만 중요하다고 판단한다면, 프로그램에서 원을 캔버스 어디에 배치할지 정하게 만들 수도 있습니다.
여기서 좌표를 지정하는 방법을 쓴 이유는 만약 루프를 사용하지 않고 코드를 63번 복사해서 붙여넣었다면 위와 비슷하게 원 사이의 간격을 지정했을 것으로 생각하기 때문입니다.