ترسیم نمودارهای پارامتری با بوم HTML

شما احتمالاً با نمودارهایی که شبیه این هستند آشنا هستید:

رویکرد سنتی به توابع نمودار شامل نقشه برداری از هر X به یک و تنها یک نقطه Y است. این رویکرد اشکالاتی دارد. به عنوان مثال ، از آنجا که برای هر X فقط 1 سال می تواند وجود داشته باشد ، شما نمی توانید بدون "هک" یک دایره را از این طریق ترسیم کنید. برای ترسیم یک دایره به دو کارکرد نیاز دارید: یکی برای نیمه بالا و دیگری برای نیمه پایین.

ترسیم نمودارها با توابع پارامتری این محدودیت را شل می کند. نمودارهای پارامتری از دو عملکرد استفاده می کنند ، یکی برای مختصات X و دیگری برای مختصات Y. هر یک از این توابع دارای یک ورودی t هستند. برای تجسم یک نمودار پارامتری ، شما مقداری t را وارد می کنید و هر نقطه را در (x (t) ، y (t) به پایان می رساند). از آنجا که X و Y را به طور جداگانه توصیف می کنید ، دیگر محدود به نمودارهایی نیستید که فقط برای هر X 1 Y دارند. به عنوان مثال ، یک دایره می تواند با توابع پارامتری زیر ترسیم شود:

این یک دایره کامل با شعاع r به ما می دهد.

این یک نمونه ساده از آنچه توابع پارامتری می توانند انجام دهند. با عملکردهای پیچیده تر می توانید نمودارهای جالب ایجاد کنید.

ترسیم نمودارهای پارامتری با بوم HTML

برای شروع طرح نمودارهای پارامتری ، ابتدا باید بوم HTML خود را تنظیم کنیم. من از تنظیمات زیر استفاده می کنم

index.html:

script. js:

این یک بوم 600x600 به صورت افقی و عمودی در صفحه وب شما به شما می دهد.

برای شروع نقاشی به یک زمینه 2D نیاز خواهیم داشت.

برای ترسیم نمودارهای پارامتری ما باید عملکرد زیر را پیاده سازی کنیم:

در جایی که FX و FY برخی از کارکردهایی هستند که مقداری شناور را از TARR به عنوان ورودی می گیرند و مقداری شناور را به عنوان خروجی باز می گردانند.

