Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Basado en la clasificación ocupacional SOC
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/mateaix/mateclaw --skill p5jsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Mostrando SKILL.md
Use the optional iOfficeAI/OfficeCLI engine for advanced inspection, validation, copy-on-write editing, template merge, or visual rendering of existing .docx, .xlsx, and .pptx files. Prefer MateClaw's built-in renderDocx/renderXlsx/renderPptx tools for simple new documents. Use this skill when preserving an existing template, modifying complex Office structure, checking formatting issues, validating OpenXML, or rendering a document for visual QA. This integration targets https://github.com/iOfficeAI/OfficeCLI, not the unrelated prompt-generation project with the same name.
当需要主动向某个渠道会话单向推送消息时使用（企业微信、钉钉、飞书、Telegram、Discord、QQ、Slack 等）。适用于任务完成通知、定时提醒告警、异步结果回推等场景。先用 list_channel_sessions 查询目标会话，再用 send_channel_message 发送。
公众号图文创作 / 推文 / 官方号文章 (official account article) — 端到端：选题→搜集→成文→配图→去AI化→公众号内联样式排版→交付/草稿箱。honors user persona & style memory.
| name | p5js |
| description | p5.js sketches: gen art, shaders, interactive, 3D. |
| version | 1.0.0 |
| tags | ["creative-coding","generative-art","p5js","canvas","interactive","visualization","webgl","shaders","animation"] |
| author | ported |
Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.
Production pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visuals, and motion graphics — exported as HTML, PNG, GIF, MP4, or SVG. Covers: 2D/3D rendering, noise and particle systems, flow fields, shaders (GLSL), pixel manipulation, kinetic typography, WebGL scenes, audio analysis, mouse/keyboard interaction, and headless high-res export.
This is visual art rendered in the browser. The canvas is the medium; the algorithm is the brush.
Before writing a single line of code, articulate the creative concept. What does this piece communicate? What makes the viewer stop scrolling? What separates this from a code tutorial example? The user's prompt is a starting point — interpret it with creative ambition.
First-render excellence is non-negotiable. The output must be visually striking on first load. If it looks like a p5.js tutorial exercise, a default configuration, or "AI-generated creative coding," it is wrong. Rethink before shipping.
Go beyond the reference vocabulary. The noise functions, particle systems, color palettes, and shader effects in the references are a starting vocabulary. For every project, combine, layer, and invent. The catalog is a palette of paints — you write the painting.
Be proactively creative. If the user asks for "a particle system," deliver a particle system with emergent flocking behavior, trailing ghost echoes, palette-shifted depth fog, and a background noise field that breathes. Include at least one visual detail the user didn't ask for but will appreciate.
Dense, layered, considered. Every frame should reward viewing. Never flat white backgrounds. Always compositional hierarchy. Always intentional color. Always micro-detail that only appears on close inspection.
Cohesive aesthetic over feature count. All elements must serve a unified visual language — shared color temperature, consistent stroke weight vocabulary, harmonious motion speeds. A sketch with ten unrelated effects is worse than one with three that belong together.
| Mode | Input | Output | Reference |
|---|---|---|---|
| Generative art | Seed / parameters | Procedural visual composition (still or animated) | references/visual-effects.md |
| Data visualization | Dataset / API | Interactive charts, graphs, custom data displays | references/interaction.md |
| Interactive experience | None (user drives) | Mouse/keyboard/touch-driven sketch | references/interaction.md |
| Animation / motion graphics | Timeline / storyboard | Timed sequences, kinetic typography, transitions | references/animation.md |
| 3D scene | Concept description | WebGL geometry, lighting, camera, materials | references/webgl-and-3d.md |
| Image processing | Image file(s) | Pixel manipulation, filters, mosaic, pointillism | references/visual-effects.md § Pixel Manipulation |
| Audio-reactive | Audio file / mic | Sound-driven generative visuals | references/interaction.md § Audio Input |
Single self-contained HTML file per project. No build step required.
| Layer | Tool | Purpose |
|---|---|---|
| Core | p5.js 1.11.3 (CDN) | Canvas rendering, math, transforms, event handling |
| 3D | p5.js WebGL mode | 3D geometry, camera, lighting, GLSL shaders |
| Audio | p5.sound.js (CDN) | FFT analysis, amplitude, mic input, oscillators |
| Export | Built-in saveCanvas() / saveGif() / saveFrames() | PNG, GIF, frame sequence output |
| Capture | CCapture.js (optional) | Deterministic framerate video capture (WebM, GIF) |
| Headless | Puppeteer + Node.js (optional) | Automated high-res rendering, MP4 via ffmpeg |
| SVG | p5.js-svg 1.6.0 (optional) | Vector output for print — requires p5.js 1.x |
| Natural media | p5.brush (optional) | Watercolor, charcoal, pen — requires p5.js 2.x + WEBGL |
| Texture | p5.grain (optional) | Film grain, texture overlays |
| Fonts | Google Fonts / loadFont() | Custom typography via OTF/TTF/WOFF2 |
p5.js 1.x (1.11.3) is the default — stable, well-documented, broadest library compatibility. Use this unless a project requires 2.x features.
p5.js 2.x (2.2+) adds: async setup() replacing preload(), OKLCH/OKLAB color modes, splineVertex(), shader .modify() API, variable fonts, textToContours(), pointer events. Required for p5.brush. See references/core-api.md § p5.js 2.0.
Every project follows the same 6-stage path:
CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY
preload() → setup() → draw() → helpers → classes → event handlerssaveCanvas() for PNG, saveGif() for GIF, saveFrames() + ffmpeg for MP4, Puppeteer for headless batch| Dimension | Options | Reference |
|---|---|---|
| Color system | HSB/HSL, RGB, named palettes, procedural harmony, gradient interpolation | references/color-systems.md |
| Noise vocabulary | Perlin noise, simplex, fractal (octaved), domain warping, curl noise | references/visual-effects.md § Noise |
| Particle systems | Physics-based, flocking, trail-drawing, attractor-driven, flow-field following | references/visual-effects.md § Particles |
| Shape language | Geometric primitives, custom vertices, bezier curves, SVG paths | references/shapes-and-geometry.md |
| Motion style | Eased, spring-based, noise-driven, physics sim, lerped, stepped | references/animation.md |
| Typography | System fonts, loaded OTF, textToPoints() particle text, kinetic | references/typography.md |
| Shader effects | GLSL fragment/vertex, filter shaders, post-processing, feedback loops | references/webgl-and-3d.md § Shaders |
| Composition | Grid, radial, golden ratio, rule of thirds, organic scatter, tiled | references/core-api.md § Composition |
| Interaction model | Mouse follow, click spawn, drag, keyboard state, scroll-driven, mic input | references/interaction.md |
| Blend modes | BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY | references/color-systems.md § Blend Modes |
| Layering | createGraphics() offscreen buffers, alpha compositing, masking | references/core-api.md § Offscreen Buffers |
| Texture | Perlin surface, stippling, hatching, halftone, pixel sorting | references/visual-effects.md § Texture Generation |
Never use default configurations. For every project:
fill(255, 0, 0). Always a designed palette with 3-7 colorsbackground(0) or background(255). Always textured, gradient, or layeredFor every project, invent at least one of:
Parameters should emerge from the algorithm, not from a generic menu. Ask: "What properties of this system should be tunable?"
Good parameters expose the algorithm's character:
Bad parameters are generic controls unrelated to the algorithm:
Every parameter should change how the algorithm thinks, not just how it looks. A "turbulence" parameter that changes noise octaves is good. A "particle size" slider that only changes ellipse() radius is shallow.
Before any code, articulate:
Map the user's prompt to aesthetic choices. "Relaxing generative background" demands different everything from "glitch data visualization."
windowWidth/windowHeightP2D (default) or WEBGL (for 3D, shaders, advanced blend modes)noLoop() (static generative)templates/viewer.html which provides seed navigation, parameter sliders, and download. For simple sketches or video export, use bare HTMLFor interactive generative art (seed exploration, parameter tuning): start from templates/viewer.html. Read the template first, keep the fixed sections (seed nav, actions), replace the algorithm and parameter controls. This gives the user seed prev/next/random/jump, parameter sliders with live update, and PNG download — all wired up.
For animations, video export, or simple sketches: use bare HTML:
Single HTML file. Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Name</title>
<script>p5.disableFriendlyErrors = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
<!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> --> <!-- SVG export -->
<!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> --> <!-- video capture -->
<style>
html, body { margin: 0; padding: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
seed: 42,
// ... project-specific params
};
// === Color Palette ===
const PALETTE = {
bg: '#0a0a0f',
primary: '#e8d5b7',
// ...
};
// === Global State ===
let particles = [];
// === Preload (fonts, images, data) ===
function preload() {
// font = loadFont('...');
}
// === Setup ===
function setup() {
createCanvas(1920, 1080);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
colorMode(HSB, 360, 100, 100, 100);
// Initialize state...
}
// === Draw Loop ===
function draw() {
// Render frame...
}
// === Helper Functions ===
// ...
// === Classes ===
class Particle {
// ...
}
() { }
() { }
() { (windowWidth, windowHeight); }
</script>
</body>
</html>
Key implementation patterns:
randomSeed() + noiseSeed() for reproducibilitycolorMode(HSB, 360, 100, 100, 100) for intuitive color controlupdate() + display() methodscreateGraphics() for layered composition, trails, masksloadImage()/loadFont() from local files: use scripts/serve.sh or python3 -m http.server| Format | Method | Command |
|---|---|---|
| PNG | saveCanvas('output', 'png') in keyPressed() | Press 's' to save |
| High-res PNG | Puppeteer headless capture | node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1 |
| GIF | saveGif('output', 5) — captures N seconds | Press 'g' to save |
| Frame sequence | saveFrames('frame', 'png', 10, 30) — 10s at 30fps | Then ffmpeg -i frame-%04d.png -c:v libx264 output.mp4 |
| MP4 | Puppeteer frame capture + ffmpeg | bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30 |
| SVG | createCanvas(w, h, SVG) with p5.js-svg | save('output.svg') |
The Friendly Error System (FES) adds up to 10x overhead. Disable it in every production sketch:
p5.disableFriendlyErrors = true; // BEFORE setup()
function setup() {
pixelDensity(1); // prevent 2x-4x overdraw on retina
createCanvas(1920, 1080);
}
In hot loops (particles, pixel ops), use Math.* instead of p5 wrappers — measurably faster:
// In draw() or update() hot paths:
let a = Math.sin(t); // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random(); // not random() — when seed not needed
let m = Math.min(a, b); // not min(a, b)
Never console.log() inside draw(). Never manipulate DOM in draw(). See references/troubleshooting.md § Performance.
Every generative sketch must be reproducible. Same seed, same output.
function setup() {
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
// All random() and noise() calls now deterministic
}
Never use Math.random() for generative content — only for performance-critical non-visual code. Always random() for visual elements. If you need a random seed: CONFIG.seed = floor(random(99999)).
For generative art platforms, replace p5's PRNG with the platform's deterministic random:
// fxhash convention
const SEED = $fx.hash; // unique per mint
const rng = $fx.rand; // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });
// In setup():
randomSeed(SEED); // for p5's noise()
noiseSeed(SEED);
// Replace random() with rng() for platform determinism
let x = rng() * width; // instead of random(width)
See references/export-pipeline.md § Platform Export.
HSB (Hue, Saturation, Brightness) is dramatically easier to work with than RGB for generative art:
colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)
Never hardcode raw RGB values. Define a palette object, derive variations procedurally. See references/color-systems.md.
Raw noise(x, y) looks like smooth blobs. Layer octaves for natural texture:
function fbm(x, y, octaves = 4) {
let val = 0, amp = 1, freq = 1, sum = 0;
for (let i = 0; i < octaves; i++) {
val += noise(x * freq, y * freq) * amp;
sum += amp;
amp *= 0.5;
freq *= 2;
}
return val / sum;
}
For flowing organic forms, use domain warping: feed noise output back as noise input coordinates. See references/visual-effects.md.
Flat single-pass rendering looks flat. Use offscreen buffers for composition:
let bgLayer, fgLayer, trailLayer;
function setup() {
createCanvas(1920, 1080);
bgLayer = createGraphics(width, height);
fgLayer = createGraphics(width, height);
trailLayer = createGraphics(width, height);
}
function draw() {
renderBackground(bgLayer);
renderTrails(trailLayer); // persistent, fading
renderForeground(fgLayer); // cleared each frame
image(bgLayer, 0, 0);
image(trailLayer, 0, 0);
image(fgLayer, 0, 0);
}
p5.js draw calls are expensive. For thousands of particles:
// SLOW: individual shapes
for (let p of particles) {
ellipse(p.x, p.y, p.size);
}
// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
vertex(p.x, p.y);
}
endShape();
// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
let idx = 4 * (floor(p.y) * width + floor(p.x));
pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();
See references/troubleshooting.md § Performance.
Global mode pollutes window. For production, use instance mode:
const sketch = (p) => {
p.setup = function() {
p.createCanvas(800, 800);
};
p.draw = function() {
p.background(0);
p.ellipse(p.mouseX, p.mouseY, 50);
};
};
new p5(sketch, 'canvas-container');
Required when embedding multiple sketches on one page or integrating with frameworks.
createCanvas(w, h, WEBGL) — origin is center, not top-lefttranslate(-width/2, -height/2) to get P2D-like coordinatespush()/pop() around every transform — matrix stack overflows silentlytexture() before rect()/plane() — not aftercreateShader(vert, frag) — test on multiple browsersEvery sketch should include these in keyPressed():
function keyPressed() {
if (key === 's' || key === 'S') saveCanvas('output', 'png');
if (key === 'g' || key === 'G') saveGif('output', 5);
if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
if (key === ' ') CONFIG.paused = !CONFIG.paused;
}
For headless rendering via Puppeteer, the sketch must use noLoop() in setup. Without it, p5's draw loop runs freely while screenshots are slow — the sketch races ahead and you get skipped/duplicate frames.
function setup() {
createCanvas(1920, 1080);
pixelDensity(1);
noLoop(); // capture script controls frame advance
window._p5Ready = true; // signal readiness to capture script
}
The bundled scripts/export-frames.js detects _p5Ready and calls redraw() once per capture for exact 1:1 frame correspondence. See references/export-pipeline.md § Deterministic Capture.
For multi-scene videos, use the per-clip architecture: one HTML per scene, render independently, stitch with ffmpeg -f concat. See references/export-pipeline.md § Per-Clip Architecture.
When building p5.js sketches:
open sketch.html (macOS) or xdg-open sketch.html (Linux)python3 -m http.server 8080 in the project directory, then open http://localhost:8080/sketch.htmlkeyPressed() shortcuts as shown above, tell the user which key to pressnode scripts/export-frames.js sketch.html --frames 300 for automated frame capture (sketch must use noLoop() + _p5Ready)bash scripts/render.sh sketch.html output.mp4 --duration 30skill_view(name="p5js", file_path="references/...") to load specific reference files as needed during implementation| Metric | Target |
|---|---|
| Frame rate (interactive) | 60fps sustained |
| Frame rate (animated export) | 30fps minimum |
| Particle count (P2D shapes) | 5,000-10,000 at 60fps |
| Particle count (pixel buffer) | 50,000-100,000 at 60fps |
| Canvas resolution | Up to 3840x2160 (export), 1920x1080 (interactive) |
| File size (HTML) | < 100KB (excluding CDN libraries) |
| Load time | < 2s to first frame |
| File | Contents |
|---|---|
references/core-api.md | Canvas setup, coordinate system, draw loop, push()/pop(), offscreen buffers, composition patterns, pixelDensity(), responsive design |
references/shapes-and-geometry.md | 2D primitives, beginShape()/endShape(), Bezier/Catmull-Rom curves, vertex() systems, custom shapes, p5.Vector, signed distance fields, SVG path conversion |
references/visual-effects.md | Noise (Perlin, fractal, domain warp, curl), flow fields, particle systems (physics, flocking, trails), pixel manipulation, texture generation (stipple, hatch, halftone), feedback loops, reaction-diffusion |
references/animation.md | Frame-based animation, easing functions, lerp()/map(), spring physics, state machines, timeline sequencing, millis()-based timing, transition patterns |
references/typography.md | text(), loadFont(), textToPoints(), kinetic typography, text masks, font metrics, responsive text sizing |
references/color-systems.md | colorMode(), HSB/HSL/RGB, lerpColor(), paletteLerp(), procedural palettes, color harmony, blendMode(), gradient rendering, curated palette library |
references/webgl-and-3d.md | WEBGL renderer, 3D primitives, camera, lighting, materials, custom geometry, GLSL shaders (createShader(), createFilterShader()), framebuffers, post-processing |
references/interaction.md | Mouse events, keyboard state, touch input, DOM elements, createSlider()/createButton(), audio input (p5.sound FFT/amplitude), scroll-driven animation, responsive events |
references/export-pipeline.md | saveCanvas(), saveGif(), saveFrames(), deterministic headless capture, ffmpeg frame-to-video, CCapture.js, SVG export, per-clip architecture, platform export (fxhash), video gotchas |
references/troubleshooting.md | Performance profiling, per-pixel budgets, common mistakes, browser compatibility, WebGL debugging, font loading issues, pixel density traps, memory leaks, CORS |
templates/viewer.html | Interactive viewer template: seed navigation (prev/next/random/jump), parameter sliders, download PNG, responsive canvas. Start from this for explorable generative art |
If the user asks for creative, experimental, surprising, or unconventional output, select the strategy that best fits and reason through its steps BEFORE generating code.
Take a known generative pattern (flow field, particle system, L-system, cellular automata) and systematically transform it: