skills.rest
Chensihakniroth
ChensihaknirothCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generates interactive and generative visual art as self-contained p5.js HTML sketches.

Updated Jun 7, 2026
Search Tags:#p5.js#creative coding#generative art#shaders#webgl#interactive visualization#canvas animation
One-click install
npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill p5js-chensihakniroth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/Chensihakniroth/ANAKOT-AGENT/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill p5js-chensihakniroth

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating browser-based generative art, interactive visualizations, and canvas animations requires deep knowledge of p5.js APIs, color theory, animation techniques, and export pipelines. This Skill handles the full production workflow from creative concept to exported HTML, PNG, GIF, MP4, or SVG output. ## Core Features & Use Cases - Generative Art Production: Creates procedural visual compositions with seeded randomness, noise fields, particle systems, flow fields, and custom color palettes. - Multiple Output Modes: Supports generative art, data visualization, interactive experiences, motion graphics, 3D WebGL scenes, image processing, and audio-reactive visuals. - Headless Export Pipeline: Renders sketches to high-resolution PNG frames and MP4 video via Puppeteer and ffmpeg, with deterministic frame capture. - Use Case: Ask for an audio-reactive particle visualization, and receive a single self-contained HTML file that opens in any browser, with keyboard shortcuts to export PNG or GIF captures. ## Quick Start Ask the agent to create a p5.js generative art sketch, such as a flow field particle animation with a custom color palette, and it will produce a ready-to-open HTML file.

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

Write a single HTML file loading p5.js from a CDN, define setup() and draw() functions, and use seeded randomness with randomSeed() and noiseSeed() for reproducible output. Open the file directly in any modern browser with no build step required.

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

Use the bundled render.sh script, which captures frames via Puppeteer and encodes them with ffmpeg into MP4. The sketch must call noLoop() in setup and set window._p5Ready so the capture script controls frame advancement deterministically.

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

p5.js 1.x (1.11.3) is the default choice with stable APIs and the broadest library compatibility. Use p5.js 2.x only when you need async setup(), OKLCH color modes, splineVertex(), shader .modify(), or the p5.brush natural media library.

Why is my p5.js sketch running slowly?▼

The most common causes are the Friendly Error System adding up to 10x overhead and pixelDensity defaulting to 2x on retina displays. Set p5.disableFriendlyErrors = true and pixelDensity(1) before createCanvas(), and use Math.* functions instead of p5 wrappers in hot loops.

Can p5.js sketches react to microphone audio input?▼

Yes, load the p5.sound.js addon and use p5.AudioIn with p5.FFT for frequency spectrum analysis and p5.Amplitude for volume levels. Audio requires a user gesture via userStartAudio() before the browser enables the AudioContext.

Related Skills

Explore More Design & Creative Skills→
devMoezdevMoez
1

p5js

Generate browser-ready p5.js sketches and export them as PNG, GIF, MP4, or SVG.

Community
Advanced
LGJ-JonathanLGJ-Jonathan

ckm:banner-design

Generates multi-format banners for social media, ads, web heroes, and print with AI-generated visuals.

Official
Advanced
whyiloveher2411whyiloveher2411

biong-short-video-evolution

Audit short video frames, apply iterative fixes, and log lessons learned.

Community
Advanced
519lab519lab
2

manim-video

Convert text prompts into Manim educational animations and render video files.

Official
Advanced