Code-based visual systems that generate unique outputs from algorithmic rules. Not generative AI—these are deterministic systems where I write the algorithm, set parameters, and let the system explore the possibility space. Each run produces something different, but within defined constraints.
Philosophy
The goal isn't to replace manual art-making—it's to explore what becomes possible when you can iterate thousands of times in minutes. I write the rules, the system explores variations. It's a collaboration: I provide constraints and aesthetics, the algorithm provides surprise and scale.
Most important lesson: randomness isn't enough. Pure random noise is visually uninteresting. Good generative systems balance control and emergence—structured randomness. Perlin noise over white noise. Constrained color palettes over full RGB. Rules with a little wiggle room.
Technical Approach
All sketches use p5.js, a JavaScript library that makes creative coding accessible. It provides a simple API for drawing, animation, and interaction while running natively in the browser. The sketches below are live and interactive—many respond to mouse movement or generate new variations on each run.
Key Techniques
- Perlin Noise: Smooth, natural-looking randomness for organic flow and texture
- L-Systems: Recursive rewriting rules that create fractal and plant-like structures
- Chaos Theory: Strange attractors and deterministic systems that produce complex patterns
- Cellular Automata: Simple rules applied to grids create emergent complexity
- Recursive Algorithms: Self-similar patterns through function recursion
- Wave Functions: Sine/cosine combinations for harmonic motion and interference
Interactive Gallery
Click any sketch to view full-screen. Use arrow keys to navigate between sketches. Sketches marked with ✨ are interactive—move your mouse to control parameters and see the system respond in real-time.
Interactive Gallery
Click any sketch to view full-screen. Use arrow keys to navigate between sketches. ✨ Interactive sketches respond to mouse/keyboard.
Chaos Attractor
Strange attractors emerge from deterministic chaos. Uses the Clifford attractor equations to generate organic, flowing patterns from simple mathematical rules.
Penrose Tiling
L-System implementation of Penrose rhombus tiling. A non-periodic tiling that never repeats, discovered by mathematician Roger Penrose.
Recursive Tree ✨
Interactive fractal tree that responds to mouse position. Move your cursor to control the branching angle and watch the tree morph organically.
Gradient Fields
Experimental gradient rendering using color interpolation and mathematical transformations. Explores the visual possibilities of lerp functions.
Perlin Noise Flow
Flowing organic patterns generated using Perlin noise. Demonstrates how noise functions create natural-looking movement and texture.
Noise Wave
Undulating waves driven by Perlin noise. Combines sinusoidal motion with noise for organic, wave-like patterns.
Spirograph ✨
Digital spirograph using rotating circles and trailing paths. Press spacebar to toggle between showing the geometry and tracing the pattern.
Wave Interference
Multiple sine waves creating interference patterns. Explores wave superposition and harmonic motion.
Wave Field
Two-dimensional wave field with dynamic color mapping. Creates mesmerizing ripple effects.
Rotating Stars
Three rotating star shapes with different rotation speeds. Explores geometric transformation and rotation in 2D space.
Growth Algorithm
Organic growth simulation using space colonization algorithms. Watch as the structure grows and branches naturally.
Technical Challenges
Creating generative art involves solving both aesthetic and technical problems:
Performance
Complex systems can freeze browsers. Early work used Processing (Java), but I migrated to p5.js for web deployment. For computationally intensive sketches, I've moved to WebGL shaders that run on the GPU. The goal: smooth 60fps animation even with thousands of elements.
Determinism
Ensuring the same seed produces the same output across browsers and devices is critical for print reproduction. JavaScript's Math.random() varies between environments, so I use seeded random number generators for reproducibility.
Parameter Tuning
Finding the sweet spot between too rigid (boring) and too chaotic (noise) requires generating hundreds of variations and evaluating manually. I often create parameter exploration tools that let me adjust values in real-time and save promising combinations.
Color Theory
Algorithmic color selection is surprisingly hard. RGB color space doesn't match human perception—equal steps in RGB don't produce equal visual differences. I've learned to work in HSB (Hue, Saturation, Brightness) for intuitive control, use restricted palettes inspired by artists, and implement perceptually uniform color spaces like LAB when color gradients need to feel smooth.
Influences & Resources
My generative art practice draws from mathematics, computer graphics, and visual art traditions:
Artists & Practitioners
- Tyler Hobbs - Essays on generative art process and aesthetic decision-making
- Anders Hoff (inconvergent) - Writing on constraints and algorithmic aesthetics
- Vera Molnár - Pioneer of computer art, use of simple rules for complex output
- Manolo Gamboa Naon - Intricate, organic forms from code
- Zach Lieberman - Expressive, playful computational art
Learning Resources
- The Coding Train (Daniel Shiffman) - YouTube tutorials on creative coding techniques
- The Nature of Code - Book on simulating natural systems with code
- Generative Design - Comprehensive guide to computational design methods
- #genartclub - Active community sharing daily generative art experiments
Mathematical Foundations
- Stephen Wolfram's "A New Kind of Science" - Cellular automata and emergence
- Benoit Mandelbrot's "The Fractal Geometry of Nature" - Self-similarity and fractals
- Edward Lorenz's chaos theory papers - Strange attractors and deterministic chaos
Process & Workflow
My typical generative art workflow:
- Concept: Start with a mathematical or natural phenomenon (waves, growth, interference, etc.)
- Research: Study the underlying mathematics and existing visualizations
- Prototype: Build the simplest possible version in p5.js, get something on screen
- Iterate: Add parameters, try variations, break things and see what happens
- Refine: Tune parameters, adjust colors, optimize performance
- Export: Generate high-resolution outputs for print or web display
The best discoveries come from accidents—a misplaced parameter, a typo in an equation, an unexpected interaction between systems. The key is recognizing when something interesting emerges and exploring that direction.
Future Directions
Current areas of exploration:
- Machine learning integration: Using neural networks to evolve parameters toward aesthetic goals
- Physical computing: Connecting generative systems to LED installations and plotters
- 3D forms: Extending 2D techniques into volumetric space using Three.js
- Sound visualization: Real-time audio-reactive generative systems
- NFTs & blockchain: Exploring on-chain generative art (Art Blocks, fxhash)
The field is evolving rapidly. New techniques, tools, and platforms emerge constantly. The challenge is staying curious, experimenting constantly, and maintaining a personal aesthetic voice amidst the noise.