کهکشان ذره‌ای: چطور کار می‌کند؟

این انیمیشن در CodeBeats تابعی ۳۷ خطی به نام fxGalaxy است. چند صد نقطه، اول یک دایره‌ی آفتابگردانی می‌سازند. وقتی ماوس روی آن می‌رود (یا AI مشغول کار است)، از مرکز به بیرون به یک کهکشان مارپیچی چرخان تبدیل می‌شوند. این صفحه قدم‌به‌قدم ریاضی و کد آن را باز می‌کند. هر جا دمو هست، با اسلایدرهایش بازی کنید.

۱. کد اصلی کجاست

یک کپی دست‌نخورده از همین خطوط در original/ گذاشته شده تا کنار این مستندات بخوانید. هیچ چیزی در CodeBeats تغییر نکرده است.

۲. فایل‌های پوشه‌ی Pixell

۳. ایده‌ی کلی در یک نگاه

هر نقطه دو «جای هدف» دارد: جایش در شکل A و جایش در شکل B. هر فریم این مراحل اجرا می‌شود:

۴. حلقه‌ی انیمیشن

// fx.js خط ۳۲-۳۶
function frame(now){ if(!cv.isConnected) return; requestAnimationFrame(frame);
  const dt = Math.min(50, now-last) / 16.67; last = now;
  if(!vis || document.hidden) return;
  const dpr = Math.min(2, devicePixelRatio||1), cw = cv.clientWidth, ch = cv.clientHeight;
  if(cw!=w || ch!=h){ w=cw; h=ch; cv.width=w*dpr; cv.height=h*dpr }
  ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,w,h);

• requestAnimationFrame: مرورگر قبل از هر بار نقاشی صفحه (معمولاً ۶۰ بار در ثانیه) تابع را صدا می‌زند و now را به میلی‌ثانیه می‌دهد.
• dt: فاصله‌ی دو فریم تقسیم بر ۱۶٫۶۷ms (یک فریم در ۶۰fps). در ۶۰fps برابر ۱ است و در ۳۰fps برابر ۲. همه‌ی سرعت‌ها در dt ضرب می‌شوند تا انیمیشن روی صفحه‌ی ۱۲۰ هرتز تندتر و روی سیستم کند آهسته‌تر نشود. سقف ۵۰ms جلوی پرش بزرگ بعد از برگشتن به تب را می‌گیرد.
• dpr: روی صفحه‌های رتینا هر پیکسل CSS چند پیکسل واقعی است. بوم با w*dpr پیکسل ساخته می‌شود تا تیز باشد و setTransform باعث می‌شود بقیه‌ی کد با واحد CSS کار کند. سقف ۲ برای کارایی است.
• اگر بوم از صفحه حذف شود (isConnected)، حلقه برای همیشه متوقف می‌شود. اگر بوم دیده نشود یا تب پنهان باشد، فقط آن فریم رد می‌شود.

۵. شکل A: دایره‌ی آفتابگردانی (Phyllotaxis)

// fx.js خط ۲۴ و ۴۵
orR = Math.sqrt((i + .5) / N)      // شعاع
orA = i * 2.39996                  // زاویه = i × زاویه‌ی طلایی
ox = Math.cos(orA + rot) * orR;  oy = Math.sin(orA + rot) * orR;

این همان الگوی چیدمان دانه‌های گل آفتابگردان است. دو ترفند دارد:

• زاویه‌ی طلایی ۲٫۳۹۹۹۶ رادیان (۱۳۷٫۵ درجه): هر نقطه نسبت به قبلی این‌قدر می‌چرخد. چون این عدد «گنگ‌ترین» نسبت ممکن به دور کامل است، نقطه‌ها هیچ‌وقت روی یک خط (پره) نمی‌افتند و فضا یکنواخت پر می‌شود.
• جذر در شعاع: مساحت دایره با r² رشد می‌کند. اگر شعاع خطی بود، مرکز شلوغ و لبه خالی می‌شد. با sqrt تراکم همه‌جا یکسان است.

