Process
About
The Project
This is a small generative art project by me, Jonathan Reed! It uses space-filling curves (Hilbert, Morton, Peano) plus spiral and random-walk traversals, combined with color mapping to produce patterns. You control the seed, traversal curve, growth mode, symmetry, and color flow, then let the algorithm fill in the pixels.
Every output is deterministic: the same settings produce the same image. Change a parameter and you get something new. It is mostly an experiment in what these algorithms can draw.
The generator keeps the controls visible, the output repeatable, and the saved gallery close by, so each image is something you can revisit and refine rather than a one-off random result.
The Technology
Built with Astro and React for a fast, mostly-static experience, with the heavy pixel work offloaded to a Web Worker so the interface stays responsive while a piece plots. The interface borrows from drafting and plotter culture: warm paper, graphite ink, a single oxide accent, and a real measurement grid, so the interface stays quiet and the focus stays on the artwork.
Reference
I Made Art That HACKS Your Eyes
The video is included as a reference point for the visual idea, but the generator itself is built around browser-side controls, deterministic settings, and exportable studies that can be recreated from documented parameters.
How It Works
Select Parameters
- Seed & Growth: Control the seed value, pattern size, growth mode, seed shape, and more
- Color & Symmetry: Define the traversal curve, color progression, symmetry, and finishing effects
Generate
The algorithm processes your parameters to plot a unique piece of algorithmic art.
Export
Download your creation as a PNG or PDF file.
Save
Add your favorite generations to your personal gallery to revisit later.
Pattern Generation Options
Click on any option below to learn more about it:
Render Modes
Color field, or line trace
- Color field: the traversal curve sets the order in which every pixel is filled, and each is given a different color from a palette spanning the whole color space, for a dense, painterly field.
- Line trace: the curve itself is stroked as one continuous colored line, color advancing along its length through the chosen gradient (or a full hue sweep), for clean, plotted line art. Tune the line weight and detail; every curve type traces its own signature.
Curve Types
Hilbert, Morton, Peano, Spiral, Random Walk
- Hilbert: A space-filling curve that preserves locality well, creating smoother color transitions and more organic patterns.
- Morton: The Z-order curve interleaves coordinate bits, creating blockier, quadrant-based color regions.
- Peano: A recursive 3×3 space-filling curve, a denser, more woven path through color space than Hilbert.
- Spiral: Archimedean-spiral ordering from the center outward, so color winds out in rings.
- Random Walk: A constrained, DLA-style random walk orders the palette for organic, unpredictable color flow.
Growth Modes
Crystal, Nebula, Rings, Flow
- Crystal: Grows outward by distance from the center, forming crystalline, radial structures.
- Nebula: Near-random growth priority produces cloud-like, organic shapes with diffused edges.
- Rings: Priority follows a sine of the radius, generating concentric rings and orbital bands.
- Flow: Growth follows a deterministic flow field, so structure streams along curving currents.
Seed Shapes
Point, Dual, Circle, Line
- Point: Starts growth from a single point at the center, creating a radial expansion pattern.
- Dual: Begins from two seed points for paired, symmetrical growth.
- Circle: Begins with a circular boundary that expands outward, creating ring-like structures.
- Line: Initiates growth from a horizontal line across the center, creating mirror-like patterns.
Symmetry
None, Bilateral, Quadrantal, Radial
- None: No symmetry applied - pattern grows freely in all directions without mirroring.
- Bilateral: Mirror symmetry along a central axis, like a butterfly's wings.
- Quadrantal: Four-way symmetry, mirrored in four quadrants from the center.
- Radial: Eight-fold rotational symmetry radiating from the center point.
Color Progression
Sequential, Shuffled, Base Distance, Saturation, Brightness
- Sequential: Colors follow a strict sequence based on their position in the RGB space.
- Shuffled: Colors are randomly arranged while maintaining visual coherence.
- Base Distance: Colors are distributed based on their distance from a base color.
- Saturation: Sorts the palette by saturation for an AllRGB-style flow.
- Brightness: Sorts the palette by brightness intensity.
Finish & Effects
Gradient Map, Dithering, Anti-aliasing
- Gradient Map: Remaps the generated colors by brightness through a curated palette: sunset, ocean, monochrome, neon, forest, or magma.
- Dithering: Ordered (Bayer) dithering adds fine tonal texture and softens color banding.
- Anti-aliasing: Edge-preserving smoothing softens harsh boundaries between color regions.
Tech Stack
Technical Specifications
- Pattern Sizes From 128×128 to 4096×4096 pixels
- Traversal curves Hilbert, Morton (Z-order), Peano, Spiral, Random Walk
- Growth modes Crystal, Nebula, Rings, Flow
- Export Options PNG and PDF formats
- Settings Storage Browser local storage for saved settings