یک نکته در نمودار پارامتری ما توسط (FX (TARR [I]) ، FY (TARR [I]) تعریف شده است. برای ترسیم نمودار ما باید خطوط بین نقاط بعدی را ترسیم کنیم.

در اینجا کد آمده است که می توانیم برای ترسیم یک خط استفاده کنیم:

ما می توانیم از این عملکرد برای پیاده سازی نقشه کش استفاده کنیم.

بیایید آن را امتحان کنیم:

شما باید این را ببینید:

خیلی جالب نیست ، اما شروع آن است!

بیایید سعی کنیم یک دایره بعدی ترسیم کنیم.

توجه کنید که چگونه Tarr ما فقط [200 ، 400] برای خطوط بود. ما فقط برای توصیف یک خط به دو نکته نیاز داریم. برای یک دایره تا حد امکان به امتیازات نیاز خواهیم داشت. امتیاز بیشتری از دایره ما استفاده می کنیم. به جای نوشتن نکات با دست ، اجازه می دهیم تابعی را بنویسید که بتواند این نکات را برای ما ایجاد کند.

این تابع امتیاز N+1 را بین کم و زیاد برمی گرداند.

با استفاده از این عملکرد ، ترسیم یک دایره به آسانی می شود:

این عملکرد یک دایره کامل را ترسیم می کند ، اما بیشتر دایره از مرز بوم خارج است. ما می توانیم با استفاده از جبران خسارت به شرح زیر ، دایره را متمرکز کنیم:

این یک دایره کاملاً متمرکز به ما می دهد!

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

این امر منشأ نمودار ما را به مرکز بوم ما منتقل می کند و دامنه x و y را بی ن-0. 5 و 0. 5 عادی می کند. تعریف مجدد قرعه کشی از این طریق به ما امکان می دهد اندازه بوم خود را بدون قطع قسمت هایی از نقاشی خود تغییر دهیم.

با عملکرد جدید قرعه کشی ما ، می توانیم دایره ای مانند این را ترسیم کنیم:

توجه کنید که چگونه شعاع را از 100 به 0. 1 کاهش داده ام. اگر از شعاع 100 استفاده کنیم ، دایره به خارج از بوم کشیده می شود.

ترسیم با مختصات قطبی.

تاکنون ما با سیستم مختصات دکارتی ترسیم کرده ایم. در این سیستم X موقعیت افقی یک نقطه را توصیف می کند و y موقعیت عمودی یک نقطه را توصیف می کند. یک سیستم مختصات دیگر به نام سیستم مختصات قطبی وجود دارد که موقعیت نقاط را از نظر زاویه و طول توصیف می کند.

برای ترسیم یک دایره با مختصات قطبی می توانیم از توابع پارامتری زیر استفاده کنیم:

Th (t) = t // angle r (t) = r // طول

جایی که Th (t) به ما زاویه ای می دهد و r (t) شعاع برخی از ورودی ها را به ما می دهد. در اصل این دو کارکرد نمودار را توصیف می کنند که تمام نقاط آن یک طول R به دور از مبدا هستند - این یک دایره است.

اگر عملکردهای قطبی خود را به عملکردهای دکارتی تبدیل کنیم ، می توانیم از قرعه کشی استفاده کنیم تا با مختصات قطبی ترسیم کنیم. ما می توانیم این کار را با کمی مثلثات دبیرستانی انجام دهیم.

برای به دست آوردن هماهنگی X از یک نقطه قطبی ، ما از زاویه استفاده می کنیم و آن را با شعاع مقیاس می کنیم. ما یک عمل مشابه را برای y انجام می دهیم ، اما با سینوسی.

x (t) = r (t) cos (th (t)) y (t) = r (t) sin (th (t))

بیایید این را به صورت کد پیاده سازی کنیم.

اکنون می توانیم دایره خود را اینگونه ترسیم کنیم:

نمونه های نمودار پیشرفته

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

مثال 1

فقط با 7 خط کد یک نمودار کاملاً پیچیده را شرح داده ایم. این چیزی بیش از تغییر در نمودار یک دایره نیست. به جای شعاع ثابت ، شعاع به عنوان تابعی از گناه (t) متفاوت است. سعی کنید با عواملی غیر از 1. 2 آزمایش کنید. چه اتفاقی می افتد اگر یک شماره غیر منطقی مانند PI انتخاب کنید؟

مثال 2

ما همچنین می توانیم با اصلاح مقادیر در محدوده خود ، اثر جالبی بدست آوریم. این مثال 800 خط را برای مقادیر t بین 0 تا 500 ترسیم می کند. موارد قبلی 800 خط را برای مقادیر t بین 0 تا 100 ترسیم می کند. در این مثال خطوط ما 5 برابر از هم فاصله دارند بنابراین منحنی ما کمتر گرد می شود. این یک اثر جالب به ما می دهد.

مثال 3

این یک مارپیچ ایجاد می کند. Kinda خنک است ، اما اجازه می دهیم وقتی دامنه را اصلاح می کنیم چه اتفاقی می افتد ...

مثال 4

حالا این جالب تر است!

مثال 5

برای تولید نمودارهای جالب ، لزوماً لازم نیست بدانید که چه کاری انجام می دهید. فقط آزمایش کنید و تکرار کنید.

چالش ها

در اینجا چند دستورالعمل وجود دارد که می توانید برای گسترش آنچه در اینجا ساخته ایم ، استفاده کنید.

نتیجه

با تشکر از خواندن! امیدوارم در این مقاله چیز جالبی آموخته باشید. ترسیم با نمودارهای پارامتری قدرت زیادی را بدون پیچیدگی زیاد به شما می دهد. در کمتر از 100 خط کد توانستیم چند نمودار جالب به نظر برسیم.

اگر چیزی را که دوست دارید ایجاد کنید ، لطفاً به من نشان دهید! آفرینش خود را برای من در @viveks3th توییت کنید.