ArcPath[] paths;
PVector traveler;
int pIndex;

void setup() {
  size(400, 400);

  paths = new ArcPath[5];

  PVector pos0 = new PVector(width/2, height/2);
  color[] c0 = {
    color(255, 192, 0), color(255, 0, 0), color(255, 192, 0)
  };
  paths[0] = new ArcPath(pos0, 100.0, radians(300.0), radians(600.0), true, c0);

  PVector pos1 = new PVector(pos0.x+cos(radians(240.0))*120.0, pos0.y+sin(radians(240.0))*120.0);
  color[] c1 = {
    color(255, 192, 0), color(255, 255, 0)
  };
  paths[1] = new ArcPath(pos1, 20.0, radians(415.0), radians(235.0), false, c1);

  // pos2 would be the same as pos0
  color[] c2 = {
    color(255, 255, 0), color(255, 0, 0), color(192, 0, 192), color(255, 0, 0), color(255, 255, 0)
  };
  paths[2] = new ArcPath(pos0, 140.0, radians(600.0), radians(300.0), false, c2);

  PVector pos3 = new PVector(pos0.x+cos(radians(300.0))*160.0, pos0.y+sin(radians(300.0))*160.0);
  color[] c3 = {
    color(255, 255, 0), color(255, 255, 0)
  };
  paths[3] = new ArcPath(pos3, 20.0, radians(115.0), radians(300.0), true, c3);

  // pos4 would be the same as pos0
  color[] c4 = {
    color(255, 255, 0), color(255, 0, 0), color(0, 0, 255), color(255, 0, 0), color(255, 192, 0)
  };
  paths[4] = new ArcPath(pos0, 180.0, radians(300.0), radians(570.0), true, c4);

  traveler = new PVector();

  reset();
}

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

void mousePressed() {
  reset();
}

void reset() {
  background(255);
  noFill();
  stroke(0);
  for (int i = 0; i < paths.length; i++) {
    paths[i].t = 0.0;
    paths[i].display();
  }
  noStroke();
  pIndex = 0;
}

class ArcPath {
  PVector pos;
  float diameter, radius, t, thetaStart, thetaEnd;
  boolean clockwise;
  color[] c;

  ArcPath(PVector pos, float radius, float thetaStart, float thetaEnd, boolean clockwise, color[] c) {
    this.pos = pos.get();
    diameter = radius*2.0;
    this.radius = radius;
    this.thetaStart = thetaStart;
    this.thetaEnd = thetaEnd;
    this.clockwise = clockwise;
    this.c = c;
  }

  void display() {
    if (clockwise)
      arc(pos.x, pos.y, diameter, diameter, thetaStart, thetaEnd);
    else
      arc(pos.x, pos.y, diameter, diameter, thetaEnd, thetaStart);
  }

  color getColor() {
    int index = min(c.length-2, (int)((c.length-1)*t));
    float ct = min(1.0, (t-(1.0/(c.length-1))*index)*(c.length-1));
    return lerpColor(c[index], c[index+1], ct);
   
  }
}


이게 코드 전체입니다 진짜로 알려주시면 냉큼 받아먹기만 하지 않고 혼자서도 꼭꼭 공부하고 머리써보겠습니다 아까 전 글에도 대략적으로 설명 달아주신 분들 계시던데 감사드리고 코드가 조금 긴것 같아서 보기 힘드실까봐 아까는 부분만 올렸었습니다.


제가 가장 이해 안된 부분은 마지막 부분 그라데이션 부분입니다 color getColor 부분이요 ㅠㅠ

제가 뭘 제대로 배웠어야 질문을 자세히 드릴텐데 진심 하나도 뭘 몰라서 이렇게 두루뭉술하게 밖에 질문이 안되네요! 죄송합니다