Анімація елементів на полотні 1/2

Наступним нашим кроком буде створення функції drawBee, яка власне і намалює бджілку. Функція drawBee має функцію circle, щоб намалювати бджілку на координатах, що задані їй х- та у аргументами:

var drawBee = function (x, y) {
ctx.lineWidth = 2;
ctx.strokeStyle = "Black";
ctx.fillStyle = "gold";

 circle(x, y, 8, true); // тіло бджілки, жовте
circle(x, y, 8, false); // обрис тіла
circle(x-5, y-11, 5, false); // крильця
circle(x+5, y-11, 5, false);
circle(x-2, y-1, 2, false); // очі
circle(x + 2, y-1, 2, false);
};

У першій секції цього коду, що на позиції 0, ми задаємо малюнку властивості lineWidth, strokeStyle та fillStyle. Властивість lineWidth ми виставляємо на 2 пікселі, strokeStyle на Black. Це означатиме, що обриси кіл, що слугуватимуть основою для тіла, крилець та очей нашої бджілки, матимуть товсті чорні краї. Властивість fillStyle виставляється на Gold, ми заповнимо коло тіла бджілки красивими жовтуватими барвами. У другій секції коду, ми і малюємо декілька кіл, щоб створити саму бджілку.

Ми створимо функцію update, що оновлюватиме х та у координати бджілки у випадковому порядку, і нехай собі носиться по полотні. Функція update приймає єдиний аргумент coordinate, ми оновлюемо х та у координати по одному за раз так, щоб бджілка рухалася то вліво, то вправо і згори донизу у довільному порядку. Функція update виглядає наступним чином:

var update = function(coordinate){
   var offset = Math.random() * 4 - 2;
   coordinate += offset;

   if (coordinate > 500){
       coordinate = 500;
   }

   if (coordinate < 0){
       coordinate = 1;
   }
   return coordinate;
};

Змінюємо координати за допомогою offset. На позиції 0 ми створюємо змінну, що зветься offset, яка визначить межі зміни поточних координат нашої бджілки. Ми генеруємо значення для параметра offset шляхом виконання математичної операції Math.random() * 4 - 2. Таким чином ми отримаємо випадкове число у числовому діапазоні від 2 до 2. Ось як це відбувається: виклик Math.random() надає нам випадкове число між 0 та 1, тож Math.random() * 4 продукує випадкове число між 0 та 4. Потім ми віднімаємо 2, щоб отримати випадкове число у межах між -2 та 2.

На позиції 0 ми застосовуємо coordinate += offset, аби модифікувати координати за допомогою вищезгаданого числа offset. Якщо offset - це число, що більше за 0, coordinate зросте, а якщо менше нуля, coordinate зменшуватиметься.

Також ми впевнюємося у тому, що coordinate ніколи не перевищить 500 (в даному випадку наш canvas 500x500) і не буде менше за 0, щоб бджілка не вилетіла за межі полотна. Якщо coordinate стає більшим за 500 ми заново виставляємо його на 500, якщо переходить межу 0, то скидаємо до 0. Зрештою ми повертаємо coordinate. Повернувши нове значення змінної coordinate, ми зможемо використовувати це значення в нашому коді у подальшому. Згодом ми скористаємося цим повернутим із методу update значенням, щоб модифікувати х- та у-значення наступним чином.

setInterval – це функція в JavaScript, яка дозволяє виконувати якийсь код через певні проміжки часу постійно.
Що робить функція setInterval:
Вона дозволяє нам виконувати певний код знову і знову через однаковий час. Наприклад, можна зробити так, щоб кожні 2 секунди щось відбувалося на сторінці (наприклад, змінювався колір фону).

Основна структура:

setInterval(function() {
   // Що ми хочемо робити кожен раз
}, час_в_мілісекундах);

У цьому прикладі setInterval постійно виконує анімацію бджілки. Кожні 100 мілісекунд (0,1 секунди) він робить наступне:
- Очищає попередній кадр за допомогою ctx.clearRect.
- Малює бджілку у нових координатах x та y через drawBee.
- Оновлює координати за допомогою функції update, додаючи випадкове зміщення.
- Малює рамку навколо полотна через ctx.strokeRect.
Таким чином, ми отримуємо ефект руху бджілки по полотну. setInterval тут працює як таймер, який постійно повторює ці дії через заданий проміжок часу, створюючи анімацію.

setInterval(function(){
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 drawBee(x,y);
 x = update(x);
 y = update(y);

 ctx.strokeRect(0, 0, canvas.width, canvas.height);
}, 100);

