Getting Started with Generative Art in p5.js

Generative art is artwork created with code, algorithms, and randomness. Instead of placing every pixel by hand, you write rules that create visual compositions, often with surprising and beautiful results. p5.js is the most accessible way to start.

What is p5.js?

p5.js is a JavaScript library for creative coding. It's the spiritual successor to Processing (Java), making it easy to draw shapes, colors, and animations in the browser. No installation needed, just a browser and curiosity.

Your First Sketch

Every p5.js sketch has two core functions:

function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  // Runs 60 times per second
  ellipse(mouseX, mouseY, 50, 50);
}

setup() runs once when the sketch starts. draw() runs continuously (60fps by default), creating animations.

Adding Randomness

The magic of generative art comes from controlled randomness:

function setup() {
  createCanvas(400, 400);
  background(30);
  noStroke();
  
  for (let i = 0; i < 200; i++) {
    let x = random(width);
    let y = random(height);
    let size = random(5, 40);
    let alpha = random(50, 200);
    
    fill(random(255), random(255), random(255), alpha);
    ellipse(x, y, size, size);
  }
}

Each time you run this, you get a unique composition. Same rules, different results.

Perlin Noise: Organic Randomness

random() gives you pure chaos. noise() gives you smooth, organic variation, perfect for natural-looking flows and landscapes:

function setup() {
  createCanvas(400, 400);
  background(30);
  stroke(255, 100);
  noFill();
  
  for (let y = 0; y < height; y += 5) {
    beginShape();
    for (let x = 0; x < width; x += 2) {
      let n = noise(x * 0.01, y * 0.01);
      vertex(x, y + n * 40);
    }
    endShape();
  }
}

Key Concepts for Generative Art

• Seeds: Use randomSeed() and noiseSeed() to make reproducible outputs. Same seed = same artwork.
• Color palettes: Curate 3-5 colors instead of full random. Use HSB mode for easier color harmony.
• Grids: Start with a grid structure and vary elements within cells. This creates order within chaos.
• Iteration: Loops within loops create complex patterns from simple rules.
• Export: Use saveCanvas() to export frames as PNG.

Where to Go From Here

Once you're comfortable with basics, explore:

• GLSL Shaders: GPU-powered visual effects. Try our Shader Editor.
• Grid systems: Structured compositions with our Grid Builder.
• Noise textures: Experiment with our Noise Generator (Perlin, Simplex, Worley).
• NFTs and blockchain art: Many generative art collections use p5.js as their foundation.

Start Coding Now

Our free p5.js Editor runs entirely in your browser with Monaco (VS Code) editor, live preview, and template sketches to get you started. No signup, no installation needed.