skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generates interactive and generative p5.js sketches exported as HTML, PNG, GIF, MP4, or SVG.

1|Updated Aug 6, 2026
Search Tags:#creative coding#generative art#visualization#animation#shaders#webgl#p5js
One-click install
npx skills add https://github.com/agtktID/indagis-agent --skill p5js-agtktid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/agtktID/indagis-agent/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/agtktID/indagis-agent --skill p5js-agtktid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating polished browser-based generative art and interactive visualizations requires deep knowledge of p5.js APIs, color theory, animation techniques, and export pipelines. This Skill handles the full production pipeline from creative concept to exported media, producing self-contained HTML sketches that run in any browser. ## Core Features & Use Cases - Seven Creation Modes: Generative art, data visualization, interactive experiences, animation, 3D WebGL scenes, image processing, and audio-reactive visuals. - Multi-Format Export: Output as self-contained HTML, PNG stills, GIF loops, MP4 video via Puppeteer and ffmpeg, or SVG vectors for print. - Deterministic Headless Rendering: Frame-perfect video capture using noLoop() plus redraw() with the bundled export-frames.js script. - Use Case: Ask for a flow-field particle animation with a custom warm palette, and receive a complete HTML file with seeded randomness, keyboard export shortcuts, and layered offscreen-buffer composition ready to open in a browser. ## Quick Start Create a p5.js generative art sketch of flowing particles with a sunset color palette and export it as a 10-second MP4 video.

Frequently Asked Questions about p5js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create generative art with p5.js?▼

Write a single self-contained HTML file loading p5.js from a CDN, define a seeded setup() with randomSeed() and noiseSeed(), and render in draw(). This Skill generates the complete sketch including custom palettes, particle systems, and export keyboard shortcuts.

How to export p5.js animation as MP4 video?▼

Capture frames headlessly with the bundled export-frames.js Puppeteer script, then encode with ffmpeg using libx264. The sketch must call noLoop() in setup() and set window._p5Ready for deterministic frame-by-frame capture.

Should I use p5.js 1.x or 2.x for my sketch?▼

p5.js 1.x (1.11.3) is the default with stable APIs and broadest library compatibility. Use 2.x only when you need async setup(), OKLCH color modes, splineVertex(), or the p5.brush natural media library.

Why is my p5.js sketch running slowly?▼

The Friendly Error System adds up to 10x overhead, so set p5.disableFriendlyErrors = true before setup(). Also call pixelDensity(1), use Math.* instead of p5 wrappers in hot loops, and batch particles with beginShape(POINTS) or pixel buffers.

Can p5.js sketches be exported as SVG for print?▼

Yes, using the p5.js-svg 1.6.0 renderer with createCanvas(w, h, SVG), but only vector operations work. Pixel manipulation, blendMode(), filters, and WebGL are unsupported, and it requires p5.js 1.x rather than 2.x.

How do I make p5.js generative art reproducible?▼

Call randomSeed(seed) and noiseSeed(seed) in setup() so identical seeds produce identical output. Never use Math.random() for visual elements; for platforms like fxhash, replace p5's PRNG with the platform's deterministic random function.

Related Skills

Explore More Design & Creative Skills→
devMoezdevMoez
1

p5js

Generate browser-ready p5.js sketches and export them as PNG, GIF, MP4, or SVG.

Community
Advanced
matevipmatevip
1.1k

p5js

Generates interactive p5.js sketches, generative art, and WebGL visuals exported as HTML, PNG, GIF, or MP4.

Community
Advanced
automatedigitalautomatedigital
1

manim-video

Generate animated explainer videos with Manim code from text prompts.

Official
Advanced
oakossoakoss
14

threejs

Create 3D scenes with Three.js, WebGPU, and React Three Fiber.

Official
Advanced