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.