skills.rest
luckybbjason1
luckybbjason1COMMUNITY
Explore all skills by this author →
GitHub

p5js

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

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

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 animated graphics typically requires deep knowledge of canvas rendering, animation timing, color theory, and export pipelines. This Skill provides a complete production workflow for building p5.js sketches from a text prompt, covering concept, code, preview, and export. ## Core Features & Use Cases - Generative and Interactive Art: Produces particle systems, flow fields, noise-based compositions, shader effects, kinetic typography, and 3D WebGL scenes as single self-contained HTML files. - Multi-Format Export: Exports sketches as PNG, GIF, MP4 (via Puppeteer frame capture and ffmpeg), or SVG for print and video workflows. - Deterministic Headless Rendering: Uses noLoop() plus redraw() with Puppeteer for frame-perfect video capture, including per-clip multi-scene architectures stitched with ffmpeg. - Use Case: Ask for an audio-reactive particle visualization and receive a ready-to-open HTML file with seeded randomness, a designed color palette, keyboard export shortcuts, and an MP4 render command. ## Quick Start Create a p5.js generative art sketch of a flowing particle field with a warm sunset palette and export it as a 10-second MP4.

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 setup() and draw() functions, and use randomSeed() plus noiseSeed() for reproducible output. This Skill generates the complete file from a text description, including palette, composition, and export shortcuts.

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

Capture frames with Puppeteer using the export-frames.js script, then encode with ffmpeg into H.264 MP4. The sketch must call noLoop() in setup and set window._p5Ready so each redraw() maps to exactly one captured frame.

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

Use p5.js 1.11.3 by default for stability and 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.* 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 renderer with createCanvas(w, h, SVG), then save('output.svg'). It only supports vector operations, so pixel manipulation, blend modes, filters, and WebGL do not work, and it requires p5.js 1.x.

Why does my headless p5.js capture produce duplicate frames?▼

Without noLoop(), the draw loop runs freely while Puppeteer screenshots are slow, causing skipped or duplicated frames. Add noLoop() and window._p5Ready = true in setup so the capture script controls frame advancement via redraw().

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
liumeixinliumeixin
4

manim-video

Automate mathematical and technical animation production with Manim Community Edition.

Community
Advanced
rheadshrheadsh
38

td-glsl

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

Community
Intermediate