skills.rest
MLT-OSS
MLT-OSSOFFICIAL
Explore all skills by this author →
WebsiteGitHub

p5js

Generates interactive and generative visual art as self-contained p5.js HTML sketches.

14|5|Updated Apr 9, 2026
Search Tags:#creative coding#generative art#visualization#animation#canvas#webgl#p5js
One-click install
npx skills add https://github.com/MLT-OSS/hermes-agent-go --skill p5js-mlt-oss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/MLT-OSS/hermes-agent-go/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/MLT-OSS/hermes-agent-go --skill p5js-mlt-oss

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating polished generative art, interactive visualizations, or browser-based animations with p5.js requires deep knowledge of canvas rendering, noise functions, particle systems, shaders, and export pipelines. This Skill provides a complete production pipeline that turns a text prompt into a finished, exportable visual piece. ## Core Features & Use Cases - Seven creation modes: generative art, data visualization, interactive experiences, motion graphics, 3D WebGL scenes, image processing, and audio-reactive visuals. - Full export pipeline: output as self-contained HTML, PNG stills, GIF loops, MP4 video via Puppeteer and ffmpeg, or SVG vector files. - Deep reference library: ten reference documents covering color systems, animation easing, typography, WebGL shaders, interaction, and troubleshooting. - Use Case: Ask for a generative art piece with a specific mood and palette, and receive a seeded, reproducible HTML sketch with layered composition, custom particle behavior, and keyboard shortcuts for PNG/GIF export. ## Quick Start Create a generative art p5.js sketch of flowing particle trails over a dark noise-textured background and export it as a PNG.

Frequently Asked Questions about p5js

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

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

Write a single self-contained HTML file loading p5.js from a CDN, then use randomSeed() and noiseSeed() for reproducibility, HSB color mode for palettes, and createGraphics() buffers for layered composition. This Skill generates the complete sketch from a text description.

How do I export a p5.js sketch to MP4 video?▼

Use the bundled render.sh script, which captures frames headlessly via Puppeteer and encodes them with ffmpeg into H.264 MP4. The sketch must call noLoop() in setup and set window._p5Ready so frames advance deterministically.

Should I use p5.js 1.x or 2.x for my sketch?▼

p5.js 1.x (1.11.3) is the default with the broadest library compatibility, including p5.js-svg. Use 2.x only when you need async setup(), OKLCH color modes, splineVertex(), or the p5.brush natural-media library.

Why is my p5.js sketch running slowly?▼

The Friendly Error System adds up to 10x overhead, so set p5.disableFriendlyErrors = true before setup. Also call pixelDensity(1), use Math.* functions instead of p5 wrappers in hot loops, and batch particles with beginShape(POINTS) or pixel buffers.

Can p5.js sketches be exported as SVG vector files?▼

Yes, using the p5.js-svg 1.6.0 library with createCanvas(w, h, SVG), but only vector operations work. Pixel manipulation, blendMode(), filters, and WebGL are unsupported, and it requires p5.js 1.x rather than 2.x.

How do I make p5.js generative art reproducible?▼

Call randomSeed(seed) and noiseSeed(seed) in setup so every random() and noise() call becomes deterministic. For platforms like fxhash, replace p5's PRNG with the platform's deterministic random function such as $fx.rand.

Related Skills

Explore More Design & Creative Skills→
ldzhhxxldzhhxx
1

p5js

Generate interactive p5.js visual art and export as HTML, image, or video.

Community
Advanced
matevipmatevip
1.1k

p5js

Generates interactive p5.js sketches, generative art, and WebGL visuals exported as HTML, PNG, GIF, or MP4.

Community
Advanced
NeoLabs-SystemsNeoLabs-Systems
23

manim-video

Generate educational videos from text prompts using the Manim animation engine.

Official
Advanced
azaanalirazaazaanaliraza

touchdesigner-mcp

Control TouchDesigner via twozero MCP to build operators, wire networks, and render real-time visuals.

Community
Advanced