p5js

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

1|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/zerwiz/wayofpi --skill p5js-zerwiz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/zerwiz/wayofpi/tree/main/.hermes/hermes-agent/skills/creative/p5js
Command: npx skills add https://github.com/zerwiz/wayofpi --skill p5js-zerwiz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill turns creative prompts into polished p5.js sketches, removing the friction of designing the visual concept, structuring the code, and preparing export-ready output.

Core Features & Use Cases

  • Generative art production: Build seeded, reproducible browser sketches with layered composition, motion, noise, particles, and shaders.
  • Interactive and animated work: Create data visualizations, motion graphics, audio-reactive scenes, and mouse- or keyboard-driven experiences.
  • Export pipeline support: Produce single-file HTML, PNG stills, GIF loops, MP4 videos, SVG vector output, and deterministic headless captures.
  • Use Case: A designer can ask for a moody ambient loop or a high-density exploratory sketch and get a structured implementation plan plus the code path to render it cleanly.

Quick Start

Use the p5js skill to create a self-contained p5.js sketch that matches my concept and is ready to preview and export.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate generative art from text prompts using p5.js?

You can generate generative art by providing a creative prompt that the p5.js skill transforms into a structured implementation plan and self-contained HTML sketch. It handles visual concept design, code structuring, and export-ready output automatically.

Can I export p5.js animations as MP4 videos or GIF loops?

Yes, you can export p5.js animations as MP4 videos or GIF loops. The skill supports an export pipeline using Puppeteer for deterministic headless captures and ffmpeg for video encoding, alongside PNG stills and SVG vector output.

How do I make reproducible p5.js sketches with deterministic seeding?

To make reproducible p5.js sketches, the skill applies deterministic seeding to your generative art workflow. This ensures that interactive browser sketches, noise patterns, and particle systems render identically across multiple runs.

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

Yes, this p5.js workflow supports 3D scenes and WebGL rendering. You can generate interactive browser sketches that utilize WebGL for complex 3D scenes, audio-reactive visuals, and layered compositions with shaders.

Do I need Node.js and Puppeteer to create interactive p5.js sketches?

You need Node.js and Puppeteer primarily for the headless export pipeline to capture PNG stills, GIF loops, or MP4 videos. The core interactive p5.js sketches are output as single-file HTML that runs directly in a browser.

What is the best way to build audio-reactive visuals in p5.js?

The best way to build audio-reactive visuals in p5.js is using this skill to generate seeded, reproducible browser sketches from your creative prompt. It structures the code for motion graphics and interactive scenes, preparing it for clean rendering and export.