skills.rest
AnandaAnugrahHandyanto
AnandaAnugrahHandyantoCOMMUNITY
Explore all skills by this author →
GitHub

p5js

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

Updated Jun 19, 2026
Search Tags:#webgl#export#p5js#creative-coding#generative-art#shader
One-click install
npx skills add https://github.com/AnandaAnugrahHandyanto/savarez_agent --skill p5js-anandaanugrahhandyanto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/AnandaAnugrahHandyanto/savarez_agent/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/AnandaAnugrahHandyanto/savarez_agent --skill p5js-anandaanugrahhandyanto

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides an end-to-end pipeline for creating browser-based p5.js sketches, enabling artists and developers to go from concept to a self-contained, export-ready project without setup overhead.

Core Features & Use Cases

  • Self-contained HTML per project with no build step
  • Supports 2D/WEBGL rendering, shaders, interactivity, audio, and cross-platform export (HTML, PNG, GIF, MP4, SVG)
  • End-to-end workflow: concept → design → code → preview → export → verify
  • Headless export pipeline with Puppeteer for deterministic frame capture

Quick Start

Open the HTML sketch in your browser, adjust parameters, then export to PNG, GIF, or MP4.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I export a p5.js sketch to PNG or MP4?▼

Export p5.js sketches to PNG or MP4 using a headless Puppeteer pipeline that performs deterministic frame capture. It generates self-contained HTML projects and captures individual frames via noLoop and redraw commands for multi-format output.

What is generative art sketch creation without a build step?▼

Generative art sketch creation without a build step produces self-contained browser-based p5.js HTML files. This workflow supports 2D and WEBGL rendering, interactive elements, shaders, and audio directly within a single standalone project file.

Can I use Puppeteer for deterministic frame capture in creative coding?▼

Puppeteer enables deterministic frame capture in creative coding by running headless browser exports of p5.js sketches. It controls the rendering loop using noLoop and redraw to capture precise animation frames for GIF or MP4 outputs.

Does p5.js support WEBGL shaders and 3D scene export?▼

p5.js supports WEBGL shaders and 3D scene export, delivering standalone HTML projects with optional scripts and assets. These self-contained files render interactive 3D scenes and shaders directly in the browser.

What are the limitations of headless browser export for interactive art?▼

Headless browser export for interactive art captures deterministic frames via Puppeteer but may limit continuous user interaction during the recording process. It relies on noLoop and redraw to freeze and capture specific animation states for media assets.

Related Skills

Explore More Design & Creative Skills→
shuff57shuff57

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
srivtxsrivtx

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced
rnbenrnben

p5js

Automate browser-based generative art and interactive visuals with p5.js.

Community
Advanced
magnus919magnus919
40

three

Build browser-based Three.js and WebGL scenes with vanilla JavaScript.

Community
Basic