p5.js | 鼠标 | 鼠标Y

概述

p5.js是一个开源的JavaScript绘图库，可以轻松地创建交互式图形、动画和图形设计。鼠标是计算机输入设备之一，p5.js可以通过鼠标事件来控制交互。

在p5.js中，我们可以通过鼠标的X，Y坐标来控制图形的位置和行为。本文将重点介绍如何利用鼠标的Y坐标来控制图形。

鼠标事件

p5.js提供了多种鼠标事件，其中比较常用的是mouseX和mouseY。mouseX表示鼠标当前的X坐标，mouseY表示鼠标当前的Y坐标。这两个变量可以在任何地方使用，比如在setup()或draw()函数中。

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

function draw() {
  background(220);
  // 获取鼠标X坐标
  let x = mouseX;
  // 获取鼠标Y坐标
  let y = mouseY;
  // 在鼠标位置绘制一个圆形
  circle(x, y, 50);
}

上面的代码演示了如何利用mouseX和mouseY绘制一个跟随鼠标的圆形。

控制图形

利用鼠标的Y坐标可以控制图形的移动、大小、颜色等。以下是一个例子，通过鼠标的Y坐标设置图形的大小。

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

function draw() {
  background(220);
  // 获取鼠标Y坐标
  let y = mouseY;
  // 计算圆形的半径
  let r = map(y, 0, height, 10, 50);
  // 在画布中央绘制圆形
  circle(width/2, height/2, r);
}

在上述代码中，我们使用了p5.js中的map()函数，将鼠标Y坐标变换到指定的范围内。在这个例子中，将鼠标Y坐标从0到画布高度映射到10到50之间。

总结

在p5.js中，鼠标事件是非常有用的交互手段，我们可以通过鼠标的X，Y坐标控制图形的位置、行为和样式等。在实际开发中，应该根据具体需求选择合适的鼠标事件，并灵活运用p5.js提供的API。