کاربرد توابع مثلثاتی در برنامه نویسی

Vafa Karamzadegan

مطالب مرتبط

شاید برای شما هم این سوال پیش آمده باشد که محاسبات ریاضی در برنامه نویسی به کار می آید یا خیر؟

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

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

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

circles

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

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

یک صفحه HTML خالی ایجاد کنید.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<style type="text/css">
    .obj{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
</style>
<body>
</body>
<script type="text/javascript">
    $(document).ready(function(){

    });
</script>
</html>

در کد بالا کلاسی در CSS با نام obj تعریف کردیم. دایره هایی به قطر 32 پیکسل.
حال کد های زیر را قدم به قدم در تگ script وارد کنید.

 

for (i = 0; i <= Math.floor(Math.random() * 100); i++) $("body").append('<div class="obj"></div>');

کد فوق تعدادی تصادفی از دایره ها را میسازد و به صفحه اضافه میکند.

اکنون باید یک سری از مقادیر را برای انجام محاسبات خود تعریف کنیم.
objR: شعاع هر دایره را مشخص میکند.
cx: طول نقطه وسط صفحه نمایش را مشخص میکند.
cy: ارتفاع نقطه وسط صفحه نمایش را مشخص میکند.
به عبارتی cx و cy مختصات مرکز است.
r: فاصله دایره ها تا مرکز صفحه نمایش که من مقدار آن را مساوی 2/5 ارتفاع پنجره مرورگر در نظر گرفتم.

var objR = $(".obj").width() / 2;
var cx = $(window).width() / 2;
var cy = $(window).height() / 2;
var r = $(window).height() * (2/5);

حال باید به هر کدام از دایره ها یک زاویه اولیه قرارگیری بر روی صفحه نمایش و همچنین سرعت حرکت را به صورت تصادفی اختصاص بدهیم.
data-deg: زاویه اولیه قرارگیری بر روی صفحه نمایش (بین 0 الی 360 درجه)
data-speed: سرعت حرکت (بین 0 الی 1)
سپس باید شدت رنگ و اندازه هر کدام از دایره ها را با توجه به سرعت آن داره مشخص کنیم.
برای تعیین رنگ به background-color مقدار rgba(255, 0, 0, alpha) را اختصاص میدهیم. alpha میزان شدت رنگ است. مقدار آن بین 0 و 1 است. به جای alpha مقداری که به سرعت آن دایره دادیم را جایگذاری میکنیم. و از آنجایی که مقادیر نزدیک به 0 alpha چندان قابل مشاهده نیستند، یک ضریب 3 هم قرار میدهیم.
همینطور اندازه هر دایره را بر اساس سرعت آن مشخص میکنیم.

$(".obj").each(function(){
    $(this).attr({
        "data-deg": (Math.random() * 360),
        "data-speed": (Math.random() * 1),
    }).css({
        "background-color": "rgba(255, 0, 0, " + ($(this).attr("data-speed") * 3) + ")",
        "transform": "scale(" + parseFloat($(this).attr("data-speed") + 0.5) + ")"
    });
});

اکنون یک تایمر درست میکنیم که هر 20ms یک فریم از انیمیشن را تولید کند.
تایمر مقدار data-deg هر دایره را یکبار به اندازه data-speed افزایش میدهد. به عبارتی در هر بار اجرا، زاویه هر دایره را به اندازه مقدار سرعت حرکتی که به آن اختصاص دادیم افزایش میدهد.
از آنجایی که توابع sin و cos مقادیر زاویه ورودی را به صورت Radian قبول میکنند، باید زاویه هر دایره که صورت Degree به آن اختصاص را به رادیان تبدیل کنید.
برای تبدیل زاویه x به رادیان کافیست آن را در فرمول x * (pi / 180) بگذاریم.
و در آخر مختصات جدید قرارگیری هر دایره را در صفحه محاسبه میکنیم.

setInterval(function(){
    $(".obj").each(function(){
        var obj = $(this);
        obj.attr("data-deg", parseFloat(obj.attr("data-deg")) + parseFloat(obj.attr("data-speed")));
        var deg = (obj.attr("data-deg")) * (Math.PI / 180);

        obj.css({
            "left": cx + (Math.cos(deg) * r) - objR + "px",
            "top": cy - (Math.sin(deg) * r) - objR + "px"
        });
    });
}, 20);

برای درک بهتر به دایره مثلثاتی دقت کنید:


۰ نظر