skills.rest
john-data-chen
john-data-chenCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generate browser-based generative art as a self-contained HTML file.

2|Updated Apr 25, 2026
Search Tags:#interactive#canvas#webgl#p5js#generative-art#visual-art#shader
One-click install
npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill p5js-john-data-chen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/john-data-chen/hermes-agent-backup/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/john-data-chen/hermes-agent-backup --skill p5js-john-data-chen

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 browser-based, generative art using a single self-contained HTML file, removing the need for complex builds or local server setups.

Core Features & Use Cases

  • Single-file, self-contained HTML sketches that run in any modern browser with no build step.
  • Modes cover Generative art, Data visualization, Interactive experience, Animation, 3D WebGL scenes, image processing, and audio-reactive visuals.
  • Export options include HTML, PNG, GIF, MP4, and SVG, with headless export support for reproducible video frames.

Quick Start

Open the HTML file in a modern browser and export outputs as PNG, GIF, or MP4 after customizing the sketch.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I create generative art with a self-contained HTML file?▼

To create generative art with a self-contained HTML file, you use a production-ready pipeline that builds single-file sketches. These sketches run in any modern browser with no build step, allowing you to immediately render visual art.

Can I export p5.js sketches to video or image formats?▼

You can export p5.js sketches to multiple formats including PNG, GIF, MP4, and SVG. The pipeline supports headless rendering via Puppeteer to produce deterministic video frames for reproducible outputs.

Does this pipeline support 3D WebGL and audio-reactive visual art?▼

Yes, the pipeline supports 3D WebGL scenes and audio-reactive visual art. It also covers generative art, data visualization, interactive experiences, animation, and image processing modes within a single HTML file.

Do I need a local server setup to run interactive canvas sketches?▼

No, you do not need a local server setup or complex builds to run interactive canvas sketches. The toolkit generates self-contained HTML files that execute directly in any modern browser for immediate interactive experiences.

What is the best way to automate headless export for browser art?▼

The best way to automate headless export for browser art is using Puppeteer. It enables deterministic export of video frames and static images, ensuring reproducible results across different rendering environments without manual browser interaction.

Related Skills

Explore More Design & Creative Skills→
zeronx798zeronx798

p5js

Generate interactive visual art with p5.js in browsers.

Community
Advanced
LamseyahEliasLamseyahElias

p5js

Generate browser-based generative art and interactive visuals with p5.js.

Community
Advanced
dalehurleydalehurley
2

web-artifacts-builder

Bundle React apps into a single HTML artifact with inlined JavaScript and CSS.

Community
Advanced
nyxoraAInyxoraAI
5

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced