Generative Art

---
name: generative-art
description: Use when creating algorithmic or generative visual art. Covers composition through code, controlled randomness, colour systems, and building work that is varied without being arbitrary.
metadata:
  category: design
  version: 1.0.0
  tags: [generative, algorithmic-art, creative-coding, randomness, canvas]
---

# Generative Art

## Purpose

Create visual work through code, where the interesting output comes from constrained randomness rather than unconstrained noise. Pure randomness produces mush; the craft is in the constraints.

## When to Use

- Creating algorithmic or procedural visual work.
- Building a generative system that produces a family of related outputs.
- Data-driven visual work.
- Exploring composition computationally.

## Capabilities

- Controlled randomness: distributions, noise fields, seeded reproducibility.
- Composition: grids, subdivision, packing, flow fields.
- Colour systems for generative palettes.
- Output at print resolution.

## Inputs

- The visual idea or the underlying system.
- Constraints: palette, format, medium.
- Whether outputs must be reproducible (they should be).

## Outputs

- A system producing a family of related, non-identical works.
- Seeded, reproducible output.
- Assets at the resolution the medium requires.

## Workflow

1. **Seed the randomness** — Always. An unseeded generative system produces something beautiful once and can never produce it again. This is the first thing to get right and the most commonly skipped.
2. **Constrain the space** — Randomness within a structure. A grid whose cells vary, a palette whose members are sampled, an angle that jitters within a range. Unconstrained randomness is visual noise.
3. **Use noise, not uniform random, for anything spatial** — Perlin or simplex noise produces coherent variation. `Math.random()` per pixel produces static.
4. **Build the palette as a system** — Sample from a small set, or from a ramp. Per-element random colour destroys any coherence the composition had.
5. **Generate many, select few** — The output of a generative system is a distribution. Produce a hundred, choose the ones that work, and adjust the constraints toward them.
6. **Render at the output resolution** — Not scaled up afterwards. A generative composition designed at 800px and upscaled to print looks exactly like that.

## Best Practices

- An unseeded system is a system that cannot be reproduced, iterated on, or printed at a different size. Seed it from the start.
- Perlin and simplex noise are what make generative work look organic rather than random. The difference between `random()` and `noise(x, y)` is the difference between static and a landscape.
- Constrain the colour: sample from a palette of four, or from a single ramp. Fully random colour is the most reliable way to make generative work look amateurish.
- Symmetry and repetition give the eye something to hold. Pure variation with no structure is exhausting to look at.
- The best generative systems have one or two parameters that meaningfully change the output. A system with forty knobs is unexplorable.
- Produce original systems. Do not reimplement a recognizable artist's signature work.

## Examples

**Seeded, constrained, and using noise for coherence:**

```javascript
import { createNoise2D } from "simplex-noise";
import Alea from "alea";

// Seeded: this exact image can be regenerated, at any resolution, forever.
const SEED = "2026-07-14-a";
const prng = new Alea(SEED);
const noise2D = createNoise2D(prng);

// A palette, sampled — not random colour per element.
const PALETTE = ["#0f172a", "#1e40af", "#0891b2", "#f59e0b"];
const PAPER = "#faf8f3";

function draw(ctx, width, height) {
  ctx.fillStyle = PAPER;
  ctx.fillRect(0, 0, width, height);

  const GRID = 48;
  const cell = width / GRID;

  for (let x = 0; x < GRID; x++) {
    for (let y = 0; y < GRID; y++) {
      // Noise, not random: adjacent cells are RELATED, which is what makes
      // the field read as a structure rather than as static.
      const n = noise2D(x * 0.06, y * 0.06);          // -1..1, spatially coherent
      const angle = n * Math.PI;                       // a flow field
      const length = cell * (0.4 + Math.abs(n) * 0.9); // varies with the field

      // Colour is sampled from the palette, indexed by the field — so colour
      // varies coherently too, rather than speckling.
      const colour = PALETTE[Math.floor(((n + 1) / 2) * PALETTE.length * 0.999)];

      // Sparse: skip cells where the field is weak. Negative space is composition.
      if (Math.abs(n) < 0.18) continue;

      const cx = x * cell + cell / 2;
      const cy = y * cell + cell / 2;

      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(angle);
      ctx.strokeStyle = colour;
      ctx.lineWidth = cell * 0.14;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(-length / 2, 0);
      ctx.lineTo(length / 2, 0);
      ctx.stroke();
      ctx.restore();
    }
  }
}

// Print: render at the final resolution, not upscaled.
// A2 at 300 DPI = 4961 x 7016 px. The grid and line widths scale with `width`,
// so the same seed produces the same composition at any size.
```

## Notes

- The line `if (Math.abs(n) < 0.18) continue;` is doing a disproportionate amount of the compositional work: it creates negative space where the field is weak, which gives the piece structure. A generative system that fills every cell is almost always worse than one that does not.
- Seeded PRNGs (Alea, and similar) are essential. `Math.random()` cannot be seeded in JavaScript, which makes any system built on it irreproducible.
- Generate in batches and curate. The system's output is a distribution; your job is to shape the distribution and then choose from it.