Algorithm Iterations

Version 1: Edge Detection w/ Nearest Neighbor

The initial approach seemed straightforward: detect the edge pixels of each rendered character, then connect them in sequence to form an outline. We identified all pixels that were filled but had at least one empty neighbor—these were the true boundary pixels.

However, connecting these edge pixels via "nearest neighbor" logic created a critical flaw. When the algorithm couldn't find an adjacent edge pixel, it would jump across the shape to continue tracing, creating visible diagonal lines that cut through the interior during morphing. The 1→I transition revealed this problem most starkly—strange angular intersections appeared in the middle frames where the algorithm had jumped across empty space.

Version 2: Moore-Neighbor Boundary Tracing

We replaced the nearest-neighbor approach with a proper Moore-neighbor contour tracing algorithm, a classic technique from computer vision. This algorithm walks pixel-by-pixel around the actual perimeter of a shape, always checking the 8 surrounding pixels in a specific order.

The process starts by finding the leftmost boundary pixel, then systematically searches for the next filled pixel by examining neighbors in a counter-clockwise pattern. It never jumps—it only moves to directly adjacent pixels, guaranteeing a continuous path with no intersections.

This solved the trailing line problem completely. Morphs became smooth and logical, with every point connecting naturally to its neighbor. The algorithm maintained proper winding direction (counter-clockwise) and returned to the starting point, creating closed contours suitable for filling.

Version 3: Multi-Part Letterforms

A new challenge emerged with letters like 'i' and 'j', which have disconnected components—a dot separate from the main body. The Moore-neighbor algorithm, designed for single contours, would trace only one part and ignore the rest.

We extended the algorithm to detect and trace multiple contours per character. After tracing the first boundary, it would search for any remaining filled pixels, trace their boundaries, and continue until all components were captured. This allowed proper morphing of complex letterforms while maintaining the integrity of each separate part.

Version 4: Inner Contours

The next refinement addressed hollow characters like 'O', '0', '8', and '6'. These letters have both outer boundaries and inner holes, but the algorithm was only tracing outer contours. During morphing, the interior spaces would appear incorrectly filled.

We implemented hole detection—after tracing the outer boundary, the algorithm would search for interior contours where filled pixels bordered the inside of the shape. Each hole received its own boundary trace with reversed winding direction (clockwise for holes, counter-clockwise for outer edges). This ensured proper rendering of negative space during morphing transitions.

Version 5: Point Count Normalization

With clean contours established, we faced a timing problem: different characters had vastly different numbers of boundary points. A simple 'I' might have 50 points while a curvy 'S' had 300. Direct interpolation between mismatched point counts created uneven morphing speeds—some parts of the shape would animate faster than others.

The solution was intelligent point count normalization. We standardized each contour to approximately 300 points through a simplification algorithm that preserved shape fidelity while ensuring consistent point density. This allowed frame-by-frame interpolation between corresponding points, creating uniform animation speed across all morphs.

Version 6: Orientation Awareness

The final major refinement addressed shape orientation. When morphing between characters with different facing directions—like 'C' opening left versus '1' being vertical—the algorithm could produce awkward, spinning transitions.

We implemented orientation analysis that detected the primary axis and opening direction of each shape, then intelligently rotated point indices to align corresponding features. This ensured that 'C' morphing into '1' would smoothly close and straighten rather than rotate unnaturally.

The Final Algorithm

The completed algorithm successfully handles the full complexity of alphanumeric morphing: tracing clean boundaries with no jumps, capturing multi-part letterforms, preserving inner holes, normalizing point counts for smooth animation, and aligning orientations for natural transitions. Each character pair in the grid—whether similar like 'S' and '5' or dissimilar like 'Q' and '3'—morphs through a continuous, logical sequence of intermediate forms.

This technical foundation enabled the interactive grid interface where users can explore any combination of letters and numbers, watching the precise moment where one symbol's identity dissolves into another's—a computational analog to the perceptual boundaries experienced in synesthesia.