skills.rest
zangjeicy
zangjeicyCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generate interactive and generative visual art with p5.js and export to PNG, GIF, SVG, or MP4.

Updated Jul 13, 2026
Search Tags:#visualization#animation#canvas#webgl#p5js#creative-coding#generative-art
One-click install
npx skills add https://github.com/zangjeicy/Hermes --skill p5js-zangjeicy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/zangjeicy/Hermes/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/zangjeicy/Hermes --skill p5js-zangjeicy

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the friction of creating high-quality, interactive, and generative visual art by providing a complete production pipeline that handles everything from creative concept to final export.

Core Features & Use Cases

  • Generative Art Pipeline: Create procedural visual compositions, particle systems, and noise-driven animations.
  • Interactive Experiences: Build browser-based sketches that respond to mouse, keyboard, touch, or audio input.
  • Professional Export: Generate high-quality output in PNG, GIF, SVG, or MP4 formats, including headless high-resolution rendering.
  • Use Case: Quickly prototype a data visualization or a generative background for a website, then export it as a self-contained, performant HTML file.

Quick Start

Use the p5js skill to generate a particle system sketch with a dark theme and export it as a high-resolution PNG file.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate interactive visual art and export it directly from a browser pipeline?▼

Generative visual art is created using the p5.js library within a browser-based production pipeline. It supports 2D/3D rendering and shader effects, allowing you to code, preview, and export interactive sketches to media formats like PNG, GIF, SVG, or MP4.

Can I use canvas and WebGL to build audio-reactive motion graphics?▼

Canvas and WebGL are fully supported for building audio-reactive motion graphics. The skill handles mouse, keyboard, touch, and audio input to create interactive experiences that render directly in the browser using p5.js.

What is the best way to automate high-resolution headless export for generative art?▼

Headless high-resolution export for generative art is automated using Puppeteer and ffmpeg. This pipeline captures your browser-based p5.js sketches and converts them into professional output formats including PNG, GIF, SVG, and MP4 files.

Does this creative coding workflow support procedural particle systems and data visualization?▼

Procedural particle systems and data visualization are supported natively. The creative coding workflow generates noise-driven animations and procedural visual compositions, which can be exported as self-contained, performant HTML files.

Do I need ffmpeg and Puppeteer to run p5.js sketches and output media files?▼

Ffmpeg and Puppeteer are required dependencies for the headless export pipeline. They enable the automated conversion of interactive p5.js browser sketches into high-quality media files like MP4 and GIF.

When should I not use a browser-based pipeline for generative art?▼

A browser-based pipeline for generative art may not suit projects requiring server-side rendering without a headless browser environment. It is specifically designed for browser-first interactive sketches using p5.js rather than native desktop executables.

Related Skills

Explore More Design & Creative Skills→
heximaoheximao

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
jaechang-hitsjaechang-hits
298

Plotly Interactive Plots

Generate interactive Plotly charts with hover, zoom, and pan.

Community
Intermediate
nyxoraAInyxoraAI
5

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
Thanh-aperoThanh-apero
1

ck:shader

Develop custom GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Advanced