canvas-procedural-animation
starsforks
How to install canvas-procedural-animation?
calesthio/openmontage/canvas-procedural-animation
$npx -y skills add calesthio/OpenMontage --skill canvas-procedural-animationUse p5.js/canvas for local procedural character effects: particles, weather, squash/stretch, walk cycles, and environmental motion.
SKILL.md
| 1 | # Canvas Procedural Animation |
| 2 | |
| 3 | Use this skill when p5.js or Canvas is used for character-supporting motion: |
| 4 | rain, snow, leaves, feathers, ambient particles, squash/stretch, or procedural |
| 5 | walk cycles. |
| 6 | |
| 7 | ## Proven Pattern |
| 8 | |
| 9 | p5.js runs setup once and redraws continuously through `draw()`. Keep animation |
| 10 | state deterministic from time/frame values when rendering previews. |
| 11 | |
| 12 | ```js |
| 13 | function setup() { |
| 14 | createCanvas(1920, 1080); |
| 15 | } |
| 16 | |
| 17 | function draw() { |
| 18 | const t = millis() / 1000; |
| 19 | clear(); |
| 20 | drawCharacter(width / 2, height / 2 + sin(t * 8) * 8); |
| 21 | } |
| 22 | ``` |
| 23 | |
| 24 | ## Use For |
| 25 | |
| 26 | - Particle/weather overlays. |
| 27 | - Environmental motion. |
| 28 | - Simple procedural bodies. |
| 29 | - Effects that do not need individually authored SVG parts. |
| 30 | |
| 31 | ## Avoid For |
| 32 | |
| 33 | - Complex facial acting where SVG/layered rig parts are easier to inspect. |
| 34 | - Final renders that need exact frame determinism unless the runtime exposes |
| 35 | frame-index control. |
| 36 | |
| 37 | ## Sources |
| 38 | |
| 39 | - p5.js `setup()` reference: https://p5js.org/reference/p5/setup/ |
| 40 | - p5.js `draw()` reference: https://p5js.org/reference/p5/draw/ |
| 41 | - p5.js animation examples: https://p5js.org/examples/ |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
