Create an object that follows the mouse pointer using p5.js

Last Updated : 17 Feb, 2023

In this article, we are going to create an object, that will follow the mouse pointer. As the mouse circle move, that entity will follow the mouse arrow with some smooth speed, we can achieve this effect y using p5.js.

It is a powerful JavaScript library for creating interactive graphics and animations in a web browser.

Approach:

Create a canvas for the animation using the createCanvas() function.
Draw the object on the canvas in the draw() function.
Update the position of the object based on the mouse position in the draw function. This can be done by calculating the difference between the current position of the object and the mouse position and adding a fraction of this difference to the object’s position on each iteration of the draw function.
Adjust the speed at which the object follows the mouse by adjusting the fraction added to the object’s position in each iteration of the draw function.

Used Functions: These are the list of all the functions and variables used in the example code.

createCanvas: Creates the canvas on which the animation will take place.
background: Sets the background color of the canvas.
fill: Sets the fill color of the object to be drawn.
ellipse: Draw an ellipse on the canvas. This function can be used to draw the object that will follow the mouse pointer.
mouseX and mouseY: Built-in P5.js variables that hold the current x and y position of the mouse.
draw: The main animation loop in P5.js where the animation takes place. In this function, you can update the position of the object based on the mouse position, redraw the background, and redraw the object.

This approach allows you to create a smooth animation where the object smoothly moves toward the mouse pointer. The draw function is called repeatedly by P5.js, so the position of the object can be updated on each iteration to create the animation.

Example: In this example, we can see how we can actually make the object follow the mouse pointer.

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>