Generative Art Machine
An algorithmic art generator using custom "wonky rectangle" primitives in P5.js.
- graham makes · Seattle, WA
- Title
- Generative Art Machine
- Edited
- January 7, 2026
- Tags
- case-study, p5js, generative
- Live site
- rtb9z.csb.app
- Product
- Generative Art Machine
Overview
Inspired by the incredible generative artwork coming out of the Processing community (particularly Tyler Hobbs), I built a configurable art generator that produces stochastic visual compositions.
The Concept
The machine has two primary configuration axes:
Themes - Color palettes including faroe, nanoplastic, primary, fluorescent, and organic
Templates - Algorithmic patterns that control shape arrangement, transformation, and composition
Each run produces a unique piece - the algorithms are stochastic, so each template represents a family of related works rather than a single image.
Technical Deep-Dive
Grid-Based Architecture
The whole machine is conceptually based on a grid system. Each template defines rows and columns, and on each pass through the grid, a rectangle of configurably random size is rendered into each cell.
Configuration options include:
borderCross: How and when to overrun cell boundariesgridLoopTransform: Matrix transform after each cell renderdrawLoopTransform: Matrix transform after each complete grid pass
The Wonky Rectangle Algorithm
The most distinctive feature is the “wonky rectangle” - a custom shape that creates organic, hand-drawn aesthetics.
Wonky Lines: Take two defining points (A, Z) and interpolate points along that line (B, C, D, etc.). Apply randomness to offset each point, connect them together. Increasing the “wonk” factor creates larger diversions.
Wonky Rectangles: Apply the wonky line principle 4x - each side of the rectangle is actually a wonky line. Combined via P5’s polygon() method, they create shapes that can receive fill or stroke like normal primitives.
Development Environment
This was built using CodeSandbox, which significantly reduced context-switching between code and browser. The built-in static hosting made iteration fast and sharing easy.
Tech Stack
| Technology | Purpose |
|---|---|
| P5.js | Shape rendering and canvas |
| JavaScript | Algorithm implementation |
| CodeSandbox | IDE and hosting |