۶. شکل B: کهکشان مارپیچی

// fx.js خط ۲۳-۲۴: یک بار، هنگام ساخت ذره
gr = Math.pow(Math.random(), .65)                          // فاصله از مرکز، 0..1
ga = (i % ARMS) * 2π / ARMS                                // کدام بازو (۳ بازو، ۱۲۰ درجه از هم)
   + gr * 4.4                                              // هرچه دورتر، بیشتر پیچیده: این مارپیچ را می‌سازد
   + (Math.random() - .5) * (.9 - .5 * gr)                 // پراکندگی، نزدیک مرکز بیشتر

// fx.js خط ۴۶: هر فریم
ga' = ga + rot * (1.5 / (gr + .3))                         // چرخش تفاضلی
gx0 = cos(ga') * gr;   gy0 = sin(ga') * gr * .58          // بیضی: از زاویه دیده می‌شود
gx  = gx0*cos(tilt) - gy0*sin(tilt)                        // ماتریس دوران ۲ بعدی، tilt = -.38
gy  = gx0*sin(tilt) + gy0*cos(tilt)

• توزیع شعاعی pow(random, .65): توان کمتر از ۱ عددهای تصادفی را به سمت ۱ می‌برد، پس ستاره‌های بیشتری در لبه هستند و مرکز خیلی پرنور نمی‌شود. در آزمایشگاه اسمش radiusBias است.
• بازوها: i % ARMS ذره‌ها را به نوبت بین بازوها پخش می‌کند.
• پیچش (twist): زاویه با فاصله زیاد می‌شود (gr*4.4). نقطه‌ای که دورتر است بیشتر دور مرکز پیچیده، و حاصل یک مارپیچ ارشمیدسی است.
• چرخش تفاضلی (diffRot): 1.5/(gr+.3) برای مرکز (gr=0) برابر ۵ است و برای لبه (gr=1) حدود ۱٫۱۵. یعنی مرکز تقریباً ۴ برابر سریع‌تر می‌چرخد، مثل کهکشان واقعی، و بازوها با گذر زمان پیچیده‌تر به نظر می‌رسند. عدد .3 جلوی تقسیم بر صفر را می‌گیرد.
• پهن‌شدگی و کجی: ضرب y در ۰٫۵۸ دایره را بیضی می‌کند (انگار از کنار نگاهش می‌کنیم). ماتریس دوران، بیضی را ۲۲ درجه کج می‌کند.

۷. تبدیل A به B: mix و m

// fx.js خط ۳۷-۳۸
want = Math.max(hover, ai ? 1 : 0)          // ۱ = می‌خواهیم کهکشان باشد
mix += (want - mix) * .045 * dt             // هر فریم ۴٫۵٪ از فاصله‌ی باقی‌مانده را طی کن

// fx.js خط ۴۷-۴۸
m = clamp(mix * 1.7 - gr * .7, 0, 1)        // سهم همین نقطه از تبدیل
m = m * m * (3 - 2 * m)                     // smoothstep: شروع و پایان نرم
x = cx + R * (ox + (gx - ox) * m)           // lerp بین A و B

دو لایه‌ی تبدیل داریم:

1. mix (سراسری) یک عدد بین ۰ و ۱ است. با فرمول «نرم‌کردن نمایی» به سمت want می‌رود: هر فریم کسر ثابتی از فاصله‌ی باقی‌مانده را طی می‌کند، پس اول سریع است و آخرش آرام. با ۰٫۰۴۵ حدود یک ثانیه طول می‌کشد تا ۹۵٪ راه طی شود.
2. m (برای هر نقطه): نقطه‌ای که gr کمتری دارد (نزدیک مرکز) زودتر شروع می‌کند. وقتی mix = 0.5 است، نقطه‌ی مرکز m = 0.85 دارد ولی نقطه‌ی لبه m = 0.15. برای همین تبدیل مثل موجی از مرکز به بیرون پخش می‌شود. ضریب ۱٫۷ = ۱ + ۰٫۷ تضمین می‌کند که در mix = 1 حتی دورترین نقطه هم به ۱ برسد.

