skills.rest
Junkfooooood
JunkfoooooodCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Create generative art, interactive sketches, and shader animations as self-contained p5.js HTML files.

Updated May 4, 2026
Search Tags:#p5.js#creative coding#generative art#data visualization#animation#shaders#webgl
One-click install
npx skills add https://github.com/Junkfooooood/hermes-governance --skill p5js-junkfooooood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/Junkfooooood/hermes-governance/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/Junkfooooood/hermes-governance --skill p5js-junkfooooood

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning a creative idea into polished browser-based visual art requires deep knowledge of p5.js APIs, color theory, animation timing, and export pipelines. This Skill provides a complete production workflow that takes a text prompt from concept to a finished, exportable generative art piece. ## Core Features & Use Cases - Seven Creation Modes: Generative art, data visualization, interactive experiences, motion graphics, 3D WebGL scenes, image processing, and audio-reactive visuals. - Full Export Pipeline: Output as self-contained HTML, PNG stills, GIF loops, MP4 video via Puppeteer and ffmpeg, or SVG vector files for print. - Deep Reference Library: Ten reference documents covering noise fields, particle systems, easing functions, GLSL shaders, color palettes, typography, and performance optimization. - Use Case: Ask for "a generative art piece with flowing particles in warm sunset colors" and receive a seeded, reproducible HTML sketch with a designed palette, layered composition, and keyboard shortcuts for PNG/GIF export. ## Quick Start Use the p5js skill to create an interactive generative art sketch with a flow field particle system 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 generates a single self-contained HTML file with inline p5.js code. It uses seeded randomness via randomSeed() and noiseSeed() so the same seed always reproduces the same output, and includes keyboard shortcuts for exporting PNG or GIF.

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

Use the bundled render.sh script, which captures frames headlessly via Puppeteer and encodes them with ffmpeg. 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?▼

p5.js 1.11.3 is the default because it is stable and has the broadest library compatibility, including p5.js-svg. Use p5.js 2.x only when you need its features like 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 avoid retina overdraw, use Math.* functions 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 library with createCanvas(w, h, SVG), then calling save(). It only supports vector operations, so loadPixels(), blendMode(), filters, and WebGL do not work, and it requires p5.js 1.x rather than 2.x.

How do I make p5.js sketches reproducible across runs?▼

Call randomSeed(seed) and noiseSeed(seed) in setup so all random() and noise() calls become deterministic. For platforms like fxhash, replace p5's PRNG with the platform's deterministic random function such as $fx.rand.

Related Skills

Explore More Design & Creative Skills→
zli5460zli5460
2

ascii-video

Convert video and audio files into animated ASCII art sequences.

Community
Intermediate
4asaanAI4asaanAI

ckm:banner-design

Design multi-platform banners with exact dimensions and export PNGs.

Community
Advanced
Sajra12Sajra12

brandkit

Generate brand guidelines with logos, color systems, typography, and mockups.

Community
Advanced
blueskies1818blueskies1818
1

manim-video

Automate Manim Community Edition pipelines to generate mathematical animations.

Community
Advanced