# Canvas Procedural Animation

> Usa p5.js/canvas para efectos procedurales locales de personaje: partículas, clima, squash y stretch, ciclos de caminar y movimiento ambiental.

Fuente: https://skillsagentes.com/skills/calesthio/openmontage/canvas-procedural-animation
Markdown: https://skillsagentes.com/skills/calesthio/openmontage/canvas-procedural-animation.md

Repositorio: https://github.com/calesthio/OpenMontage
Autor: calesthio
Licencia: MIT
Actualizado: hace 3 meses
Coste de contexto: 33 tok instalada, 322 tok al activarse, 322 tok con todos los archivos del bundle
Bundle: 1 archivo, 1 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent claude-code
# Cursor
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent cursor
# Codex
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent codex
# Gemini CLI
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent gemini
# Windsurf
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent windsurf
# Cline
npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animation --agent cline
```

## Qué hace

- Usa p5.js y canvas para efectos procedurales locales de personaje
- Cubre partículas, clima, squash and stretch, ciclos de caminar y movimiento ambiental

## Cuándo usarla

- Capas de partículas o clima
- Movimiento ambiental
- Cuerpos procedurales simples
- Efectos que no necesitan partes SVG dibujadas una a una

## Cuándo no

- Actuación facial compleja, donde las partes de un rig SVG por capas son más fáciles de inspeccionar
- Renders finales que exijan determinismo exacto de fotograma, salvo que el runtime exponga control por índice de fotograma

## Qué la activa

- "Añade un efecto de partículas a esta escena"
- "Hazme un ciclo de caminar procedural"
- "Genera lluvia sobre el fondo"

## Antes de instalar

- Necesita p5.js o canvas en local.

## Archivos

- SKILL.md — 1 KB

## SKILL.md

Reproducido tal cual desde calesthio/OpenMontage bajo MIT. Esta sección es el documento original y está en inglés.

# Canvas Procedural Animation

Use this skill when p5.js or Canvas is used for character-supporting motion:
rain, snow, leaves, feathers, ambient particles, squash/stretch, or procedural
walk cycles.

## Proven Pattern

p5.js runs setup once and redraws continuously through `draw()`. Keep animation
state deterministic from time/frame values when rendering previews.

```js
function setup() {
  createCanvas(1920, 1080);
}

function draw() {
  const t = millis() / 1000;
  clear();
  drawCharacter(width / 2, height / 2 + sin(t * 8) * 8);
}
```

## Use For

- Particle/weather overlays.
- Environmental motion.
- Simple procedural bodies.
- Effects that do not need individually authored SVG parts.

## Avoid For

- Complex facial acting where SVG/layered rig parts are easier to inspect.
- Final renders that need exact frame determinism unless the runtime exposes
  frame-index control.

## Sources

- p5.js `setup()` reference: https://p5js.org/reference/p5/setup/
- p5.js `draw()` reference: https://p5js.org/reference/p5/draw/
- p5.js animation examples: https://p5js.org/examples/

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [calesthio](https://skillsagentes.com/creators/calesthio.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Seedance 2 5](https://skillsagentes.com/skills/calesthio/openmontage/seedance-2-5.md): Genera vídeo cinematográfico de 4-30 s con ByteDance Seedance 2.5 por fal.ai, Volcengine Ark, Runway o ComfyUI. Cubre el contrato de prompt 2.5, cortes duros, locks de continuidad y voz.
- [Comfyui](https://skillsagentes.com/skills/calesthio/openmontage/comfyui.md): Úsalo al trabajar con workflows de ComfyUI en OpenMontage: comfyui_image/video/music, workflows propios, selección de output_node, modelos que faltan, LoRAs, poca VRAM e importación de workflows de la comunidad.
- [Fish Audio Tts](https://skillsagentes.com/skills/calesthio/openmontage/fish-audio-tts.md): Genera narración expresiva y multilingüe con fish.audio (modelos S1 / S2) y reutiliza voces clonadas mediante reference_id.
- [Minimax H3](https://skillsagentes.com/skills/calesthio/openmontage/minimax-h3.md): Genera vídeo con MiniMax H3 (Hailuo 3.0) por la API oficial v2, fal.ai, Runway, nodos partner de ComfyUI o pesos abiertos locales. Clips de 4-15s a 2K con animación de primer/último fotograma.
- [Gemini Omni](https://skillsagentes.com/skills/calesthio/openmontage/gemini-omni.md): Genera y edita conversacionalmente vídeos cortos con Google Gemini Omni Flash: itera con ediciones en lenguaje natural, clips de 3-10s a 720p con audio y texto en pantalla, e imágenes de referencia por etiquetas.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)