tri: Triangular Shape Renderer

Distance Field-Based Triangular Geometry with Dual Rendering Modes

The tri function renders precise triangular shapes using signed distance field techniques. It provides both filled and stroked rendering modes for equilateral triangles with perfect symmetry.

Mathematical Foundation

Triangular distance field uses vertex-based coordinate analysis: $SDF_{tri}(p) = \max\{|p \cdot n_i| - h_i\}$ where $n_i$ are the three edge normal vectors and $h_i$ are the corresponding edge distances.

Function Variants

Function	Parameters	Rendering Mode	Mathematical Expression
triFill(st, size)	position, radius	Filled triangle	$fill(SDF_{tri}(st), size)$
triStroke(st, size, width)	position, radius, thickness	Outlined triangle	$stroke(SDF_{tri}(st), size, width)$

Geometric Properties

The triangle exhibits perfect three-fold rotational symmetry:

• Orientation: Point-up configuration (apex at top)
• Circumradius: Size parameter controls inscribed circle radius
• Edge alignment: Symmetric positioning around coordinate origin
• Aspect ratio: Fixed 1:1 proportional scaling

Distance Field Characteristics

Triangle SDF maintains consistent behavior:

• Interior: Negative distance values (inside shape)
• Boundary: Zero distance (exactly on edge)
• Exterior: Positive distance values (outside shape)

Live Editor

const fragment = () => {
      const filled = triFill(uv.mul(4).fract(), 0.8)
      const outlined = triStroke(uv, 0.2, 0.02)
      const combined = filled.add(outlined)
      return vec4(vec3(combined), 1)
}