Algorithmic Art Gallery is a modern, minimal web application that showcases generative art created through
mathematical algorithms. The gallery generates trippy beautiful visual patterns using space-filling curves
and color mapping algorithms, creating unique and vibrant algorithmic artwork.
Each artwork is a unique manifestation of algorithmic processes, seed values, and color mappings,
creating an endless possibility of visually stunning patterns. The combination of different parameters
allows for virtually infinite unique generations.
The Technology
Built with Astro and React, this application uses modern web technologies to provide a fast,
responsive experience. An interface inpired by frosted-glass aesthetic, featuring a dark mode theme with cyan 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