skills.rest
musical-basics
musical-basicsCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Execute browser-based generative art workflows with p5.js from a single HTML file.

Updated Apr 11, 2026
Search Tags:#browser#headless#export#p5js#creative-coding#generative-art
One-click install
npx skills add https://github.com/musical-basics/hermes-build-2 --skill p5js-musical-basics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/musical-basics/hermes-build-2/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/musical-basics/hermes-build-2 --skill p5js-musical-basics

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a turnkey pipeline for creating and exporting browser-based generative art with p5.js using a single self-contained HTML file, eliminating heavy setup and server requirements.

Core Features & Use Cases

  • Self-contained HTML file per project with CDN-based p5.js, enabling immediate visualization without a build step.
  • Supports multiple creative modes: Generative art, data visualization, interactive experiences, 3D scenes, image processing, and audio-reactive visuals.
  • Multi-format export capability: HTML, PNG, GIF, MP4, SVG, plus headless batch/export options for automation.

Quick Start

Open the sample HTML, load the inline p5.js sketch, and begin iterating to produce a self-contained visual piece.

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 or SVG without a local server?▼

You can export p5.js sketches to PNG, SVG, or other formats using deterministic headless export via Puppeteer. This pipeline bundles your sketch into a single self-contained HTML file using a CDN link, eliminating the need for a local server or build step.

Can I create generative art from text prompts using p5.js?▼

Yes, you can generate browser-based generative art from prompts using p5.js. The workflow packages the sketch into a single HTML file, supporting creative coding projects, data visualizations, and interactive experiences for immediate visualization.

Does headless rendering work for batch exporting multiple p5.js visualizations?▼

Headless rendering supports batch export and automation for multiple p5.js visualizations. By utilizing Puppeteer, the pipeline executes deterministic headless exports in formats like HTML, PNG, GIF, MP4, and SVG from a single self-contained HTML file.

What is the best way to set up a p5.js creative coding project without a build step?▼

The best way to set up a p5.js project without a build step is using a single self-contained HTML file with CDN-based p5.js. This turnkey pipeline provides immediate visualization and supports generative art, 3D scenes, image processing, and audio-reactive visuals.

Do I need Node.js or a local web server to run p5.js interactive experiences?▼

No, you do not need a local web server or Node.js environment to run p5.js interactive experiences. The workflow relies on a self-contained HTML file with CDN rendering, allowing you to open the sample HTML directly and begin iterating immediately.

Related Skills

Explore More Design & Creative Skills→
shuff57shuff57

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
HarriesHarries

p5js

Generate p5.js generative art sketches with headless export to HTML, PNG, GIF, MP4, or SVG.

Community
Advanced
Tommy-ywTommy-yw
539

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
PiaoxuemoliPiaoxuemoli

pretext

Measure, layout, and render text using canvas without the DOM.

Community
Advanced