怎么用 p5.js 实现鼠标跟随与键盘交互效果

一、基础准备：了解 p5.js 的运行生命周期

在编写交互逻辑前，需要明确 p5.js 的两个核心函数：setup() 和 draw()。整个程序先运行一次 setup() 完成画布初始化，随后 draw() 会以默认每秒 60 次的频率（60 FPS）循环执行。

所有的动态交互效果本质上都是在 draw() 循环中，根据用户的输入实时改变图形的坐标、尺寸或外观，并在屏幕上连续重绘更新。

function setup() {
  createCanvas(600, 400); // 创建 600x400 的绘图画布
}

function draw() {
  background(247, 249, 251); // 每帧刷新背景，清除上一帧残留
  // 在此处读取输入并绘制下一帧画面
}

如图 1 所示，p5.js 处理交互主要分为两种途径：

• 逐帧轮询（Polling）：在 draw() 内部直接访问 mouseX、mouseY 以及 keyIsDown()。只要光标移动或按键处于按压状态，每一帧都会计算出最新位置与状态。
• 事件回调（Event Callback）：通过 keyPressed()、mouseClicked() 等独立函数响应。浏览器在用户按下按键的瞬间触发一次该函数，适合执行“开关切换”或“单次触发”的任务。

二、实现鼠标跟随：从即时映射到平滑缓动（lerp）

实现鼠标跟随最直接的方法是在 draw() 中将图形的圆心坐标直接设置为 mouseX 和 mouseY。但这种直接赋值的方法会让图形完全死板地咬合在光标尖端，一旦鼠标快速滑动，图形就会出现突兀的跳跃感。

1. 引入 lerp() 线性插值算法

为了让跟随效果拥有柔和的物理质感与弹性延迟，我们可以使用 p5.js 内置的 lerp(start, stop, amt) 函数。lerp 是 Linear Interpolation（线性插值）的缩写，其数学原理是计算起始值与目标值之间的折中值：

当前值 = 当前值 + (目标值 - 当前值) * amt

当系数 amt 设定为 0.1 时，每一帧图形都会向前推进“当前位置与鼠标位置剩余距离”的 10%。随着物体越来越接近鼠标，两者的间距不断缩小，单帧移动量也随之递减，形成自然的阻尼减速效果。

2. 鼠标缓动跟随的代码实现

在代码中，我们定义两个全局变量 currentX 和 currentY 记录物体的当前物理坐标，并在 draw() 内部逐帧插值逼近鼠标坐标：

let currentX = 300;
let currentY = 200;
const easing = 0.08; // 缓动系数，数值越小越柔顺，数值越大跟随越紧密

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

function draw() {
  // 使用微透明度背景可以产生淡雅的动态拖尾残影效果
  background(247, 249, 251, 40);

  // 逐帧线性插值逼近鼠标当前位置
  currentX = lerp(currentX, mouseX, easing);
  currentY = lerp(currentY, mouseY, easing);

  // 绘制跟随光标的外发光光晕与核心圆点
  fill(67, 138, 128, 60);
  circle(currentX, currentY, 45);

  fill(69, 101, 129);
  circle(currentX, currentY, 22);
}

三、实现键盘交互：单次击键与长按连续控制

键盘交互与鼠标不同，键盘通常用于功能切换、离散指令分发或持续的方向推力。在 p5.js 中，主要有两套 API 分别对应“单次动作”与“连续状态”。

1. 离散单次触发：使用 keyPressed() 回调

当你希望用户按一次键盘只触发一次动作（例如切换图形形状、切换配色方案、清空屏幕）时，必须使用 keyPressed() 回调函数。即使读者长按该键不松手，在按下的初段也仅执行一次。

在 keyPressed() 内，可以通过内置变量 key（按键字符，如 ' '、'c'）或 keyCode（键码常量，如 UP_ARROW、ENTER）来识别具体按键：

let shapeType = 'circle'; // 当前图形状态

function keyPressed() {
  if (key === ' ') {
    // 空格键切换图形：圆形 -> 矩形 -> 三角形
    if (shapeType === 'circle') {
      shapeType = 'rect';
    } else if (shapeType === 'rect') {
      shapeType = 'triangle';
    } else {
      shapeType = 'circle';
    }
  } else if (key === 'c' || key === 'C') {
    // 按 C 键清空画布
    background(247, 249, 251);
  }

  // 阻止方向键或空格键引发的浏览器默认滚动行为
  return false;
}

2. 连续状态轮询：使用 keyIsDown()

当需要像操控游戏角色一样“按住上箭头持续放大”、“按住方向键持续位移”时，如果写在 keyPressed() 中会受到操作系统的按键重复延迟（Key Repeat Delay）影响，导致顿挫。正确的做法是在 draw() 内部调用 keyIsDown(keyCode) 检查按键是否处于按压状态：

let followerSize = 30;

