В этой статье мы собираемся создать объект, который будет следовать за указателем мыши. По мере движения круга мыши этот объект будет следовать за стрелкой мыши с некоторой плавной скоростью, мы можем добиться этого эффекта с помощью p5.js.
Это мощная библиотека JavaScript для создания интерактивной графики и анимации в веб-браузере.
Подход:
- Создайте холст для анимации с помощью функции createCanvas().
- Нарисуйте объект на холсте в функции draw().
- Обновите положение объекта на основе положения мыши в функции рисования. Это можно сделать, вычислив разницу между текущим положением объекта и положением мыши и добавив часть этой разницы к положению объекта на каждой итерации функции рисования.
- Отрегулируйте скорость, с которой объект следует за мышью, регулируя долю, добавляемую к положению объекта в каждой итерации функции рисования.
Используемые функции: это список всех функций и переменных, используемых в примере кода.
- createCanvas:создает холст, на котором будет происходить анимация.
- background:устанавливает цвет фона холста.
- fill:устанавливает цвет заливки объекта, который будет нарисован.
- ellipse:нарисуйте эллипс на холсте. Эту функцию можно использовать для рисования объекта, который будет следовать за указателем мыши.
- mouseX и mouseY:встроенные переменные P5.js, которые содержат текущее положение мыши по осям x и y.
- draw:основной цикл анимации в P5.js, в котором происходит анимация. В этой функции вы можете обновить положение объекта в зависимости от положения мыши, перерисовать фон и перерисовать объект.
Такой подход позволяет создавать плавную анимацию, когда объект плавно перемещается по направлению к указателю мыши. Функция рисования многократно вызывается P5.js, поэтому положение объекта может обновляться на каждой итерации для создания анимации.
Пример: В этом примере мы видим, как мы можем заставить объект следовать за указателем мыши.
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"
>
</
script
>
<
script
>
// Shape of the object is a circle
let ball;
let x = 0;
let y = 0;
// This method is used for creating canvas
function setup() {
createCanvas(windowWidth, windowHeight);
}
// This method will draw the circle
// and track the mouse as well.
function draw() {
background(255);
x += (mouseX - x) * 0.04;
y += (mouseY - y) * 0.04;
fill(0);
ellipse(x, y, 50, 50);
}
</
script
>
</
head
>
<
body
>
<
main
>
<
h1
style
=
"color: Green;"
>GeeksforGeeks</
h1
>
</
main
>
</
body
>
</
html
>
Выход: