Interaction: Mouse

React to mouse position with follower and hover-based visual states.

Example 1: Lerp Follower

Code

let x = 200;
let y = 200;

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

function draw() {
  background(252);
  x = lerp(x, mouseX, 0.08);
  y = lerp(y, mouseY, 0.08);

  fill(30);
  textAlign(CENTER);
  text('Move mouse', 200, 24);

  fill(255, 45, 140);
  circle(x, y, 60);
}

Try this: Change the lerp factor for tighter or floatier follow.

Open sketch in new tab

Example 2: Hover Highlight Grid

Code

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

function draw() {
  background(255);
  const cell = 50;
  for (let y = 0; y < height; y += cell) {
    for (let x = 0; x < width; x += cell) {
      const over = mouseX > x && mouseX < x + cell && mouseY > y && mouseY < y + cell;
      stroke(230);
      fill(over ? color(255, 48, 145) : 248);
      rect(x, y, cell, cell);
      if (over) {
        fill(255);
        noStroke();
        text('•', x + cell / 2, y + cell / 2 + 1);
      }
    }
  }
}

Try this: Try rectangular cells and change the color interpolation.

Open sketch in new tab

Resources