function draw() {
  background(247, 249, 251);

  // 检查是否长按上/下方向键实时调节尺寸
  if (keyIsDown(UP_ARROW)) {
    followerSize += 1.5;
  }
  if (keyIsDown(DOWN_ARROW)) {
    followerSize -= 1.5;
  }

  // 使用 constrain() 严格约束尺寸范围，防止出现负数或溢出屏幕
  followerSize = constrain(followerSize, 10, 120);

  // 绘制图形
  fill(69, 101, 129);
  circle(mouseX, mouseY, followerSize);
}

四、综合完整实例：鼠标跟随与键盘互动控制器

现在，我们将上述知识整合为一个完整的、可直接在浏览器运行的 p5.js 程序。在这个案例中：

• 光标主体采用 lerp() 平滑跟随鼠标移动；
• 敲击 空格键（Space） 循环切换三种图形形态（圆球、方块、菱形）；
• 按住 上/下方向键（UP / DOWN） 连续平滑缩放跟随物尺寸；
• 敲击 R 键 重置所有交互参数到初始默认值。

/**
 * p5.js 综合案例：鼠标缓动跟随与多模式键盘控制器
 */
let posX, posY;
let shapeSize = 36;
let currentShape = 0; // 0: 圆形, 1: 矩形, 2: 菱形
const easing = 0.09;

function setup() {
  createCanvas(720, 460);
  rectMode(CENTER);
  noStroke();

  // 初始坐标置于画布正中心
  posX = width / 2;
  posY = height / 2;
}

function draw() {
  // 带有透明度的石板蓝雾白底色，形成柔顺拖尾
  background(247, 249, 251, 45);

  // 1. 鼠标坐标缓动插值
  posX = lerp(posX, mouseX, easing);
  posY = lerp(posY, mouseY, easing);

  // 2. 连续键盘状态响应：按住方向键调节尺寸
  if (keyIsDown(UP_ARROW)) {
    shapeSize += 1.2;
  }
  if (keyIsDown(DOWN_ARROW)) {
    shapeSize -= 1.2;
  }
  shapeSize = constrain(shapeSize, 15, 110);

  // 3. 根据状态绘制外层光晕
  fill(67, 138, 128, 50);
  drawGeometry(posX, posY, shapeSize * 1.5, currentShape);

  // 4. 绘制核心高亮主体
  fill(69, 101, 129);
  drawGeometry(posX, posY, shapeSize, currentShape);

  // 5. 绘制简易状态仪表提示
  drawHUD();
}

// 辅助函数：根据模式绘制不同几何图形
function drawGeometry(x, y, s, mode) {
  if (mode === 0) {
    circle(x, y, s);
  } else if (mode === 1) {
    rect(x, y, s, s, 4);
  } else if (mode === 2) {
    push();
    translate(x, y);
    rotate(QUARTER_PI); // 旋转 45 度构成菱形
    rect(0, 0, s * 0.85, s * 0.85, 4);
    pop();
  }
}

// 辅助函数：左上角操作指引
function drawHUD() {
  fill(90, 109, 124);
  textSize(12);
  textAlign(LEFT, TOP);
  text("[空格] 切换形态 | [↑/↓] 缩放尺寸 | [R] 重置", 16, 16);
}

// 离散按键事件回调
function keyPressed() {
  if (key === ' ') {
    currentShape = (currentShape + 1) % 3; // 0 -> 1 -> 2 -> 0 循环
  } else if (key === 'r' || key === 'R') {
    shapeSize = 36;
    currentShape = 0;
    posX = width / 2;
    posY = height / 2;
  }

  // 阻止空格与方向键造成外部网页滚屏
  if (key === ' ' || keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
    return false;
  }
}

五、开发注意事项与高频避坑清单

初学者在结合鼠标与键盘交互时，容易遇到诸如按键失效、画面发虚、网页联动滚动等问题。以下是关键的检查要点与排错方案：

六、总结

通过本文的讲解与实践，我们可以将 p5.js 的鼠标跟随与键盘交互模式归纳为以下几条核心原则：

1. 区分交互性质：持续运动与坐标映射（如鼠标跟随、长按加速）放入 draw() 轮询；离散状态切换（如形态、配色、开关）放入 keyPressed() 回调。
2. 活用物理插值：用 lerp() 代替硬编码坐标映射，利用简单的数学模型为作品带来丝滑的质感与动效节奏。
3. 边界与事件防御：始终使用 constrain() 保护变量边界，并在全局按键回调末尾拦截浏览器默认滚动，保证交互环境的纯净与稳定。

掌握这套“状态驱动 + 帧插值”的交互架构后，你还可以进一步扩展：例如加入历史鼠标坐标队列实现长粒子链条跟随、接入速度计（dist(mouseX, mouseY, pmouseX, pmouseY)）改变发光半径等，创造出更丰富生动的交互艺术体验。