p5.js

Automate browser-based generative art creation with self-contained HTML output.

577|62|Updated May 15, 2026
One-click install
npx skills add https://github.com/agentic-in/elephant-agent --skill p5-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5.js
Source: https://github.com/agentic-in/elephant-agent/tree/main/packages/skills/builtin_packages/creative/p5js
Command: npx skills add https://github.com/agentic-in/elephant-agent --skill p5-js

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a production pipeline for browser-based visual art using p5.js, enabling artists and developers to craft interactive sketches without a build step and share self-contained outputs.

Core Features & Use Cases

  • Self-contained HTML output with inline p5.js for quick experimentation and sharing.
  • Supports multiple modes such as Generative art, Data visualization, Interactive experiences, Animation, 3D WebGL, image processing, and audio-reactive visuals.
  • End-to-end workflow guidance: concept, design, code, preview, export, and verification; headless export via Puppeteer for automation.

Quick Start

Open a new HTML file, include p5.js from CDN, and paste a minimal sketch into a script tag to render in the browser.

Frequently Asked Questions about p5.js

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

FAQPage Schema
How do I automate generative art creation with p5.js and export the results?▼

You can automate generative art creation with p5.js by using a headless Puppeteer pipeline to preview, export, and verify your sketches. This process generates a self-contained HTML file with inline p5.js code suitable for distribution without requiring a build step.

Can I build audio-reactive visuals and 3D animations in a browser using p5.js?▼

Yes, you can build audio-reactive visuals and 3D animations in a browser using p5.js. The Skill supports multiple modes including 3D WebGL, image processing, and audio-reactive visuals, allowing you to create interactive experiences directly in the browser.

Do I need a build step or complex environment to share interactive p5.js sketches?▼

No, you do not need a build step to share interactive p5.js sketches. This Skill provides a self-contained HTML output with inline p5.js from a CDN, enabling quick experimentation and easy sharing without complex environment setup or build tools.

What is the workflow for creating data visualization with p5.js?▼

The workflow for creating data visualization with p5.js involves an end-to-end process: concept, design, code, preview, export, and verification. You start by opening an HTML file, including p5.js, pasting your sketch into a script tag, and rendering it in the browser.

Does this p5.js pipeline support headless automation for exporting visual art?▼

Yes, the p5.js pipeline supports headless automation for exporting visual art by utilizing Puppeteer. This allows you to automate the rendering and export phases of your interactive sketches, ensuring a streamlined workflow from concept to final visual output.

Are there limitations when creating self-contained HTML files for generative art?▼

When creating self-contained HTML files for generative art, you are limited to browser-based rendering capabilities and the p5.js framework features. The pipeline relies on CDN inclusion for p5.js and headless Puppeteer automation, requiring an active browser environment for execution and export.