Mouse & Click Detection

Learn how to detect mouse clicks, track mouse position, and create interactive elements.

Basic Click Detection

The simplest way to detect clicks is using the mousePressed() function:

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

function draw() {
  background(220);
  
  // Draw a button
  fill(100, 150, 250);
  circle(200, 200, 100);
  
  fill(255);
  textAlign(CENTER, CENTER);
  text("Click Me!", 200, 200);
}

function mousePressed() {
  console.log("Mouse clicked!");
}

Breaking it down

• mousePressed() - Automatically called once when the mouse button is pressed
• This function runs outside of draw() - it's a special p5.js function
• Triggers on any click anywhere on the canvas

Detecting Click Position

Use the built-in mouseX and mouseY variables to know where the click happened:

function mousePressed() {
  console.log("Clicked at:", mouseX, mouseY);
  
  // Draw a circle where clicked
  fill(255, 0, 0);
  circle(mouseX, mouseY, 20);
}

Breaking it down

• mouseX - Current horizontal position of the mouse (0 to canvas width)
• mouseY - Current vertical position of the mouse (0 to canvas height)
• Top-left corner is (0, 0)
• Bottom-right is (width, height)

Clicking on Specific Objects

Use the dist() function to check if you clicked inside a circle:

let buttonX = 200;
let buttonY = 200;
let buttonSize = 100;

function draw() {
  background(220);
  
  // Draw button
  fill(100, 150, 250);
  circle(buttonX, buttonY, buttonSize);
}

function mousePressed() {
  // Calculate distance from click to button center
  let d = dist(mouseX, mouseY, buttonX, buttonY);
  
  // If distance is less than radius, we clicked inside
  if (d < buttonSize / 2) {
    console.log("Button clicked!");
  }
}

Breaking it down

• dist(x1, y1, x2, y2) - Returns distance between two points
• buttonSize / 2 - Radius is half the diameter
• If distance from click to center is less than radius, click is inside the circle

Clicking on Rectangles

For rectangular buttons, check if the click is within the bounds:

let buttonX = 150;
let buttonY = 150;
let buttonW = 100;
let buttonH = 50;

function draw() {
  background(220);
  
  // Draw rectangle button
  fill(100, 150, 250);
  rect(buttonX, buttonY, buttonW, buttonH);
}

function mousePressed() {
  // Check if click is inside rectangle
  if (mouseX > buttonX && mouseX < buttonX + buttonW &&
      mouseY > buttonY && mouseY < buttonY + buttonH) {
    console.log("Rectangle button clicked!");
  }
}

Breaking it down

• Check if mouseX is between left and right edges
• Check if mouseY is between top and bottom edges
• Both conditions must be true for click to be inside

Hover Effects

Show when the mouse is over an object using mouseX and mouseY in draw():

let buttonX = 200;
let buttonY = 200;
let buttonSize = 100;

function draw() {
  background(220);
  
  // Check if mouse is hovering
  let d = dist(mouseX, mouseY, buttonX, buttonY);
  let isHovering = d < buttonSize / 2;
  
  // Change color when hovering
  if (isHovering) {
    fill(150, 200, 255);  // Lighter blue
  } else {
    fill(100, 150, 250);  // Normal blue
  }
  
  circle(buttonX, buttonY, buttonSize);
}

function mousePressed() {
  let d = dist(mouseX, mouseY, buttonX, buttonY);
  if (d < buttonSize / 2) {
    console.log("Button clicked!");
  }
}

Breaking it down

• Hover checking happens in draw() (runs every frame)
• Click checking happens in mousePressed() (runs once per click)
• Use the same distance calculation for both
• Change visual appearance when hovering for better UX

Mouse Button Types

Detect which mouse button was pressed:

function mousePressed() {
  if (mouseButton === LEFT) {
    console.log("Left button pressed");
  } else if (mouseButton === RIGHT) {
    console.log("Right button pressed");
  } else if (mouseButton === CENTER) {
    console.log("Middle button pressed");
  }
}

Breaking it down

• mouseButton - Stores which button was pressed
• LEFT, RIGHT, CENTER - Built-in p5.js constants
• Useful for different actions (e.g., left to select, right to delete)

Continuous Pressing

Detect when the mouse is being held down:

function draw() {
  background(220);
  
  // Draw while mouse is pressed
  if (mouseIsPressed) {
    fill(0);
    circle(mouseX, mouseY, 20);
  }
}

Breaking it down

• mouseIsPressed - Boolean variable, true when mouse button is down
• Checked in draw(), so it detects continuous holding
• Different from mousePressed() which triggers once per click

Common Patterns

Creating Multiple Buttons

let buttons = [
  { x: 100, y: 100, size: 50, label: "A" },
  { x: 200, y: 100, size: 50, label: "B" },
  { x: 300, y: 100, size: 50, label: "C" }
];

function draw() {
  background(220);
  
  for (let btn of buttons) {
    fill(100, 150, 250);
    circle(btn.x, btn.y, btn.size);
    
    fill(255);
    textAlign(CENTER, CENTER);
    text(btn.label, btn.x, btn.y);
  }
}

function mousePressed() {
  for (let btn of buttons) {
    let d = dist(mouseX, mouseY, btn.x, btn.y);
    if (d < btn.size / 2) {
      console.log("Button " + btn.label + " clicked!");
    }
  }
}

Dragging Objects

let circleX = 200;
let circleY = 200;
let isDragging = false;

function draw() {
  background(220);
  
  if (isDragging) {
    circleX = mouseX;
    circleY = mouseY;
  }
  
  fill(100, 150, 250);
  circle(circleX, circleY, 50);
}

function mousePressed() {
  let d = dist(mouseX, mouseY, circleX, circleY);
  if (d < 25) {
    isDragging = true;
  }
}

function mouseReleased() {
  isDragging = false;
}

Tips & Tricks

1. Use Variables - Store button positions in variables so you can reuse them
2. Hover Feedback - Always show hover effects so users know what's clickable
3. Console Logging - Use console.log() to debug click detection
4. Hit Areas - Make clickable areas slightly bigger than they appear (easier to click)
5. One Action Per Click - Use mousePressed() for single actions, not draw()

Related p5.js Functions

• mouseClicked() - Triggered when mouse is pressed AND released
• mouseReleased() - Triggered when mouse button is released
• mouseMoved() - Triggered whenever mouse moves
• mouseDragged() - Triggered when mouse moves while button is pressed
• pmouseX, pmouseY - Previous mouse position (from last frame)

Common Gotchas

⚠️ Right-click opens menu - Right-clicking on canvas may open browser context menu
⚠️ Clicks outside canvas - mousePressed() only triggers for clicks on the canvas
⚠️ mousePressed vs mouseIsPressed - One is a function, one is a variable!
⚠️ Case sensitive - It's mouseX not MouseX or mousex

Try It Yourself

Experiment with these ideas:

• Create a simple button that changes color when clicked
• Make a game where you click circles before they disappear
• Build a drawing app that draws where you click
• Create a menu with multiple clickable options

Ready to learn about keyboard input? Check out the Keyboard guide! ⌨️