p5js

Generate p5.js sketches from prompts and export as HTML, PNG, GIF, MP4, or SVG.

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/MarbleSodas/Mavis --skill p5js-marblesodas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/MarbleSodas/Mavis/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/MarbleSodas/Mavis --skill p5js-marblesodas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It turns text prompts into production-ready p5.js sketches that render striking, real interactive generative visuals and can be exported for sharing or video production.

Core Features & Use Cases

  • End-to-end sketch production pipeline: concept-to-code-to-preview-to-export with deterministic seeded randomness and a consistent workflow.
  • Multiple creative modes: generative art, data visualization, interactive experiences, motion graphics, 3D/WebGL scenes, image processing, and audio-reactive visuals.
  • Production export readiness: generates a single self-contained HTML sketch and supports PNG, GIF, MP4 (via headless frames + ffmpeg), and SVG workflows.
  • Quality and performance guardrails: emphasizes first-render excellence, compositional cohesion, and practical performance targets (including pixel-density and render-loop discipline).

Quick Start

Ask to generate a browser-based p5.js sketch from your prompt and export it as a single self-contained HTML file plus PNG/GIF using the skill’s pipeline defaults.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate p5.js generative art from a text prompt and export it?

To generate p5.js generative art, provide a creative text prompt to produce a self-contained HTML sketch that renders high-quality interactive visuals and supports PNG, GIF, and MP4 export. The pipeline ensures first-render excellence using deterministic seeded randomness.

Can I create WebGL and 3D shader scenes in p5.js that look good on the first render?

Yes, you can create WebGL and 3D shader scenes in p5.js that look high-quality on the first render. The skill applies performance guardrails, including pixel-density and render-loop discipline, ensuring compositional cohesion for complex 3D visuals.

Does p5.js support headless frame-to-video export using ffmpeg and Puppeteer?

Yes, p5.js supports headless frame-to-video export using Puppeteer and ffmpeg. The skill captures frames from the browser-based sketch headlessly and compiles them into MP4 video output, alongside single-file HTML, PNG, GIF, and SVG workflows.

What is the best way to build audio-reactive motion graphics with p5.js?

The best way to build audio-reactive motion graphics with p5.js is using the skill's end-to-end production pipeline, which translates creative prompts into interactive visual sketches with deterministic seeded randomness for consistent, exportable audio-reactive results.

Do I need node and python3 to export p5.js sketches as single-file HTML?

Yes, you need node and python3 installed, along with Puppeteer and ffmpeg dependencies, to run the export pipeline that generates single-file HTML sketches and renders headless frames for video output.

Why does my p5.js interactive visualization not look cohesive when exported?

Your p5.js interactive visualization may lack cohesion if it does not apply performance guardrails like pixel-density and render-loop discipline. The skill enforces first-render excellence and deterministic seeded rendering to maintain compositional quality across exports.