Circle 2D

Every frame, Circle 2D renders a fullscreen pass into its own offscreen Metal texture. The fragment shader evaluates a signed distance field (SDF) for the circle at every pixel: it measures the distance from the pixel to the ideal circle edge and converts that distance into coverage with a smoothstep. Because the shape is a mathematical function rather than geometry, edges are resolution-independent and antialiasing is a single smooth transition wide.

Coordinates follow the Grafit standard: origin (0,0) at the viewport center, with the shorter viewport edge mapping to [-1, +1]. X, Y, Radius, and Border Width are all in Grafit units, never pixels. Positive Rotation is clockwise, entered in degrees and converted to radians on the GPU.

The shape is built in this order:

1. Base SDF — a circle of Radius, stretched by Scale X / Scale Y (unequal values produce an ellipse) and rotated by Rotation.
2. Arc mask — if End Angle − Start Angle is less than 360°, an angular mask cuts the shape into an arc or pie slice. Angles start at 12 o'clock (0°) and increase clockwise, and the mask rotates together with the shape.
3. Fill — when Fill is on, the interior is covered with Fill Color.
4. Border — when Border is on, a stroke of Border Width is drawn on top of the fill, placed according to Border Mode. On partial arcs with Rounded Ends on, semicircular caps (radius = half the border width) are added at both arc endpoints of the border stroke.
5. Premultiply — the final color is premultiplied (rgb *= a), the mandatory format for Grafit generator textures.

Border Mode values:

Antialiasing uses the global AA multiplier (set in app settings); the node's Antialiasing toggle only switches it on or off for this shape. The shadow is not part of the SDF — it is a GPU post-process (the shape's geometry is extracted, blurred with a separable Gaussian, tinted with Shadow Color, offset, and composited underneath).

The Width and Height outputs report the shape's bounding size in Grafit units, not the texture size:

Width  = 2 × Radius × Scale X
Height = 2 × Radius × Scale Y

The Image output is the full-viewport offscreen texture. When Enable is false, the texture is cleared to transparent — downstream Canvas nodes show nothing, but connections stay intact.

Parameter interactions worth knowing: Radius sets the base size and Scale X/Scale Y multiply it, so animate Radius for uniform pulsing and the scales for squash-and-stretch. Border Width is independent of scale — a scaled ellipse keeps a constant-thickness stroke.

• Audio-reactive pulse — Audio FFT → Remap → Radius for a disc that beats with the music; add Audio Beat Detection → Enable for on-beat flashes.
• Progress ring / gauge — disable Fill, enable Border with Rounded Ends, keep Start Angle at 0 and drive End Angle (0–360) from Counter, Timer, or Remap for a circular progress indicator.
• Loading spinner — Time → Math (multiply by degrees per second) → Rotation on a short arc (e.g. Start Angle 0, End Angle 90) with Rounded Ends on.
• Pie chart — stack several Circle 2D nodes with adjacent Start Angle/End Angle ranges and different Fill Colors, each on its own Canvas layer.
• Soft glow dot — a filled circle with Shadow enabled, zero offset, and a large Shadow Blur reads as a halo; or run the Image output through Gaussian Blur and composite additively on a Canvas.
• Eye-follow marker — Mouse → X/Y for a cursor-tracking highlight ring over other layers.
• Circular mask — feed the Image output into a Canvas node's Mask input to cut any other generator into a disc or arc shape.

• Generators never draw directly to screen: connect Image to a Canvas node. Layer order and blend modes live on Canvas, not here.
• The Width/Height outputs are made to be wired into a Canvas or other consumer that needs the shape's footprint — they already include Scale X/Scale Y, but not the border or shadow overhang.
• Rounded Ends only rounds the border of a partial arc. If you want a rounded pie-slice fill, fake it with a thick border in the same color as the fill.
• Shadow Size is currently a no-op on this node — offset and blur work, expansion does not.
• Shadows cost four extra GPU passes (extract, horizontal blur, vertical blur, composite). Disable Shadow when it is not visible.
• Antialiasing quality is a global app setting; the per-node toggle cannot make one circle smoother than the rest of the scene.
• Related nodes: Rectangle (same SDF feature set for boxes), Gradient (colored fills), Mask Grow / Mask Outline (post-process the circle's silhouette).