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.

// Circle follows the mouse position.
function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(220);
  fill(255, 99, 71);          // RGB color (no named strings here)
  circle(mouseX, mouseY, 50); // Draw at current mouse location
}

Mouse functions

p5.js offers several mouse event functions. These run automatically when the user presses, releases, or clicks a mouse button. They allow you to react to input beyond just reading the cursor position.

let showCircle = true; // Toggle state for the circle

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

function draw() {
  background(220);
  if (showCircle) {
    fill(70, 130, 180); // Steel-ish blue via RGB
    circle(mouseX, mouseY, 50);
  }
}

// Toggle visibility after a full click (press + release)
function mouseClicked() {
  showCircle = !showCircle;
}

Related functions

• mousePressed() — runs once when a button goes down.
• mouseReleased() — runs once when it goes up.
• mouseIsPressed — true while any button is held; combine with mouseButton.
• mouseClicked() — runs after a full press-and-release.

Objects

Object literals are a simple way to group related data and behavior in JavaScript. They use key–value pairs to define properties (data) and methods (functions), making each object self-contained and easy to reuse.

In this sketch we combine objects with mouse input: each circle object knows its own position, size, label, and how to toggle when clicked.

For example, here we create several objects with display props (x, y, radius), state props (name, active), and a simple method toggle() to flip their state. Click a circle with the mouse to show or hide its label.

let objects = [
  { x: 80,  y: 120, radius: 25, name: 'Alpha', active: false,
    toggle() { this.active = !this.active } },
  { x: 180, y: 200, radius: 35, name: 'Beta',  active: false,
    toggle() { this.active = !this.active } },
  { x: 240, y: 100, radius: 20, name: 'Gamma', active: false,
    toggle() { this.active = !this.active } }
];

function setup() {
  createCanvas(300, 300);
  textAlign(CENTER, CENTER);
  textSize(12);
}

function draw() {
  background(240);
  for (const obj of objects) {
    displayObject(obj);  // uses display props
    queryObject(obj);    // uses state props
  }
}

// Draw circle from display props only
function displayObject({ x, y, radius }) {
  fill(135, 206, 250);
  circle(x, y, radius * 2);
}

// Show label if active
function queryObject({ name, active, x, y }) {
  if (active) {
    fill(0);
    text(name, x, y - 25);
  }
}

// Toggle active state on mouse click
function mousePressed() {
  for (const obj of objects) {
    const d = dist(mouseX, mouseY, obj.x, obj.y);
    d < obj.radius && obj.toggle(); // short-circuit form
  }
}

Objects and the Mouse

Objects can directly respond to mouse input. In our sketch, each circle checks whether the cursor is inside its radius and toggles its label accordingly. The toggle behavior is encapsulated in a toggle() method defined inside each object, so the logic stays local and self-contained.

function mousePressed() {
  for (const obj of objects) {
    const d = dist(mouseX, mouseY, obj.x, obj.y);
    if (d < obj.radius) obj.toggle();
  }
}

// Example object with toggle method
{ 
  x: 80, y: 120, radius: 25, name: 'Alpha', active: false,
  toggle() { this.active = !this.active; }
}

Data, Roles, and Destructuring

Objects combine both data (position, size, label) and behavior (toggle). Functions then take care of clear roles: one draws the circle, another decides whether to show a label.

To simplify these roles, we use destructuring in parameters. This lets a function select only the needed fields, instead of handling the whole object. Two key benefits:

1. Pick a subset of properties.
2. Order doesn’t matter, since fields are matched by name.

function displayObject({ x, y, radius }) {
  circle(x, y, radius * 2);
}

function queryObject({ name, active, x, y }) {
  if (active) text(name, x, y - 25);
}

Short-circuiting

JavaScript allows concise conditional execution with logical operators.

d < obj.radius && obj.toggle();

is equivalent to:

if (d < obj.radius) obj.toggle();

This “short-circuit” style is common in sketches where brevity is preferred.

Further Reading

📌 p5.js Mouse Functions – Learn about mouseMoved(), mouseDragged(), and mouseReleased(). 📌 Touch Input – For touch screens, explore touchStarted(), touchEnded(), and touchMoved().