skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

p5js

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

Updated Aug 22, 2026
Search Tags:#p5.js#creative coding#generative art#data visualization#video export#canvas animation#webgl shaders
One-click install
npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill p5js-vivekgoquest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/vivekgoquest/hermes-agent-stable/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill p5js-vivekgoquest

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 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, performance optimizations, and 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 headless rendering using noLoop() and redraw() for frame-perfect video output. - Comprehensive References: Ten reference documents covering noise fields, particle systems, GLSL shaders, easing functions, color palettes, typography, and performance troubleshooting. - Use Case: Ask for a generative art piece with a specific mood and color palette, and receive a seeded, reproducible HTML sketch with layered composition, custom particle behaviors, and keyboard shortcuts for PNG/GIF export. ## Quick Start Create a p5.js generative art sketch of a flowing particle system 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?▼

Write a single HTML file loading p5.js from a CDN, define a seeded setup() with randomSeed() and noiseSeed(), and render in draw() using noise fields, particle systems, and HSB color palettes. Export stills with saveCanvas() or animations with saveGif().

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

Capture frames headlessly with Puppeteer using noLoop() and redraw() for deterministic frame control, then encode the PNG sequence with ffmpeg using libx264. The render.sh script automates this full pipeline from HTML to MP4.

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

Use p5.js 1.x (1.11.3) by default for stability and broadest library compatibility, including p5.js-svg export. Choose 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) to prevent retina overdraw, 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 library with createCanvas(w, h, SVG) and 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 content. 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
refly-airefly-ai
199

video-creator

Generates short AI-powered videos and scripts for social media platforms.

Official
Intermediate
SignmanalSignmanal
1

manim-video

Generate Manim Python code and render animated explainer videos.

Community
Advanced
THTProtocolTHTProtocol

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced