p5js

Generate interactive p5.js visual art with headless export to PNG, GIF, or MP4.

1|Updated Jul 31, 2026
One-click install
npx skills add https://github.com/icyzh/hermes-web --skill p5js-icyzh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/icyzh/hermes-web/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/icyzh/hermes-web --skill p5js-icyzh

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill solves the complexity of setting up and managing creative coding environments by providing a streamlined, browser-based pipeline for generating, previewing, and exporting high-quality visual art.

Core Features & Use Cases

  • Generative Art Pipeline: Rapidly prototype and refine procedural visual compositions, particle systems, and shader-based effects.
  • Multi-Format Export: Seamlessly export sketches as high-resolution PNGs, GIFs, or MP4 videos using a built-in headless rendering pipeline.
  • Interactive Experiences: Build mouse, keyboard, or audio-reactive sketches that run directly in any modern browser without external dependencies.

Quick Start

Use the p5js skill to generate a 30-second interactive particle system animation and export it as an MP4 video file.

Frequently Asked Questions about p5js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export generative art as a high-resolution MP4 video?

To export generative art as an MP4 video, the skill uses a headless rendering pipeline with Puppeteer for automated frame capture and ffmpeg for video encoding. This allows seamless export of browser-based p5.js sketches into high-resolution media files.

Does this skill support building audio-reactive 3D scenes using webgl?

Yes, this skill supports building audio-reactive 3D scenes using webgl. It generates procedural visual art using the p5.js library for browser-based rendering, enabling interactive experiences that react to mouse, keyboard, or audio inputs.

What is the best way to prototype procedural particle systems for a browser environment?

The best way to prototype procedural particle systems is by using this generative art pipeline, which provides a streamlined, browser-based environment to rapidly generate, preview, and refine procedural visual compositions without external dependencies.

Do I need Puppeteer and ffmpeg installed to capture p5.js animation frames?

Yes, you need Puppeteer and ffmpeg installed to capture p5.js animation frames. These dependencies power the built-in headless rendering pipeline required for automated frame capture and multi-format media export of your interactive sketches.

Can I use this skill for data visualization sketches that run directly in modern web browsers?

Yes, you can use this skill for data visualization sketches that run directly in modern web browsers. It supports diverse creative tasks including data visualization and interactive experiences without requiring external dependencies.

Why does generative art export require a structured workflow for canvas management and seeded randomness?

Generative art export requires a structured workflow for canvas management and seeded randomness to ensure deterministic visual outputs. This precise control is necessary for the automated headless frame capture pipeline to consistently render and stitch high-resolution media.