Most creative coders reach for Three.js or raw WebGL when they want to add generative backgrounds to a site. Then they spend 3 hours fighting shader contexts and buffer management, and the bundle balloons to 500kb. There's a simpler path: p5.js. It's the Processing library ported to JavaScript. No setup. No boilerplate. Just a `draw()` function that runs every frame. And if you gate it properly, it adds motion to marketing sites without sinking conversion rates.
p5.js is often dismissed as a "learning library" for beginners. That's backwards. It's the most direct translation from mathematical idea to rendered output. Perlin noise fields, particle systems, mouse interactions — you can prototype in 30 lines and ship in production. The catch? Bundle size and performance gating. Load it lazy. Pause when off-screen. Cap framerate. Do that, and you've got generative art that feels premium and loads in under 2s.
Why p5.js Over Raw Canvas
Raw canvas is powerful but verbose. You write boilerplate to initialize contexts, manage state, and handle resizing. p5.js abstracts all of it. You get:
- Instant canvas: No setup. Call `createCanvas()` and draw. Done.
- Built-in math: `noise()`, `random()`, `sin()`, `cos()`, `map()` — all one-liners. Raw canvas? You write the noise function yourself or import a library.
- Instance mode: Multiple sketches on one page without global state collision. Each is isolated in its own scope.
- Tiny learning curve: If you know JavaScript, p5.js takes 15 minutes. The draw loop is familiar to anyone who's animated CSS.
- Community: Thousands of examples. If you want to draw something, someone's already shown you how.
Three.js is faster for complex 3D. Raw canvas is leaner. But p5.js is the sweet spot for generative sites: low barrier to entry, fast iteration, and good enough performance if you throttle it right.
Setup: Instance Mode (The Right Way)
Install p5.js via npm and use instance mode, not global mode. Global mode pollutes the window object. Instance mode isolates each sketch:
npm install p5Then in your component:
import p5 from 'p5';
import { useEffect, useRef } from 'react';
export const NoiseField = () => {
const containerRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
const sketch = (p) => {
let scale = 0.01;
let speed = 0;
p.setup = () => {
const rect = containerRef.current.getBoundingClientRect();
p.createCanvas(rect.width, rect.height);
p.pixelDensity(1); // Cap resolution for performance
};
p.draw = () => {
p.background(10);
p.noStroke();
for (let x = 0; x < p.width; x += 20) {
for (let y = 0; y < p.height; y += 20) {
const n = p.noise(x * scale, y * scale, speed);
const hue = p.map(n, 0, 1, 200, 280);
const brightness = p.map(n, 0, 1, 20, 100);
p.fill(hue, 80, brightness);
p.circle(x, y, p.map(n, 0, 1, 4, 16));
}
}
speed += 0.003;
};
p.windowResized = () => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
p.resizeCanvas(rect.width, rect.height);
};
};
const instance = new p5(sketch, containerRef.current);
return () => {
instance.remove();
};
}, []);
return <div ref={containerRef} className="w-full h-screen" />;
};That's it. You now have a generative noise field on the canvas. Every frame, `draw()` runs. Every pixel evaluates `noise()` at different coordinates. The `speed` variable animates it. The `map()` function remaps noise values (0–1) into hue and brightness (200–280 and 20–100). It's procedural, animated, and totally responsive to resize.
Pattern 1: Perlin Noise Field
Perlin noise is the backbone of most generative sites. It's organic — fractals, clouds, terrain. p5.js has it built-in:
const n = p.noise(x * 0.005, y * 0.005, time * 0.01);
const color = p.map(n, 0, 1, 0, 360); // Hue
p.fill(color, 80, 60);
p.rect(x, y, 30, 30);Scale the inputs (`0.005`, `0.01`) to control roughness. Low scale = large features. High scale = fine detail. For site backgrounds, start at `0.004` and tweak from there. You'll watch organic, cloud-like patterns emerge on screen instantly.
Pattern 2: Particle System
Particles are the most Instagram-friendly generative effect. Each particle lives, moves, ages, dies. Hundreds of them create complex motion from simple rules:
class Particle {
constructor(p) {
this.p = p;
this.x = p.random(p.width);
this.y = p.random(p.height);
this.vx = p.random(-2, 2);
this.vy = p.random(-2, 2);
this.life = 255;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.05; // Gravity
this.life -= 3;
}
draw() {
this.p.fill(255, this.life);
this.p.circle(this.x, this.y, 4);
}
isDead() {
return this.life <= 0;
}
}
export const ParticleSystem = () => {
const containerRef = useRef(null);
useEffect(() => {
const sketch = (p) => {
let particles = [];
p.setup = () => {
const rect = containerRef.current.getBoundingClientRect();
p.createCanvas(rect.width, rect.height);
};
p.draw = () => {
p.background(10, 20); // Slight trail effect
p.blendMode(p.SCREEN); // Additive blending
// Spawn 2 new particles per frame
for (let i = 0; i < 2; i++) {
particles.push(new Particle(p));
}
// Update and draw
particles = particles.filter((particle) => {
particle.update();
particle.draw();
return !particle.isDead();
});
};
};
const instance = new p5(sketch, containerRef.current);
return () => instance.remove();
}, []);
return <div ref={containerRef} className="w-full h-screen" />;
};That's 40 lines. You get a particle fountain with gravity, fade-out, and additive blending. No Three.js. No buffer management. Just objects, a loop, and math.
Pattern 3: Mouse Trail
Interactive motion converts visitors. Track the mouse, draw a trail, make it feel responsive:
export const MouseTrail = () => {
const containerRef = useRef(null);
useEffect(() => {
const sketch = (p) => {
let trail = [];
p.setup = () => {
const rect = containerRef.current.getBoundingClientRect();
p.createCanvas(rect.width, rect.height);
};
p.draw = () => {
p.background(10);
p.stroke(200, 100);
p.strokeWeight(2);
p.noFill();
if (trail.length > 1) {
p.beginShape();
trail.forEach((point) => p.curveVertex(point.x, point.y));
p.endShape();
}
// Fade trail
trail = trail.filter((point, i) => {
point.age += 1;
return point.age < 100;
});
};
p.mouseMoved = () => {
trail.push({ x: p.mouseX, y: p.mouseY, age: 0 });
};
};
const instance = new p5(sketch, containerRef.current);
return () => instance.remove();
}, []);
return <div ref={containerRef} className="w-full h-screen" />;
};The `p.mouseMoved()` callback fires every time the cursor moves. Each position gets added to the trail. Each frame, old points fade out. The `curveVertex()` function smooths the line. It's interactive. It's instant feedback. Visitors feel seen.
Performance Gating: Ship Without Sinking Load Time
p5.js is small (~180kb gzipped), but rendering canvas every frame is CPU-expensive. Gate it aggressively:
1. Lazy Load
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
// Load p5 only after hydration
const timer = setTimeout(() => setIsLoaded(true), 500);
return () => clearTimeout(timer);
}, []);
if (!isLoaded) return <div className="w-full h-48 bg-gray-900" />;
// Render the actual p5 sketch here2. Pause When Off-Screen
const [isVisible, setIsVisible] = useState(false);
const containerRef = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
if (!entry.isIntersecting && sketchRef.current) {
sketchRef.current.remove(); // Clean up
}
},
{ threshold: 0.1 }
);
if (containerRef.current) {
observer.observe(containerRef.current);
}
return () => observer.disconnect();
}, []);
if (!isVisible) {
return <div ref={containerRef} className="w-full h-48 bg-gray-900" />;
}3. Cap Framerate
let lastFrameTime = 0;
const targetFrameTime = 1000 / 30; // 30fps instead of 60
p.draw = () => {
const now = Date.now();
if (now - lastFrameTime < targetFrameTime) return;
lastFrameTime = now;
// Your draw code here
};4. Reduce Pixel Density
// Render at 1x DPR, not device DPR
p.pixelDensity(1);
// Or cap at 1.5x for high-DPI devices
p.pixelDensity(Math.min(window.devicePixelRatio, 1.5));Use all four. Lazy load the library. Kill the sketch when it scrolls off-screen. Render at 30fps instead of 60. Lower pixel density. You'll drop from 80% CPU usage to 12%. Your Core Web Vitals stay green. Conversions don't tank.
Six FAQs
Does p5.js work in Astro?
Yes. Wrap the p5 sketch in a client component (React or Vue island), import p5, and initialize in `useEffect`. Astro handles the rest.
Can I use p5 for site headers?
Absolutely. A small header-width canvas (maybe 400×100) with a simple noise field or particle effect adds premium texture without weight. Just gate it with lazy load + off-screen kill.
What's the bundle size impact?
p5.min.js is ~180kb raw, ~50kb gzipped. If you lazy-load it and only users who scroll to that section download it, the hit is minimal. Your initial bundle doesn't bloat.
Can I draw to an image and export it?
Yes. Use `p.saveCanvas()` or render to an off-screen canvas and call `canvas.toDataURL()`. Useful for generating unique cover images or social previews programmatically.
Does it work on mobile?
Yes, but throttle harder. Mobile GPUs are weaker. Use 20fps instead of 30. Lower canvas resolution. Check `navigator.hardwareConcurrency` and disable on 2-core devices.
Can I combine p5 with Three.js on the same page?
Yes, but isolate them in separate containers. p5 uses its own WebGL context. Three.js uses another. No conflict if you manage refs carefully.
The Bottom Line
p5.js doesn't have the prestige of Three.js or the performance of raw WebGL. But it has something better: speed-to-ship. You sketch an idea in 20 minutes. You add it to a marketing site in an hour. Visitors feel motion. They remember it. For conversion-driven sites where motion matters and bloat kills, that's the winning trade.
Start with a simple noise field. Lazy-load it. Measure Core Web Vitals. If it holds up (it will), expand to particles or mouse trails. For deeper pattern on how generative art pairs with smooth scroll and sticky sections, see how Velocity X templates layer motion for maximum conversion. And if you want the lower-level shader approach, check Shader Park for procedural backgrounds that scale to any resolution.