void draw() {   ArcPath ref = paths[pIndex];   float theta = ref.thetaStart+(ref.thetaEnd-ref.thetaStart)*ref.t;   traveler.x = ref.pos.x+cos(theta)*ref.radius;   traveler.y = ref.pos.y+sin(theta)*ref.radius;   // ref.t += 1.0/ref.radius makes the traversing speed constant   if (ref.t < 1.0 && pIndex < paths.length)     ref.t += 1.0/ref.radius;   if (ref.t >= 1.0 && pIndex < paths.length-1)     pIndex++;   if (ref.t < 1.0 && pIndex < paths.length) {     fill(ref.getColor());     ellipse(traveler.x, traveler.y, 20, 20);   } }
내가 설명한 대로 draw 함수는 매 프레임마다 불리는 게 맞는데
nyangduck이가 추측한 것과 다르게 프레임마다 새 화면으로 초기화되는 게 아니라
별도로 지워주지 않는 한 기존에 그렸던 건 평생 유지되는 모양이다.

pIndex는 0부터 시작해서 paths.length - 1(활꼴의 개수 - 1)까지 순차적으로 증가해.
reset 함수에 의해 초기화되어서 처음엔 0 값이지.

reset 함수는 모든 활꼴의 t(theta 진행 비율) 값도 0으로 초기화하는데,
draw 함수가 불릴 떄마다 현재 그릴 활꼴 paths[pIndex] 의 t  값이 증가해.
아래는 그 코드야.
  if (ref.t < 1.0 && pIndex < paths.length)     ref.t += 1.0/ref.radius;
t는 내가 theta 진행 비율이라고 했는데, 구체적으로 표현하면
0.0이면 시작각이고, 1.0이면 끝각까지 모두 그린 상태를 나타내기 위한 값이야.

이 값을 1.0/반지름 만큼 매 프레임마다 더해.
다시 말하면 반지름 길이에 해당하는 프레임이 지나면 하나의 활꼴이 다 그려진다는 의미이고,
그리는 데 걸리는 시간은 반지름에 비례한다는 거지.

t가 만일 더해서 1.0 이상이 되면, 즉 하나의 활꼴을 다 그리면
다음 활꼴로 넘어가기 위해 pIndex를 1 더하는데 그게 아래 코드야.

  if (ref.t >= 1.0 && pIndex < paths.length-1)     pIndex++;

그 다음 코드는 t 값에 따른 현재 활꼴 상의 위치에 20x20 짜리 원을 그리는 거야.
색은 ref.getColor()에 의해 구하는데, ref.getColor()는 t 값 단계에 대한 그라데이션 부분 색상을 구하는 함수야.

그 코드는 다음 글에 자세히 설명할게.