در Pixell عدد ۰٫۷ اسم stagger گرفته و key با گزینه‌ی order عوض می‌شود: از مرکز (اصلی)، از لبه، تصادفی، از چپ به راست، یا همه با هم.

۸. سرعت و چرخش

// fx.js خط ۳۸
spd += ((ai ? 3.2 : 1 + mix * 2.6) - spd) * .04 * dt
rot += .0035 * spd * dt * (reduce ? .25 : 1)

• rot یک زاویه‌ی مشترک است که همیشه زیاد می‌شود. هر دو شکل آن را به زاویه‌ی نقطه‌ها اضافه می‌کنند.
• سرعت هدف در حالت آرام ۱ است، در کهکشان کامل ۳٫۶ (۱ + ۲٫۶) و وقتی AI کار می‌کند ۳٫۲. خود spd هم با همان نرم‌کردن نمایی تغییر می‌کند، پس شتاب‌گرفتن و ترمز طبیعی دیده می‌شود.
• اگر کاربر «کاهش حرکت» را روشن کرده باشد، چرخش ۴ برابر کندتر است (دسترس‌پذیری).

۹. واکنش به ماوس

// fx.js خط ۴۹-۵۰
dx = x - mx;  dy = y - my;  d2 = dx*dx + dy*dy
if (d2 < 3600) {                         // 3600 = 60²، یعنی شعاع ۶۰ پیکسل
  d = sqrt(d2) || 1
  f = (3600 - d2) / 3600 * 14            // زیر ماوس ۱۴px، در لبه‌ی دایره ۰
  x += dx / d * f;  y += dy / d * f      // در جهت دور از ماوس
}

• مقایسه با d2 به جای d یعنی برای نقطه‌های دور جذر گرفته نمی‌شود. این یک بهینه‌سازی رایج است.
• dx/d و dy/d بردار واحد از ماوس به نقطه است و f طول هل. در Pixell می‌توانید حالت را «جذب» (علامت منفی) یا «گرداب» (بردار عمود: -dy, dx) کنید.
• host: در CodeBeats کل کادر Develop ماوس را می‌گیرد، نه فقط بوم کوچک. برای همین کهکشان قبل از رسیدن ماوس به آن بیدار می‌شود.

۱۰. رسم: نرمی، چشمک، هاله، نور

// fx.js خط ۵۱: نقطه به هدفش نمی‌پرد، هر فریم ۲۲٪ راه را می‌رود
p.x += (x - p.x) * Math.min(1, .22 * dt)
// خط ۵۲: چشمک با سینوس، هر نقطه فاز خودش را دارد (tw)
ctx.globalAlpha = .45 + .45 * Math.sin(now / 650 + p.tw)
// خط ۵۳: اندازه در حالت کهکشان کمی بزرگ‌تر
ctx.arc(p.x, p.y, p.sz * (.85 + .35 * m), 0, 2π)
// خط ۴۰-۴۳: گرادیان شعاعی آبی پشت نقطه‌ها، با mix پررنگ‌تر و بزرگ‌تر
ctx.globalCompositeOperation = "lighter"

• دنبال‌کردن نرم: همان نرم‌کردن نمایی، این بار برای مکان. همین باعث می‌شود هل ماوس کش‌دار باشد و هیچ پرشی دیده نشود.
• چشمک: شفافیت بین ۰ و ۰٫۹ نوسان می‌کند. دوره‌ی آن 2π × 650ms ≈ 4 ثانیه است و هر نقطه با فاز تصادفی tw مستقل چشمک می‌زند.
• lighter: رنگ‌ها به جای پوشاندن هم جمع می‌شوند. جایی که نقطه‌ها روی هم می‌افتند (مرکز کهکشان) روشن‌تر می‌شود، مثل نور واقعی.
• رنگ: ۸ رنگ آبی در PAL و هر نقطه رنگ i % 8 را می‌گیرد.

