使用p5.js创建一个随鼠标指针移动的对象

在本文中，我们将创建一个对象，该对象将跟随鼠标指针移动。当鼠标圆圈移动时，该实体将以一定的平滑速度跟随鼠标箭头，我们可以通过使用p5.js来实现这种效果。。

这是一个用于在web浏览器中创建交互式图形和动画的强大JavaScript库。

方法:

使用createCanvas()函数创建一个用于动画的画布。
在draw()函数中在画布上绘制对象。
根据鼠标位置在draw函数中更新对象的位置。这可以通过计算对象的当前位置和鼠标位置之间的差异，并在每次draw函数迭代中将该差异的一部分加到对象的位置上来实现。
通过调整在draw函数的每次迭代中添加到对象位置的分数来调整对象跟随鼠标的速度。

使用的函数: 这些是示例代码中使用的所有函数和变量的列表。

createCanvas: 创建将进行动画的画布。
background: 设置画布的背景颜色。
fill: 设置要绘制对象的填充颜色。
ellipse: 在画布上绘制一个椭圆。此函数可用于绘制将跟随鼠标指针的对象。
mouseX和mouseY: 内置的P5.js变量，保存鼠标的当前x和y位置。
draw: P5.js中的主要动画循环，动画在其中发生。在此函数中，您可以根据鼠标位置更新对象的位置，重新绘制背景和对象。

通过这种方法，您可以创建一个平滑的动画，其中对象平滑地向鼠标指针移动。P5.js会重复调用draw函数，因此可以在每次迭代中更新对象的位置以创建动画。

示例: 在此示例中，我们可以看到如何实际使对象跟随鼠标指针。

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>

输出：

使用p5.js创建一个随鼠标指针移动的对象