About

The Project

This is a small generative art project by me, Jonathan Reed! It uses space-filling curves (Hilbert and Morton) combined with color mapping to produce patterns. You control the seed value, growth mode, symmetry, and color ordering—then let the algorithm fill in the pixels.

Every output is deterministic: same settings produce the same image. Change a parameter and you get something new. It's mostly an experiment in seeing what happens when you let math do the drawing.

See more projects by Jonathan Reed →

The Technology

Built with Astro and React, this application uses modern web technologies to provide a fast, responsive experience. An interface inspired by a frosted-glass aesthetic, featuring a dark mode theme with warm coral accents that complements the vibrant colors of the generated art.

This project was inspired by a video from Corridor Crew:

I Made Art That HACKS Your Eyes

How It Works

1. Select Parameters: Customize your artwork by adjusting parameters in two main categories:

  • Seed & Growth: Control the seed value, pattern size, growth mode, seed shape, and more
  • Color & Symmetry: Define color progression, curve type, color ordering, and symmetry options

2. Generate: Our algorithm processes your parameters to create a unique piece of algorithmic art

3. Export: Download your creation as a PNG or PDF file

4. 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:

Growth Modes

+

Crystal, Nebula, Rings

  • Crystal: Creates crystalline formations with angular structures, growing in a more geometric pattern.
  • Nebula: Produces cloud-like, organic shapes with diffused edges that resemble cosmic nebulae.
  • Rings: Generates concentric circles and orbital patterns that expand outward like ripples.

Seed Shapes

+

Point, Circle, Line

  • Point: Starts growth from a single point at the center, creating a radial expansion pattern.
  • Circle: Begins with a circular boundary that expands outward, creating ring-like structures.
  • Line: Initiates growth from a 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: Circular symmetry, repeating pattern radiates from the center point.

Color Progression

+

Sequential, Shuffled, Base Distance

  • 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.

Curve Types

+

Hilbert, Morton

  • Hilbert: A space-filling curve that preserves locality well, creating smoother color transitions and more organic patterns.
  • Morton: Also known as Z-order curve, creates more blocky, quadrant-based patterns with distinct regions.

Color Ordering

+

HSV, HVS, SHV, SVH, VHS, VSH

  • HSV: Arranges colors by Hue, Saturation, Value - emphasizing color families.
  • HVS: Arranges by Hue, Value, Saturation - emphasizing brightness variations within hues.
  • SHV: Arranges by Saturation, Hue, Value - grouping by color intensity first.
  • SVH: Arranges by Saturation, Value, Hue - emphasizing intensity and brightness patterns.
  • VHS: Arranges by Value, Hue, Saturation - creating bands of brightness.
  • VSH: Arranges by Value, Saturation, Hue - emphasizing brightness and intensity patterns.

Technical Specifications

  • Pattern Sizes: From 128×128 to 4096×4096 pixels
  • Algorithms: Hilbert Curve, Morton Curve (Z-order)
  • Export Options: PNG and PDF formats
  • Settings Storage: Browser local storage for saved settings