skills.rest
samuelmukoti
samuelmukotiCOMMUNITY
Explore all skills by this author →
𝕏@samuelmukotiGitHub

p5js

Generate self-contained HTML p5.js sketches with export options for PNG, GIF, MP4, and SVG.

Updated Apr 21, 2026
Search Tags:#webgl#export#p5js#creative-coding#generative-art#visual-art
One-click install
npx skills add https://github.com/samuelmukoti/myai-agent --skill p5js-samuelmukoti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/samuelmukoti/myai-agent/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/samuelmukoti/myai-agent --skill p5js-samuelmukoti

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Production pipeline for interactive and generative visual art using p5.js. It provides a ready-to-run process that produces self-contained HTML outputs with minimal setup, enabling rapid concept-to-export cycles for creative projects.

Core Features & Use Cases

  • Self-contained HTML sketches that run in any browser via CDN-loaded p5.js.
  • Supports 2D/3D rendering, particles, noise, shaders, WebGL, and interactive visuals.
  • Exports outputs as HTML, PNG, GIF, MP4, or SVG for flexible sharing and deployment.
  • Ideal for creative coding, interactive experiences, data visualizations, and browser-based visual art.

Quick Start

Open the template, customize parameters, and export a self-contained HTML sketch ready to run in any browser.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I export generative art sketches as MP4 or GIF?▼

You can export generative art sketches as MP4 or GIF using the built-in pipeline, which leverages puppeteer and ffmpeg to render self-contained HTML outputs and capture them as video or animated image files.

Can I create WebGL shaders and 3D visuals in p5.js without a build step?▼

Yes, you can create WebGL shaders and 3D visuals using a CDN-based p5.js runtime that supports a zero-build workflow, running directly in any browser via self-contained HTML files.

What is the best way to turn text prompts into browser-based generative art?▼

The best way to turn prompts into browser-based generative art is using a production-ready p5.js pipeline that generates self-contained HTML sketches supporting 2D/3D rendering, particles, and noise.

Does this creative coding workflow support exporting to SVG and PNG?▼

Yes, the creative coding workflow supports exporting interactive and generative visual art to multiple formats including SVG for vector graphics and PNG for static raster images.

Do I need to install Node.js dependencies to run interactive p5.js sketches?▼

No, you do not need local build dependencies to run the sketches because the pipeline uses a CDN-based p5.js runtime for a zero-build workflow, though puppeteer and ffmpeg are required for media export automation.

Related Skills

Explore More Design & Creative Skills→
gqf2008gqf2008

p5js

Generate p5.js browser-based generative art and interactive visuals with HTML, PNG, GIF, MP4, or SVG export.

Community
Intermediate
danmartinez78danmartinez78

p5js

Generate self-contained HTML p5.js sketches from prompts with export options.

Community
Advanced
MarbleSodasMarbleSodas

p5js

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

Community
Advanced
HuskyDannyHuskyDanny

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced