skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

canvas-generative

Implements generative art algorithms with Canvas 2D including noise, particles, flow fields, and L-systems.

1|Updated Jul 19, 2026
Search Tags:#creative coding#generative art#particle system#flow field#l-system#canvas 2d#simplex noise
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill canvas-generative-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-generative
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/canvas-generative
Command: npx skills add https://github.com/leobbaroni/maestro --skill canvas-generative-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building performant generative art in the browser requires solving recurring problems: blurry canvases on Retina displays, garbage-collection stutter from particle allocation, and slow GPU readbacks. This Skill provides copy-paste-ready patterns and complete reference implementations for Canvas 2D generative art. ## Core Features & Use Cases - Canvas Setup & Performance Rules: DPR-aware sizing, resize handling, delta-capped animation loops, double buffering, and explicit anti-patterns (no clearRect for trails, no getImageData in loops, no allocation in hot loops). - Complete Algorithm Implementations: Seeded Simplex noise (2D/3D), zero-allocation particle pool with struct-of-arrays layout, noise-driven flow fields, L-system renderer with presets (plant, Koch, Sierpinski, dragon, tree), and a Lorenz attractor with RK4 integration. - Use Case: A developer wants an animated flow-field background for a landing page. Load the Skill, copy the FlowField class from references/algorithms.md, seed the noise, and render with trail fading for an organic line pattern at 60fps. ## Quick Start Use the canvas-generative skill to build a flow field animation with 2000 particles on a full-screen canvas.

Frequently Asked Questions about canvas-generative

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

FAQPage Schema
How do I create a flow field animation with Canvas 2D?▼

Build a grid of angle vectors from Simplex noise, then steer particles by looking up the angle at each particle's position and applying it as force. The references/algorithms.md file contains a complete FlowField class with particle respawning, trail rendering, and time-animated noise.

How do I make canvas rendering sharp on Retina displays?▼

Multiply the canvas buffer size by window.devicePixelRatio, set the CSS size to the logical dimensions, and scale the 2D context by the DPR. Without this, canvas content appears blurry on HiDPI screens.

Perlin vs Simplex noise for generative art?▼

Simplex noise avoids grid-aligned artifacts and has better gradients, making it preferable for flow fields and organic motion. Perlin noise is cheaper and works for terrain or gentle textures. Worley noise suits cellular patterns like cracks and caustics.

Why does my canvas particle system stutter at high particle counts?▼

Stutter usually comes from allocating objects in the animation loop, triggering garbage collection. Use a pre-allocated particle pool with swap-and-shrink removal, and never call new, splice, or object spread inside update or render.

Can I use getImageData for per-pixel effects in an animation loop?▼

No. getImageData forces a GPU readback that blocks the rendering pipeline and destroys frame rate. Sample pixel data once and cache it, or move per-pixel work to WebGL shaders for real-time effects.

Related Skills

Explore More Design & Creative Skills→
inbharataiinbharatai
22

canvas-design

Design and render graphics on HTML5 Canvas with JavaScript.

Community
Intermediate
TheGoat395TheGoat395
117

motion-language-director

Guides website motion design with rules, timing, easing, and tool selection for front-end developers and designers.

Community
Advanced
calesthiocalesthio
46.2k

framer-motion

Implement Disney's 12 animation principles on React components with Framer Motion.

Community
Intermediate
cipriantitirecipriantitire

particles-gpu

Render thousands to millions of particles using GPU instancing and shaders in Three.js/React-Three-Fiber.

Community
Advanced