skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

p5js

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

Updated Sep 10, 2026
Search Tags:#creative coding#generative art#animation#canvas#shaders#webgl#p5js
One-click install
npx skills add https://github.com/loteiron/ZeusAgent --skill p5js-loteiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/loteiron/ZeusAgent/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/loteiron/ZeusAgent --skill p5js-loteiron

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating browser-based generative art, interactive visualizations, and canvas animations requires deep knowledge of p5.js APIs, color theory, animation techniques, and export pipelines. This Skill provides a complete production pipeline from creative concept to exported output, eliminating the need to manually research rendering patterns, shader code, or headless capture workflows. ## Core Features & Use Cases - Seven Creation Modes: Generative art, data visualization, interactive experiences, animation, 3D WebGL scenes, image processing, and audio-reactive visuals — all as single self-contained HTML files. - Full Export Pipeline: Export to PNG, GIF, MP4 (via Puppeteer frame capture and ffmpeg), or SVG, with deterministic frame-by-frame headless rendering support. - Deep Reference Library: Ten reference documents covering noise fields, particle systems, easing functions, color palettes, GLSL shaders, typography, and performance troubleshooting. - Use Case: Ask for a generative art piece with a specific mood and palette, and receive a seeded, reproducible HTML sketch with layered composition, custom particle behavior, and keyboard shortcuts for PNG/GIF export. ## Quick Start Use the p5js skill to create a generative art sketch with flowing particle trails and a warm sunset palette, exported as a self-contained HTML file.

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 HTML file loading p5.js from a CDN, call randomSeed() and noiseSeed() in setup() for reproducibility, and build your composition in draw(). This Skill generates the complete sketch including custom palettes, particle systems, and export shortcuts.

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

Capture frames headlessly with Puppeteer using scripts/export-frames.js, then encode with ffmpeg into H.264 MP4. The sketch must call noLoop() in setup() and set window._p5Ready = true so the capture script advances exactly one frame per screenshot.

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

Use p5.js 1.11.3 by default for stability and broadest library compatibility. Choose 2.x only when you need async setup(), OKLCH color modes, splineVertex(), shader .modify(), 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 export to SVG for print?▼

Yes, using the p5.js-svg 1.6.0 library with createCanvas(w, h, SVG), then save('output.svg'). It requires p5.js 1.x and only supports vector operations — no pixel manipulation, blend modes, filters, or WebGL.

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

Call randomSeed(seed) and noiseSeed(seed) in setup() so every random() and noise() call becomes deterministic. Never use Math.random() for visual elements. For fxhash platforms, replace p5's PRNG with $fx.rand for on-chain determinism.

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
lxt070409lxt070409
1

manim-video

Generate animated educational videos with Manim, LaTeX, and ffmpeg.

Community
Advanced
browser-usebrowser-use
20.4k

manim-video

Generate 3Blue1Brown-style educational animations from text prompts using Manim Community Edition.

Official
Advanced