skills.rest
yakeworld
yakeworldCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generates self-contained p5.js HTML sketches for generative art, interactive visualizations, and shader effects.

6|1|Updated May 11, 2026
Search Tags:#p5.js#creative coding#generative art#data visualization#webgl#shader#html export
One-click install
npx skills add https://github.com/yakeworld/Synthos --skill p5js-yakeworld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/yakeworld/Synthos/tree/main/skills/extended/external-automation/creative/web-code/p5js
Command: npx skills add https://github.com/yakeworld/Synthos --skill p5js-yakeworld

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating browser-based generative art and interactive visualizations requires coordinating creative direction, p5.js rendering code, performance tuning, and export pipelines, which is slow and error-prone when done manually. ## Core Features & Use Cases - Seven Production Modes: Covers generative art, data visualization, interactive experiences, animation, 3D WebGL scenes, image processing, and audio-reactive visuals, each mapped to dedicated reference guides. - Full Export Pipeline: Outputs single-file HTML plus PNG, GIF, MP4 (via Puppeteer headless capture and ffmpeg), and SVG, with deterministic frame capture using noLoop() and redraw(). - Creative Direction Framework: Enforces custom palettes, seeded randomness, layered composition with createGraphics(), and performance rules like disabling the Friendly Error System and pixelDensity(1). - Use Case: Ask for an audio-reactive particle flow field and receive a ready-to-open HTML sketch with keyboard shortcuts for PNG/GIF export, reproducible seeds, and 60fps-optimized rendering. ## Quick Start Create a p5.js generative art sketch of a particle flow field with a warm custom palette, seeded randomness, and keyboard shortcuts to export PNG and GIF.

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?▼

Define a creative concept first (mood, palette, motion vocabulary), then write a single HTML file using p5.js 1.11.3 from CDN with setup() and draw(). Always call randomSeed() and noiseSeed() for reproducibility and use HSB color mode for procedural palettes.

How to export p5.js sketches as MP4 video?▼

Use noLoop() in setup() plus window._p5Ready = true, then run the bundled export-frames.js Puppeteer script to capture frames deterministically. Pipe the PNG sequence through ffmpeg with libx264 to produce the MP4.

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

Use p5.js 1.11.3 by default since it is stable and has the broadest library compatibility. Choose 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 with many particles?▼

The Friendly Error System adds up to 10x overhead, so set p5.disableFriendlyErrors = true and pixelDensity(1). In hot loops use Math.* functions instead of p5 wrappers, batch draws with beginShape(POINTS), or write directly to the pixel buffer.

Can p5.js export vector SVG files for print?▼

Yes, using the p5.js-svg library with createCanvas(w, h, SVG) and save('output.svg'). It only supports vector operations, so blendMode(), filters, and pixel manipulation do not work, and it requires p5.js 1.x.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

creative-production-positioning-explorer

Generate image-led commercial positioning routes from a business brief before visual production.

Official
Advanced
4asaanAI4asaanAI

ckm:banner-design

Design multi-platform banners with exact dimensions and export PNGs.

Community
Advanced
cookeyholdercookeyholder

algorithmic-art

Generate seed-driven p5.js generative art with interactive parameter controls.

Community
Advanced
StonelukasStonelukas

threejs

Create interactive 3D web apps with Three.js for WebGL/WebGPU rendering.

Community
Advanced