Repository: motion-canvas/motion-canvas
File: packages/2d/src/curves/CircleSegment.ts (TypeScript)

Code before:
    const endAngle = this.to.radians - (1 - to) * this.angle * counterFactor;

    if (Math.abs(this.angle) > 0.0001) {
      context.arc(
        this.center.x,
        this.center.y,
        this.radius,
        startAngle,
        endAngle,
        this.counter,
      );
    }

    const startTangent = Vector2.fromRadians(startAngle);
    const endTangent = Vector2.fromRadians(endAngle);

    return [
      {
        position: this.center.add(startTangent.scale(this.radius)),
        tangent: this.counter ? startTangent : startTangent.flipped,
        normal: this.counter ? startTangent : startTangent.flipped,
      },
      {
        position: this.center.add(endTangent.scale(this.radius)),
        tangent: this.counter ? endTangent.flipped : endTangent,
        normal: this.counter ? endTangent.flipped : endTangent,
      },
    ];
  }

  public getPoint(distance: number): CurvePoint {
    const counterFactor = this.counter ? -1 : 1;
    const angle = this.from.radians + distance * this.angle * counterFactor;

    const tangent = Vector2.fromRadians(angle);

    return {
      position: this.center.add(tangent.scale(this.radius)),
      tangent: this.counter ? tangent : tangent.flipped,
      normal: this.counter ? tangent : tangent.flipped,
    };
  }
}


Review comment (suggestion):
I think we should also rename the variables to better reflect what they are,
```suggestion
        position: this.center.add(startTangent.scale(this.radius)),
        tangent: this.counter ? startNormal : startNormal.flipped,
        normal: this.counter ? startNormal : startNormal.flipped,
      },
      {
        position: this.center.add(endTangent.scale(this.radius)),
        tangent: this.counter ? endNormal.flipped : endNormal,
        normal: this.counter ? endNormal.flipped : endNormal,
```

Code after:
    const endAngle = this.to.radians - (1 - to) * this.angle * counterFactor;

    if (Math.abs(this.angle) > 0.0001) {
      context.arc(
        this.center.x,
        this.center.y,
        this.radius,
        startAngle,
        endAngle,
        this.counter,
      );
    }

    const startNormal = Vector2.fromRadians(startAngle);
    const endNormal = Vector2.fromRadians(endAngle);

    return [
      {
        position: this.center.add(startNormal.scale(this.radius)),
        tangent: this.counter ? startNormal : startNormal.flipped,
        normal: this.counter ? startNormal : startNormal.flipped,
      },
      {
        position: this.center.add(endNormal.scale(this.radius)),
        tangent: this.counter ? endNormal.flipped : endNormal,
        normal: this.counter ? endNormal.flipped : endNormal,
      },
    ];
  }

  public getPoint(distance: number): CurvePoint {
    const counterFactor = this.counter ? -1 : 1;
    const angle = this.from.radians + distance * this.angle * counterFactor;

    const normal = Vector2.fromRadians(angle);

    return {
      position: this.center.add(normal.scale(this.radius)),
      tangent: this.counter ? normal : normal.flipped,
      normal: this.counter ? normal : normal.flipped,
    };
  }
}