skills.rest
LamseyahElias
LamseyahEliasCOMMUNITY
Explore all skills by this author →
GitHub

p5js

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

Updated Jun 11, 2026
Search Tags:#interactive#visualization#webgl#export#p5js#generative-art
One-click install
npx skills add https://github.com/LamseyahElias/jarvis-cloud-v2 --skill p5js-lamseyahelias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/LamseyahElias/jarvis-cloud-v2/tree/main/hermes-agent/skills/creative/p5js
Command: npx skills add https://github.com/LamseyahElias/jarvis-cloud-v2 --skill p5js-lamseyahelias

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The p5.js Skill provides a ready-to-use production pipeline to turn ideas into browser-based generative art and interactive visuals, reducing setup time and enabling rapid iteration.

Core Features & Use Cases

  • Production pipeline for interactive and generative art using p5.js that outputs a self-contained HTML file, with optional data visualization, 3D scenes, shader effects, and audio-reactive visuals; exports include HTML, PNG, GIF, MP4, and SVG.
  • Includes guidance on creative process, design decisions, and export strategies, plus references for core APIs and patterns (noise, particles, flow fields, typography, and WebGL).
  • Use case: craft a festival poster animation or an interactive data viz prototype that runs offline in any browser without build steps.

Quick Start

Open the included example HTML, customize the creative brief, and render/export your first browser-based sketch with one-click.

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 with p5.js?▼

You create browser-based generative art by rendering a self-contained HTML file with inline p5.js. The production pipeline supports interactive sketches, data visualizations, and 3D scenes without requiring external build steps or server setup.

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

Yes, you can export p5.js sketches to PNG, GIF, MP4, and SVG. The skill provides export strategies and a production pipeline that renders interactive visuals and animations directly from your browser-based sketch.

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

Yes, the p5.js pipeline supports WebGL and 3D scenes. It includes references for WebGL patterns and allows you to produce interactive 3D visuals and shader effects that run offline in any browser.

What is the best way to run interactive data visualizations offline?▼

The best way to run interactive data visualizations offline is generating a self-contained HTML file with inline p5.js. This approach requires no build steps and ensures your prototype runs in any browser environment.

Do I need Puppeteer to export p5.js animations?▼

Puppeteer is a required dependency for the p5.js skill's production pipeline. It facilitates the automated rendering and export of browser-based generative art into formats like MP4 and GIF.

How do I use flow fields and particles in p5.js generative art?▼

You use flow fields and particles in p5.js generative art by referencing the included API guides and patterns. The skill provides structured references for noise, particles, and typography to guide your creative process.

Related Skills

Explore More Design & Creative Skills→
paxlabs-incpaxlabs-inc
7

p5js

Generate interactive visual art with p5.js in self-contained HTML.

Community
Advanced
lucasfthlucasfth

p5js

Generate p5.js sketches and export them as PNG, GIF, MP4, or SVG.

Community
Advanced
InverterNetworkInverterNetwork

p5js

Generate p5.js sketches for interactive art and export as PNG, GIF, or MP4.

Official
Advanced
HuskyDannyHuskyDanny

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced