A guide to creating a generative art piece with p5.js

Generative art turns a small set of visual rules into work that can change from run to run. The artist decides what the system may alter, what must stay consistent and how each output should be experienced. With p5.js, those decisions become approachable through JavaScript, a canvas and a browser.

This guide moves from concept to code, then covers colour, interaction, documentation and exhibition. The aim is a repeatable process you can adapt for screen, projection or print.

Begin with one visual rule

Begin with a constraint rather than a broad style. Write one sentence that describes the generative behaviour, for example: “Each circle drifts across the canvas like a leaf caught in harbour wind.” Choose the variables you will allow to vary, such as position, size, speed or hue, and name any fixed elements.

For an Australian subject, choose a specific place rather than a generic idea of Australia. Sydney’s harbour light, Melbourne’s laneways or inland eucalyptus forests can provide distinct colour, scale and movement. If the work references Aboriginal art or Country, research the relevant community and seek permission where appropriate; resemblance alone is not consent. Keep a concept note beside the sketch so references and cultural responsibilities stay visible.

Prepare the p5.js canvas

Create an index.html file and a sketch.js file, load the p5.js library, and test through a local development server rather than opening the file directly. The library’s setup function runs once, while draw runs repeatedly. Start with a fixed canvas and a repeatable random seed so you can compare deliberate changes later.

let seed = 27;

function setup() {
  createCanvas(800, 600);
  pixelDensity(displayDensity());
  randomSeed(seed);
}

function draw() {
  background(240);
}

The seed value makes the pseudo-random sequence repeatable: the same seed and rules should produce the same composition. Increase the value for a new result, or store several approved seeds as editions. Use displayDensity() for sharp screens, but lower it on modest hardware.

Build the generative system

Build the visual system inside draw(). Repetition, randomness and simple geometry often create stronger results than complicated shapes. A loop can place many marks, while conditional logic can produce clusters, gaps or changes in scale.

function draw() {
  background(18);
  randomSeed(seed);
  noStroke();

  for (let i = 0; i < 120; i++) {
    let x = random(width);
    let y = random(height);
    let d = random(6, 34);
    fill(235, random(120, 220), random(70, 180), random(35, 170));
    ellipse(x, y, d, d);
  }
}

This sketch creates a stable field of translucent circles. Because randomSeed is called before the loop, reloading the page reproduces the same arrangement, while changing seed creates another edition. Replace ellipse with line, beginShape or vertex, and use push(), pop(), translate() and rotate() to build more deliberate structures.

Shape colour rhythm and detail

Treat colour as part of the rule system. A palette drawn from saltbush grey, eucalyptus green, ochre and harbour blue could suit a coastal work, but check contrast and test how the colours behave when stacked. Using p5.js’s HSB mode can make hue relationships easier to control, while the alpha channel adds depth without requiring a separate layer.

Introduce complexity gradually. Perlin noise offers smooth, organic variation for drifting paths; random walks suit restless clusters; a limited range of sizes creates rhythm. Keep the number of visual variables small enough that you can still explain why each output feels related to the others.

The ITP 30 Show journal account of machine learning poetry offers a useful comparison: a system can produce many outputs while a person still chooses the source material, prompts and presentation. That balance between authored constraints and generated variation also applies to p5.js.

Make the work interactive

Add interaction only when it reveals part of the system. Map mouse or touch movement to a steering angle, let a click alter the seed, or let a viewer’s position influence density. Smooth the input so the artwork responds without jitter, and provide a quiet default state for people who do not touch the screen.

Design for Australian audiences without overusing local slang. “Arvo” and “fair dinkum” can add warmth to a playful title, while instructions and access information should remain plain. Test on a phone, trackpad and large display; use responsive dimensions and cap particle counts so the piece stays responsive in a gallery or browser.

Offer a non-interactive path. Visitors should see a complete composition without clicking, and motion-sensitive viewers should receive a reduced-motion or still version. Both choices preserve the conceptual rule while widening access.

Document present and preserve the piece

Document the work as carefully as you build it. Record the concept, year, dimensions, p5.js version, seed values, inputs, dependencies, licence and collaborator credits. Save the source code with high-resolution stills or a video, and name exported files consistently. This turns a browser sketch into a traceable edition rather than an unrepeatable moment.

The ITP 30 Show archive shows how experimental digital projects can be presented with clear descriptions, credits and related resources. Follow that lead: explain the rule in one paragraph, show still images, link code when appropriate and give event information, local timezone and RSVP details for live launches.

Australian artists commonly work through private commissions, studios, gallery programmes, public art tenders, residencies and grants. Applications may run through Creative Australia, state arts bodies or local councils, so quote fees in Australian dollars and separate artist fees from fabrication, licensing and technical costs. International platforms can broaden sales, but retain AUD pricing and clear payment and copyright terms.

Choose one visual rule, open your editor and build a ten-minute sketch today. Change one variable at a time, save the seed and source file for every approved result, then publish the finished piece with its concept, credits and interaction instructions clearly attached.