۱۱. کارایی

• IntersectionObserver: وقتی بوم از دید خارج شده (اسکرول)، رسم متوقف می‌شود. document.hidden همین کار را برای تب پنهان انجام می‌دهد.
• ذرات یک بار ساخته می‌شوند و فقط مختصاتشان عوض می‌شود. در حلقه شیء جدیدی ساخته نمی‌شود، پس جمع‌آوری زباله (GC) کار زیادی ندارد.
• هر نقطه یک beginPath/arc/fill است. تا حدود ۳۰۰۰ نقطه روان است. برای ده‌ها هزار نقطه باید به WebGL رفت.
• در Pixell شمارنده‌ی fps پایین چپ آزمایشگاه این را نشان می‌دهد. تعداد را تا ۵۰۰۰ ببرید و ببینید.

۱۲. جدول همه‌ی پارامترها

ستون «اصلی» عدد ثابتی است که در fx.js نوشته شده. پیش‌فرض Pixell همیشه همان است.

۱۳. استفاده در صفحه‌ی خودتان (API)

<canvas id="g" style="width:300px;height:300px"></canvas>
<script src="galaxy.js"></script>
<script>
  const g = PixellGalaxy(document.getElementById("g"), {to: "sphere", palette: "aurora"});

  g.set({arms: 5, trail: .8});    // هر گزینه را هر لحظه عوض کنید
  g.toggle();                     // برای trigger: "click" جابه‌جا می‌کند
  g.shock();                      // موج ضربه از مرکز (یا g.shock(x, y))
  g.scramble();                   // نقطه‌ها را در کل بوم پخش کن تا خودشان برگردند
  g.state();                      // {mix, spd, rot, fps, n}
  g.options();                    // کپی تنظیمات فعلی
  g.destroy();                    // توقف و حذف رویدادها
</script>

۱۴. ساختن شکل جدید

یک شکل فقط یک تابع است. برای نقطه‌ی p و زاویه‌ی rot، مختصات واحد را در out می‌نویسد: x و y تقریباً بین ۱- و ۱ (y رو به پایین) و z عمق بین ۱- و ۱ (برای شکل تخت ۰). نقطه‌ی جلوتر (z مثبت) بزرگ‌تر و پررنگ‌تر رسم می‌شود.

// p: {i, N, u = (i+.5)/N, r1, r2, r3, r4}  (r ها عدد تصادفی ثابت هر نقطه‌اند)
PixellGalaxy.shapes.flower = (p, rot, o, out) => {
  const a = p.u * Math.PI * 2 + rot;
  const r = Math.cos(5 * a) * .9 * (p.r2 < .7 ? 1 : Math.sqrt(p.r3));   // گل رز ۵ گلبرگ
  out.x = Math.cos(a) * r;  out.y = Math.sin(a) * r;  out.z = 0;
};
g.set({to: "flower"});

در آزمایشگاه شکل جدید را در فهرست SHAPES داخل playground.js اضافه کنید تا در منو ظاهر شود.

۱۵. تمرین‌ها

1. در آزمایشگاه stagger را ۰ کنید. تبدیل چه فرقی می‌کند؟ چرا؟ (راهنما: فرمول m)
2. diffRot را ۰ کنید و چند ثانیه صبر کنید. بازوها دیگر پیچیده‌تر نمی‌شوند. چرا؟
3. follow را ۰٫۰۳ و mouseForce را ۶۰ کنید. نتیجه را با اصل مقایسه کنید.
4. blend را از lighter به «معمولی» ببرید و به مرکز کهکشان نگاه کنید.
5. شکل spiral بسازید که در آن r = p.u و a = p.u * 20 + rot باشد (مارپیچ ارشمیدسی ساده).
6. در galaxy.js کاری کنید که رنگ هر نقطه به جای ثابت، با m از رنگ A به رنگ B برود. (راهنما: دو پالت و درون‌یابی RGB)