Отже, весь наш код має такий вигляд:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>БДЖІЛКА рандомне переміщення</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

var x = 100;
var y = 100;

var circle = function(x, y, radius, fillCircle){
 ctx.beginPath();
 ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 if (fillCircle){
 ctx.fill();
 } else {
 ctx.stroke();
 }
};

var drawBee = function (x, y){
 ctx.lineWidth = 2;
 ctx.strokeStyle = "Black";
 ctx.fillStyle = "Gold";

 circle(x, y, 8, true);
 circle(x, y, 8, false);
 circle(x - 5, y - 11, 5, false);
 circle(x + 5, y - 11, 5, false);
 circle(x - 2, y - 1, 2, false);
 circle(x + 2, y - 1, 2, false);
};

var update = function(coordinate){
 var offset = Math.random() * 4 - 2;
 coordinate += offset;

 if (coordinate > 500){
 coordinate = 500;
 }

 if (coordinate < 0){
 coordinate = 1;
 }

 return coordinate;
};

setInterval(function(){
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 drawBee(x,y);
 x = update(x);
 y = update(y);

 ctx.strokeRect(0, 0, canvas.width, canvas.height);
}, 100);
</script>
</body>
</html>

Також зараз розберемо, як заставити нашу бджілку літати по колу!

function animate() {
    // Обчислюємо нові координати для бджілки
    var beeX = canvas.width/2 + radius * Math.cos(angle); // Обчислюємо x
    var beeY = canvas.height/2 + radius * Math.sin(angle); // Обчислюємо y
    angle += 0.05; // Збільшуємо кут, щоб бджілка рухалась по колу
    drawBee(beeX, beeY); // Малюємо бджілку на нових координатах
}

1. Обчислення координат для бджілки

var beeX = canvas.width / 2 + radius * Math.cos(angle);
var beeY = canvas.height / 2 + radius * Math.sin(angle);

canvas.width / 2 та canvas.height / 2 — ми використовуємо ці значення, щоб знайти центру canvas. Таким чином, бджілка буде рухатись відносно центру екрану, а не від його верхнього лівого кута. Для цього ми ділимо ширину і висоту canvas на два.

Таким чином, кожен раз, коли ми змінюємо angle, ми отримаємо нову позицію бджілки, яка знаходиться на колі.

2. Зміна кута

angle += 0.05;

angle — це змінна, яка представляє поточний кут для обертання. Початкове значення angle дорівнює 0.Кожен раз, коли виконується функція animate(), ми збільшуємо значення angle на 0.05. Це означає, що кожен раз бджілка трохи обертається по колу, рухаючись в напрямку годинникової стрілки.Якщо збільшити це значення (наприклад, зробити його більше), бджілка буде рухатись швидше, а якщо менше — повільніше.

3. Малювання бджілки на нових координатах

drawBee(beeX, beeY);

drawBee() — це функція, яка малює бджілку на координатах beeX та beeY, які ми обчислили раніше. Це дозволяє бджілці переміщуватись по колу, оскільки ми кожен раз передаємо їй нові координати.

Отже, весь наш код має такий вигляд:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>БДЖІЛКА переміщення по кругу</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

var x = 100;
var y = 100;

var angle = 0; // Початковий кут
var radius = 50; // Радіус кола, по якому буде літати бджілка

var circle = function(x, y, radius, fillCircle){
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    if (fillCircle){
        ctx.fill();
    } else {
        ctx.stroke();
    }
};

var drawBee = function (x, y){
    ctx.lineWidth = 2;
    ctx.strokeStyle = "Black";
    ctx.fillStyle = "Gold";

    circle(x, y, 8, true);
    circle(x, y, 8, false);
    circle(x - 5, y - 11, 5, false);
    circle(x + 5, y - 11, 5, false);
    circle(x - 2, y - 1, 2, false);
    circle(x + 2, y - 1, 2, false);
};

function animate() {
    // Обчислюємо нові координати для бджілки
    var beeX = canvas.width/2 + radius * Math.cos(angle); // Обчислюємо x
    var beeY = canvas.height/2 + radius * Math.sin(angle); // Обчислюємо y
    angle += 0.05; // Збільшуємо кут, щоб бджілка рухалась по колу
    drawBee(beeX, beeY); // Малюємо бджілку на нових координатах
}

setInterval(function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаємо екран
    animate(); // Анімація бджілки

    ctx.strokeRect(0, 0, canvas.width, canvas.height); // Малюємо межі канвасу
}, 100);
</script>
</body>
</html>