skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

canvas-procedural-animation

Generates procedural canvas animations with p5.js for particles, weather, and character motion.

Updated Jul 16, 2026
Search Tags:#p5.js#creative coding#canvas#particles#procedural animation#weather effects#walk cycle
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill canvas-procedural-animation-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-procedural-animation
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/canvas-procedural-animation
Command: npx skills add https://github.com/X-manist/Cohmira --skill canvas-procedural-animation-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5.js.

What problem does it solve? Creating supporting motion effects like rain, snow, particles, or squash-and-stretch character movement by hand is tedious and hard to keep consistent. This Skill provides proven p5.js and Canvas patterns for generating these procedural animations programmatically. ## Core Features & Use Cases - Particle and Weather Overlays: Generate rain, snow, leaves, feathers, and ambient particle effects on an HTML canvas. - Procedural Character Motion: Implement squash/stretch deformation and simple walk cycles driven by time-based functions. - Deterministic Previews: Keep animation state derived from time or frame values so previews render consistently. - Use Case: You are building an animated scene and need falling snow behind a bouncing character. Use this Skill to write a p5.js sketch where setup() creates the canvas and draw() renders the character with sinusoidal bounce plus a particle snow layer. ## Quick Start Use the canvas procedural animation skill to create a p5.js sketch with falling snow particles and a bouncing character on a 1920x1080 canvas.

Frequently Asked Questions about canvas-procedural-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create particle effects with p5.js?▼

Create particle effects in p5.js by initializing particle objects in setup() and updating their positions each frame in draw(). Drive motion from time values like millis() so the animation stays deterministic and easy to preview.

How to animate a bouncing character on HTML canvas?▼

Animate a bouncing character by offsetting its vertical position with a sine function of elapsed time, such as sin(t * 8) * 8. Call clear() each frame in draw() and redraw the character at the computed position.

When should I use canvas animation instead of SVG rigging?▼

Use canvas procedural animation for particles, weather, and environmental motion that does not need individually authored parts. Choose SVG or layered rigs for complex facial acting where inspectable, structured parts matter more.

Does p5.js support deterministic frame-by-frame rendering?▼

p5.js redraws continuously through draw(), so exact frame determinism requires the runtime to expose frame-index control. Deriving state from time or frame values keeps previews consistent but does not guarantee exact final-render determinism.

What are the limitations of procedural walk cycles in p5.js?▼

Procedural walk cycles in p5.js work for simple bodies driven by mathematical functions, but they lack the fine control of authored rigs. Complex character acting with detailed limbs and expressions is better handled with layered SVG or rigged assets.

Related Skills

Explore More Design & Creative Skills→
video-production-buddyvideo-production-buddy
602

canvas-procedural-animation

Generate procedural motion effects for 2D video projects using p5.js or Canvas APIs.

Official
Basic
Qo-qiaoQo-qiao
38

3d-animation-short-generator

Generates stylized 3D animated shorts from story ideas through a gated production workflow.

Community
Advanced
hanzoaihanzoai

character-rigging

Define data-driven 2D rig packages with parts, pivots, layers, and joints.

Official
Intermediate
phoenixvcphoenixvc

brand

Manage brand.yaml specifications and regenerate editor theme files for IDEs.

Official
Intermediate