Rendering Pipeline
Relevant source files
The following files were used as context for generating this wiki page:
The Rendering Pipeline in SwiftDitherKit is a specialized system designed to transform structured data into low-resolution, ordered-dithered charts for SwiftUI. It bridges high-level data definitions with low-level pixel manipulation, utilizing a multi-stage process that includes geometry calculation, rasterization, and animated view presentation.
The pipeline is optimized for performance by separating the intensive pixel-pushing tasks from the main thread. It leverages a caching mechanism and asynchronous rendering to ensure that the user interface remains responsive while complex dither patterns are generated and transitioned.
Sources: Sources/SwiftDitherKit/SwiftDitherKit.docc/SwiftDitherKit.md, Sources/SwiftDitherKit/DitherRasterView.swift:145-163
Pipeline Architecture and Data Flow
The rendering process follows a clear path from a SwiftUI View's state to a rendered CGImage displayed on screen. The pipeline is triggered whenever data changes or a new chart is initialized.
The diagram shows the transition from high-level view requests to low-level pixel painting and final composition.
Sources: Sources/SwiftDitherKit/DitherRasterView.swift:165-179, Sources/SwiftDitherKit/DitherRenderers.swift:34-45
Core Components
DitherRenderer
The DitherRenderer acts as the primary engine for converting chart-specific inputs into a DitherRaster. It provides specialized static methods for different chart families: cartesian, pie, and radar.
| Method | Input Type | Responsibility |
|---|---|---|
cartesian | DitherCartesianRenderInput | Handles Area, Line, and Bar chart rasterization. |
pie | DitherPieRenderInput | Calculates wedge geometry and paints circular dither patterns. |
radar | DitherRadarRenderInput | Renders overlapping polygons and axis markers. |
Sources: Sources/SwiftDitherKit/DitherRenderers.swift:34-150
DitherKernel
The DitherKernel contains the mathematical logic for the ordered dithering algorithm. It defines the 4x4 Bayer matrix used to determine pixel thresholds and handles the actual "painting" of vertical columns or pixels.
- Bayer Thresholding: Uses a normalized 4x4 matrix to decide if a pixel should be "lit" based on its density value.
- Backing Size: Scales the logical chart size down to a lower-resolution pixel grid (e.g., using a 2-point cell size).
- Paint Variants: Supports different texture variants including
gradient,dotted,hatched, andsolid.
Sources: Sources/SwiftDitherKit/DitherRaster.swift:65-140
Implementation Details
The Rasterization Process
The pipeline uses a custom DitherRaster struct to manage raw pixel data. Each raster represents a grid where every pixel is stored as 4 bytes (RGBA).
// Example of the alpha blending logic used during rasterization
mutating func blend(_ color: DitherRGB, alpha: Double, x: Int, y: Int) {
guard x >= 0, x < width, y >= 0, y < height else { return }
let sourceAlpha = min(1, max(0, alpha))
// ... logic to calculate output alpha and mix RGB components
bytes[offset + 3] = Self.byte(outputAlpha)
}
Sources: Sources/SwiftDitherKit/DitherRaster.swift:15-38
Animation and Motion
The pipeline incorporates a sophisticated motion system to handle entrances and data updates.
- Entrance: Uses
DitherRevealMaskwith styles like.leading,.angular, or.radial. - Updates: When data changes, the
DitherAnimatedRasterdecides between acrossfade,replace, orreplaybased on the change's nature (checksum, transition key, or replay token). - Reduce Motion: If the system "Reduce Motion" setting is active, movement-based transitions are replaced with simple opacity fades.
Sparkle Layer
Distinct from the static dithered image, the pipeline overlays a dynamic DitherSparkleOverlay. This is rendered using a Canvas and a TimelineView to create a twinkle effect.
- Generation: Sparkles are generated based on the chart geometry to ensure they appear within the "lit" areas of the chart.
- Motion: The
DitherSparkleMotionlogic calculates a sine-based twinkle for every sparkle based on its unique phase.
Sources: Sources/SwiftDitherKit/DitherRasterView.swift:233-289, Sources/SwiftDitherKit/DitherSparkles.swift:34-80
Technical Summary
The SwiftDitherKit Rendering Pipeline transforms data into low-fi aesthetics through a decoupled architecture. By separating geometry calculation, pixel thresholding via the Bayer matrix, and an asynchronous view layer, the system provides a performant way to render complex textures while supporting modern SwiftUI features like animations and accessibility.
Sources: Sources/SwiftDitherKit/DitherRaster.swift:1-10, Sources/SwiftDitherKit/DitherRenderers.swift:1-10