سلام خدمت شما دوستان عزیز. انشاالله که سالم و تندرست باشید. در قسمت قبلی این مقاله، با نحوه ایجاد و حرکت particle ها روی canvas و همچنین چگونگی ترسیم خط بین particle های نزدیک آشنا شدیم. اگر مقاله قبلی رو نخونده اید پیشنهاد می کنم که حتما اول اون رو بخونید چون این مطلب کلا ادامه همون قبلیه:
خوب حالا امروز، می خواهیم این رو:
تبدیلش کنیم به این:
من در مقاله قبلی، سعی کردم که پله به پله مراحل کار رو توضیح بدم چون اصل کاری اونها بودن. اگر پا به پای من اومده باشید، چیز هایی که در ادامه قرار بگم فقط یه مشت ریزه کاریه که زیاد طول نمی کشه.
قبل اینکه شروع کنیم، بهتره که مروری گذرا بر اهدافمون داشته باشیم:
این که قاعدتا زیاد کار سختی نیست، اول از همه یه تابع 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
حالا دیگه کارمون تمومه و آماده ایم که کد رو اجرا کنیم. نتیجه ای که حاصل میشه این خواهد بود:
امیدوارم که این مطلب براتون مفید واقع شده باشه. اگر خوشتون اومد لایک فراموش نشه. همچنین اگر وقت کردید سری به بقیه مطالبم هم بزنید. شاید خوشتون بیاد:
