p5js

Generate p5.js sketches with HTML, PNG, GIF, MP4, and SVG export options.

Updated Sep 1, 2021
One-click install
npx skills add https://github.com/unclehowell/unclehowell --skill p5js-unclehowell
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/unclehowell/unclehowell/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/unclehowell/unclehowell --skill p5js-unclehowell

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill provides a complete, self-contained p5.js sketching pipeline that lets artists and developers quickly produce browser-based generative art without setup overhead, enabling repeatable workflows from concept to export.

Core Features & Use Cases

  • Self-contained HTML sketches that run in any modern browser.
  • Supports multiple modes: generative art, data visualization, interactive experiences, 3D WebGL scenes, and audio-reactive visuals; export options include HTML, PNG, GIF, MP4, and SVG.
  • Includes a structured workflow template (templates/viewer.html) and reference materials for core APIs, tools, and troubleshooting.

Quick Start

Regenerate a browser-based p5.js sketch from a seed and export a PNG for quick validation.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I export generative art from a p5.js sketch to PNG or SVG?

You can export generative art to PNG, SVG, GIF, MP4, or HTML using a deterministic headless pipeline. It leverages noLoop and redraw controls to capture precise frames, producing self-contained output files directly from your browser-based p5.js sketch.

What is a self-contained p5.js sketch workflow for generative art?

A self-contained p5.js sketch workflow bundles your generative art code into a single HTML file running in any modern browser. It provides structured templates and API references, eliminating setup overhead and enabling repeatable generation from concept to final export.

Can I create 3D WebGL and audio-reactive visuals with p5.js?

Yes, p5.js supports creating 3D WebGL scenes and audio-reactive visuals. The sketching pipeline includes multiple modes for interactive experiences and data visualization, allowing you to render complex animations directly in the browser.

Do I need Puppeteer to automate p5.js data visualization exports?

Yes, Puppeteer is required as a dependency to automate the deterministic headless export of p5.js data visualizations. It drives the browser environment to execute noLoop and redraw commands, ensuring repeatable PNG, GIF, or MP4 frame captures.

Why does my headless p5.js sketch export produce inconsistent frames?

Inconsistent frame exports occur when sketches lack deterministic controls. The pipeline solves this by enforcing noLoop and redraw logic within the headless Puppeteer environment, ensuring your generative art captures remain stable and perfectly repeatable across validation runs.