skills.rest
superfhp
superfhpCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generates interactive and generative visual art as self-contained p5.js HTML sketches.

Updated May 13, 2026
Search Tags:#p5.js#creative coding#generative art#shaders#webgl#interactive visualization#canvas animation
One-click install
npx skills add https://github.com/superfhp/lumi-agent-body --skill p5js-superfhp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/superfhp/lumi-agent-body/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/superfhp/lumi-agent-body --skill p5js-superfhp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating browser-based generative art, interactive visualizations, and motion graphics requires deep knowledge of canvas rendering, animation timing, color theory, and export pipelines. This Skill provides a complete production workflow that turns text prompts into polished p5.js sketches without manual boilerplate. ## 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. - Deterministic rendering: seeded randomness and a noLoop-based headless capture pipeline guarantee reproducible, frame-perfect output. - Use Case: Ask for a flow-field particle animation with a custom palette, receive a single HTML file that runs in any browser, then export it as a 30-second MP4 using the bundled render script. ## Quick Start Create a p5.js generative art sketch of flowing particles with a warm sunset palette and export it as a PNG.

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?▼

Describe your concept and the Skill produces a single self-contained HTML file with inline p5.js code. It uses seeded randomness, custom color palettes, and layered composition, and opens directly in any browser with no build step.

How do I export a p5.js sketch to MP4 video?▼

Run the bundled render.sh script with your sketch HTML and output filename. It captures frames headlessly via Puppeteer and encodes them with ffmpeg into H.264 MP4 at your chosen resolution, framerate, and duration.

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

p5.js 1.x (1.11.3) is the default for stability and library compatibility. Use 2.x only when you need async setup, OKLCH color modes, splineVertex, shader modify API, or the p5.brush natural media library.

Why does my p5.js sketch run slowly in the browser?▼

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

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

Yes, using the p5.js-svg renderer with createCanvas in SVG mode. It supports vector operations like lines and shapes but not pixel manipulation, blend modes, or WebGL, and requires p5.js 1.x.

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

Call randomSeed and noiseSeed with the same seed value in setup so every random and noise call becomes deterministic. 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
SignmanalSignmanal
1

manim-video

Generate Manim Python code and render animated explainer videos.

Community
Advanced
rheadshrheadsh
38

td-glsl

Create and modify GLSL shaders for TouchDesigner's visual programming environment.

Community
Intermediate