p5js

Generate p5.js sketches from text prompts and export them as HTML or MP4.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps you turn creative prompts into production-grade p5.js sketches that render striking interactive or generative visuals, then export them to shareable files without complex setup.

Core Features & Use Cases

  • End-to-end sketch production pipeline: concept-to-code-to-preview-to-export workflow for interactive and generative visual art.
  • Multi-mode visual generation: supports generative art, data visualization, interactive experiences, motion graphics, 3D scenes, image processing, and audio-reactive visuals.
  • Deterministic exports: supports PNG/GIF and headless high-res MP4 workflows via Puppeteer + ffmpeg, plus optional SVG output.

Quick Start

Use the p5js skill to create a self-contained p5.js HTML sketch that renders interactive generative art and export a high-quality MP4 using headless capture.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I export p5.js sketches to MP4 video?

You can export p5.js sketches to MP4 video using a deterministic headless rendering pipeline. The process utilizes Puppeteer for headless browser capture and ffmpeg for video encoding, producing high-resolution MP4 files from your interactive visual art.

Can I generate generative art from text prompts without manual coding?

Yes, generative art can be generated directly from text prompts. The system translates creative prompts into production-grade p5.js sketches, outputting a self-contained HTML artifact that renders striking interactive or generative visual compositions automatically.

Does this p5.js pipeline support WebGL and 3D scenes?

Yes, the p5.js pipeline supports WebGL and 3D scenes. It handles multi-mode visual generation including 3D scenes, image processing, and audio-reactive visuals, alongside generative composition and data visualization within a single HTML artifact.

How do I set up headless rendering for interactive visuals?

Headless rendering for interactive visuals requires Puppeteer and ffmpeg dependencies. You provide a text prompt to generate a p5.js HTML sketch, which is then rendered deterministically in a headless browser environment to capture high-quality video or images.

What image formats can I export from p5.js besides MP4?

Besides MP4, you can export p5.js visuals to PNG and GIF formats. The pipeline also supports optional SVG output, allowing flexible format choices for sharing generative art, data visualizations, and motion graphics without complex setup.