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 boundaries
• gridLoopTransform: Matrix transform after each cell render
• drawLoopTransform: 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