Создайте объект, который следует за указателем мыши, используя p5.js.

выучить язык программирования Программирование и разработка

В этой статье мы собираемся создать объект, который будет следовать за указателем мыши. По мере движения круга мыши этот объект будет следовать за стрелкой мыши с некоторой плавной скоростью, мы можем добиться этого эффекта с помощью 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>

Выход:

Читайте также:  Простое руководство по интерфейсам Typescript: объявление и варианты использования

В этом примере мы видим, как мы можем заставить объект

Оцените статью
bestprogrammer.ru
Добавить комментарий