Interactive Hilbert Curve Explorer

Pixels reordered along Hilbert curve

Original pixels in Raster order

Math HUD 256 × 256 = 65,536 px

Drag the Raster box vertically to set height. Drag or hover the Hilbert box to inspect the inverse mapping. Double-click or press Space to resume auto animation.

Live State

mode —

block height h —

white pixels —

selected color —

Animation Formula

—

Raster Source Math

d = y_top · 256 + x

y_bottom = 255 − y_top

source(x,y) =
  white  if y_bottom < h
  black  otherwise

Hilbert Reorder Math

Raw Hilbert coordinate:
  (Hₓ(d), Hᵧ(d)) = H(d)

Orientation used here:
  top_x        = 255 − Hₓ(d)
  top_y_bottom = Hᵧ(d)

Therefore:
  top[top_x, top_y_bottom] ← raster[d]

Pointer / Pixel Inspector

Move over either 256×256 box to inspect one exact pixel mapping.