canvas-procedural-animation

ساخت حرکت‌های رویه‌ای برای ذرات، آب‌وهوا و پشتیبانی از انیمیشن کاراکتر با p5.js

این مهارت با استفاده از p5.js و Canvas، حرکت‌های رویه‌ای مانند باران، برف، برگ، پر، ذرات محیطی و افکت‌های squash/stretch را تولید می‌کند. برای ساخت چرخه‌های ساده‌ی راه‌رفتن و جان‌بخشی به محیط اطراف کاراکتر نیز مناسب است.

با تکیه بر زمان یا شماره‌ی فریم، می‌توان پیش‌نمایش‌های قابل‌کنترل و قابل‌تکرار ساخت. این رویکرد برای افکت‌هایی مفید است که به اجزای SVG یا rig لایه‌ای و طراحی دستی تک‌تک عناصر نیاز ندارند.

چه چیزی می‌گیرید

• کد p5.js برای تولید ذرات و افکت‌های آب‌وهوایی
• حرکت‌های محیطی مانند باران، برف، برگ و پر
• افکت‌های procedural برای squash/stretch و بدن‌های ساده
• الگوی انیمیشن پیوسته با setup() و draw()
• راهنمای کنترل حرکت با زمان یا frame index

برای چه کاری خوب است

• ساخت overlayهای باران، برف، گردوغبار و ذرات محیطی
• جان‌بخشی سریع به صحنه‌های Canvas و کاراکترهای ساده
• پروژه‌هایی که به حرکت procedural و پیش‌نمایش سریع نیاز دارند
• تولید افکت‌هایی بدون نیاز به طراحی دستی اجزای SVG

برای چه کاری نیست

• بازیگری پیچیده‌ی چهره و انیمیشن دقیق اجزای لایه‌ای
• رندر نهایی با نیاز جدی به determinism فریم‌به‌فریم، مگر با پشتیبانی runtime
• ریگ‌های پیچیده یا حرکت‌هایی که به کنترل دستی هر جزء نیاز دارند

دربارهٔ این اسکیل

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.

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/

دانلود ZIP