چطور با جاوا اسکریپت یک Particle System باحال بسازیم #2

سلام خدمت شما دوستان عزیز. انشاالله که سالم و تندرست باشید. در قسمت قبلی این مقاله، با نحوه ایجاد و حرکت particle ها روی canvas و همچنین چگونگی ترسیم خط بین particle های نزدیک آشنا شدیم. اگر مقاله قبلی رو نخونده اید پیشنهاد می کنم که حتما اول اون رو بخونید چون این مطلب کلا ادامه همون قبلیه:

خوب حالا امروز، می خواهیم این رو:

تبدیلش کنیم به این:

من در مقاله قبلی، سعی کردم که پله به پله مراحل کار رو توضیح بدم چون اصل کاری اونها بودن. اگر پا به پای من اومده باشید، چیز هایی که در ادامه قرار بگم فقط یه مشت ریزه کاریه که زیاد طول نمی کشه.

قبل اینکه شروع کنیم، بهتره که مروری گذرا بر اهدافمون داشته باشیم:

• قراره که خطوط ترسیم شده بین particle ها رنگ های random داشته باشند و بعد هر render این رنگ ها تغییر کنند.
• قراره که بین particle هایی که به هم نزدیک تر اند، خطوط پررنگ تری نسبت به particle هایی که از هم دور هستند رسم بشه.

رنگ های رندوم RGB

این که قاعدتا زیاد کار سختی نیست، اول از همه یه تابع helper تعریف می کنیم که با اون به سهولت رنگ RGB بگیریم:

در این قطعه کد داریم برای مقادیر r, g و b یه سری عدد رندوم بین 0 تا 256 در نظر میگیریم و در یک template string قرار میدیم و همون رو به عنوان حاصل برمیگردونیم. یه پارامتر opacity هم داریم که شفافیت رنگ ما رو تعریف می کنه. قراره بر اساس فاصله بین particle ها، مقدار opacity رو تنظیم کنیم:

همون قبلیه، ولی الان داریم از getRandomRGBColor استفاده می کنیم تا هربار یک رنگ شانسی برای خط مون بگیریم و از اون رنگ در strokeStyle استفاده می کنیم. نکته ای که وجود داره اینه که ما داریم از این فرمول برای محاسبه opacity خط استفاده می کنیم:

(r1 + r2 - d)/d

من در ادامه جزئیات این تیکه رو برسی خواهم کرد. می تونید همین الان کپی و پیست کنید و خودتون رو راحت کنید. حتی می تونید ادامه مطلب رو رد کنید اما اگر می خواهید راجع به جزئیاتش بدونید، در ادامه توضیح خواهم داد. خوب اول بزارید بریم سراغ این بخش

r1 + r2 -d

چیزی که این بخش بهمون میده اینه:

متاسفانه من بلد نیستم انیمیشن بسازم، ولی خوب شما فرض کنید که دایره هایی که توی شکل هستند دارن به هم نزدیک و نزدیک تر میشن (یا بهتره بگم که بیشتر تو هم فرو میرن)، در این صورت بزارید برسی کنیم که چه اتفاقی برای نقطه A و B و در نتیجه پاره خط AB می افته.

نکته: نقطه های O و 'O در مرکز دایره ها، خود particle های ما هستند. البته درسته که particle ها هم دایره اند و شعاع دارند، ولی اون قدر این شعاع کوچیکه که می تونیم چشم پوشی کنیم و اون ها رو نقطه روی صفحه در نظر بگیریم.
دایره ها هم حاصل همون شعاع فرضی هست که خودمون در نظر گرفتیم، یعنی 40 برابر شعاع particle ها

اگر نقطه O و 'O به هم دیگه نزدیک بشن، اون وقت نقطه A به 'O و نقطه B به O نزدیک تر میشه، این روند اون قدر ادامه پیدا می کنه تا A روی 'O و B روی O منطبق بشه (زمانی اتفاق می افته که شعاع دایره ها دقیقا از مرکز هم دیگه رد بشن)، اون وقت طول پاره خط AB با 'OO برابر میشه.

حالا اگه این دایره ها باز هم بیشتر توی هم فرو برن، اون وقت دیگه طول AB از 'OO هم بیشتر میشه:

پس به طور کلی، 3 حالت پیش میاد:

1. طول AB از 'OO کوچیک تره (تازه دایره ها شروع کرده اند به برخورد)

2. طول AB با 'OO برابره (دایره ها تقریبا تا نصفه تو هم فرو رفته اند)

3. طول AB از 'OO بیشتره (دایره ها از نصف بیشتر تو هم فرو رفته اند)

حالا بزارید برگردیم سر اصل قضیه:

(r1 + r2 - d) / d

• در حالت اول، این نسبت از 1 کوچیک تره، در نتیجه opacity ما مقداری بین 0 تا 1 خواهد بود (بسته به دوری یا نزدیکی particle کم و زیاد میشه).
• در حالت دوم، نسبت برابر با 1 هست، یعنی اگر particle ها به اندازه کافی به هم نزدیک بشن که روی شعاع همدیگه قرار بگیرن، خط کامل با opacity با مقدار 1 رسم میشه
• در حالت سوم، دیگه نسبت از 1 هم بالا تر میره. تاثیرش دقیقا مثل حالت دوم هست و باعث میشه که خط کاملا پر رنگ رسم بشه (معادل opacity با مقدار 1). در این حالت، دو particle دیگه روی شعاع نیستن، داخل دایره فرضی همدیگه قرار گرفته اند*

نتیجه

حالا دیگه کارمون تمومه و آماده ایم که کد رو اجرا کنیم. نتیجه ای که حاصل میشه این خواهد بود:

امیدوارم که این مطلب براتون مفید واقع شده باشه. اگر خوشتون اومد لایک فراموش نشه. همچنین اگر وقت کردید سری به بقیه مطالبم هم بزنید. شاید خوشتون بیاد: