p5.js Generative Art

When to use this

• You are making a self-contained generative artwork, poster, or background pattern.
• The output is a static image or slow-evolving animation, not a real-time interactive UI component.
• You want Perlin noise, randomness with seeds, and drawing primitives without managing a WebGL pipeline.
• The artwork will be exported as a high-resolution PNG or SVG for print.
• Do NOT use this for performance-critical real-time effects with 10k+ elements -- see canvas-2d-performance or webgl-particle-systems instead.

Mental model

p5.js wraps the Canvas 2D API (or optionally WebGL) in a creative-coding-friendly API. setup() runs once, draw() runs every frame. All drawing functions (line, ellipse, rect, vertex) push to the current canvas context.

Instance mode (not global mode) is mandatory for production. Global mode pollutes window with hundreds of names and breaks the moment you have two sketches or any other JS on the page. Instance mode scopes everything under a callback: