skills.rest
jay-babu
jay-babuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

p5js

Create browser-based generative art pipelines with p5.js in a single HTML file.

10|3|Updated Nov 5, 2021
Search Tags:#interactive#webgl#p5js#creative-coding#generative-art#shader
One-click install
npx skills add https://github.com/jay-babu/dotfiles --skill p5js-jay-babu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/jay-babu/dotfiles/tree/main/private_dot_hermes/skills/creative/p5js
Command: npx skills add https://github.com/jay-babu/dotfiles --skill p5js-jay-babu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Designers and developers often struggle to transform prompts or ideas into browser-ready, visually compelling generative art. This Skill provides a production-style pipeline that coordinates concept, code generation, live preview, and export for p5.js sketches.

Core Features & Use Cases

  • Self-contained HTML output: single-file sketches that run in any browser with optional CDN scripts.
  • Multi-mode generation: supports generative art, data visualization, interactive experiences, 3D scenes, and shader effects.
  • Flexible export formats: HTML, PNG, GIF, MP4, and SVG, with headless export pipelines for batch rendering.

Quick Start

Open the HTML file of a p5.js sketch and begin iterating; the live preview updates as you adjust concept and code.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I create browser-based generative art from a prompt using p5.js?▼

To create browser-based generative art with p5.js, this Skill outputs a self-contained HTML file embedding p5.js via CDN, ready for immediate browser execution and live preview iteration.

Can I export p5.js sketches to PNG, GIF, MP4, or SVG?▼

Yes, p5.js sketches can be exported to PNG, GIF, MP4, and SVG formats. This Skill includes optional headless export scripts using Puppeteer to enable batch rendering pipelines.

Does this p5.js pipeline support WebGL shaders and 3D scenes?▼

Yes, this p5.js pipeline supports WebGL shader experiments, 3D scenes, interactive visuals, and data-driven visualizations. It generates single-file HTML sketches that run in any browser.

Do I need Puppeteer to generate p5.js HTML sketches?▼

Puppeteer is only required for optional headless export pipelines like batch rendering to PNG or MP4. The core p5.js sketch generation itself only requires a single HTML file with a CDN script.

What is the best way to structure a p5.js project for interactive visuals?▼

The best way to structure a p5.js project is using a self-contained HTML file with optional folders for scripts, references, and assets as directed by SKILL.md, ensuring browser-ready execution.

Why does my p5.js sketch need a CDN script instead of a local library?▼

Your p5.js sketch uses a CDN script to keep the HTML output entirely self-contained and browser-ready. This approach ensures the single-file sketch runs in any browser without local dependencies.

Related Skills

Explore More Design & Creative Skills→
zerwizzerwiz

p5js

Creates interactive p5.js sketches with deterministic seeding and optional headless export via Puppeteer and ffmpeg.

Community
Advanced
LamseyahEliasLamseyahElias

p5js

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

Community
Advanced
BermudaLocalsBermudaLocals
1

p5js

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

Community
Advanced
AlvaroBianoAlvaroBiano

p5js

Create self-contained p5.js generative art projects in a single HTML file.

Community
Advanced