p5js

Generate self-contained p5.js HTML sketches for generative art workflows.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The p5.js Production Pipeline provides a structured workflow to transform prompts into browser-based generative art sketches, eliminating guesswork and repetitive setup.

Core Features & Use Cases

  • Self-contained HTML sketches with optional 2D/3D rendering, shaders, and visual effects
  • Modes for Generative art, Data visualization, Interactive experiences, Animation, 3D scenes, Image processing, and Audio-reactive visuals
  • Export options including HTML, PNG, GIF, MP4, and SVG, plus headless export tooling

Quick Start

Describe your concept and the pipeline will generate a self-contained p5.js sketch you can preview and export.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate p5.js sketches from text prompts?

To generate p5.js sketches from text prompts, describe your creative concept and the pipeline outputs a self-contained, browser-ready HTML file. This eliminates manual setup and boilerplate coding for generative art.

Can I export p5.js animations to GIF or MP4?

Yes, you can export p5.js animations to GIF or MP4. The workflow includes headless export tooling that renders interactive visuals into static PNG, animated GIF, MP4, or SVG formats.

Does the p5.js workflow support 3D rendering and shaders?

The p5.js workflow supports 3D rendering and shaders. You can create self-contained HTML sketches with optional 3D scenes, visual effects, and shader experiments.

What is the best way to create reproducible generative art in p5.js?

The best way to create reproducible generative art in p5.js is using a structured pipeline that applies reproducible seeds. This ensures your data-driven art and interactive visuals generate identically every time.

Do I need Puppeteer to export p5.js sketches?

Yes, you need Puppeteer to export p5.js sketches. Puppeteer provides the headless browser automation required to render and capture your interactive art into formats like PNG, GIF, and MP4.

Can I build audio-reactive visuals and data visualizations with p5.js?

You can build audio-reactive visuals and data visualizations with p5.js. The workflow includes dedicated modes for data-driven art, interactive experiences, and audio-reactive visual generation.