p5js

Create and export p5.js generative art sketches to HTML, PNG, GIF, MP4, and SVG.

6|Updated Apr 26, 2026

Search Tags:#interactive #visualization #browser #export #p5js #creative-coding #generative-art

Ready to run

npx skills add https://github.com/Strategic-Automation/arachne --skill p5js-strategic-automation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/Strategic-Automation/arachne/tree/main/src/arachne/skills/default/creative/p5js
Command: npx skills add https://github.com/Strategic-Automation/arachne --skill p5js-strategic-automation

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a production-ready pipeline to create, preview, and export browser-based generative art using p5.js, reducing boilerplate and enabling rapid iteration.

Core Features & Use Cases

Self-contained HTML-based projects with optional scripts, references, and assets support.
Built-in export options (HTML, PNG, GIF, MP4, SVG) and headless workflow for automated pipelines.
Reference libraries and workflow templates for 2D/3D rendering, noise, particles, shaders, and interactive visualizations.
Use cases include creative coding explorations, classroom demonstrations, and data-driven visuals.

Quick Start

Open the included HTML viewer template and start adjusting the sliders to generate live visual art.

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 PNG, GIF, MP4, and SVG formats?▼

Headless export of p5.js sketches to PNG, GIF, MP4, and SVG is handled via Puppeteer for deterministic, automated output. This pipeline enables production-ready rendering without manual browser interaction.

What is the best way to prototype generative art in a browser without writing boilerplate?▼

Using a self-contained HTML project template with p5.js provides a plug-and-play framework for generative art. It reduces boilerplate and enables rapid iteration for interactive visual experiments and seed-based exploration.

Does this p5.js workflow support interactive visualizations and 3D rendering?▼

Yes, the workflow includes reference libraries and templates supporting 2D/3D rendering, noise, particles, shaders, and interactive visualizations. It is designed for data-driven visuals and creative coding explorations.

Can I generate live visual art by adjusting parameters instead of editing code?▼

Yes, an included HTML viewer template features sliders for generating live visual art by adjusting parameters. This provides a ready-made interface for seed-based exploration and rapid prototyping.

Do I need Puppeteer installed to automate p5.js artwork exports?▼

Yes, Puppeteer is required as a dependency to run the deterministic headless export pipeline. It automates the rendering and capture of browser-based generative artwork across multiple file formats.

Why use a single HTML project file for generative art instead of a complex build setup?▼

A single HTML project file keeps sketches self-contained and portable while supporting optional scripts, references, and assets directories. This streamlines creative coding and classroom demonstrations without complex build configurations.