skills.rest
BermudaLocals
BermudaLocalsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

p5js

Generate browser-ready p5.js sketches as self-contained HTML files.

1|1|Updated Apr 26, 2026
Search Tags:#interactive#webgl#p5js#creative-coding#generative-art#visual-arts
One-click install
npx skills add https://github.com/BermudaLocals/hermes-agent-lite --skill p5js-bermudalocals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/BermudaLocals/hermes-agent-lite/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/BermudaLocals/hermes-agent-lite --skill p5js-bermudalocals

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Production pipeline for interactive and generative visual art using p5.js. The agent handles the full pipeline: creative concept, code generation, preview, export, and iterative refinement. Output is a single self-contained HTML file that runs in any browser — no build step, no server, no dependencies beyond a CDN script tag.

Core Features & Use Cases

  • Self-contained HTML delivery: each project outputs a single HTML file with inline p5.js logic and optional assets.
  • Creative coding workflow: supports generative art, data visualization, interactive experiences, 3D/WebGL scenes, and audio-reactive visuals.
  • Export-ready pipeline: includes PNG, GIF, MP4, and SVG/vector outputs via built-in or headless export paths; comprehensive references guide implementation.

Quick Start

Create a minimal HTML file that loads p5.js from a CDN and runs a simple sketch to verify the pipeline.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I create browser-ready generative art with p5.js?▼

To create browser-ready generative art with p5.js, this Skill outputs a single, self-contained HTML file with inline logic loaded via a CDN script tag, requiring no build step or server to run in any browser.

Do I need a local server to run p5.js sketches?▼

You do not need a local server to run p5.js sketches, because the pipeline delivers a self-contained HTML file that loads p5.js directly from a CDN and runs independently in any browser environment.

Can I export p5.js animations as MP4, GIF, or PNG files?▼

You can export p5.js animations and sketches as MP4, GIF, PNG, or SVG vector outputs using built-in export paths and headless rendering tools provided by the pipeline dependencies.

Does this p5.js workflow support WebGL and 3D interactive scenes?▼

This p5.js workflow supports WebGL and 3D interactive scenes, handling creative concepts for generative art, data visualization, and audio-reactive visuals within the single-file HTML delivery pipeline.

What is the best way to iteratively refine and preview p5.js code?▼

The best way to iteratively refine and preview p5.js code is through the built-in creative coding workflow, which handles concept generation, code creation, and headless preview before final HTML export.

What are the limitations of using a single-file HTML pipeline for creative coding?▼

A limitation of the single-file HTML pipeline for creative coding is that complex projects with heavy external assets or multiple scripts may become difficult to manage compared to modular build-step environments.

Related Skills

Explore More Design & Creative Skills→
gotargotar
26

algorithmic-art

Generate original algorithmic art in the browser with p5.js and seeded randomness.

Community
Basic
no-problem-devno-problem-dev

store-icon

Convert SVG icon designs into Apple HIG-compliant 1024x1024 PNG icons.

Official
Intermediate
Tommy-ywTommy-yw
539

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
magnus919magnus919
40

three

Build browser-based Three.js and WebGL scenes with vanilla JavaScript.

Community
Basic