p5js

Build and export p5.js generative art projects as HTML, PNG, GIF, MP4, or SVG.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/jacardl/New-Radar --skill p5js-jacardl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/jacardl/New-Radar/tree/main/backend/frameworks/hermes-agent/skills/creative/p5js
Command: npx skills add https://github.com/jacardl/New-Radar --skill p5js-jacardl

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Production pipelines for browser-based generative art often require boilerplate, tooling, and scaffolding; this Skill provides a ready-to-use, self-contained p5.js workflow that helps artists ship interactive sketches quickly.

Core Features & Use Cases

  • Self-contained HTML file per project (no build step required) with CDN-loaded p5.js.
  • Six-stage production pipeline: CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY to align creative and technical decisions.
  • Export flexibility: HTML, PNG, GIF, MP4, and SVG outputs, plus headless batch rendering for automated workflows.

Quick Start

Open templates/viewer.html to start, replace the algorithm and parameters with your own sketch, and use the built-in export and seed controls to iterate.

Frequently Asked Questions about p5js

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

FAQPage Schema
What is the best way to ship browser-based generative art without a build step?

The Skill provides a self-contained p5.js pipeline to build, run, and export generative art as HTML, PNG, GIF, MP4, or SVG, handling interactive sketches, data visualizations, and shader-driven WebGL visuals.

Do I need ffmpeg and Puppeteer to automate p5.js exports?

Yes, you can use p5.js for WebGL shaders and 3D scenes. The pipeline supports shader-driven visuals and 3D rendering, allowing you to prototype and export complex generative graphics directly from the browser.

Do I need ffmpeg and Puppeteer to automate p5.js exports?

Yes, you can use p5.js for WebGL shaders and 3D scenes. The pipeline supports shader-driven visuals and 3D rendering, allowing you to prototype and export complex generative graphics directly from the browser.

How do I start a generative art project using this p5.js pipeline?

To start a generative art project, open the provided viewer.html template, replace the algorithm and parameters with your own sketch, and use the built-in export and seed controls to iterate through the six-stage production workflow.

Does this p5.js workflow support SVG export for vector graphics?

Yes, the p5.js workflow supports SVG export for vector graphics. This allows you to output scalable generative art and data visualizations alongside standard HTML, PNG, and video formats.