skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

p5js

Generates interactive p5.js sketches, generative art, and shader-based visuals as self-contained HTML files.

5|2|Updated May 26, 2026
Search Tags:#creative coding#generative art#data visualization#shaders#webgl#p5js#canvas animation
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill p5js-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/p5js
Command: npx skills add https://github.com/perasyudha/Nyxora --skill p5js-perasyudha

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating polished generative art, interactive visualizations, and browser-based animations with p5.js requires deep knowledge of canvas rendering, noise functions, particle systems, shaders, and export pipelines. This Skill provides a complete production pipeline that takes a creative concept from prompt to a finished, exportable visual piece. ## Core Features & Use Cases - Seven Creation Modes: Generative art, data visualization, interactive experiences, animation/motion graphics, 3D WebGL scenes, image processing, and audio-reactive visuals. - Multi-Format Export: Output as self-contained HTML, PNG stills, GIF loops, MP4 video (via Puppeteer + ffmpeg), or SVG vector files. - Deterministic Headless Rendering: Frame-perfect capture using noLoop() + redraw() with Puppeteer for reproducible high-resolution exports up to 4K. - Use Case: Ask for a flow-field particle animation with a custom warm palette, and receive a single HTML file that runs in any browser, with keyboard shortcuts to export PNG or GIF and a script to render an MP4. ## Quick Start Create a p5.js generative art sketch of flowing particles with a sunset color palette and export it as an HTML file I can open in my browser.

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, then write a single HTML file loading p5.js from a CDN with setup() and draw() functions. Use randomSeed() and noiseSeed() for reproducible output, HSB color mode for palette control, and layered createGraphics() buffers for composition.

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

Capture frames with saveFrames() or headless Puppeteer, then encode with ffmpeg using libx264. The sketch must call noLoop() in setup and set window._p5Ready so the capture script can advance frames deterministically with redraw().

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

Use p5.js 1.11.3 by default for stability and broad library compatibility. Choose 2.x only when you need async setup(), OKLCH color modes, splineVertex(), shader modify() API, or the p5.brush natural media library.

Why is my p5.js sketch running slowly?▼

The Friendly Error System adds up to 10x overhead, so set p5.disableFriendlyErrors = true before setup. Also call pixelDensity(1), use Math.* functions instead of p5 wrappers in hot loops, and batch particles with beginShape(POINTS) or pixel buffers.

Can p5.js export vector SVG files?▼

Yes, using the p5.js-svg library with createCanvas(w, h, SVG), but only vector operations work. Pixel manipulation, blend modes, filters, and WebGL are unsupported, making it suitable for line art, geometric patterns, and pen plotter output.

How do I make p5.js sketches reproducible with seeds?▼

Call randomSeed(seed) and noiseSeed(seed) in setup() so all random() and noise() calls become deterministic. Never use Math.random() for visual elements. For fxhash platforms, replace p5's PRNG with $fx.rand for on-chain determinism.

Related Skills

Explore More Design & Creative Skills→
ikastnerikastner

brief-extraction

Extract client briefs from Notion, Gmail, and calls into a structured art direction document.

Community
Advanced
matevipmatevip
1.1k

p5js

Generates interactive p5.js sketches, generative art, and WebGL visuals exported as HTML, PNG, GIF, or MP4.

Community
Advanced
SignmanalSignmanal
1

manim-video

Generate Manim Python code and render animated explainer videos.

Community
Advanced
bailynlovebailynlove
1

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced