Mouse

`mouseX` and `mouseY` variables

p5.js provides mouseX and mouseY, which store the current horizontal and vertical position of the mouse on the canvas. These values update continuously as the mouse moves. The example below draws a red circle that follows the mouse.

Code Explanation

function setup() {  
  createCanvas(300, 300);  
}  

function draw() {  
  background(220); // Clear the canvas  
  fill(255, 0, 0);  
  circle(mouseX, mouseY, 50); // Circle follows the mouse  
}

ℹ️

mouseX / mouseY: Store the mouse’s x and y position on the canvas.

Mouse Presses

The mousePressed() function runs once when the mouse button is pressed. In the example below, the circle changes color whenever the mouse is clicked.

Code Explanation

let circleColor;  

function setup() {  
  createCanvas(300, 300);  
  circleColor = color(255, 0, 0); // Initial color  
}  

function draw() {  
  background(220);  
  fill(circleColor);  
  circle(mouseX, mouseY, 50);  
}  

function mousePressed() {  
  // Change to a random color when the mouse is pressed  
  circleColor = color(random(255), random(255), random(255));  
}

ℹ️

mousePressed: Detects when any mouse button is pressed.
random(255): Generates a random value between 0 and 255 for colors.

Mouse Clicks

The mouseClicked() function runs only once when the mouse is pressed and released (a full click). The example below toggles the circle’s visibility when clicked.

Code Explanation

let showCircle = true;  

function setup() {  
  createCanvas(300, 300);  
}  

function draw() {  
  background(220);  
  if (showCircle) {  
    fill(255, 0, 0);  
    circle(mouseX, mouseY, 50);  
  }  
}  

function mouseClicked() {  
  // Toggle circle visibility  
  showCircle = !showCircle;  
}

ℹ️

mouseClicked: Runs when the mouse is clicked and released.
showCircle = !showCircle; – Toggles visibility by flipping true/false.

Mouse

mouseX and mouseY variables

Mouse Presses

Mouse Clicks

Further Reading

`mouseX` and `mouseY` variables